首页 > 其他好文 > 详细

性能优化篇

时间：2016-12-11 02:57:39 阅读：223 评论：0 收藏：0 [点我收藏+]

标签：机制 hone zip 天猫多节点加载重复加载组件选择

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

性能优化篇

标签：机制 hone zip 天猫多节点加载重复加载组件选择

原文地址：http://www.cnblogs.com/weiyecrossover/p/6158812.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！