高性能网页开发新20条规则详解

 Yahoo!推出的20条高性能网页开发规则涵盖了服务器端、cookie、页面内容、JavaS

cript、CSS、图片、移动手机应用七大类别。

一、 尽早清除缓存区【服务器端】
     假 如用户请求一个页面,而这个页面在后端服务器需要花200-500毫秒乃至更长时间才能生成最终HTML页面,这时候用户浏览器处于较长时间的、等待 页 面数据返回的空闲状态,用户体验不会很好。此时可以更具页面内容长短作适当分割,将先生成的页面局部HTML缓冲内容提前发送到客户端,不必让服务器 消耗 内存缓冲完整页面后再行输出。这种方法有益于处理后端负荷较大而前端负荷轻的页面。在HTML页面的head标签位之后是清除缓冲的好位置,因为 HTML 的head标签可以包括CSS和JavaScript文件,对于浏览器而言获取页面显示与后端服务器处理并行的效果较好。在PHP中有个flush()的 函数,它可以发送请求页面的局部代码给浏览器,浏览器可以先生成部分HTML页面,同时后端服务器正忙于处理生成页面余下的HTML。
     示例:
    ...<!-- css,js -->
    </head>
    <?php  flush();?>
    <body>
    ...<!-- content -->
 
     
     主意:在实际的WEB开发中,应尽量减少http请求次数是优化的重要方面,使用尽早清除缓冲区语句会增加一个页面的HTTP请求次数,这无疑是一个矛 盾,因此尽早清除缓冲区的规则,不能滥用。

二、使用GET方式的AJAX请求【服务器端】
     这 个比较容易理解,AJAX经常要用XMLHttpRequest,但是它的POST方法在浏览器中完成需要执行以下两步:首先发送信息头,然后才是发 送 数据;而GET方法只用一个TCP数据包传递即可,减少了一个步骤,速度会快些。另外根据HTTP规范,GET方法就是为获取信息而生的。因此仅在请 求数 据而不是发送数据给服务器端存储时,使用GET方法很有意义。需要注意的是,IE中URL准许最大准许长度是2K,注意不要超过这个限制。

三、 后加载组件【页面内容】
     如果某个页面内容丰富多彩的话,在浏览器加载显示他时速度就不会很快,使用后加载组件的方法可以通过延迟加载一些隐藏内容来保证浏览器优先显示初始页面。 这个技巧通常是JavaScript通过处理页面加载时的OnLoad时间完成。例如,使用JavaScript代码和库去执行拖放动态效果操作时,这些 操作可以延迟,因为拖动页面上元素的操作只能等初始页面生成完成后才能发生,页面中的隐藏内容也适合用后加载方式,因为只有页面加载完毕用户才能操作决定 是否显示该内容。
    yahoo!提供了两个用于实现后加载方法的工具:YUI Image Loader:可以延迟图片显示。YUI  Get utility:它可以在页面加载完成后将js和CSS资源绑定到指定的DOM上。

四、预加载组件【页面内容】
     从文字上看,预加载和后加载似乎相反,但实际二者的作用是完全不同,预加载组件是利用浏览器空闲的时间,可以请求未来页面的组件,用户访问下一个页面时, 已经提前将组件保存在缓存中。
    预加载有下列三种:
    1.无条件预加载
         onload事件一触发,就要马上取回一些指定的组件。例如google.com首页的onload实践中请求Sprite图片的例子,在 google.com首页本身并不需要,但它会在随后用户搜索生成的结果页面中需要。
    2.条件预加载
         根据用户操作预计用户下一步操作的方向,并据此做预下载。例如拼音提示。
    3.提前预下载
         发布新页面时,由于用户访问旧站点都是缓存的,新站点还没有缓存,这时可以在发布前预先加载一些新站点的组件。这样可以降低发布新页面前,用户感受网页较 慢的感受。
五、减少DOM元素数量【页面内容】
     一个复杂的页面意味着要请求下载的字节数更多,也意味这用JavaScript 访问DOM速度更慢。如何减少已有页面的DOM数量呢?一个重要的思路就是 不要滥用表格和DIV,很多人习惯用一些网页编辑软件去设计页面,这样会导致 大量的嵌套表格或衍生的无用标记。Yahoo!提供了一个YUI  CSS工具,grids.css有助于整体布局设计,fonts.css和 reset.css可以清楚浏览器的默认格式设置。DOM元素的数量可在 Firebug的Console上键入document.getElementsByTagName('*').length得到。

