前端性能优化--雅虎军规

前端性能优化,永远是个说不完的话题。好在搜索先驱的雅虎对优化性能有了较为具体的总结,让我们能够将经验直接用到实际工作中去。

1.减少HTTP请求次数

尽量减少图片、CSS、JS的个数。采用CSS精灵或者合并文件的方法,以减少http请求,节省网络请求,加快页面加载。

2.使用CDN

网站上的静态支援可以使用cdn,加快响应速度。

3.避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。

4.为头文件指定Expires

Expires是用来设置资源的过期时间的,一般对css、js、图片有用。他可以使资源具有缓存性,这下,下次访问的话(不过期),就可以读取浏览器的缓存,不需要在此发送http请求了。

5.使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应内容,包括html、css、json等格式。减小响应的数据大小。

6.将CSS放到顶部

页面上的资源都是从上到下加载的,将CSS文件放在顶部可以优先渲染页面,让用户能感受页面的快速响应。

7.将JS放到底部

因为执行JS时会阻塞后续的资源,所以将JS脚本放在最后。

8.避免使用CSS表达式

这个表达式会持续的在页面上计算样式,影响页面的性能。而且,CSS表达式只能被IE支持。

9.将CSS和JS放到外部文件中

目的是缓存文件,但有时为了减少请求,也会直接写道页面中。

10.权衡DNS查找次数

减少主机名可以节省响应时间。但同时,需要注意,减少主机会减少页面中并行下载的数量。

IE浏览器在同一时刻只能从同一域名下载两个文件。当在一个页面显示多张图片时,IE 用户的图片下载速度就会受到影响。所以可以用二级域名来存放图片。

11.精简CSS和JS

压缩CSS和JS,减少文件的大小,一些主流的压缩工具都能够进行css和js的压缩。

12.避免跳转

同域下,注意避免反斜杠 “/” 的跳转。不同域下时,使用Alias或者mod_rewirte建立CNAME(保存域名与域名之间关系的DNS记录) 来替代。

13.删除重复的JS和CSS

重复调用脚本,除了增加额外的HTTP请求外,多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存,它们都存在重复运算JavaScript的问题。

14.配置Etags

它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性,例如某个文件在1秒内修改了10次,Etag可以综合Inode(文件的索引节点(inode)数),MTime(修改时间)和Size来精准的进行判断,避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用,可取后两个参数。使用ETags减少Web应用带宽和负载 。

15.可缓存的AJAX请求

异步请求同样会照成用户的等待,所以使用Ajax请求时,要设置浏览器有缓存时就去使用缓存。

16.使用GET来完成AJAX请求

当时用XMLHttpRequest时,浏览器中的POST方法会走两步,首先发送文件头,然后发送数据。因此使用GET方式更便捷。

17.减少DOM元素数量

这会引申出一堆优化的细节,总之,减少DOM数量,就会减少浏览器的解析负担。

18.避免404

比如外链的css、js文件出现问题返回404时,会破坏浏览器的并行加载。

19.减少cookie的大小

减小cookie,因为每次请求都得带上cookie。

20.使用无cookie的域

比如图片、css、js等,客户端请求静态文件的时候,减少了cookie的反复传输对主域名的影响。

21.不要使用滤镜

IE下独有属性AlphaImageLoader用于修正IE7下显示PNG图片的半透明效果,会增加内存的开销,引起多方面的问题。可以使用PNG8格式来代替。

22.不要再HTML中缩放图片

比如你需要一张50*50的图片,那就不用加载一张500*500的图片。

23.缩小favicon.ico并缓存

站点的icon应该不是经常换吧,那就长时间的缓存它,并且最好控制在1K以下。

  1. 匿名说道:

    圣诞节 :surprised: :surprised: ,哈哈哈哈,

    1. 涛走云散 涛走云散说道:

      :smile:

发表评论

电子邮件地址不会被公开。

*