html - 在页面渲染过程中css选择器的效率问题

问题描述

问 题

1.为什么css规则是从右往左匹配的？
2.rendering+paintin能否反映选择器的效率？

解决方案

第一个问题解释起来颇为复杂，要写好一大段。。
给个传送门，社区里早就有人问过了：https://segmentfault.com/q/10...

第二个问题
Rendering
Invalidate layout 当DOM更改导致页面布局失效时触发
Layout 页面布局计算执行时触发
Recalculate style Chrome重新计算元素样式时触发
Scroll 内嵌的视窗滚动时触发

Painting
Composite Layers Chrome的渲染引擎完成图片层合并时触发
Image Decode 一个图片资源完成解码后触发
Image Resize 一个图片被修改尺寸后触发
Paint 合并后的层被绘制到对应显示区域后触发

选择器只是其中很小的一个部分，其性能消耗搞不好还不如几个fixed定位元素不断影响布局重绘来的少

这篇关于html - 在页面渲染过程中css选择器的效率问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！