浏览器端性能优化

规则 1：把 CSS 放在 HEAD 中加载

• 能让页面更早的开始渲染，避免闪屏
• 最好能包含关键渲染路径的样式：首屏

规则 2：把 JS 放在 BODY 末尾加载

• 因为 JS 阻塞 HTML 解析和 CSS 染

规则 3：不使用 CSS 表达式

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

规则 4：用外链方式用 CSS 和 JS

• 有效减少 HTML 的体积可合理利用浏览器缓存

规则 5：压缩 JS 和 CSS

• 生产环境删除不必要的注释、空白 JS 中变量名压缩，混淆压缩

规则 6：不重复加载 JS

• 在 IE 中还是会多个请求，不能发挥缓存优势
• 意味着更长的 JS 执行时间

规则 7：让 Ajax 请求可缓存(服务端)

• GZIP、内容压缩都可适用

规则 8：用 GET 方式发起 Ajax 请求

• GET 方式可以缓存
• 如果是获取信息，GET 更语义化

规则 9：组件延迟加载

• 保障关键页面资源优先加载：因为并发数限制
• 延迟加载的典型手段：Lazyload

规则 10：减少 DOM 节点数

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

规则 11：避免使用 iframe

• 会阻塞父文档的 onload
• 即使是空白也比较耗时

规则 12：减少 COOKIE 体积

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

规则 13：使用无 COOKIE 域名加载静态资源(后端)

• 减少静态资源加载时的网络传输量
• 静态资源加载通常是不需要 COOKIE 的
• 阿里:精简 COOKIE 后，每年节省的流量 TB 记

规则 14：减少 JS 中的 DOM 访问

• 对于查找到的元素，缓存在变量中
• 节点增加是合理利用 DocumentFragment
• 不要用 JS 去频繁修改样式

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

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

规则 16：使用常见的图片优化手段

• 相比代码，图片体积很大
• PNGCrush、JPEGTRAN、PNGQUANT
• 渐进式编码：JPG

规则 17：不要在 HTML 中缩放图片

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

规则 18：不要把图片 SRC 置空

• IE、ChromeFireFox 会发起额外的主文档请求

规则 19：任何资源尽量在 25K 以内

• iPhone 无法缓存 25K 以上的资源