六、 分隔组件到多个域中【页面内容】
     对 终端用户响应时间影响最大的就是所请求页面所包含组建数量。只要缓存为空,下载每个组件都会占用额外的HTTP请求,只有缓存满时才可能不占 用。 HTTP/1.1规范中建议浏览器对每一个主机名准许并发下载两个组件。默认状态下,Internet  Explorer和FireFox都符合 这个规范。注意:IE8.0默认准许6个并发请求。许多网页中所有组件都从统一主机名中下载,这是不仅响应时间受 并发线程数限制,同时也受该服务器 CPU和带宽限制。把页面组件分布在两个主机名下。分隔组件可以充分利用并行下载。又因为DNS查询存在损耗,所以要保 证使用的域不超过2-4个。

七、尽量减少HTML标签iframe的使用数【页面内容】
     iframe准许在附文档内插入一个HTML文档,要想高效使用iframes,理解其工作方式很重要。
    好处:
         1.有助于减慢显示第三方标记和广告内容
        2.是个安全的sandbox。
        3.能并发下载脚本。
     弊端:
        1.及时iframe内的HTML文档内容为空,消耗也比较高。
         2.会阻止页面的onload事件。
        3.非语义的。

八、避免404页面【页面内容】
     如果做了一个HTTP请求然后得到一个无用的响应页面,会降低用户体验,资源也会有响应浪费,
         首先,因为这个下载有问题会阻止并发下载;
         其次,即使有错浏览器仍然会尽力解析404返回的内容,看看有无JavaScript代码,尽力查找里面可用代码。

九、缩小 cookie【cookie】
    HTTP  cookies 用于各种诸如身份认证、个性化等。cookies信息在WEB服务器和浏览器间的HTTP请求头中交换。cookies体积越大,则 HTTP请求头交换 的信息体积就打,尽可能降低cookies大小可以把cookies对用户响应时间的影响减小到最低程度。统计表明,对于一个3000 字节的 cookie或多个大小累加3000字节的cookie,在DSL带宽速度下,会增加响应时间80毫秒。如果使用拨号网络,这个延迟更严重。
     改进方法:
    1.去除不必要的cookies;
    2.使用短小的cookie名等办法以尽可能减少cookie的大小;
     3.设置cookies合适的域范围,保证cookie只对指定的域生效,不影响子域。
     4.设置cookies设当的过期时间,越早过期,越早删除。

十、将组件存放在无cookie的域【cookie】

      当 浏览器对一个静态图片文件发起请求是,图片地址所在域的cookies信息也会一起发送,这些cookies信息对服务器没有任何用处,而且还增加了 网 络流量。确保这些静态组件别请求时是无cookie的请求可以提高性能,解决办法就是创建子域容纳所有静态组件。
     例如:如果 cookie的域是www.example.com,那么就把所有静态组件放到域static.example.com中,这就可以使请 求 static.example.com域中的图片等资源时,请求不会附送cookies信息。但如果设置cookies的域在顶级 域 example.com中不是在www.example.com,那么所有对static.example.com域的请求信息仍然会包 括 cookies。这种情况下,可以使用一个新的域名来容纳静态组件。

十一、尽力减少对DOM的访问【javascript】
     JavaScript访问DOM元素速度很慢。为有一个快速响应的页面可以采取以下方法:
    1.缓存曾访问过元素的引用。
     2.先“脱机”更新一个节点,然后再把这个节点添加到DOM树上,避免直接在DOM树上的更新。
     3.避免用JavaScript来修改版面布局。这涉及到大规模的DOM树移动,速度会很慢。

十二、开发智能的事件处理程序 【JavaScript】
     有 时因为有太多的事件处理程序绑定在DOM书的不同元素上,他们频繁被执行调用,这是页面响应速度很慢,这就是为什么使用时间委托是个好方法的原因,如 果 在标签div内容纳10个按钮,只需要把一个事件处理程序绑定到该div容器即可,而不是每个按钮一个处理程序。通过事件冒泡就能捕获到这个事件,并 且能 指出事件源自那个按钮。
     不必为了着手处理某个dom树一直等着onload事件。通常只需等待DOM树中需要处理的元素完成下载即可,不必等整个DOM树下载完。用 DOMContentLoaded取代onload可以做到这一点,已提前处理DOM树。现在很多JavaScript框架 (jquery,YUI,prototype,Ext)等都支持DOMContentLoaded。

