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模板替换


       

  • 相关阅读:
    K8s--09 编写mysql的持久化deployment
    K8s--08 prometheus监控
    K8s--07 configMap资源
    K8s--06 K8s数据持久化
    k8S--05 K8s控制器类型
    k8s--04 部署harbor作为k8s镜像仓库
    K8s--03 资源类型
    K8s--02 K8S部署
    K8s--01 Kubernetes简介
    video2gift环境安装(Theano等)
  • 原文地址:https://www.cnblogs.com/luodao1991/p/3508238.html
Copyright © 2011-2022 走看看