欢迎浏览我公司网站!!
公司动态
在前端开发中,有哪些因素会导致页面卡顿
时间: 2024-07-08浏览次数:
渲染不及时,页面掉帧网页内存占用过高,运行卡顿长时间占用js线程页面回流和重绘较多资源加载阻塞内存泄漏导致内存过大意外的全局变量引起的内存泄漏闭包引起的内存泄漏被遗忘的定时器循环引用DOM删除时没有解绑事件没有清理的DOM元
  • 渲染不及时,页面掉帧
  • 网页内存占用过高,运行卡顿
长时间占用js线程
页面回流和重绘较多
资源加载阻塞
内存泄漏导致内存过大
  • 意外的全局变量引起的内存泄漏
  • 闭包引起的内存泄漏
  • 被遗忘的定时器
  • 循环引用
  • DOM删除时没有解绑事件
  • 没有清理的DOM元素引用
dom节点或事件占用内存过大

浏览器包括js线程和GUI线程,而二者是互斥的,当长时间占用js线程时,会导致渲染不及时,出现页面卡顿。

实例1:

document.body.html('为什么不先渲染我');

//程序
$.ajax({
   url: '',
   async: false
})


//运行结果会在ajax执行完毕后,再去渲染页面

采用同步方式获取数据,会导致gui线程挂起,数据返回后再执行渲染。

实例2:

function a (){
    // arr的长度过长时会导致页面卡顿
    arr.forEach(item => {
        ...
    })
}

let inputDom = document.getElementById('input')
let arr = document.getElementsByClassName('.tag')
input.onchange = a

计算时间过长导致页面渲染不及时

渲染不及时的原因:

浏览器的渲染频率一般是60HZ,即要求1帧的时间为1s / 60=16.67ms,浏览器显示页面的时候,要处理js逻辑,还要做渲染,每个执行片段不能超过16.67ms。实际上,浏览器内核自身支撑体系运行也需要消耗一些时间,所以留给我们的时间差不多只有10ms。

常见的优化方式:

  • 采用requestIdleCallback和requestAnimationFrame,任务分片

实例

function Task(){
    this.tasks = [];
}
//添加一个任务
Task.prototype.addTask = function(task){
    this.tasks.push(task);
};
//每次重绘前取一个task执行
Task.prototype.draw = function(){
    var that = this;
    window.requestAnimationFrame(function(){
        var tasks = that.tasks;        if(tasks.length){
            var task = tasks.shift();
            task();
        }
        window.requestAnimationFrame(function(){that.draw.call(that)});
    });
};
  • 尽量减少layout

获取scrollTop、clentWidth等维度属性时都会触发layout以获取实时的值,所以在for循环里面应该把这些值缓存一下

实例:

优化之前

for(var i = 0; i < childs.length; i++){
   childs.style.width = node.offsetWidth + "px";
}

优化之后

var width = node.offsetWidth;for(var i = 0; i < childs.length; i++){
   childs.style.width = width + "px";
}
  • 简化DOM结构

当DOM结构越复杂时,需要重绘的元素也就越多。所以dom应该保持简单,特别是那些要做动画的,或者要监听scroll/mousemove事件的。另外使用flex比使用float在重绘方面会有优势。

  • js资源放在body之前
  • 行内script阻塞
  • css加载会阻塞DOM树渲染(css并不会阻塞DOM树的解析)
  • 资源过大阻塞

浏览器有自己的一套垃圾回收机制,主流垃圾回收机制是标记清除,不过在ie中访问原生dom会采用引用计数方式机制,而如果闲置内存得不到及时回收,就会导致内存泄漏。

简单介绍下两种垃圾回收机制(GC Garbage Collection)

定义和用法:

当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:"离开环境"。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

流程:

  • 浏览器在运行的时候会给存储再内存中的所有变量都加上标记
  • 去掉环境中的变量以及被环境中引用的变量的标记
  • 如果还有变量有标记,就会被视为准备删除的变量
  • 垃圾回收机制完成内存的清除工作,销毁那些带标记的变量,并回收他们所占用的内存空间

定义和用法:引用计数是跟踪记录每个值被引用的次数。

基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收

的对象。

流程

  • 声明了一个变量并将一个引用类型的值赋值给这个变量,这个引用类型值引用次数就是1
  • 同一个值又被赋值另一个变量,这个引用类型的值引用次数加1
  • 当包含这个引用类型值得变量又被赋值另一个值了,那么这个引用类型的值的引用次数减1
  • 当引用次数变成0时, 说明这个值需要解除引用
  • 当垃圾回收机制下次运行时,它就会释放引用次数为0 的值所占用的内存
  • 意外的全局变量引起的内存泄漏

