前端面试笔记 - 性能

时间 2019-12-06

原文原文链接

What tools would you use to find a performance bug in your code?

chromeweb

What are some ways you may improve your website's scrolling performance?

在绑定了scroll事件后，chrome不知道事件会不会阻止滚动，因此会有100ms但延迟来判断是否会调用preventDefault，而后再滚动，因此chrome提供了passive来忽略事件中带prevenDefault
scroll被频繁触发，减小handler执行评论

requestAnimationFrame //按照1/60秒的速度触发
debounce //屡次触发合成一个1个
throttle //执行一个后，一段时间不被触发
1.兼容性很差。不灵活，动画流程
2.精度搞
2.3 使用settimeout精度不高chrome

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,其余属性更改都会触发绘制
绘制一般时像素管道中开最大的
经过层的提上和动画的编排来减小绘制区域dom
- 经过建立新层，将按期重绘的元素放在新层上，避免其余层的绘制
- will-change属性，或者transform: translateZ(0)
下降绘制复杂度，涉及模糊阴影比红框时间更长

减小层数量，使用合成层属性

坚持使用 transform 和 opacity 属性更改来实现动画。
使用 will-change 或 translateZ 提高移动的元素。
避免过分使用提高规则；各层都须要内存和管理开销。

使用debounce，去除抖动

requestAnimationFrame或者debounce优化滚动程序