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

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

阅读 2.4k
1 个回答

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