Yahoo! 十三条 : 前端网页优化（13+1）条原则

csxiaoyao

发布于 2019-02-20 16:12:52

1K0

发布于 2019-02-20 16:12:52

文章被收录于专栏：csxiaoyaocsxiaoyao

Yahoo! 十三条 : 前端网页优化（13+1）条原则

1. 减少HTTP请求次数

据统计，有80%的最终用户响应时间是花在前端程序上，而其大部分时间则花在各种页面元素，如图像、样式表、脚本和Flash等的下载上，减少页面元素将会减少HTTP请求次数，这是快速显示页面的关键所在。 CSS Sprites方法可以组合页面中的图片到单个文件中，并使用CSS的background-image和background-position属性来现实所需的部分图片。 Inline images使用data:URL scheme在页面中内嵌图片，这将增大HTML文件的大小，组合inline images到用户的（缓存）样式表既能较少HTTP请求，又能避免加大HTML文件大小。 Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数，样式表也可采用类似方法处理，这个方法虽然简单，但没有得到大规模的使用。当页面之间脚本和样式表变化很大时，该方式将遇到很大的挑战，但如果做到的话，将能加快响应时间。

2. 使用CDN(Content Delivery Network，内容分发网络)

用户离web server的远近对响应时间也有很大影响，从用户角度看，把内容部署到多个地理位置分散的服务器上将有效提高页面装载速度。 CDN是地理上分布的web server的集合，用于更高效地发布内容，通常基于网络远近来选择给具体用户服务的web server。一些大型网站拥有自己的CDN，但是使用如Akamai Technologies、Mirror Image Internet或Limelight Networks等CDN服务提供商的服务将是划算的，在Yahoo!把静态内容分布到CDN减少了用户影响时间20%或更多，切换到CDN的代码修改工作是很容易的，但能达到提高网站的速度。

3. 增加Expires Header

网页内容正变得越来越丰富，这意味着更多的脚本文件、样式表、图像文件和Flash，首次访问者将不得不面临多次HTTP请求，但通过使用Expires header，可以在客户端缓存这些元素，这在后续访问中避免了不必要的HTTP请求，Expires header最常用于图像文件，但是它也应该用于脚本文件、样式表和Flash。浏览器（和代理）使用缓存来减少HTTP请求的次数和大小，使得网页加速装载，Web server通过Expires header告诉客户端一个元素可以缓存的时间长度。如果使用超长的过期时间，则当内容改变时，必须修改文件名称，Yahoo!经常把改名作为release的一个步骤：版本号内嵌在文件名中，如yahoo_2.0.6.js。因此，可以在Apache配置了JS,CSS,image的缓存，如果静态资源需要更新，则采用修改文件版本号的方案确保客户端取得最新版本。

4. 压缩页面元素

通过压缩HTTP响应内容可减少页面响应时间，从HTTP/1.1开始，web客户端在HTTP请求中通过Accept-Encoding头来表明支持的压缩类型，如：Accept-Encoding: gzip,deflate。如果Web server检查到Accept-Encoding头，它会使用客户端支持的方法来压缩HTTP响应，会设置Content-Encoding头，如：Content-Encoding: gzip。 Gzip是目前最流行及有效的压缩方法，其他的方式如deflate，但它效果较差，也不够流行。通过Gzip，内容一般可减少70%；如果是Apache，在1.3版本下需使用mod_gzip模块，而在2.x版本下，则需使用mod_deflate。 Web server根据文件类型来决定是否压缩，大部分网站对HTML文件进行压缩，但对脚本文件和样式表进行压缩也是值得的，实际上，对包括XML和JSON在内的任务文本信息进行压缩都是值得的，图像文件和PDF文件不应该被压缩，因为它们本来就是压缩格式保存的，对它们进行压缩，不但浪费CPU，而且还可能增加文件的大小。

5. 把样式表放在头上

无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的，所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染，这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。把样式表移到HEAD部分可以提高界面加载速度，因此这使得页面元素可以顺序显示。在很多浏览器下，如IE，把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示，浏览器阻止显示以免重画页面元素，那用户只能看到空白页了，Firefox不会阻止显示，但这意味着当样式表下载后，有些页面元素可能需要重画，这导致闪烁问题。 HTML规范明确要求样式表被定义在HEAD中，因此，为避免空白屏幕或闪烁问题，最好的办法是遵循HTML规范，把样式表放在HEAD中。

6. 把脚本文件放在底部

