摘要：页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。
What tools would you use to find a performance bug in your code?
chrome
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精度不高
JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。
Style：计算样式，这个过程是根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后，就确定了每个 DOM 元素上该应用什么 CSS 样式规则。
Layout：布局，上一步确定了每个 DOM 元素的样式规则，这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。web 页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。比如，
元素的宽度的变化会影响其子元素的宽度，其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说，布局过程是经常发生的。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优化滚动程序
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101231.html
摘要：观察者模式也称发布订阅模式它的作用就是当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，自动刷新对象状态举个生活比较常见常见的例子比如你去面试之后，面试官看你表现不错，最后会跟你要联系方式，以便之后可以联系你。 观察者模式也称发布-订阅模式,它的作用就是当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，自动刷新对象状态 举个生活比较常见常见的例子,比如你去面试之后，...
摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...
摘要：本来很久以前就该把前端面试系列的文章更新完，但是自己懒，加上发现网上有些文章确实写的不错，就一直拖着没写。但是有次去图书馆，看到一本书叫前端面试江湖，索性找了一个时间，把全部内容整合到一起。 本来很久以前就该把前端面试系列的文章更新完，但是自己懒，加上发现网上有些文章确实写的不错，就一直拖着没写。但是有次去图书馆，看到一本书叫《前端面试江湖》，索性找了一个时间，把全部内容整合到一起。这...
摘要：本来很久以前就该把前端面试系列的文章更新完，但是自己懒，加上发现网上有些文章确实写的不错，就一直拖着没写。但是有次去图书馆，看到一本书叫前端面试江湖，索性找了一个时间，把全部内容整合到一起。 本来很久以前就该把前端面试系列的文章更新完，但是自己懒，加上发现网上有些文章确实写的不错，就一直拖着没写。但是有次去图书馆，看到一本书叫《前端面试江湖》，索性找了一个时间，把全部内容整合到一起。这...
阅读 1379·2021-10-08 10:04
阅读 2683·2021-09-22 15:23
阅读 2726·2021-09-04 16:40
阅读 1174·2019-08-29 17:29
阅读 1494·2019-08-29 17:28
阅读 2990·2019-08-29 14:02
阅读 2222·2019-08-29 13:18
阅读 841·2019-08-23 18:35
