首页 > 代码库 > 前台页面优化全攻略(三)
前台页面优化全攻略(三)
你可以对网站进行快速的优化，但网站日常的节食却很难。也许你已经花了很大的力气去优化你的CSS和JavaScript代码，但是你所做的努力马上又会因为老板或客户期望的新功能而付之东流。所以看来不论是人还是网页，减肥都贵在坚持。
这篇终极减肥方案可能不适合所有的网站，但是我相信它可以引起你对网页大小的重视。
1. 永远都不要相信第三方平台的代码
你会随随便便的让一个不认识的开发者改动你的网站代码吗？我想应该没有人会这么二，但是为什么你就如此的相信第三方平台的代码呢？在网站中添加一个实用的组件实在太容易了，但是它们很少会关心你的网站的安全性。你必须经常检查这些插件的源码并用firebug跟踪一下，这显然是个悲伤的故事。
2. 一个JavaScript库就够了
也许你的网站正在使用jQuery，这样很好，你应该坚持用它，不要为了让你的网站更酷而添加各种各样的库。
你还需要考虑以下几个问题：
1.如果没有使用一些库，你的网站能正常的构建吗？
2.有没有更加轻量级的库可以取代？比如Zepto.js 和Minified.js 都可以取代jQuery核心库的部分API。
3.是因为浏览器版本的差异你才不得不加上一个库来支持的么？你有没有因为熟悉和用着舒服来决定选择哪个库？
3. 谨慎使用CMS模板
很少有建站模板会直接提供一个轻量级的页面，但他们的确是不错的开始。
不论是一个免费的还是付费的模板他们都有很高的商业价值，为什么一些大公司不直接花一些钱买个不错的模板，而要花高价养活几个程序员呢？虽然模板可以提供网站的大部分功能，但是它有一些隐形的花费，一个模板为了满足不同网站的不同需求，就必须实现成百上千的方法。你可能只会用到其中的几个，但是其它功能还是会存在于代码之中。
大概是我比较不幸，我使用的WordPress主题居然达到了2M。虽然大家都知道肯定会有轻量级的主题，但是找到它也是个麻烦事儿～
4. 为框架消脂
像Bootstrap和Foundation这些模板类型的框架是非常实用的原型设计和项目切入点。但是通用的模板很多CSS和JavaScript代码你都不会用到，就连HTML代码中也会有很多没用的东西。
就我个人来说，我喜欢模块化的开发方式，我需要什么，我就添加什么。项目是从零开始，由我来决定要什么和不要什么。框架就像是雕刻大理石，你会凿掉没有用的那一部分，这样通常比较难。而模块化就像堆积木，你可以充分发挥你的各种能力。
我不会说我永远都不使用框架，但是我们必须要考虑框架给我们带来的负面影响。有一个工具grunt-uncss 它可以帮我们除去框架中不需要的代码。
5. 享受渐进增强（Progressive Enhancement）
随着互联网的发展，浏览器的发展也突飞猛进，在原来的多浏览器厂商并分天下的局面下，现在还出现了多平台的划分。开发人员面对原来五大浏览器IE、 火狐、Opera、Safari、Chrome的局面已经有些不知所措，何况现在我们还需要处理iphone、ipad、android的mobile浏 览器、其他智能手机中带有的非现代浏览器（对浏览器标准支持不完整的）。在这种情况下，如果你想要让你的网站变得广为人知，那么必须从新思考兼容性的问 题。
渐进增强PE可以帮助大家较好的解决这个问题。PE是以内容为核心的开发方式，在内容的基础上，开发人员使用css加工样式，利用javascript添加行为来提升用户的使用体验，由于是以内容为核心，所以使用PE的同时，亦解决的兼容性问题。
那么，PE中提到的内容核心是什么？对于用户、BA、UX来说，内容可以是网站给访问的用户带来的内容和功能，具体可以单纯到只是网站中的文 字，也 包括网站带给用户的交互功能，比如说发送邮件，填写表单，甚至还可能为给用户带来的视觉效果、颜色搭配、排版、阅读体验等等。但是，对于我们开发者来 说，PE核心内容就是我们的HTML代码，简洁易懂的标记们。HTML是我们制作页面功能的基础，也是几乎所有浏览器呈现页面功能的基础，开发人员通过添 加css样式和js代码使内容在更强的浏览器上工作得更好，提升用户体验。
在这边举一个例子，80后可能都会有印象，家里的电视机是又90年代初的黑白电视机换到00年初的CRT彩色电视机，接着随着科技发展，到现在 LED高清电视机，甚至都出现了3D电视机。对于用户来说，电视机给他们带来的是电视节目，看中央一台也看了这么多年了，但是先进的电视机给用户带来了新 的观赏体验，不仅带来了色彩，还带来了高清的画质，丰富的观影体验。反过来看，同样内容的电视节目同样可以在旧的电视机上播出，内容一样能被用户获取到， 这一切都是向后兼容的，PE给我们带来的好处就在于此。浏览器的发展，从Netscape到现在的Chrome也是类似的一个发展过程。那么，我们的网站 给用户带来的是尽可能一样的体验，而并非是完全一样的。你也不能奢望一个kindle的silk浏览器能像chrome表现得那么出色。
由此看来，我们需要从新审视解决浏览器兼容性这个问题，我们的开发需要从一直一来的以兼容性为目标的开发转化为以可用性为目标的开发，可用性指的是网站带给用户的功能从一开始就是跨浏览器的。
6. 选择一个自动化的构建工具
你应该确保你已经完成了所有的关于简化图片，CSS和JavaScript的工作。这些工作都可以被人工地完成，但是如果你觉得麻烦，也可以尝试一下像 Grunt.js 和 Gulp.js 这样自动化的工具。
7. 了解你的代码
CSS和JavaScript 预处理器技术已经非常的成熟，而且也涌现出了越来越多的预处理器框架。常用的像 Sass、Less CSS、Stylus等等。
什么是 CSS 预处理器？CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
但是如果你使用预处理器技术你就很可能不了解你的代码是如何执行，不论你使用什么样的技术，最好是了解你的代码执行流程。
8. 使用offline AppCache
对于web app来说，离线应用功能已经越来越重要。诚然，浏览器本身就有缓存机制，但是，这些缓存机制不够可靠，可能并不会按你所想要的方式运行。HTML5则通过ApplicationCache接口处理了离线应用中的一些问题。
使用这个接口让你的应用拥有三方面的优势：
- 离线浏览——用户在不能联网的时候依然能浏览整个站点
- 高速——缓存资源是存储在本地的，因此能更快加载。
- 更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可，相同资源不需要重复下载。
Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时，即使他们按了刷新按钮，你的应用也能正确加载和工作。
9. 简化你的网站
在过去的几年中，Web网站和应用程序的复杂度有了明显的一个改进——以客户为中心。但不是网站都做到了这一点，因为种种原因网站变得臃肿：
1. 错误地认为更多的功能可以吸引更多的客户。
2. 错误地觉得开发更多的东西可以赚到更多的钱。
3. 不知道怎么样才能更好。
幸运的是，通过用户测试可以帮助你了解到哪些不常用的功能可以用用其它时尚的、轻量级的功能替换。
幸运的是，一个小的用户测试可以帮助你识别不常用的选项可撕下的产品或更换，以时尚的，轻量级的替代品。
10. 改变你的编程态度
有没有人因为网站达到了1.7M而感到羞愧？不管是什么时候什么原因网站变的臃肿，程序员都应该为这件事情负全责。
当然开发速度和成本也是非常重要的，但是互联网发展到现在已经造就了用户不愿意等待的习惯，一个加载缓慢的网站不管创意有多好用户也不会等。你的老板和客户不会关心你使用的是什么技术。如果你不突出地解决可能出现的问题，你就不会成为一个优秀的程序员。
轻量级的页面就是证明自己最直接的方式，你应该 有了个正确的编程态度，时刻注意以下的问题：
1. 人们很容易忘记的带宽问题，当你使用在一个50Mbps宽带的电脑，你很可能会忽略在差的3G接收地区和一些繁忙的酒店网站的加载情况。
2. 在每一个项目中都要考虑页面权重问题的。这个字体是必要的吗？你能降低背景图像的尺寸吗？有可用的CSS3动画来替换JavaScript库吗？
3. 网页肥胖是一种流行病，如果你做的很好，你会变的很突出。
前台页面优化全攻略(三)