解决:使用严格模式避免。

实例

<button onclick="createNode()">添加节点</button>
  <button onclick="removeNode()">删除节点</button>
  <div id="wrapper"></div>
  <script>
  var text = [];
  function createNode() { 
      text.push(new Array(1000000).join('x'));  
      var textNode = document.createTextNode("新节点"),
          div = document.createElement('div');
      div.appendChild(textNode);
      document.getElementById("wrapper").appendChild(div);  
  }
  
  function removeNode() {
      var wrapper = document.getElementById("wrapper"),
          len = wrapper.childNodes.length;
      if (len > 0) {
          wrapper.removeChild(wrapper.childNodes[len - 1]);  
      }
  }
  </script>

text变量在createNode中引用,导致text不能被回收

  • 闭包引起的内存泄漏

实例:

 <button onclick="replaceThing()">第二次点我就有泄漏</button>
  <script>
  var theThing = null;
  var replaceThing = function () {
      var originalThing = theThing;
      var unused = function () {
          if (originalThing) {
              console.log("hi");
          };
      }
      theThing = {
          longStr: new Array(1000000).join('*'),
          someMethod: function someMethod() {
              console.log('someMessage');
          }
      };
  };

上面那段代码泄漏的原因在于有两个闭包:unused和someMethod,二者共享父级作用域。

因为后面的 theThing 是全局变量,someMethod是全局变量的属性,它引用的闭包作用域(unused 和somMethod共享)不会释放,由于originalThing在共享的作用域中,造成originalThing不会释放,随着 replaceThing 不断调用,originalThing 指向前一次的 theThing,而新的theThing.someMethod又会引用originalThing ,从而形成一个闭包引用链,而 longStr是一个大字符串,得不到释放,从而造成内存泄漏。

解决方法:在 replaceThing 的最后添加 originalThing=null

  • 被遗忘的定时器

实例:

var someResource=getData(); 
setInterval(function(){ 
    var node=document.getElementById('Node'); 
    if(node){ 
        // 处理 node 和 someResource 
        node.innerHTML=JSON.stringify(someResource)); 
    }
}, 1000);

计时器回调函数没被回收(计时器停止才会被回收)

  • 循环引用

循环引用就是对象A中包含另一个指向对象B的指针,B中也包含一个指向A的引用。

因为IE中的BOM、DOM的实现使用了COM,而COM对象使用的垃圾收集机制是引用计数策略。所以会存在循环引用的问题

解决方法:手工断开js对象和DOM之间的链接。赋值为null。

实例:

function handle () {
    var element = document.getElementById(testId);
    element.onclick = function (){
        alert(element.id)
    }
}

element绑定的事件中引用了element上的属性

onclick事件是一个闭包,闭包可以维持函数内局部变量,使其得不到释放。也就是说element变量得不到释放,每调用一次element都会得不到释放,最终内存泄漏

解决方法:

function handle () {
    var element = document.getElementById(testId);
    element.onclick = function (){
        alert(element.id)
    }
    element = null
}
  • DOM删除时没有解绑事件

比如删除一个button,但是并没有解除button上的事件

  • 没有清理的DOM元素引用

详细分析见我另外一篇文章 网页dom元素过多为什么会导致页面卡顿

实例:

function addDom(){
        let d = document.createDocumentFragment();
       
        for(var i = 0;i<30;i++){
            let li = document.createElement('li')
            li.addEventListener('click', function(e) {
                let _this = e.target;
                let dom = e.target.tagName.toLowerCase();
                _this.style.color = 'red';
            })
        li.innerHTML = `</div>
            <h4>
                测试图片 
            </h4>
            <img style="height:20px;width:100px" src=https://zhuanlan.zhihu.com/p/"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591105123139&di=90a63b4962d0b4405ce65c2096a676c2&imgtype=0&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D3769023270%2C3433174748%26fm%3D214%26gp%3D0.jpg"/>
            </div>`
            d.appendChild(li)
        }
        document.getElementById('app').appendChild(d)
    }

上面的代码是下拉加载,每次都会添加dom,最终导致内存过大

解决办法:采用虚拟列表和事件委托

总结:页面卡顿在实际开发过程中有很多场景,可以使用内存泄漏检测工具(sIEve,针对IE)进行检测,也可以使用chrome提供的timeline和profiles,或者performance,这里不再详细介绍。

参考:cnblogs.com/yanglongbo/

blog.csdn.net/c11073138


Copyright © 2002-2022 盛煌-盛煌娱乐-盛煌全球注册认证站 版权所有

粤IP*******

平台注册入口