前端性能优化(一)——DOM操作与重绘重排

DOM操作

使用js操作DOM的代价是昂贵的,有一个贴切的比喻,DOM与ECMScript就像两座小岛,而他们之间由一个收费的桥梁连接,ECMScript每次访问DOM都要“收费”。
所以DOM操作的性能优化有两点技巧:

  1. 将运算尽量放在ECMScript一端,减少DOM操作
  2. 对DOM对象进行缓存
重绘与重排

当DOM中的元素几何属性发生变化时,就会发生重排,重排一定会触发重绘;当元素只是发生样式变化时,只会触发重绘。
重排的代价是非常昂贵的
所以应该尽量避免重排的发生:

  1. 对同一DOM元素的操作尽量写在一起,最小化重排的次数
  2. 不要在会引起重排的语句中穿插需要返回最新布局信息的语句,比如offsetTop、scrollTop、clientTop、getComputedStyle等
  3. 使用fragment元素,批量操作DOM元素时使之脱离文档流,操作完之后再一次性加入文档
  4. 将需要多次触发重排的元素的position设置为absolute或fixed,以避免触发其他元素的重排
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容