赋值后页面不渲染_在前端开发中，有哪些因素会导致页面卡顿

前端开发不像后端那样，很少出现有大量算法的场景，但是前端性能也是需要优化的。好的代码是保证网页平稳高性能运行的基础，结合以往开发中遇到的场景，本文对前端网页卡顿的原因进行了梳理和分析，并给出了对应的解决方法。

前端页面卡顿的原因有很多，从渲染机制和运行上可以分为两大类，分别是：

• 渲染不及时，页面掉帧
• 网页内存占用过高，运行卡顿

两种类型又可细分如下：

渲染不及时，页面掉帧

长时间占用js线程
页面回流和重绘较多
资源加载阻塞

内存过大导致的页面卡顿

内存泄漏导致内存过大

• 意外的全局变量引起的内存泄漏
• 闭包引起的内存泄漏
• 被遗忘的定时器
• 循环引用
• DOM删除时没有解绑事件
• 没有清理的DOM元素引用

dom节点或事件占用内存过大

一、渲染

1，长时间占用js线程

浏览器包括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，任务分片