前端优化之雅虎军规
以下是我在雅虎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缓存组件