教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 《高性能javascript》随记 – DOM Scripting

《高性能javascript》随记 – DOM Scripting

发布时间:2016-10-29   编辑:jiaochengji.com
教程集为您提供《高性能javascript》随记 – DOM Scripting等资源,欢迎您收藏本站,我们将为您提供最新的《高性能javascript》随记 – DOM Scripting资源

DOM操作的代价非常昂贵,对元素节点的访问和修改、样式、布局的改变以及DOM事件的绑定都影响着网页的性能。


批量修改DOM

如果要对元素节点进行多次读写,那么最好的方式是:把多次操作在DOM节点树外统一处理好,然后再一次性更新DOM节点树,具体的方法大致包含下面几种。

  • 先隐藏要操作的元素节点,然后对这些节点进行操作,最后再显示出来。
  • 先克隆要操作的元素节点,然后对克隆出来的节点进行操作,最后覆盖原来的元素节点。
  • 在文档外创建并更新一个文档片段(createDocumentFragment()),然后在附加在原始节点上。

缓存信息布局

浏览器通过队列化修改和批量运行的方法,尽量减少重排版的次数。当你查询布局信息(如偏移量、滚动条位置、风格属性)的时候,浏览器将会刷新队列并执行所有修改操作,以返回最新的数值。所以,尽量减少对布局信息的查询次数,并用局部变量参与计算。

将元素提出动画流

重排版有时只影响渲染树的一小部分,但有时候也会是一大部分,下面这些步骤可以避免对大部分页面进行重排版:

  • 对动画元素使用绝对定位,使他脱离页面布局流。
  • 启动元素动画。当它扩大时会覆盖部分页面。
  • 当动画结束时,重新定位,从而只一次下移文档其他元素的位置。

事件托管

当一个页面存在大量的元素,并且很多元素都有一个或多个事件绑定的时候,会影响页面的性能,这个时候才用事件托管机制可以提升页面的运行性能:你只需要监听事件,看看他们是不是你感兴趣的元素发出的。这样可以最小化事件句柄数量。

您可能感兴趣的文章:
《高性能javascript》随记 – DOM Scripting
jQuery源码分析系列
《高性能javascript》随记 – Loading and Excecution
求索:GSAP的动画快于jQuery吗?/ 续 V1.1
细说 jQuery 元素篇(一) – 理解 DOM
细说 jQuery DOM操作篇(一) – 属性操作
细说 jQuery 元素篇(二) – 选择符
前端优化-Javascript篇(4.DOM优化)
如何忘却jQuery,开始使用JavaScript原生API
解密jQuery事件核心 – 委托设计(二)

[关闭]
~ ~