浏览器在加载一个页面的时候，会经过一个管道机制：
JavaScript -> Style（样式树） -> Layout（布局树） -> Paint（像素绘制） -> Composite(合成)
理论上，页面加载到最后展现给用户看，这个过程都会经过上述管道的处理，其中，layout布局的过程是相当耗费性能的，也就是我们常说的reflow；而paint的过程相对前者来说性能耗费较低，这个就是我们常常在修改css颜色等属性时导致页面的repaint。
那么，是不是每个css属性都会经过上述管道的所有环节呢？
不是的。
我们在开发页面编写css样式的时候，应该对每个css属性的trigger机制有一定的了解，这样才能在性能上做到优化，下面贴一下css属性的trigger机制：
https://csstriggers.com/
注：有两个属性，能过避开layout和paint的过程，就是transforms 和 opacity。
希望对大家编写优秀的css样式有帮助。
浏览器在加载一个页面的时候，会经过一个管道机制：JavaScript -> Style（样式树） -> Layou...
问题背景:昨晚在某个群，看到一个问题: 大概是CSS动画,color属性能够生效，transform属性却没能生效...
什么是 CSS 继承?哪些属性能继承，哪些不能？ CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。 有...
CSS基础样式 什么是 CSS 继承?哪些属性能继承，哪些不能？ 一。无继承性的属性 1、display：规定元素...
一、什么是 CSS 继承?哪些属性能继承，哪些不能？ CSS继承，就是指父元素中设置的属性，能够继承到子孙元素。 ...
1、什么是 CSS 继承?哪些属性能继承，哪些不能？ css继承是指当html中某元素未设置任何属性时，其父元素的...
css可继承属性与不可继承属性有哪些呢？不够熟练应用可能导致用冗长的代码去处理样式问题，不断的覆盖... my g...
按钮的点击时出现黑色边框的问题 添加css属性 按钮的点击后出现蓝色边框的问题 添加css属性
提升css渲染性能 谨慎使用expensive属性比如nth-child伪元素，position: fixed, ...
什么是 CSS 继承?哪些属性能继承，哪些不能？ 提示：写个demo来说明 继承就是子元素继承了父元素的CSS样式...
本文标题：CSS属性导致的性能问题
本文链接：https://www.haomeiwen.com/subject/bsugextx.html
网友评论