性能优化之浏览器篇

为什么浏览器端更重要?

性能优化在浏览器端 总结19条: 

规则一:把css放在head标签中加载

能让页面更早的开始渲染,避免把css放在页面尾部出现的闪屏

最好能包含关键渲染路径的样式:首屏

规则二:把js放在body末尾加载

因为js会阻塞html解析和css渲染

规则三:不要css表达式

看似强大,实际性能开销很大,可能导致页面卡顿

规则四:使用外链方式引用css和js

有效减少html的体积

可合理利用浏览器缓存

规则五:压缩js和css

生产环境删除不必要的注释、空白

js中变量名压缩,混淆压缩,css属性合并,选择符的合并等

规则六:不要重复加载js

在ie中还是会多个请求,不能发挥缓存优势

意味着更长的js执行时间

规则七:让ajax请求可缓存

GZIP、内容压缩都可使用

规则八:用get方式发起ajax请求

get方式可以缓存

如果是获取信息,get更语义化

如果是提交信息,post更语义化,post方式是不会被缓存的

规则9:组件延迟加载(重点)——延迟加载和按需加载

保障关键页面资源优先加载:因为并发数限制

延迟加载的典型手段:lazyload

规则10:减少dom节点数

天猫:更多节点数以为浏览器布局、渲染时计算量更大

规则11:避免使用iframe

会阻塞父文档的onload

即使是空白也比较耗时

规则12:减少cookie体积

因为cookie每次请求都会全部带上

规则13:使用无cookie域名加载静态资源

在服务器端做了讲解

规则14:减少js的dom访问

对于查找的元素,可以缓存在变量中

节点增加是合理利用documentFragment

不要用js去频繁修改样式

规则15:使用更智能的事件监听机制

基于事件冒泡的委托机制,有效减少绑定的数量

规则16:常见的图片优化手段

相比代码,图片体积很大

PNGCrush、JPEGTRAN PNGQUANT

渐进式编码:JPG

规则17:不要在html里面缩放图片

徒增渲染开销,提供适当尺寸即可

规则18:不要把图片scr置空

ie、chrome、firefox会发起额外的主文档请求

规则19:任何资源尽量保持的25k以内

iphone、部分浏览器无法缓存25k以上的资源 

 

性能优化之服务篇

posted @ 2016-11-23 13:51  李大白程序员  阅读(203)  评论(0编辑  收藏  举报