zoukankan      html  css  js  c++  java
  • DOM性能优化

    1、测试JS执行时间
        console.time('hello');
        执行的测试代码
        console.timeEnd('hello');
    DOM优化原则:尽量减少DOM与JS的交互,让JS先把数据处理完成再去DOM交互。
        如:例1:
        console.time('hello');
        for(var i=0;i<5000;i++){
            obj.innerHTML+='a';
        }
        console.timeEnd('hello');
        优化情况:
        var str='';
        console.time('hello');
        for(var i=0;i<5000;i++){
            str+='a';
        }
        obj.innerHTML=str;
        console.timeEnd('hello');
    2、合并css样式 cssText
        //优化前
        console.time('hello');
        var obj_ul=document.getElementById('ul1');
        for(var i=0;i<50000;i++){
            var obj_li=document.createElement('li');
            obj_li.style.width='100px';
            obj_li.style.height='20px';
            obj_li.style.background='red';
            obj_ul.appendChild(obj_li);
        }
        console.timeEnd('hello');
        执行花费时间:960ms
        //优化后
        console.time('hello');
        var obj_ul=document.getElementById('ul1');
        for(var i=0;i<50000;i++){
            var obj_li=document.createElement('li');
            obj_li.style.cssText='100px;height:20px;background:red';
            obj_ul.appendChild(obj_li);
        }
        console.timeEnd('hello');
        执行花费时间:690ms
    3、文档碎片 createDocumentFragment() 相当于一个袋子,用于集中的收集元素再一并加载到dom中
        未优化前
        console.time('hello');
        var obj_ul=document.getElementById('ul1');
        for(var i=0;i<50000;i++){
            var obj_li=document.createElement('li');
            obj_ul.appendChild(obj_li);
        }
        console.timeEnd('hello');
        执行花费时间:140ms
        优化后
        console.time('hello');
        var obj_ul=document.getElementById('ul1');
        var obj_frag=document.createDocumentFragment();
        for(var i=0;i<50000;i++){
            var obj_li=document.createElement('li');
            obj_frag.appendChild(obj_li);
        }
        obj_ul.appendChild(obj_frag);
        console.timeEnd('hello');
        执行话费时间:100ms
    4、jQuery模板替换


       

  • 相关阅读:
    nodejs学习笔记
    javascript 中常用的判断和循环方法
    javascript中几种数据类型。
    通过Jquery找对象的方法
    js 原生代码找对象的方法
    网页设计时的渐进增强和优雅降级原则
    require.js笔记
    This in JavaScript
    [转] java.lang.IllegalArgumentException: Document base D:apache-tomcat-7.0.47webappsXXX错误
    后台获取前台表单数据
  • 原文地址:https://www.cnblogs.com/luodao1991/p/3508238.html
Copyright © 2011-2022 走看看