首页 > 代码库 > 性能优化篇
性能优化篇
性能优化在浏览器端 总结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以上的资源
性能优化篇
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。