《高性能javascript》随记 - DOM Scripting

DOM操纵的价值异常高贵,对元素节点的接见和修正、款式、规划的转变以及DOM事宜的绑建都影响着网页的机能。

批量修正DOM

假如要对元素节点举行屡次读写,那末最好的体式格局是:把屡次操纵在DOM节点树外一致处理好,然后再一次性更新DOM节点树,详细的要领大抵包括下面几种。

  • 先隐蔽要操纵的元素节点,然后对这些节点举行操纵,末了再显示出来。
  • 先克隆要操纵的元素节点,然后对克隆出来的节点举行操纵,末了掩盖本来的元素节点。
  • 在文档外建立并更新一个文档片断(createDocumentFragment()),然后在附加在原始节点上。

缓存信息规划

浏览器经由过程行列化修正和批量运转的要领,只管削减重排版的次数。当你查询规划信息(如偏移量、滚动条位置、作风属性)的时刻,浏览器将会革新行列并实行一切修正操纵,以返回最新的数值。所以,只管削减对规划信息的查询次数,并用局部变量介入盘算。

将元素提出动画流

重排版偶然只影响衬着树的一小部份,但偶然刻也会是一大部份,下面这些步骤能够防止对大部份页面举行重排版:

  • 对动画元素运用相对定位,使他离开页面规划流。
  • 启动元素动画。当它扩展时会掩盖部份页面。
  • 当动画结束时,从新定位,从而只一次下移文档其他元素的位置。

事宜托管

当一个页面存在大批的元素,而且许多元素都有一个或多个事宜绑定的时刻,会影响页面的机能,这个时刻才用事宜托管机制能够提拔页面的运转机能:你只需要监听事宜,看看他们是否是你感兴趣的元素发出的。如许能够最小化事宜句柄数目。

    原文作者:MockingBird
    原文地址: https://segmentfault.com/a/1190000000620979
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