详解CSS中优先级和StackingContext等高级特性，带你更深入了解CSS！！

像素渲染流水线

提升性能需要在构造流水线中每个元素都需要注意：

• Style
  • 降低样式选择器的复杂度
  • 减少需要执行样式计算的元素的个数
• Layout
  • 尽可能避免触发布局
    • 几乎所有的布局都是在整个文档范围内发生的。
    • 使用flexbox替代老的布局模型
    • 避免强制同步布局事件的发生
    • 避免快速连续的布局

• Paint
  • 除了transform和opacity之外，修改任何属性都会触发绘制
  • 提升移动或渐变元素的绘制层
  • 减少绘制区域
  • 简化绘制的复杂度

CSS 选择器性能

• 一个选择器的最右端是这个选择器的关键条件（Key Selector）
• 浏览器按照从右向左的方式匹配选择器，因此应该将更具体的条件尽可能放在右端。
• 避免使用*规则
• 选择器尽可能短
• ID选择符前面不要再加限定符
• 没必要用Tag选择符限定Class选择符

更多编程相关知识，请访问：编程入门！！

以上就是详解CSS中优先级和Stacking Context等高级特性，带你更深入了解CSS！！的详细内容，更多请关注 第一PHP社区 其它相关文章！