浏览器性能优化更重要 | |
Time Retrieving HTML 10%-20%----花在下载主文档的时间 | |
Time Elsewhere 80%左右---花在引用资源的时间 | |
19条优化规则: | |
规则1:把CSS放在HEAD中加载 | |
能让页面更早的开始渲染,避免闪屏 | |
最好能包含关键渲染路径的样式:首屏(第一屏的样式一定放在head里面) | |
规则2:把js放在body末尾加载 | |
因为js阻塞HTML解析和css渲染 | |
规则3:不使用CSS表达式 | |
看似强大,实际性能开销很大,可能导致页面卡顿 | |
规则4:用外链方式引用Css和js | |
有效减少HTML的体积 (这样CSS和js作为静态资源可以在浏览器设置缓存响应头) | |
可合理利用浏览器缓存(css js作为静态资源缓存在浏览器端,这样不用再次请求服务器) | |
规则5压缩JS和CSS | |
生产环境删除不必要的注释、空白 | |
JS中变量名压缩,混淆压缩(对css进行属性合并如background:,选择符的合并) | |
规则6:不重复加载Js | |
在IE中还是会多个请求,不能发挥缓存优势 | |
意味着更长的JS执行时间 | |
规则7:让Ajax请求可缓存(属于服务端优化) | |
Gzip、内容压缩都可适用 | |
规则8:用GET 方式发起Ajax请求 | |
get方式可以缓存 | |
如果是获取信息,get更语义化 | |
规则9:组件延迟加载 | |
保障关键页面资源优先加载:因为并发数限制 | |
延迟加载的典型手段:lazyload(懒加载或按需加载),首屏之后的DOM上使用 | |
规则10:减少DOM节点数 | |
天猫:更多节点数意味浏览器布局、 渲染时计算量更大 | |
规则11:避免使用iframe | |
会阻塞父文档的onload | |
即时是空白也比较耗时 | |
规则12:减少COOKIE体积 | |
因为COOKIE每次请求都会全部带上(主文档 jss css 图片等异步请求等同域资源) | |
规则13:使用无COOKIE域名加载静态资源(服务器端) | |
减少静态资源加载时的网络传输量 | |
静态资源加载通常是不需要COOKIE的 | |
阿里:精简COOKIE后,每年节省的流量TB记 | |
规则14:减少js中DOM访问 | |
对于查找到的元素,缓存在变量中 | |
节点增加是合理利用DomentFragment | |
不要用js去频繁修改样式 | |
规则15:使用更智能的事件监听机制 | |
基于事件冒泡的委托机制,有效减少绑定的数量 | |
规则16:使用常见的图片优化手段 | |
相比代码,图片体积很大 | |
常用的图片压缩工具: PNGCrush、 JPEGTRAN、PNGQUANT | |
渐进式编码:JPG | |
规则17:不要在HTML中缩放图片 | |
徒增渲染开销,提供适当尺寸即可(放10*10图片就避免50*50的避免开销) | |
规则18:不要把图片SRC置空 | |
IE、Chrome、FireFox会发起额外的主文档请求 | |
规则19:任何资源尽量在25k以内 | |
ipone无法缓存25k以上的资源 |
性能优化------浏览器端
猜你喜欢
转载自blog.csdn.net/wenmin1987/article/details/85098903
今日推荐
周排行