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

全栈程序员站长

发布于 2022-09-14 21:28:56

1.6K0

文章被收录于专栏：全栈程序员必看全栈程序员必看

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

1 前言

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

2 减少HTTP请求

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

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

3 CDN

CDN(Content Delivery Network, 内容分发网络 ) 是地理上分布的web server的集合,用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的 web server 用户离 web server 的远近对响应时间也有很大影响。从用户角度看,把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度

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

4 Expires Header

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

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

5 压缩页面元素

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

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 把脚本文件放在底部

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

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

8 避免 CSS 表达式

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

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

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

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

10 减少DNS查询次数

DNS用于映射主机名和IP地址,一般一次解析需要 20~120 毫秒把内容分布到至少2 个,最多4个不同的主机名上

11 最小化JavaScript代码

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

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

12 避免重定向

重定向功能是通过301和302这两个HTTP状态码完成的在 Apache 下,可以通过Alias,mod_rewrite或 DirectorySlash 等方式来解决该问题

13 删除重复的脚本文件

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

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

14 配置 ETags

ETags 是用于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是比 last-modified date 更灵活的元素验证机制如果您未用到 ETags 系统提供的灵活的验证机制,最好删除 ETag。删除 ETag会减少 http response 及后续请求的 HTTP 头的大小