这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
性能优化
理解css就要知道css是如何工作的,以下是css的工作流程
- 浏览器载入 HTML
- 将 HTML 文件转化成一个 DOM
- 浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式,JavaScript 则会稍后进行处理
- 浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
- 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
- 网页展示在屏幕上（这一步被称为着色）。
简化一下CSS的最终表现分为以下四步：
Recalculate Style->Layout->Paint Setup and Paint->Composite Layers
先是Paint Setup and Paint后面才是Composite Layers所以我们只要清楚css样式作用于哪一层就能知晓是导致重排还是重绘,例如transform是位于Composite Layers层，只会导致重绘,而width、left、margin等则是位于Layout层，会导致重排,所以相对而言使用 transform 实现的效果肯定比width、left、margin这些更加流畅,在另一方面浏览器也会针对 transform 等开启GPU加速,,外元素设置fixed或absolute的position后，修改他们的css也是不会导致重排,知晓这些可以说对css性能优化的理解会更深
css应用
但凡了解一些前端都会知道对于css在前端的使用方法可以说是群魔乱舞,先是有less,scss,postcss,后有styled-component等cssInJs方案taiwindcss,windicss,unocss等功能类框架,似乎很多都和当初关注点分离的要求有些背道而驰,我们还是需要有自己的见解,在何时的情况下用合适的方案,对于鼠鼠来说taiwindcss这些功能类方案是当下最好的选择
