提高网站访问速度的34条军规(2)

16 在Ajax请求中使用GET方法 (Use GET for AJAX Requests)<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

tag:server

Yahoo! Mail团队发现进行XMLHttpRequest的时候，POST方法在浏览器中分两步执行：先发送头部，然后发送数据。所以最好使用只发送一个TCP包（除非你有很多的cookie）的GET方法。IE中URL的最大长度是2000，所以如果你发送超过2000的数据就不能使用GET方法。

一个有趣的现象是，POST方法并不像GET那样实际发送数据（而Get则名副其实）。基于HTTP规范，GET方法意味着取回数据，所以当你只是请求数据时使用GET方法更为有意义（从语义上来说），而在发送需要储存在服务器端的数据时则相反使用POST。

17 后加载组件 (Post-load Components)

tag:content

你可以仔细端详下你的页面然后自问：“什么是在页面初始化时必须的？”那么其余的内容和组件可以放在后面。

JavaScript是理想的用来分割onload事件之前和之后的选择。例如你有执行拖放、下拉和动画的JavaScript代码和菜单，它们可以稍后加载，因为用户在初始呈现之后才会在页面上拖动元素。其他的可以被后加载的地方包括隐藏的内容（当用户做某项操作才会展现的内容）和被折叠的图片。

可以帮助你的工具有： YUI Image Loader能帮助你延缓加载折叠的图片，而且YUI Get utility能够很简单的包装运行中的JS和CSS。比如，打开Firebug的网络选项卡去查看Yahoo! HomePage。

当性能指标和其它网站开发的好的实践一致时是不错的。渐进增强的观念告诉我们当支持JavaScript时，会提高用户体验，但你必须确保在没有JavaScript时页面也能工作。所以当你确保页面工作正常时，你会通过延后加载的那些更花哨的脚本比如拖放和动画，来增强你的页面。

18 预先加载组件 (Preload Components)

tag:content

预加载看起来和后加载原则是个矛盾，但它其实是为了另外一个目的。预加载组件让你可以利用浏览器的空闲时间来加载之后需要的组件（比如图片，样式表和脚本）。这样当用户浏览下一个页面的时候，大部分组件都已经在缓存里了而页面会加载的更快。

有几种预加载的类型：

· 无条件预加载-当原本内容加载完成时，立刻开始获取一些额外的组件。比如到google.com看下一个sprite图片怎样被在onload事件后请求的。在google.com的首页里并没有用到sprite图片，但被用在接下来的结果页面里。

· 有条件的预加载-根据用户的行为来猜测用户什么时候到达下个页面然后据此预加载。在search.yahoo.com上，你可以看到额外的组件在你在输入框中输入时是怎样被加载的。

· 有预期的加载-当登录重新设计的网站时进行加载。你通常会在重新设计网站后听到：“新网站很酷，但它比以前的要慢”。这个问题的部分原因是用户访问旧网站时有所有的缓存，而对于新的来说，缓存是空的。你可以通过在登录重新设计的网站前预加载一些组件来缓解这方面的影响。你的旧网站可以用浏览器空闲的时间来请求新网站中用到的脚本和图片。

19 减小DOM元素的数量 (Reduce the Number of DOM Elements)

tag:content

复杂的页面意味着更多的字节需要被下载而且也意味着在JavaScript中遍历DOM更慢。比如你在页面中添加一个事件，让它在500或者5000个DOM元素中循环，它们的效率是不同的。

更多的DOM元素表明有些标签需要被改良而并不一定需要移除实际内容。你是否为了布局而使用繁琐的网一样的表格？你是否只是为了弥补一些布局的问题而使用了更多的div标签？也许还有更好和更符合语义的标签可以使用。

YUI CSS utilities可以很好的帮助进行布局:grid.css 可以帮助你进行所有的布局，front.css 和 reset.css 可以帮助你去除浏览器默认的格式。这是你开始重新审视你的标签的机会，比如只在语义符合时使用div标签，而不是用它来另起一行。

