zoukankan      html  css  js  c++  java
  • 高性能JS笔记3——DOM编程

    一、访问与修改DOM

     DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响。

     减少访问DOM的次数,把运算尽量留在JS端操作。

    二、innerHTML 对比 DOM 方法

    1、对于原生的DOM方法和innerHTML比较,性能相差无几。

    2、对于大量操作,针对不同浏览器,性能不一样,因此取决于经常用的浏览器。

    3、建议从可读性、稳定性、编码习惯来决定使用哪种方式。在对字符串经过优化后,innerHTML性能可以得到大幅提升。

    三、操作上的优化

    1、节点克隆

    例如:

    var tr = document.createElement("tr");
    var otd = document.createElement("td");
    for(var i = 1; i<=1000; i++)
    {
        tr.appendChild(otd.cloneNode(false));
    }
    View Code

    2、HTML集合

    document 中的方法getElementByName、getElementByTag、getElementByClassName 和属性images、links、forms返回的都是集合。

    由于HTML集合一直与文档保持着联系,每次你需要更新最新信息时,都会重复执行查询的过程,哪怕只是获取集合里的元素。

    在相同的情况下,遍历一个数组,明显快于一个HTML集合。

    访问一个较小的集合,很多情况下缓存Length就够了。toArray()函数可做为一个通用的集合转数组函数,但转换时,需考虑转换后,会多遍历一次。

    3、选择最高效的API

    DOM API 提供了多种方法,使用时尽量选择最高效的API,例如,遍历查找childNodes 会比nextSibling 慢很多。

    4、元素节点

    children 比childNodes 快很多,childElementCount 比childNodes.length 快。

    5、使用选择器时,尽量合并一次操作。

    如:document.querySelectorAll("div.warning, div.notice")

    6、不要再重绘布局改变时,查询它。如:

    bodystyle.color='red';
    tem=computed.backgroundColor;
    bodystyle.color='white';
    tem=computed.backgroundImage;
    //高效写法
    bodystyle.color='red';
    bodystyle.color='white';
    tem=computed.backgroundColor;
    tem=computed.backgroundImage;
    View Code

    7、改变样式

    多次操作style 样式,不如直接修改其CSS样式,style.cssText,改变className更容易维护。

    8、批量修改DOM

    当需要批量修改DOM时,可以通过以下步骤来减少重绘或重排的次数:

      a、使元素脱离文档

        隐藏元素,应用修改,再重新显示。
        在DOM之外创建一个子树,再将其拷回文档。
        将原始元素拷贝到一个脱离文档的节点中,修改副本,再替换原始元素。

      b、对其应用多重改变

      c、把元素带回文档中

    9、缓存布局信息

    将频繁操作的元素信息,保存到变量里,再进行操作。

    10、让元素脱离动画流

    元素的大小、位置动画变化时,会带来大量的文档重绘。尽量使用元素的绝对定位来使其脱离文档流。

    11、tr:hover 类似效果性能会降低很多。

    12、事件委托

    避免事件的多次绑定和冒泡,阻止默认动作。

  • 相关阅读:
    git使用(1) --git本地基础操作
    openCV在ubuntu上的使用(0)
    x86汇编指令整理
    读书笔记--鸟哥的linux_2
    读书笔记--鸟哥的linux_1
    #转 c语言中.h文件的作用
    读书笔记--《java语言程序设计--基础篇》
    matlab plot
    关于天文中的坐标系的介绍
    FIR的学习1
  • 原文地址:https://www.cnblogs.com/windy2008/p/5746674.html
Copyright © 2011-2022 走看看