前端性能优化:雅虎14条优化规则

1.减少HTTP请求数

  常用的方法,合并cssjs(将一个页面中的cssjs文件分别合并)以及 Image mapscss sprites等。

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

  通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的 cache服务器内,通过DNS负载均衡的技术,判断用户来源就近访问cache服务器取得所需的内容。

3.添加Expire/Cache-Control 头

  Expire其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。

  大多数的图片,flash在发布后都是不需要经常修改的,做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是直接从缓存中读取,这样再次访问页面的速度会大大加快。

4.启用Gzip压缩

  Gzip的思想就是把文件先在服务器端进行压缩,然后再传输,这样可以显著减少文件传输的大小。

传输完毕后浏览器会重新对压缩过的内容进行解压缩,并执行。

5.将css放在页面最上面 

  因为 IEFirefox等浏览器在css全部传输完全之前不会去渲染任何的东西。

  IE把样式表放在页面的底部的问题在于它禁止了网页内容的顺序显示。浏览器阻止显示以免重画页面元素,那用户只能看到空白页了。

  Firefox不会阻止显示,但这意味着当样式表下载后,有些页面元素可能需要重画,这导致闪烁问题。

  所以我们应该尽快让css加载完毕。

6.将script放在页面最下面

  因为script脚本的执行会阻塞页面的下载并且会阻塞并行下载数量,放在页面最下面可以有效减少页面可视元素的加载时间。

7.避免在CSS中使用Expressions 

  避免在CSS中使用表达式。

8.把javascript和css都放到外部文件中 

  不仅从性能优化上会这么做,用代码易于维护的角度看也应该这么做。

9.减少DNS查询

  在域名和ip地址之间的转换工作称为域名解析,也称DNS查询。

  一次DNS的解析过程会消耗20-120毫秒的时间,在DNS查询结束之前,浏览器不会下载该域名下的任何东西。

所以减少DNS查询的时间可以加快页面的加载速度。

10.压缩 JavaScript 和 CSS

  减少页面字节数,容量小页面加载速度自然也就快,而且压缩除了减少体积以外还可以起到一定的保护作用。

11.避免重定向

  每增加一次重定向就会增加一次web请求,所以应该尽量减少。

12.移除重复的脚本

13.配置实体标签ETags 

  ETags 是用于确定浏览器缓存中元素是否与 Web server 中的元素相匹配的机制, 它是比 last-modified date 更灵活的元素验证机制。

14.AJAX 缓存

  即使AJAX是动态产生的而且只对一个用户起作用,他们依然可以被缓存。

猜你喜欢

转载自www.cnblogs.com/gg-qq/p/10647836.html