DOM元素的数量很好检测，只要在Firebug的控制台里输入：
document.getElementsByTagName('*').length

那么多少DOM元素算多呢？查看下类似的使用较好的标签的页面。比如Yahoo! Home Page是一个很丰富的页面但只有700以下的DOM元素（HTML标签）。

20 分域部署部件：Split Components Across Domains

tag：内容

将部件分割能使你获得最大的并行下载效率。但你同时需要注意不使用多于2~4个域名，以避免DNS查询导致的问题。例如，你可以将HTML内容和动态的组建放于www.example.org域名下，将静态组件分别放于static1.example.org和static2.example.org之下。

查看Tenni Theurer和Patty Chi的"Maximizing Parallel Downloads in the Carpool Lane"获取更多关于并行下载的信息。

21 减少Iframe的数量 Minimize the Number of iframes

tag：内容

Iframes 能够使HTML文档被插入进父级文档中。首先需要明确iframe的工作方式，才能有效的利用这一形式。

· 对于第三方内容，比如广告，能够在不影响父级设计的情况下快捷插入。

· 提供安全沙箱，不影响父级。

· 能够并行下载脚本。

· 即使是空的也会有消耗。

· 会锁住页面的onload事件。

· 不支持语义表达。

22 避免404错误 No 404s

tag：内容

一个获得没用的404响应的HTTP请求对于宝贵的HTTP请求资源来说是完全不必要的，而且这样还会减慢用户的体验。

有的网站提供了有帮助的404错误信息，比如"你是否在寻找……？"，这样虽然能提高用户体验，但同样浪费了服务端资源（比如数据库）。尤其不妙的是在请求一个外部的Javascript脚本文件失败时获得的一个404错误，因为这样不但会堵塞并行的下载，而且浏览器会尝试分析404响应的内容，来辨识它是否是有用的Javascript代码。

23 减少Cookie的大小 Reduce Cookie Size

tag：cookie

有多种理由让我们应用HTTP cookie，比如身份验证，或者个性化设置。Cookie中的信息在服务端和浏览器间被放在HTTP头中交换。尽量减少cookie的体积对减少用户获得响应的时间十分重要。

查看Tenni Theurer和Patty Chi的"When the Cookie Crumbles"获取更多信息。

· 去除不必要的cookie。

· 尽量减少cookie的大小。

· 留心将cookie设置在适当的域名下，避免影响到其他网站。

· 设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快的删除cookie，从而减少用户的响应时间。

24 为部件使用没有cookie的域名 Use Cookie-free Domains for Components

tag：cookie

当浏览其请求一个静态图片并一同发送cookie时，服务器并不需要这些cookie。这样只是毫无益处的创建了多余的网络流量。应当保证静态的部件在请求时没有携带cookie，所以需要把你的静态部件放在另一个子域名下。

如果你的域名是www.example.org，你可以将你的静态部件放在static.example.org中。如果你把cookie设置在顶级域名example.org上而不是www.example.org，那么所有发送至static.example.org的请求会包括那些cookie。在这种情况下，你可以买一个全新的没有cookie的域名来放置你的静态部件。Yahoo！使用了yimg.com，YouTube试用了ytimg.com，Amazon使用的是p_w_picpaths-amazon.com。

将静态部件放于没有cookie的域名下的另一个好处是一些代理服务器会拒绝缓存有cookie的部件。于此相关的一点是，如果你怀疑你应该为你的首页使用example.org还是www.example.org，考虑cookie的赢下。省略www会让你不得不把cookie写到*.example.org下，所以考虑性能，最好使用www.子域名，然后把cookie写到这个子域名下。

25 减少DOM的读取 Minimize DOM Access

tag：javascript

利用Javascript读取DOM元素很慢，所以为了获得响应更快的页面，你应该：

· 缓存被读取的元素的引用。

· 脱机更新节点然后把它们加回到树结构中。

