运行时性能优化1.减少浏览器渲染过程的重绘和重排解析HTML生成DOM树；解析CSS生成CSSOM规则树；合并DOM树和CSSOM规则树生成渲染树；遍历渲染树开始布局，计算DOM节点的大小和位置；调用GPU绘制，合成图层；将渲染树的每个节点绘制到屏幕上。Rearrangement当改变DOM元素的位置或大小时，会导致浏览器重新生成渲染树。这个过程称为重排。重绘渲染树重新生成时，渲染树的每个节点都必须绘制到屏幕上。这个过程称为重绘。并非所有操作都会导致重排，例如更改字体颜色，只会重绘。回流导致重绘，重绘不导致回流。重排和重绘都是非常昂贵的操作，因为Javascript引擎线程和GUI渲染线程是互斥的，一次只能工作其中一个。什么操作会引起重排添加或删除DOM元素改变元素的位置改变元素的大小改变元素的内容改变浏览器窗口的大小如何减少重绘用js修改样式时，用class代替直接js修改样式；如果要对DOM元素进行一系列操作，可以将DOM元素从文档流中取出，修改完成后再将其带回文档中。推荐使用隐藏元素（display:none）或者文档片段（DocumentFragement），都可以很好的实现这个方案。2、使用事件委托事件委托使用事件冒泡的原理，可以只制定一个事件处理器来管理某一类的所有事件。大多数鼠标事件和键盘事件都适合使用事件委托技术，使用事件委托可以节省内存。//善用事件委托constul=document.querySelector('ul')ul.onclick=(e)=>{consttarget=e.targetif(target.nodeName==='LI'){console.log(target.innerText)}}//坏事件委托没有使用，事件直接绑定到lidocument.querySelector('li').forEach((e)=>{e.target.onclick=function(){console.log(this.innerText)}})3.if-else比较switchif(name==='张三'){}elseif(name==='李四'){}elseif(name==='王舞'){}elseif(name==='赵六'){}elseif(name==='钱琪'){}//useswitchwith(name){case'张三':breakcase'李四':breakcase'王舞':breakcase'赵六':breakcase'钱琦':break}以上情况最好用switch。假设name的值为千七，if-else需要判断5次，而switch只需要判断一次。4.查字典表继续上面的例子。当条件语句过多时，使用if-else和switch并不是最好的选择。这时候可以使用字典表：constmap={'张三':result1,'李四':result2,'王舞':result2,'赵六':result2,'千玺':result2,}返回地图[名称]5。使用requestAnimationFrame实现视觉变化我们知道大部分设备屏幕的刷新率是60次/秒，也就是说每一帧的平均时间是16.6毫秒。使用Javascript实现动画效果时，最好的情况是代码每次都从帧的开头开始执行。保证Javascript在帧开始运行的唯一方法是使用requestAnimationFrame。functionundateScreen(){//设置动画...}window.requestAnimationFrame(undateScreen)如果使用setTimeout或者setInterval来实现动画，回调函数会在frame的某个时间点运行，这个时间点可能正好在最后，而这可能会经常导致我们掉帧，造成卡顿。6.使用位运算位运算比其他数学运算和布尔运算快得多。Round~~5.34//5~~'5.34'//5~~undefined//0~~null//07.不要覆盖原生方法无论你的JavaScript代码如何优化，它都比不上原生方法。因为nativemethods是用C/C++写的，编译成机器码，成为浏览器的一部分。在可用时使用本地方法，尤其是数学运算和DOM操作。8、降低CSS选择器的复杂度浏览器读取CSS选择器，遵循从选择器的右向左读取的原则。#app.wrapdiv{color:white;}1.查找所有div元素2.检查结果1中的元素是否有类名wrap的父元素3.检查结果2中的元素是否有id为wrap的父元素isapp因此可以得出结论：1.选择器越短越好2.尽量使用高优先级的选择器3.避免使用通配符*9。使用flex布局flex布局比早期的浮动、相对定位和绝对定位布局性能更好。10.使用transform和opacity属性变化实现动画在CSS中，transform和opacity这两个属性变化不会触发重排和重绘，它们是compositor可以单独处理的属性。
