前端性能小记

关注点分离

  • 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

发表评论

邮箱地址不会被公开。 必填项已用*标注