· 避免利用Javascript定位布局。

查看Julien Lecomte的"High Performance Ajax Applications"获得更多信息。

26 开发灵巧的事件处理程序 Develop Smart Event Handlers

tag：javascript

如果有太多的事件处理逻辑部署在DOM树的不同元素上，它们的频繁执行会拖慢页面的响应速度。而使用事件委托是一个好的解决方法。如果在一个Div中有10个按钮，与其在每个按钮上都放一个事件处理程序，步入只在Div上放一个事件处理程序。事件会冒泡上溯，这样你就会捕获这一事件，并找出是哪个按钮发起的它。

同样，你并不需要等待onload事件来启动一些操作DOM树的程序。你只需要保证你需要操作的元素可用就可以了。你不需要等待所有的图片下载完毕，你应当使用DOMContentLoaded事件来替代onload事件，当然，目前并不是所有浏览器都支持这一事件，你可以使用YUI Event组件，其中包含了一个onAvailable函数。

查看Julien Lecomte的"High Performance Ajax Applications"获取更多信息。

27 选择<link>而不是@import Choose <link> over @import

tag：css

前面提到把CSS应当放在最顶端来提供预显。在IE中，放在页面底部的@import和<link>效果是一样的，所以最好不要用它。

28 不使用过滤器 Avoid Filters

tag：css

IE专有的AlphaImageLoader过滤器是为了解决半透明真色PNG图片在IE7之前的版本中显示的问题。这个过滤器会在图片下载时堵塞住展示。而且它会消耗内存并影响每个元素而不仅仅是每张图片，所以这个过滤器的问题很多。

所以最好在IE中完全不使用AlphaImageLoader过滤器，而使用渐淡的PNG8图片。如果你明确需要AlphaImageLoader，请使用hack _filter，从而不影响到你的IE7+的用户。

29 优化图片 Optimize Images

tag：p_w_picpaths

当设计师制作好网站的图片后，还有些事情应该是你在把这些图片上传到服务器之前做的。

· 你可以检查GIF图片中的调色板是否和图片中的色彩数一致。使用p_w_picpathmagick来帮助你方便的检查：
identify -verbose p_w_picpath.gif如果你看到一个4色的图片却有一个256色的调色板，那么还有很大的空间来做性能优化。

· 试试把GIF转换成PNG是否会节省空间，这是常有的事情。由于浏览器支持的限制，开发者往往怀疑是否该使用PNG，但这是过去的事情了。唯一的问题是真色的PNG图片的半透明问题，但同样，GIF不是真色的而且也不支持丰富的透明效果。所以GIF可以做的，PNG或者PNG8同样可以做到（除了动画）。一条简单的p_w_picpathmagick语句就可以提供可用的PNG：
convert p_w_picpath.gif p_w_picpath.png
“我们强调的是，给PNG一个机会！”

· 使用pngcrush或者任何的PNG优化工具，例如：
pngcrush p_w_picpath.png -rem alla -reduce -brute result.png

· 使用jpegtran处理JPEG图片。这个工具会无损操作JPEG图片，比如旋转，而且可以用来优化图片，比如去除图片中的注释和其他无用的信息（比如EXIF信息）。
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30 优化CSS精灵 Optimize CSS Sprites

tag：p_w_picpaths

· 横向布局Sprite中的图片往往比纵向布局会减少文件大小。

· 在一个Sprite中组合相近的颜色会降低颜色的数量，从而达到适合PNG8的低于256色的标准。

· “对移动设备友好”，不在Sprite里留下大的空隙。这并不十分影响文件的大小，但会减少客户端代理将图片解压为像素映射的内存消耗，100*100的图片是一万像素，而1000*1000则是一百万像素。

31 不要在HTML中缩放图片 Don't Scale Images in HTML

tag：p_w_picpaths

不要使用大小超过需要的图片，即使你能够在HTML中设置它的属性。如果你需要

那么就使用恰好100*100px的图片，而不是使用缩放后的500*500的图片。