十三、使用 标签导入样式文件,不要使用@import【CSS】
     CSS样式应置于页面顶部,这便于页面在浏览器中解释生成页面布局。在IE中@import的作用与在页面底部使用的效果相同, 这样的位置不利于浏览器快速解释生成页面,用户体验较差,最好不使用。

十四、避免使用CSS滤镜【CSS】
     IE 专用属性AlphalmageLoader滤镜的目标就是修复IE6版本以下(含IE6)中半透明真彩色PNG图片的问题。拥有这种滤镜的问题是它会 阻 碍页面解释生成,在图片下载时会冻结浏览器,形如假死。也增加了内存消耗。最好的方法是完全不使用AlphalmageLoader,使用PNG8 代 替,它在IE中工作良好,如果一定要使用AlphalmageLoader,可以使用下划线的技巧_filter这样不会影响IE7+用户。

十 五、优化图片【图片】
     网 页图片在上传到网站前,需要尽量减小图片的字节数。对于GIF格式的图片,需要检查其调色板大小是否与图片颜色数对应,这就需要用一些工具, 如 ImageMagick,还可以识别出GIF图片中冗余的部分:如果看到一个四色图片还有一道256色的细线存在,那么就有优化改善的余地。
     要尽量用PNG图片代替GIF图片,GIF图片能做的事,PNG几乎都可以做(除了动画),删除gamma数据块有助于保持不同浏览器下颜色一致。
     一些优化图片的工具:
        1.格式转换,ImageMigick
         2.优化图片,Pngcrush,optipng,pngoptimizer
         3.jpegtran处理所有的JPEG图片。它可以优化JPEG图片,删除注释和诸如EXIF这样的无用信息。

十六、优化 CSSsprites【图片】
     什么是CSSsprites呢?就是将多个图片组织成单独的一张图片。然后用CSS方式对该图片进行像素分割获取显示制定坐标位置的图像,从而还原合并前 的小图片,这样可以把对多个图片的请求变成对一个图片的请求,减少HTTP的请求数。一些优化的方法:
     1.把多个图片用水平而不是垂直方式排列组织成一个sprite图片,通常这样得到的文件较小,这种差别通常并不是很大,如果采用垂直的方式也可以。
     2.选择颜色相近的图片合并成一个sprite图片,这样能让颜色计数较小,256色下可以使用PNG8格式。
     3. 要“亲和手机”(mobile-friendly),不要在让Sprite中两个图片间隙过大,这到不会让Sprite图片文件减小多少,但它占据浏 览 器的内存会更小。通常图片会被浏览器解压到一个像素映射表中,100×100的图像就占10000像素的空间。

十七、不要在HTML中 缩放图片【图片】
     通常在使用一个像素大小超出自己所需的图片时,我们会通过设置图片的高度和宽度来强制符合我们的要求,这会增加不必要的下载量,是不可取的。
      目前网站中比较明显的应用就是用户的头像、照片等。如filcker网站,用户实际上仅上传了一张图片,但它为了适应不同页面缩略图现实需要,至少生成了 五种不同大小的文件分别存储,五个文件的大小分别为:
Square(75×75)、Thumbnail(100×73)、 Small(240×176)、Medium(500×366)、Large(800×586)。

十八、减少并缓存 favicon.ico文件【图片】
     favicon.ico 是保存在网站根目录下的图标文件,浏览器会向他发出请求。最好应做一个favicon.ico文件避免404响应出现,每次请 求,同域的cookie都 会被提交,确实是负担,另外由于是带cookie的图标信息,CDN服务器不会缓存它,该图标文件也会干扰正常的下载顺序,例如 在IE中想通过onload事件请求一些额外的组件,favicon.ico文件会在别的组件下载前被下载。
    解决方法:
     1.让该文件尽量小,尽量在1K以下,ImageMagick可以创建小的favicon.ico文件。
     2.设置该文件的过期头信息,可以让它缓存在浏览器中。

十九、保持组件大小在25K以下【手机】
     这个限制只要是针对iPhone是手机做的优化,iPhone不能缓存超过25K的组件,注意这是被压缩的大小,精减大小很重要,单凭gzip还不够。


二 十、将组件打包合并到一个Multipart结构的文档中【手机】
     该技巧类似与带附件的email。有利于用一次HTTP请求获取几个组件。记住,HTTP请求代价高昂,使用这种技巧需要检查用户浏览器是否支持,比如 iPhone并不支持这种文档结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值