在前端开发中，什么样的代码会导致性能很低？

从前端来看页面的卡顿是最为影响用户体验的，而好的代码是保证页面平稳高性能运行的基石，前端页面卡顿的原因有很多，可以从渲染机制和运行分成两大类：

（1）渲染不及时，页面掉帧

（2）网页内存占用过高，运行卡顿

两大类又细分为：

渲染不及时，页面掉帧

长时间占用js线程

Js是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。当计算时间过长时，这样必然会出现渲染不及时。

 渲染不及时的原因：

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

常见的优化方式：

    采用requestIdleCallback和requestAnimationFrame，任务分片

页面回流和重绘较多

解决：

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）采用虚拟列表和事件委托