性能优化之 dom 优化

[pengkobe]

https://www.kancloud.cn/kancloud/web_performance_optimization/80990

• 优化节点修改，先 clone 再 replace
• 创建 DocumentFragment，在其中插入节点后再添加到页面
• 可以通过直接设置元素的 className 直接设置，只会触发一次 reflow
• 正常页面的 DOM 元素数量一般不应该超过 1000
• DOM 操作优化
  • 最小化 DOM 访问次数，尽可能在 js 端执行
  • 动画中使用绝对定位，使用拖放代理
  • 使用事件委托来减少事件处理器的数量
  • 使用速度更快的 API，比如 querySelectorAll 和 firstElementChild
  • 批量修改样式时，离线操作 DOM 树
  • 如果需要多次访问某个 DOM 节点，请使用局部变量存储对它的引用
• 优化 DOM 交互
  • 最小化现场更新
  • 多使用innerHTML, 当使用 innerHTML 设置为某个值时，后台会创建一个 HTML 解释器，然后使用内部的 DOM 调用来创建 DOM 结构，而非基于 JAVASCRIPT 的 DOM 调用。由于内部方法是编译好的而非解释执行，故执行的更快。 适用于于大的DOM更改
• 减少回流( reflow)
  • 保证N次创建，1 次写入
  • 在对 DOM 操作之前，把要操作的元素，先从当前 DOM 结构中删除
  • 使用更改 classNam e的方式替换 style.xxx=xxx 的方式
  • 使用style.cssText = '';一次写入样式
  • 避免设置过多的行内样式。
  • 添加的结构外元素尽量设置它们的位置为 fixed 或 absolute
  • 避免使用表格来布局 +避免在 CSS 中使用 JavaScript expressions(IE only)。
  • 将获取的DOM数据缓存起来。这种方法，对获取那些会触发回流操作的属性（比如offsetWidth等）尤为重要。
  • 当对HTMLCollection对象进行操作时，应该将访问的次数尽可能的降至最低，最简单的，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环的效率。