从前端来看页面的卡顿是最为影响用户体验的，而好的代码是保证页面平稳高性能运行的基石，前端页面卡顿的原因有很多，可以从渲染机制和运行分成两大类：
（1）渲染不及时，页面掉帧
（2）网页内存占用过高，运行卡顿
两大类又细分为：
渲染不及时，页面掉帧
长时间占用js线程
Js是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。当计算时间过长时，这样必然会出现渲染不及时。
渲染不及时的原因：
浏览器的渲染频率一般是60HZ，即要求1帧的时间为1s / 60 = 16.67ms，浏览器显示页面的时候，要处理js逻辑，还要做渲染，每个执行片段不能超过16.67ms。实际上，浏览器内核自身支撑体系运行也需要消耗一些时间，所以留给我们的时间差不多只有10ms。
常见的优化方式：
采用requestIdleCallback和requestAnimationFrame，任务分片
页面回流和重绘较多
解决：文章来源：https://www.toymoban.com/news/detail-428621.html
1.尽量使用css属性简写:如：用boder代替boder-width，boder-style，boder-color
2.批量修改元素样式 elem.className
3.尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
4.需要创建多个DOM节点时,使用DocumentFragment创建。
因为:每次创建一个页面就会发生回流，所以采用DocumentFragment批量创建
5.尽量去写css表达式。因为每次调用都会重新计算值(包括加载页面
资源加载阻塞
解决：
（1）优化资源加载，代码拆分，按需加载，降低CSS对渲染的阻塞，尽早的加载CSS，降低加载的大小
网页内存占用过高，运行卡顿【这里需要注意下js的内存回收机制】
意外的全局变量引起的内存泄漏
解决：
（1）使用严格模式避免
闭包引起的内存泄漏
解决：
（1）对于共享变量设置null
遗忘的定时器
解决：
（1）及时回收定时器
循环引用
解决：
（1）循环引用就是对象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)
}
}
解决：
function handle () {
var element = document.getElementById(“testId”);
element.onclick = function (){
alert(element.id)
}
element = null
DOM删除时没有解绑事件
解决：
（1）比如删除一个button，但是并没有解除button上的事件
没有清理的DOM元素引用
dom节点或事件占用内存过大
解决：
（1）采用虚拟列表和事件委托文章来源地址https://www.toymoban.com/news/detail-428621.html
到了这里，关于在前端开发中，什么样的代码会导致性能很低？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
