web前端优化黄金法则

(雅虎前端优化34条黄金规则,下面我只罗列用得比较普遍的)

1.尽量减少HTTP请求次数

  • 网页加载中大部分时间都在下载js,css,flash,图片

  • 合并文件 css,js,图片(css sprite)


2.使用内容分发网络 (CDN)

用户与你网站服务器的接近程度会影响响应时间的长短。把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
内容分发网络(Content Delivery Network,CDN)是由一系列分散到各个不同地理位置上的Web服务器组成的,它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如,拥有最少网络跳数(network hops)和响应速度最快的服务器会被选定。


3.使用外部JavaScript和CSS

很多性能规则都是关于如何处理外部文件的。但是,在你采取这些措施前你可能会问到一个更基本的问题:JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢?

在实际应用中使用外部文件可以提高页面速度,因为 JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的 JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数,却增加了HTML文档的大小。

从另一方面来说,’如果外部文件中的JavaScript和CSS被浏览器缓存,在没有增加HTTP请求次数的同时可以减少HTML文档的大小。’
关键问题是,外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度,但是仍然有一些指标可以一测量它。如果一 个会话中用户会浏览你网站中的多个页面,并且这些页面中会重复使用相同的脚本和样式表,缓存外部文件就会带来更大的益处。


4.把脚本置于页面底部

脚本带来的问题就是 它阻止了页面的平行下载。

一个经常用到的替代方法就是使用延迟脚本。DEFER属性表明脚本中没有包含document.write,它告诉浏览器继续显示。不幸的 是,Firefox并不支持DEFER属性。在Internet Explorer中,脚本可能会被延迟但效果也不会像我们所期望的那样。如果脚本可以被延迟,那么它就可以移到页面的底部。这会让你的页面加载的快一点。


5.优化图片大小

尽量压缩图片大小,提高加载时间.

要记住,在终端用户的响应时间中有80%到90%的响应时间用于下载图像、样式表、脚本、Flash等页面内容。这就是网站性能黄金守则。


6.减少DOM访问

使用JavaScript访问DOM元素比较慢,因此为了获得更多的应该页面,应该做到:

  • 缓存已经访问过的有关元素
  • 线下更新完节点之后再将它们添加到文档树中
  • 避免使用JavaScript来修改页面布局

7.不要出现404错误

HTTP请求时间消耗是很大的,因此使用HTTP请求来获得一个没有用处的响应(例如404没有找到页面)是完全没有必要的,它只会降低用户体验而不会有一点好处。

有些站点把404错误响应页面改为“你是不是要找*”,这虽然改进了用户体验但是同样也会浪费服务器资源(如数据库等)。最糟糕的情况是指向外部 JavaScript的链接出现问题并返回404代码。首先,这种加载会破坏并行加载;其次浏览器会把试图在返回的404响应内容中找到可能有用的部分当 作JavaScript代码来执行。


8.预加载

  • 在用户空闲时加载以后要用到的 img,css,js,这些都可以缓存
  • 在这个页面加载下个页面要用到的页面组件
  • 同样可以把这些要加载的放到 onload 里面

(ps:还有很多,我就不一一罗列了,雅虎前端优化总共34条,大家可自行百度或谷歌)