高性能网页开发新20条规约详解(转)
日期：2014-05-17 浏览次数：20660 次
高性能网页开发新20条规则详解(转)
高性能网页开发新20条规则详解
上个月，Yahoo!优异性能（Yahoo!'s Exceptional Performance）开发团队成员 Stoyan Stefanov 出席了蒙特利尔的2008魁北克PHP会议演讲。他提供了他们团队最新的研究成果和提高网页性能规则20条。在早先的高性能网页开发14条军规已经让大家耳熟能详，此次新增的20条更加全面，覆盖了服务器端、cookies、页面内容、Javascrīpt、CSS、图片、移动手机应用这七大类别。以下内容就是根据这二十条结合个人在实际开发中的理解所做的全面解读。希望对大家开发有所助益。
阅读指导：
1. 每条规则后会指明是针对上述所说的七大类别中哪个类别的优化。
2. 文中提到的一些工具在文后附注中会提供简要说明。
3. 文中经常提到“组件”这个词，这个词不同于我们程序开发中常提到的组件概念。本文中提到的“组件”特指嵌在HTML页面中图片、Javascrīpt脚本、CSS等静态文件。
一、尽早清除缓冲区［服务器端］
假如用户请求一个页面，而这个页面在后端服务器需要花200至500毫秒乃至更长时间才能生成最终HTML页面，这时候用户浏览器处于较长时间的、等待页面数据返回的空闲状态，用户体验不会很好。此时可以根据页面内容长短做适当分隔，将先生成的页面局部HTML缓冲内容提前发送到客户端，不必让服务器消耗内存缓冲完整个庞大的页面内容后再行输出。这种方法有益于处理后端负荷大而前端负荷轻的页面。
在HTML页面的head标签位置后是清除缓冲的好位置，因为HTML的head标签可以包括 CSS 和 Javascrīpt 文件，对于浏览器而言获取页面显示与后端服务器处理并行的效果较好。在PHP中有一个函数 flush()，它可以发送请求页面的局部HTML代码给浏览器，以便浏览器能先取得页面已经生成的部分HTML，同时后端服务器继续忙于处理生成页面余下的HTML。以下以此函数做个示例：
... <!-- css, js -->
</head>
<!-- 注意此处flush()是放在了head标签位置后面 -->
<?php flush(); ?>
<body>
... <!-- content -->
其他语言也有类似语法，如ASP.NET和ASP中的 Response.Flush()。
注意：在实际Web开发中，尽量减少HTTP请求次数是优化的重要方面，这条基本原则是早先14条和新增20条中很多规则的制订基础，实际上它也是14条规则中第一条也是非常重要的一条规则，但是使用尽早清除缓冲语句会增加一个页面的HTTP请求次数，这无疑是一个矛盾，因此请注意本条规则的适用范围，不要滥用它。
二、使用GET方法的AJAX请求［服务器端］
这个容易理解一些。AJAX经常要用XMLHttpRequest，但是它的POST方法在浏览器中完成需要执行两步：首先发送信息头，然后才是发送数据；而GET方法只用一个TCP数据包传递（cookies信息例外）即可，减少了一个步骤，速度会快些。
另外根据HTTP规范，GET方法就是为获取信息而生的。因此仅在请求数据而不是发送数据给服务器端存储时，使用GET方法很有意义。
要注意的是，IE中URL允许最大允许长度是2K，用GET方法发送数据时注意2K的这个限制。
三、后加载组件［页面内容］
使用该方法的意义在于：如果某个页面内容丰富多彩的话，在浏览器加载显示它时速度就不会很快。使用后加载组件的方法可以通过延迟加载一些隐藏内容来保证浏览器优先显示初始页面。
要做到这一点必须仔细观察自己的页面并且问自己：“解释生成一个完整页面，什么部分内容是开始加载时绝对必须显示的？”清楚了这个问题，那么那些余下内容和组件就可以采用后加载方法延迟生成。这样会大大加快页面显示速度。
这个技巧通常是Javascrīpt通过处理页面加载时的onload事件完成。例如，使用Javascrīpt代码和库去执行拖放动态效果操作时，这些操作可以延迟，因为拖动页面上元素的操作只能等初始页面生成完后才能发生。页面中的隐藏内容也适合用后加载方式，因为只有页面加载完毕用户才能操作决定是否显示该内容。
Yahoo!网站的首页内容繁多，观察处于隐藏状态下的内容，这些内容通常在一些选项卡一样的标签页当中，只有点击后才会加载。
只要明白该规则的优化要点后相信大家可以通过Javascrīpt做出自己的具体实现。Yahoo!提供了两个用于实现后加载方法的工具：
◆ YUI Image Loader：可以延迟图片显示
◆ YUI Get utility：它可以在页面加载完成后把Javascrīpt和CSS资源绑定到DOM上去。
以上的工具是Yahoo!的YUI库提供。
四、预加载组件［页面内容］
从文字上看预加载组件与后加载组件似乎作用相反，但实际上二者目标是完全不同的。通过预先加载组件可以充分利用浏览器的空闲时间，并且可以请求未来页面需要的组件。在这种情况下，当用户访问下一个页面时，你已经提前让大多数组件保存在缓存中，用户加载这个页面就会非常快。
预加载类型有下列三种：
1. 无条件预加载
onload事件一触发，就要马上取回一些指定的组件。可以检查google.com首页中onload事件中请求Sprite图片的例子（注：什么是Sprite图片，请参看第十六条规则）。在这个例子可以看出这个sprite图片www.google.com/images/nav_logo3.png在google.com首页本身并不需要, 但它会在随后用户搜索生成的结果页面中需要。
2. 条件预加载
根据用户操作预测用户下一步操作的方向，并据此做预加载。例如，search.yahoo.com中，在输入框中刚键入几个字符后，就会看到页面对你键入的词做出合理推测，推出几个可能要搜索的实际关键词。此方法目前谷歌（google.cn）也在使用。
3. 提前预加载
在将重新设计的网站页面发布前用此法较好。页面重新设计后常会有这样的反馈：“新站点太酷了，就是比以前慢”。原因在于用户访问旧站点是全缓存的，但新站点还没有缓存过。这时可以在发布新设计前就预加载一些新站点组件，这可以减少没有缓存的副作用。可以利用用户访问旧站点时浏览器空闲的时间请求新站点要使用的图片、脚本等。
五、减少 DOM 元素数量［页面内容］
一个复杂的页面意味着要请求下载的字节数更多，也意味着用Javascrīpt访问DOM速度更慢。
如何尽量减少已有页面的 DOM 元素数量呢？一个重要的思路就是不要滥用表格table和div 。很多人习惯用一些网页编辑软件去设计页面，这样会导致大量嵌套的表格或在使用语义不合法的标记。使用div要仅当它在语义上有意义时才使用它，有些开发者使用它仅仅是因为它可以被浏览器解释生成一个新行。
Yahoo! 提供了一个避免这些问题的方法——使用YUI CSS工具。grids.css 有助于整体布局设计，fonts.css 和 reset.css 有且于清除浏览器的默认格式设置。这些工具可以在Yahoo!的YUI页面中去找。
&nbs
高性能网页开发新20条规则详解
上个月，Yahoo!优异性能（Yahoo!'s Exceptional Performance）开发团队成员 Stoyan Stefanov 出席了蒙特利尔的2008魁北克PHP会议演讲。他提供了他们团队最新的研究成果和提高网页性能规则20条。在早先的高性能网页开发14条军规已经让大家耳熟能详，此次新增的20条更加全面，覆盖了服务器端、cookies、页面内容、Javascrīpt、CSS、图片、移动手机应用这七大类别。以下内容就是根据这二十条结合个人在实际开发中的理解所做的全面解读。希望对大家开发有所助益。
阅读指导：
1. 每条规则后会指明是针对上述所说的七大类别中哪个类别的优化。
2. 文中提到的一些工具在文后附注中会提供简要说明。
3. 文中经常提到“组件”这个词，这个词不同于我们程序开发中常提到的组件概念。本文中提到的“组件”特指嵌在HTML页面中图片、Javascrīpt脚本、CSS等静态文件。
一、尽早清除缓冲区［服务器端］
假如用户请求一个页面，而这个页面在后端服务器需要花200至500毫秒乃至更长时间才能生成最终HTML页面，这时候用户浏览器处于较长时间的、等待页面数据返回的空闲状态，用户体验不会很好。此时可以根据页面内容长短做适当分隔，将先生成的页面局部HTML缓冲内容提前发送到客户端，不必让服务器消耗内存缓冲完整个庞大的页面内容后再行输出。这种方法有益于处理后端负荷大而前端负荷轻的页面。
在HTML页面的head标签位置后是清除缓冲的好位置，因为HTML的head标签可以包括 CSS 和 Javascrīpt 文件，对于浏览器而言获取页面显示与后端服务器处理并行的效果较好。在PHP中有一个函数 flush()，它可以发送请求页面的局部HTML代码给浏览器，以便浏览器能先取得页面已经生成的部分HTML，同时后端服务器继续忙于处理生成页面余下的HTML。以下以此函数做个示例：
... <!-- css, js -->
</head>
<!-- 注意此处flush()是放在了head标签位置后面 -->
<?php flush(); ?>
<body>
... <!-- content -->
其他语言也有类似语法，如ASP.NET和ASP中的 Response.Flush()。
注意：在实际Web开发中，尽量减少HTTP请求次数是优化的重要方面，这条基本原则是早先14条和新增20条中很多规则的制订基础，实际上它也是14条规则中第一条也是非常重要的一条规则，但是使用尽早清除缓冲语句会增加一个页面的HTTP请求次数，这无疑是一个矛盾，因此请注意本条规则的适用范围，不要滥用它。
二、使用GET方法的AJAX请求［服务器端］
这个容易理解一些。AJAX经常要用XMLHttpRequest，但是它的POST方法在浏览器中完成需要执行两步：首先发送信息头，然后才是发送数据；而GET方法只用一个TCP数据包传递（cookies信息例外）即可，减少了一个步骤，速度会快些。
另外根据HTTP规范，GET方法就是为获取信息而生的。因此仅在请求数据而不是发送数据给服务器端存储时，使用GET方法很有意义。
要注意的是，IE中URL允许最大允许长度是2K，用GET方法发送数据时注意2K的这个限制。
三、后加载组件［页面内容］
使用该方法的意义在于：如果某个页面内容丰富多彩的话，在浏览器加载显示它时速度就不会很快。使用后加载组件的方法可以通过延迟加载一些隐藏内容来保证浏览器优先显示初始页面。
要做到这一点必须仔细观察自己的页面并且问自己：“解释生成一个完整页面，什么部分内容是开始加载时绝对必须显示的？”清楚了这个问题，那么那些余下内容和组件就可以采用后加载方法延迟生成。这样会大大加快页面显示速度。
这个技巧通常是Javascrīpt通过处理页面加载时的onload事件完成。例如，使用Javascrīpt代码和库去执行拖放动态效果操作时，这些操作可以延迟，因为拖动页面上元素的操作只能等初始页面生成完后才能发生。页面中的隐藏内容也适合用后加载方式，因为只有页面加载完毕用户才能操作决定是否显示该内容。
Yahoo!网站的首页内容繁多，观察处于隐藏状态下的内容，这些内容通常在一些选项卡一样的标签页当中，只有点击后才会加载。
只要明白该规则的优化要点后相信大家可以通过Javascrīpt做出自己的具体实现。Yahoo!提供了两个用于实现后加载方法的工具：
◆ YUI Image Loader：可以延迟图片显示
◆ YUI Get utility：它可以在页面加载完成后把Javascrīpt和CSS资源绑定到DOM上去。
以上的工具是Yahoo!的YUI库提供。
四、预加载组件［页面内容］
从文字上看预加载组件与后加载组件似乎作用相反，但实际上二者目标是完全不同的。通过预先加载组件可以充分利用浏览器的空闲时间，并且可以请求未来页面需要的组件。在这种情况下，当用户访问下一个页面时，你已经提前让大多数组件保存在缓存中，用户加载这个页面就会非常快。
预加载类型有下列三种：
1. 无条件预加载
onload事件一触发，就要马上取回一些指定的组件。可以检查google.com首页中onload事件中请求Sprite图片的例子（注：什么是Sprite图片，请参看第十六条规则）。在这个例子可以看出这个sprite图片www.google.com/images/nav_logo3.png在google.com首页本身并不需要, 但它会在随后用户搜索生成的结果页面中需要。
2. 条件预加载
根据用户操作预测用户下一步操作的方向，并据此做预加载。例如，search.yahoo.com中，在输入框中刚键入几个字符后，就会看到页面对你键入的词做出合理推测，推出几个可能要搜索的实际关键词。此方法目前谷歌（google.cn）也在使用。
3. 提前预加载
在将重新设计的网站页面发布前用此法较好。页面重新设计后常会有这样的反馈：“新站点太酷了，就是比以前慢”。原因在于用户访问旧站点是全缓存的，但新站点还没有缓存过。这时可以在发布新设计前就预加载一些新站点组件，这可以减少没有缓存的副作用。可以利用用户访问旧站点时浏览器空闲的时间请求新站点要使用的图片、脚本等。
五、减少 DOM 元素数量［页面内容］
一个复杂的页面意味着要请求下载的字节数更多，也意味着用Javascrīpt访问DOM速度更慢。
如何尽量减少已有页面的 DOM 元素数量呢？一个重要的思路就是不要滥用表格table和div 。很多人习惯用一些网页编辑软件去设计页面，这样会导致大量嵌套的表格或在使用语义不合法的标记。使用div要仅当它在语义上有意义时才使用它，有些开发者使用它仅仅是因为它可以被浏览器解释生成一个新行。
Yahoo! 提供了一个避免这些问题的方法——使用YUI CSS工具。grids.css 有助于整体布局设计，fonts.css 和 reset.css 有且于清除浏览器的默认格式设置。这些工具可以在Yahoo!的YUI页面中去找。
&nbs
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
