手记

前端性能小记

关注点分离

  • 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


0人推荐
随时随地看视频
慕课网APP