zoukankan      html  css  js  c++  java
  • Javascript高性能编程-提高Dom访问速度

           在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度。下面是对如何优化的一些总结:

           将需要多次操作的节点存储在一个变量中,避免多次获取。

           对于大多数浏览器来说innerHTML操作比Dom操作速度要快,最新的浏览器则相反,但对于大多数日常操作来说具体差异并不大,另外,如果需要新创建的html片段中的脚本能够执行则需要使用Dom操作。
           不建议用数组的 length 属性做循环判断条件。访问集合的 length 比数组的length 还要慢。当每次迭代过程访问集合的 length 属性时,它导致集合器更新。可以简单的将length保存在一个变量中,也可以将集合先存储在数组中。
           遍历 children 比 childNodes 更快,因为集合项更少。
           重绘和重排版是负担很重的操作,可能导致网页应用的用户界面失去相应。所以,十分有必要尽可能减少这类事情的发生。减少方法有三种,一:将需要影响的集合先隐藏,在处理完成后再展示;二:创建需操作节点的备份,对备份处理完成后替换原节点;三:创建节点群,对节点群操作完成后替换到原节点,最高效,操作方式如:

    1 var fragment = document.createDocumentFragment();//创建节点群,文档片段
    2 appendDataToElement(fragment, data);//增加节点到节点群
    3 document.getElementById('mylist').appendChild(fragment);//仅引发一次重新排版

    另外对行内样式的操作可以通过document.getElementById("doc").style.cssText修改元素style属性

  • 相关阅读:
    AC自动机 [模板]
    ChonSu [ZOJ 2684]
    Quad Tiling [POJ 3420]
    LCA 最近公共祖先 [POJ 1330]
    强连通分量[trajan]
    高斯消元 [模板]
    01K Code [HDU 1545]
    Cycle Game [ZOJ 2686]
    清除Eclipse中的内置浏览器中的历史记录(REF)
    第三方的 NET 数据库连接提供者,Lightswitch
  • 原文地址:https://www.cnblogs.com/xietong/p/6231659.html
Copyright © 2011-2022 走看看