《高性能javascript》随记 – DOM Scripting


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


批量修改DOM

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

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

缓存信息布局

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

将元素提出动画流

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

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

事件托管

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


3 responses on “《高性能javascript》随记 – DOM Scripting

发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>