32 使用小的可缓存的Favicon.ico Make favicon.ico Small and Cacheable

tag：p_w_picpaths

favicon.icon是放在服务器根目录的一个图片，它是个麻烦却不得不处理，因为即使你不关心，浏览器依然会请求这张图片，所以最好不要提供一个404的错误。而且由于它是在同一服务器下的，Cookie也会随着每次请求一并发送。这张图片同样干扰下载队列，比如在IE中，当你在onload事件中请求额外的组件时，favicon会在这些额外组件之前下载。

所以为了减少favicon.ico的不利影响，我们应当：

· 使用小图片，小于1k为佳。

· 设置你认为合适的过期时间（因为你如果更新了图片，你并不能修改它的名字）。你可以设置过期为未来的几个月。你可以借鉴下你当前的favicon.ico的最后更新时间来作为设置依据。

Imagemagick能够帮助你创建小图片。

33 保证组件大小小于25K Keep Components under 25K

tag：mobile

这一限制是因为iPone不会缓存大于25K的组件，注意这里指的是未压缩前的大小。这就是为什么缩小大小很重要，因为单单gzip并不足够。

查看Wayne Shea和Tenni Theurer的"Performance Research, Part 5: iPhone Cacheability - Making it Stick"获取更多信息。

34 把组件打包进多部分文档中 Pack Components into a Multipart Document

tag：mobile

把组件打包进多部分文档类似一封包含有附件的邮件，它能让你通过一个HTTP请求获取多个组件（记住HTTP请求是很昂贵的）。当你使用这一技术，请先检查客户端是否支持它(iPone不支持)。

转载于:https://blog.51cto.com/yangzorder/691665

提高网站访问速度的34条军规(2)相关推荐

如何让提高网站访问速度
如何让提高网站访问速度整理方案一: 网站访问速度可以直接影响到网站的流量,而网站的访问量几乎与网站的利益直接挂钩,因此网站的速度问题成为企业及站长十分关注的问题.现在网站越来越多,不少朋友的网站打开 ...
Yahoo网站性能优化的34条军规
1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...
提高网站访问速度的十个技巧
网站的访问速度和性能对用户体验来说是非常重要的.如果你的网站访问非常的慢,你不仅会失去用户,而且更可怕的是你会失去潜在的客户.像Google这样的互联网巨头也会把网站访问速度作为排名的一个参数. ...
提高网站访问速度方案
很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度. 1: 缩小Javascript ...
小麦盒子cdn_CDN加速，提高网站访问速度的最佳方法
上个月,一台湾的朋友向我反映了他的网站现在十分糟糕的情况. 事情是这样的,这位台湾朋友有一网站,面向用户主要在中国大陆,2010年10月,他把网站寄存地从台湾移到了广东,他租用的是独立服务器,使用线路 ...
测试网站访问速度的5个方法
网页载入速度对于一个网站来讲很关键,Google已经将一个网站的载入速度列入了网站关键字排名的考虑因素当中,也就是说如果你的网站有足够的内容,而且载入速度比别人的网站更快一步的话,那么你就是获得更好的 ...
前端flv.js设置缓冲时间和大小_不可不知的 WEB 前端网站优化 —— 雅虎 34 条军规...
不可不知的 WEB 前端网站优化 -- 雅虎 34 条军规不得不说现在依然适用于大部分的网站当年雅虎推荐了一套优化网站加载速度的34条法则(包括Yslow规则22条),以下是详细说明. 1. Mi ...
雅虎网站优化34条军规
1.Minimize HTTP Requests 尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的 ...
Yahoo网站性能优化的34条规则
摘自:http://blog.chinaunix.net/uid/20714478/cid-74195-list-1.html Yahoo网站性能优化的34条规则 1.尽量减少HTTP请求次数终端用 ...

提高网站访问速度的34条军规(2)

提高网站访问速度的34条军规(2)相关推荐

最新文章

热门文章