当前位置: 代码迷 >> Web前端 >> Yahoo Yslow 团队拔高 Web 性能的 14 条法则
  详细解决方案

Yahoo Yslow 团队拔高 Web 性能的 14 条法则

热度:1259   发布时间:2014-03-01 00:36:58.0
Yahoo Yslow 团队提高 Web 性能的 14 条法则
Yahoo Yslow 团队提高 Web 性能的 14 条法则
  01. Make Fewer HTTP Requests
    减少少 HTTP 请求(整合多个分开的 CSS / JavaScript)

  02. Use a Content Delivery Network
    使用 CDN

  03. Add an Expires Header
    加入 Expires Header(过期时间标记头) 到 Image、CSS、JavaScript 档案里

  04. Gzip Components
    页面使用 gzip 压缩 HTML、JavaScript、StyleSheet、XML、JSON,但切记“不要压缩 Images,PDF 档案”

  05. Put CSS at the Top
    样式代码 css 置于页面顶部 head 标签中,使用 <LINK> 标签,不要使用 @import 语法。
    避免样式改变引起的页面元素重绘。
    link 是一个 html 标签,而 @import 是一个 css 标签,

  06. Move Scripts to the Bottom
    脚本语言 script 置于页面底部最下方 </body> 之前,所有在 JavaScript 加载以下的 HTML 在 JS 还没读完前,都不会显示画面。
    把 JavaScript 的代码都放在 onload 执行。

  07. Avoid CSS Expressions
    避免使用 CSS expressions,可能这段 expression 会在每一次 mouse move、resize、scroll、key press 时执行,使用 js 来完成相应的功能。
     expression  是 CSS 中的行为,IE5 及其以后版本支持在 CSS 中使用 expression,用来把 CSS 属性和 Javascript 表达式关联起来,这里的 CSS 属性可以是元素固有的属性,也可以是自定义属性。就是说 CSS 属性后面可以是一段 Javascript 表达式,CSS 属性的值等于 Javascript 表达式计算的结果。
    微软 IE 官方博客报道:IE8 标准模式下将不再支持 CSS 的 expression 功能。

  08. Make JavaScript and CSS External
    JS 跟 CSS 独立出文件比较好,首页除外。
    使用 Post-onload download 技巧(download external files after onload)
window.onload = downloadComponents;
function downloadComponents() {
  var elem = document.createElement("script");
  elem.src = "http://.../file1.js";
  document.body.appendChild(elem);
  ...
}
在 Server-side 判断使用者 Browser 是否有设定 Cookie["hasPostOnloadDownload"],
若没有,就使用 post-onload download 动态下载 CSS & JS;
若有用,就直接用 <script src="xxxx.js"></script>下载,Browser会抓取 Cache 的版本。

  09. Reduce DNS Lookups
    在一个页面中,不要使用过多地不同域名解析,建议不要超过 2 - 4 个,不然会降低页面载入速度。
    开启 Keep-Alive 支援,在 pv 不是很高时可以加快客户访问的速度,因为不需要三次握手,pv > 120 万时就不要使用了,有可能导致服务器一直 TIME WAIT 而无响应。

  10. Minify JavaScript
    减小 Javascript。可以使用工具减少代码量,可以被浏览器更快的下载。
    相关工具:
      jsmin : http://crockford.com/javascript/jsmin
        下载后更名成 jsmin.zip 解压缩出 jsmin.exe 即可执行:jsmin.exe < input.js > output.js(注意:所有 UTF-8 编码的 js 档会变成 ANSI as UTF-8 编码)
      dojo compressor : http://dojotoolkit.org/docs/shrinksafe

  11. Avoid Redirects
    避免重定向:
      网址若省略文件时,最后面一定要加上/结尾
      追查 Log 档查看 Log Referer。

  12. Remove Duplicate Scripts
    移出代码中重复的脚本语言。

  13. Configure ETags(Turn off ETags)
    Etags 是 Web 服务器返回的实体的唯一标识,主要应用在有条件的 Get 请求中,如果 ETags 不匹配,就不能发送 304 码。
    对于服务器之间一个单独的实体的 ETag 总是不同的,对于服务器多余一台机器的 Site,很少返回 304 状态码,所以多台前端服务器时要关闭 ETags 选项。
    ETag format:
      Apache: ETag: inode-size-timestamp
      IIS: ETag: Filetimestamp:ChangeNumber

  14. Make Ajax Cacheable
    XHR、JSON、iframe、动态脚本 都是可以被缓存,精简和压缩的,这些不会经常变动的内容,可以缓存它,将最后修改时间标记在 URL 中。

提高 Web 性能的 14 条法则(详细版)
http://www.cnblogs.com/csharp/archive/2008/08/27/high_performance_web_sites_14_rules.html

CSS 中的行为——expression
http://www.blueidea.com/tech/site/2006/3705.asp

IE8 将不再支持 CSS 中的 expression
http://www.cnblogs.com/JustinYoung/archive/2008/10/17/ending-expressions.html

Dojo 的压缩
http://pigdogyourmother.ycool.com/post.1684294.html

提高基于 Dojo 的 Web 2.0 应用程序的性能
http://www.ibm.com/developerworks/cn/web/wa-lo-dojo-perf/

常见的 HTTP 状态代码及其原因
http://leeqianjun.javaeye.com/blog/266866

使用 ETags 减少 Web 应用带宽和负载
http://www.infoq.com/cn/articles/etags

http://liudaoru.javaeye.com/blog/211975

  相关解决方案