• createDocumentFragment 文档碎片提升dom增删的性能


    原理:

    操作dom会使得页面进行重新渲染,如果

    经常性的对dom就行操作或者一次性操作dom较多,每一次操作都会使页面进行重新渲染,降低页面加载性能。

    针对IE9以下,可以使用文档碎片(documentFragment)的方式就行dom操作的存储,最后再讲文档碎片加个指定节点上。

    但是会影响标准浏览器性能(影响不大)。

    例子:

    html:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>文档碎片</title>
    	</head>
    	<body>
    		<ul id="ul">
    		</ul>
    	</body>
    </html>
    

      

    javascript】:

    var ul = document.getElementById("ul")
    var oldDate = new Date().getTime();
    var flagMent = document.createDocumentFragment();
    for(var i=1 ; i<= 10000; i++){
    	var uli = document.createElement("li");
    	uli.innerHTML = "这是第"+i+"个li";
    	//ul.appendChild(uli);
    	flagMent.appendChild(uli);
    }
    ul.appendChild(flagMent);
    var newDate = new Date().getTime();
    console.log(newDate-oldDate)
    

      

  • 相关阅读:
    23种设计模式-桥接模式
    23种设计模式-单列模式
    23种设计模式-迭代器模式
    23种设计模式-组合模式
    23种设计模式-备忘录模式
    23种设计模式-适配器模式
    23种设计模式-状态模式
    SVN的安装和应用
    线程、线程池
    条形码
  • 原文地址:https://www.cnblogs.com/zzd0916/p/7743051.html
Copyright © 2020-2023  润新知