What tools would you use to find a performance bug in your code?chromeWhat are some ways you may improve your website’s scrolling performance?在绑定了scroll事件后，chrome不知道事件会不会阻止滚动，所以会有100ms但延迟来判断是否会调用preventDefault，然后再滚动，所以chrome提供了passive来忽略事件中带prevenDefaultscroll被频繁触发，减少handler执行评论requestAnimationFrame //按照1/60秒的速度触发debounce //多次触发合成一个1个throttle //执行一个后，一段时间不被触发1.兼容性不好。不灵活，动画流程2.精度搞2.3 使用settimeout精度不高Explain the difference between layout, painting and compositing.JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。Style：计算样式，这个过程是根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后，就确定了每个 DOM 元素上该应用什么 CSS 样式规则。Layout：布局，上一步确定了每个 DOM 元素的样式规则，这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。web 页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。比如，<body> 元素的宽度的变化会影响其子元素的宽度，其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说，布局过程是经常发生的。Paint：绘制，本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个 DOM 元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。Composite：渲染层合并，由上一步可知，对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。如果改变了layout属性，也就是改变了元素的几何属性，高宽，位置就会自动重排如果只改变了paint only 例如背景 文字颜色，则不会影响布局，浏览器会跳过布局如果改变既不要布局也不要绘制的属性，则浏览器会跳过绘制,例如动画和滚动优化js执行使用requestAnimationFrame来实现视觉变化使用web worker来执行长时间的任务使用微任务来执行多个桢的dom更改使用chrome profile来评估性能缩小样式计算范围降低选择器的复杂性，使用以类为中心的方法，例如BEM，减少伪类选择器 例如 nth减少必须计算样式的元素数量（例如在改变了body元素的类，所有子元素都要重新计算样式）避免大型，复杂的布局和布局抖动使用flex布局模型，新的flex比旧的flex和浮动更快避免布局操作，例如改变元素几何属性避免强制同步布局，先读取样式值，然后进行样式更改避免布局抖动，多次强制布局同步简化绘制的复杂度，减小绘制区域除了transform和opacity,其他属性更改都会触发绘制绘制通常时像素管道中开最大的通过层的提上和动画的编排来减少绘制区域通过创建新层，将定期重绘的元素放在新层上，避免其他层的绘制will-change属性，或者transform: translateZ(0)降低绘制复杂度，涉及模糊阴影比红框时间更长减少层数量，使用合成层属性坚持使用 transform 和 opacity 属性更改来实现动画。使用 will-change 或 translateZ 提升移动的元素。避免过度使用提升规则；各层都需要内存和管理开销。使用debounce，去除抖动requestAnimationFrame或者debounce优化滚动程序