Web程序优化的最佳实践站内篇.docx
《Web程序优化的最佳实践站内篇.docx》由会员分享，可在线阅读，更多相关《Web程序优化的最佳实践站内篇.docx（5页珍藏版）》请在冰点文库上搜索。
Web程序优化的最佳实践站内篇
Web程序优化的最佳实践（网站内容篇）
Yahoo!
的ExceptionalPerformance团队为改善Web网站建设时能够加快网站性能带来最佳实践。
他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。
最佳实践的核心就是旨在提高网站性能。
ExcetionalPerformance团队总结出了一系列可以提高网站速度的方法。
可以分为7大类34条。
包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
下面上海网站建设公司海淘科技资深建站师和大家分享Yahoo!
的ExceptionalPerformance团队研究成果中的WAP网站建站中的“页面内容加载速度”该怎么提升？
1.可缓存的AJAX
Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来良好的反馈性和即时性。
但是，使用Ajax并不能保证用户不会在等待异步的JavaScript和XML响应上花费时间。
在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。
例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。
记住一点，"异步"并不异味着"即时"，这很重要。
为了提高性能，优化Ajax响应是很重要的。
提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看AddanExpiresoraCache-ControlHeader。
其它的几条规则也同样适用于Ajax：
Gizp压缩文件，减少DNS查找次数，精简JavaScript，避免跳转，配置ETags
让我们来看一个例子：
一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。
如果用户在上次使用过Emailweb应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄了。
必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。
这可以通过为读取地址薄的AjaxURL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。
如果地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减少了一次HTTP请求过程。
如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。
即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。
这样做可以使你的Web2.0应用程序更加快捷。
2.推迟加载内容
上海海淘科技的建站师认为:
你可以仔细看一下你的网页，问问自己"哪些内容是页面呈现时所必需首先加载的？
哪些内容和结构可以稍后再加载？
把整个过程按照onload事件分隔成两部分，JavaScript是一个理想的选择。
例如，如果你有用于实现拖放和动画的JavaScript，那么它就以等待稍后加载，因为页面上的拖放元素是在初始化呈现之后才发生的。
其它的例如隐藏部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以推迟加载。
工具可以节省你的工作量：
YUIImageLoader可以帮你推迟加载折叠部分的图片，YUIGetutility是包含JS和CSS的便捷方法。
比如你可以打开Firebug的Net选项卡看一下Yahoo的首页。
当性能目标和其它网站开发实践一致时就会相得益彰。
这种情况下，通过程序提高网站性能的方法告诉我们，在支持JavaScript的情况下，可以先去除用户体验，不过这要保证你的网站在没有JavaScript也可以正常运行。
在确定页面运行正常后，再加载脚本来。
实现如拖放和动画等更加花哨的效果。
3.预加载
预加载和后加载看起来似乎恰恰相反，但实际上预加载是为了实现另外一种目标。
预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。
使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。
下面提供了几种预加载方法：
无条件加载：
触发onload事件时，直接加载额外的页面内容。
以G为例，你可以看一下它的spiritimage图像是怎样在onload中加载的。
这个spiritimage图像在主页中是不需要的，但是却可以在搜索结果页面中用到它。
有条件加载：
根据用户的操作来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。
中你可以看到如何在你输入内容时加载额外的页面内容。
有预期的加载：
载入重新设计过的页面时使用预加载。
这种情况经常出现在页面经过重新设计后用户抱怨"新的页面看起来很酷，但是却比以前慢"。
问题可能出在用户对于你的旧站点建立了完整的缓存，而对于新站点却没有任何缓存内容。
因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。
在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。
4.减少DOM元素数量
一个复杂的页面意味着需要下载更多数据，同时也意味着JavaScript遍历DOM的效率越慢。
比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。
大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。
你在页面布局中使用表格了吗？
你有没有仅仅为了布局而引入更多的
元素呢？
也许会存在一个适合或者在语意是更贴切的标签可以供你使用。
YUICSSutilities可以给你的布局带来巨大帮助：
grids.css可以帮你实现整体布局，font.css和reset.css可以帮助你移除浏览器默认格式。
它提供了一个重新审视你页面中标签的机会，比如只有在语意上有意义时才使用
，而不是因为它具有换行效果才使用它。
DOM元素数量很容易计算出来，只需要在Firebug的控制台内输入：
document.getElementsByTagName（'*'）.length
那么多少个DOM元素算是多呢？
这可以对照有很好标记使用的类似页面。
比如Yahoo!
主页是一个内容非常多的页面，但是它只使用了700个元素（HTML标签）。
5.根据域名划分页面内容
把页面内容划分成若干部分可以使你最大限度地实现平行下载。
由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。
例如，你可以把用到的HTML内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS）分别存放在statics1.example.org和statics.example.org上。
你可在TenniTheurer和PattyChi合写的文章MaximizingParallelDownloadsintheCarpoolLane找到更多相关信息。
6.使iframe的数量最小
ifrmae元素可以在父文档中插入一个新的HTML文档。
了解iframe的工作理然后才能更加有效地使用它，这一点很重要。