前端优化之雅虎军规

以下是我在雅虎35条军规摘选的几条,主要针对的是前端和移动端。

1.减少http请求,web页面无论是js还是html、css都是依赖于网络请求的。所以合并通用的css等文件,减少网络的请求次数。对于页面渲染速度是有用的。使用雪碧图,即CSS Sprite,减少图片的请求次数,并且图片在合并之后,总的字节数减少,请求更快

2.避免重定向,重定向会拖慢用户页面渲染,影响体验。

3.ajax缓存,当请求的资源文件没有修改时,可以添加expires或cache-control请求头缓存文件减少http请求消耗。

4.延迟加载,图片的懒加载可以加快页面的渲染速度。推荐图片懒加载库echo.js,轻量级不依赖其他第三方库。使用地址:https://github.com/toddmotto/echo 使用非常简单,源码就几十行。

5.预加载,使用html5的prefetch属性 例如:<link rel="prefetch" href="http://file06.16sucai.com/2016/0825/5203cb96ceadafa0f2f26d11c572d727.jpg" />这样就可以提前预加载一张图片,当跳转到另一页面后,不会在网络请求直接在缓存文件中获取。但是并不是所有的资源都可以预加载:url中包含下载资源,恶意页面,资源很大,https页面等不可以预加载。

6.减少dom元素的数量,尽量使用语义化标签,减少dom标签之间的层级嵌套。雅虎研究dom数量最多不要大于700个。超过之后会影响用户体验。

7.跨域分离组件,但确保不要超过2-4个域,域多了dns解析的代价就会增大。把html与组件分别部署到不同的域中,最大话并行下载。

8.尽量少用iframe,因为有可能阻塞页面,需要请求加载,非语义化。

9.杜绝404,404是一种非常浪费资源并给用户带来不好体验的。

10.避免使用css表达式。

11.样式表放到head标签中,使页面逐步渲染。

12.去除重复脚本,在ie和火狐中,重复引入的脚本会执行两次,浪费资源。

13.减少js对dom的访问。

14.智能的事件处理,如果dom元素被添加了多个事件,会影响响应速度。因此,当div中有10个按钮时。应该给div添加事件而不是给每个按钮添加事件。

15.js脚本放到底部。

16.将css与js放到外面,通过外部文件的这种引入方式可以被浏览器缓存起来,下次请求的时候就减小了html的大小。

17.js与css压缩,减小资源的体积。

18.优化图片,把gif转化为png格式

19.优化css sprite,在sprite中横向排列一般比纵向排列生成的体积小。组合sprite中的相似颜色可以保持低色数。最理想的是256以下png8格式,不用在sprite中留有太多的间隙。

20.不要在html中缩放图片,例如原本请求的图片大小是500*500的图片,img大小设置为100*100.

21.用小的favicon,最好在1k以下

22.cookie尽量的小,设置合适的域级别,以免影响子域

23.把组件放到不含cookie的域中,减少请求头的大小

24.保证所有组件都小于25k,iphone不能缓存大于25k的组件

25.避免img标签src属性为空

26.在请求头中添加expires和cache-control缓存组件


你可能感兴趣的:(HTML5)