与样式文件一样，需要注意脚本文件的位置，尽量把它们放在页面的底部，这样一方面能顺序显示，另方面可达到最大的并行下载。浏览器会阻塞显示直到样式表下载完毕，因此需要把样式表放在HEAD部分，而对于脚本来说，脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底部意味着更多内容能被快速显示。脚本引起的第二个问题是它阻塞并行下载数量，HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个，因此如果把图像文件分布到多台机器的话，可以达到超过2个的并行下载，但是当脚本文件下载时，浏览器不会启动其他的并行下载，甚至其他主机的下载也不启动。在某些情况下，不是很容易就能把脚本移到底部的，如脚本使用document.write方法来插入页面内容，同时可能还存在域的问题，不过在很多情况下，还是有一些方法的。一个备选方法是使用延迟脚本（deferred script），DEFER属性表明脚本未包含document.write，指示浏览器刻继续显示，不幸的是，Firefox不支持DEFER属性，在IE中，脚本可能被延迟执行，但不一定得到需要的长时间延迟。不过，从另外角度来说，如果脚本能被延迟执行，那它就可以被放在底部了。

7. 避免CSS表达式

CSS表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式，IE从版本5开始支持CSS表达式，如backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每个小时切换一次。 CSS表达式的问题是其执行次数超过大部分人的期望，不仅页面显示和resize时计算表达式，而且当页面滚屏，甚至当鼠标在页面上移动时都会重新计算表达式。一种减少CSS表达式执行次数的方法是一次性表达式，即当第一次执行时就以明确的数值代替表达式，如果必须动态设置的话，可使用事件处理函数代替，如果必须使用CSS表达式的话，请记住它们可能被执行上千次，从而影响页面性能。

8. 把JavaScript和CSS放到外部文件中

使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存，如果内置JavaScript和CSS在页面中虽然会减少HTTP请求次数，但增大了页面的大小。另外一方面，使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加HTTP请求次数。因此，一般来说，外部文件是更可行的方式，唯一的例外是内嵌方式对主页更有效，如Yahoo!和My Yahoo!都使用内嵌方式，一般来说，在一个session中，主页访问此时较少，因此内嵌方式可以取得更快的用户响应时间。

9. 减少DNS查询次数

DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒，为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器，IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。减少主机名可减少DNS查询的次数，但可能造成并行下载数的减少，避免DNS查询可减少响应时间，而减少并行下载数可能增加响应时间，一个可行的折中是把内容分布到至少2个，最多4个不同的主机名上。

10. 最小化JavaScript代码

最小化JavaScript代码指在JS代码中删除不必要的字符，从而降低下载时间，两个流行的工具是#JSMin和YUI Compressor。混淆是最小化于源码的备选方式，象最小化一样，它通过删除注释和空格来减少源码大小，同时它还可以对代码进行混淆处理，作为混淆的一部分，函数名和变量名被替换成短的字符串，这使得代码更紧凑，同时也更难读，使得难于被反向工程，Dojo Compressor (ShrinkSafe)是最常见的混淆工具。最小化是安全的、直白的过程，而混淆则更复杂，而且容易产生问题，从对国外10大网站的调查来看，通过最小化，文件可减少21%，而混淆则可减少25%。

11. 避免重定向

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

HTTP/1.1 301 Moved Permanently
　　Location: http://www.csxiaoyao.com/
　　Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。一种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，如访问http://www.csxiaoyao.com/blog将被重定向到http://www.csxiaoyao.com/blog/，在Apache下，可以通过Alias，mod_rewrite或DirectorySlash等方式来解决该问题。

12. 删除重复的脚本文件

在一个页面中包含重复的JS脚本文件会影响性能，即它会建立不必要的HTTP请求和额外的JS执行。不必要的HTTP请求发生在IE下，而Firefox不会产生多余的HTTP请求，额外的JS执行，不管在IE下，还是在Firefox下，都会发生。一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块，除了防止重复的脚本文件外，该模块还可以实现依赖性检查和增加版本号到脚本文件名中，从而实现超长的过期时间。

13. 配置ETags

Etag（Entity tags）实体标签，这个tag和你在网上经常看到的标签云那种tag有点区别，这个Etag不是给用户用的，而是给浏览器缓存用的。 Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制，通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载，这和“Last-Modified”的概念有点类似，很遗憾作为网页开发人员对此无能为力，他依然是网站服务器人员的工作范畴。 ETags是用于确定浏览器缓存中元素是否与Web server中的元素相匹配的机制，它是比last-modified date更灵活的元素验证机制。