性能优化篇
性能优化在浏览器端 总结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以上的资源