只有10%~20%的最终用户响应时间花在了下载html文档上，其余的80%~90%时间花在了下载页面组件（图片，脚本，样式表，flash等）上。 —-高性能网站建设指南
我看过的几乎所有写web性能优化的文章都会出现这句话，我也要zhuangbility一次。早在08年雅虎出版《高性能网站建设指南》之前，国外的顶级互联网公司们就已经开始不同程度的前端工程化和web性能优化了，自从进入web2.0时代，前端开发（也称那个写页面的，那个切图的）也慢慢转变成了前端工程狮能在动物园（其中有产品狗、设计猫、测试牛、程序猿鼓励虱等）中拥有一定的话语权和决定权了。
这里记录一下我看完高性能网站建设指南和网络一些blog文章之后的一些细节知识点。最后会给出这些文章的连接（感谢大牛们的分享，让我们一些小狮子可以不至于落后太多）
这本书总结的14条优化原则被世人称为雅虎14条，后来还有更详细的雅虎35条。14条原则按方向分类，这里引用fouber大神一篇文章的表格
| 优化方向 | 优化手段 |
|---|---|
| 请求数量 | 合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域 |
| 请求带宽 | 开启GZip，精简JavaScript，移除重复脚本，图像优化 |
| 缓存利用 | 使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存 |
| 页面结构 | 将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出 |
| 代码校验 | 避免CSS表达式，避免重定向 |
1、HTTP是一种客户端/服务器协议，它基于TCP协议，由请求和相应组成。为了减少握手次数，通常使用请求头Connection：keep-alive来实现持久连接。现在大多数浏览器都是使用HTTP 1.1版本，最新的HTTP版本是2.0。
2、减少HTTP请求的方法有：
* CSS Sprites：把多张图片合成一张，而且一般合成之后的照片大小会比原来多张图片的总大小更小
* 合并脚本和样式表；就是把原本多个资源文件合并成一个，这一点涉及到很多工程化的东西，详细建议看上面说提的fouber大神的文章或者自行百度
* 内联图片：通过把比较小（通常8KB以下）的图片用base64来编码，然后通过 data:[<mediatype>][;base64],<data> 写在img的src属性中
3、使用CDN（Content Delivery Networks）除了能加速访问速度，还能提供备份、扩展存储能力、缓存、缓和峰值压力等好处。
4、使用Last-Modified或者Etag请求头能使浏览器发送“条件get请求”去检测是否需要重新加载资源，但是使用Expires和Cache-Control两种请求头能使浏览器在一段时间内强制使用缓存，连“条件get”都不会发送了。Expires需要浏览器和服务器时间强同步，而Cache-Control没有这个要求。
5、使用Vary：Accept-Encoding头能使代理服务器缓存压缩和未压缩两份数据。使用Vary：*或者Cache-Control：private能使代理服务器不缓存数据。使代理服务器不缓存数据能解决一些边缘情况
6、不同浏览器，并行下载的数量是不一样的。HTTP 1.1规范建议从每个主机并行下载数量是两个，所以能通过增加主机提高并行下载数量，但是这需要考虑CPU和带宽。下载脚本时是不能并行下载的，只能一个一个来！因为脚本的执行是可能会有前后/依赖顺序
7、CSS表达式只在旧的IE下会使用，希望广大前端er能早日摆脱IE大拿o(╯□╰)o
8、有一个很经典的前端面试题：讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。了解一下这个过程会对为什么要减少DNS查找有比较完整的概念。答案
9、关于减少重定向这一点。我发现现在几乎所有大型公司的大型网页，都会用到重定向，因为现在是大数据时代，统计一切用户行为能带来无数的好处$_$。
10、配置Etag会在服务器是集群的情况下有问题，解决方法是修改Etag默认的生成方式，改为不和机器或服务器相关联的方式。
11、未来的网页是SPA的天下，这毫无疑问，所以尽管使用Ajax去获取数据，资源，也不能忘了网页优化这些概念。
一些关于web性能的文章链接 Web性能优化：What? Why? How? 前端工程与性能优化 Best Practices for Speeding Up Your Web Site 消除疑问：CSS动画 VS JavaScript —–代码本来运行快才是硬道理
版权声明：原创文章，如需转载，请注明出处“本文首发于xlaoyu.info”