前端性能小记

关注点分离

• html+css+js

游览器差异

• 使用特性检测而不是代理嗅探

DOM访问

• 避免在循环中使用DOM访问

• 将DOM引用分配给局部变量，并使用这些局部变量

• 在可能的情况下使用select API

• 当在HTML容器中反复使用时，缓存重复的次数

操作DOM

• 尽量减少更新DOM，可以将DOM的改变分批处理，并在文档树之外执行这些更新

• 当需要创建一个相对较大的子树时，应该在其创建之后再添加到DOM树中

• 在更新现有DOM部分时，仍然可以批处理。（先克隆现有子树，然后再克隆树上操作，然后用克隆树替换原来的子树）

事件委托

• 将事件绑定到dom上级，利用事件流进行操作

长期运行脚本

• setTimeout分割

• web workers应用

远程脚本

• XMLHttpRequest

• jsonp

配置资源

• 文件合并

• 文件压缩

传输资源

• 采用gzip压缩

• 设置expiress响应头

• 使用cdn网络

• 通过http块编码，分片发送网页

载入javascript

• 应用defer和async

• 将script标签置底

• 动态创建script载入

• 延迟载入非初始化js

• 预加载js

作者：戡玉
链接：https://www.jianshu.com/p/66aa67c49cc5