雅虎十四条性能优化原则「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~

文章目录

• • 1 前言
  • 2 减少HTTP请求
  • 3 CDN
  • 4 Expires Header
  • 5 压缩页面元素
  • 6 把样式表放在头部
  • 7 把脚本文件放在底部
  • 8 避免 CSS 表达式
  • 9 把JavaScript和CSS放到外部文件中
  • 10 减少DNS查询次数
  • 11 最小化JavaScript代码
  • 12 避免重定向
  • 13 删除重复的脚本文件
  • 14 配置 ETags
  • 15 缓存 Ajax
  • 16 总结
  • 17 我的优化原则
  • • 17.1 HTML
    • 17.2 css
    • 17.3 js
    • 17.4 图片处理
    • 17.5 网络加速
  • 18 参考文章

1 前言

Web 应用性能优化黄金法则: 先优化前端程序 (front-end) 的性能,因为这是80% 或以上的最终用户响应时间的花费所在

2 减少HTTP请求

80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素, 如图像、 样式表、 脚本和 Flash 等的下载上

1. 减少页面元素：简化页面设计
2. image：使用精灵图，配合 background-image 和 background-position实现部分图片
3. Combined files ：组合多个脚本文件到单一文件，同样的，样式也可以采用类似的方式处理
4. 描述：40-60% 据的日常访问是首次访问,因此为首次访问者加快页面访问速度是用户体验的关键

3 CDN

CDN(Content Delivery Network, 内容分发网络 )

是地理上分布的web server的集合,用于更高效地发布内容。 通常基于网络远近来选择给具体用户服务的 web server

用户离 web server 的远近对响应时间也有很大影响。从用户角度看,把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度

1. 分布静态内容
2. 使用如Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服务提供商的服务将是划算的
3. 上面是原文中提供的CDN服务商，但我记得国内百度、阿里应该都有CDN服务，应该也是可用的，但由于使用CDN需要域名备案，我的域名暂未来得及备案，所以暂未测试

4 Expires Header

通过使用Expires header, 在客户端缓存更多的脚本文件、样式表、图像文件和 Flash

1. Expires header常用于图像文件,但是它也应该用于脚本文件、样式表和 Flash
2. 如果服务器是Apache 的话,您可以使用ExpiresDefault基于当期日期来设置过期日期,如: ExpiresDefault “access plus 10 years设置过期时间为从请求时间开始计算的10 年
3. 注意：如果使用超长的过期时间,则当内容改变时,必须修改文件名称

5 压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间

1. Accept-Encoding: gzip, deflate
   1. 如果 Web server 检查到 Accept-Encoding 头,它会使用客户端支持的方法来压 缩 HTTP 响应,会设置 Content-Encoding 头,如:Content-Encoding: gzip
   2. Gzip 是目前最流行及有效的压缩方法
   3. 如果是Apache,在 1.3 版本下需 使用 mod_gzip 模块,而在 2.x 版本下,则需使用mod_deflate
   4. Web server 根据文件类型来决定是否压缩: 一般HTML、脚本文件、样式表文件等进行压缩
   5. 图像文件和 PDF 文件一般不应该被压缩,因为它 们本来就是压缩格式保存的

6 把样式表放在头部

浏览器会阻塞显示直到样式表下载完毕,因此我们需要把样式表放在 HEAD部分

把样式表移到HEAD部分可以提高界面加载速度

7 把脚本文件放在底部

我们需尽量把它们放在页面的底部,这样一方面能顺序显示,另方面可达到最大的并行下载

1. 脚本阻塞并行下载数量，HTTP/1.1 规范建议浏览器每个主机的并行下载数不超过2 个。 因此如果您把图像文件分布到多台机器的话,就可以达到超过2个的并行下载
2. 但是当脚本文件下载时,浏览器不会启动其他的并行下载,甚至其他主机的下载也不启动
3. 所以直接将脚本放在底部

8 避免 CSS 表达式

CSS 表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式

1. 直接以明确的数值来写，不写表达式
2. 如果必须动态设置的话,可使用事件处理函数代替

9 把JavaScript和CSS放到外部文件中

在现实世界中,使用外部文件会加快页面显示速度,因为外部文件会被浏览器缓存

10 减少DNS查询次数

DNS用于映射主机名和IP地址,一般一次解析需要 20~120 毫秒

把内容分布到至少2 个,最多4个不同的主机名上

11 最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除不必要的字符,从而降低下载时间

1. 两个流行的工具是JSMin 和YUI Compressor
2. 它通过删除注释和空格来减少源码大小,同时它还可以对代码进行混淆处理。 作为混淆的一部分,函数名和变量名被替换成短的字符串,这使得代码更紧凑,同时也更难读,使得难于被反向工程
3. Dojo Compressor (ShrinkSafe)是最常见的混淆工具
4. 内嵌的脚本代码也应该被最小化

12 避免重定向

重定向功能是通过301和302这两个HTTP状态码完成的

在 Apache 下,可以通过Alias,mod_rewrite或 DirectorySlash 等方式来解决该问题

13 删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能,即它会建立不必要的HTTP请求和额外的JS执行

1. 一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块。。
2. 除了防止 重复的脚本文件外,该模块还可以实现依赖性检查和增加版本号到脚本文件名中,从而实现超长的过期时间

14 配置 ETags

ETags 是用于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是比 last-modified date 更灵活的元素验证机制

如果您未用到 ETags 系统提供的灵活的验证机制,最好删除 ETag。删除 ETag会减少 http response 及后续请求的 HTTP 头的大小

15 缓存 Ajax

性能优化法则同样适用于web 2.0 应用。提高Ajax的性能最重要的方式是使得其response 可缓存

16 总结

说实话，以上的十四条，有些是我没看懂的，例如Expires Header和配置 ETags，先记录在这里，其实依照我对Web前端开发的理解，也总结出一些优化原则，也可能与上面的有些重复，但可能会更好理解一些

17 我的优化原则

17.1 HTML

1. 避免使用table，因为table要等其中内容完全下载之后才显示，显然是比div+css慢的

17.2 css

1. 提取css，分离到单独的页面
2. 当需要设置的样式有很多时，设置className而不是直接操作style
3. 删除多余的选择器
4. 利用工具最小化css文件，删除多余空格、符号等
5. css文件一般放在头部，link中

17.3 js

1. 提取js，分离到单独的页面
2. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
3. 多次使用的DOM节点的结果，要变量本地化，减少IO读取操作
4. 尽量少用全局变量
5. 删除多余的脚本
6. 删除多余的变量、函数等
7. 利用工具最小化js文件，删除多余空格、符号等
8. 一般脚本放在页面底部

17.4 图片处理

1. 可以使用icon字体图标代替的图片尽量使用icon字体图标
2. 尽量用css3代替， 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等
3. 优化图片格式为常用格式
4. 精灵图
5. 用CSS或JavaScript实现预加载
6. 在保证最不失真的情况下尽可能压缩图像文件的大小

17.5 网络加速

1. CDN托管

18 参考文章

• 14条Yahoo（雅虎）十四条优化原则