为何外部CSS样式比内联样式加载速度慢很多？

• 渲染流程的本质差异
  浏览器渲染页面时，内联样式直接嵌在DOM元素里，解析DOM的同时就能读取样式信息，不需要额外匹配步骤。而外部CSS得先走完整流程：加载CSS文件→解析生成CSSOM→结合DOM生成渲染树。哪怕是本地SSD环境，20000条条目会把这一系列额外流程的开销放大，导致耗时增加。

• 选择器匹配的累积开销
  用.color类设置样式时，浏览器在样式计算阶段，要遍历每一个DOM元素检查是否带这个类名，20000次遍历匹配的耗时会被明显放大。内联样式属于元素的“行内声明”，完全跳过选择器匹配环节，直接应用样式，自然快很多。

• 渲染阻塞的影响
  外部CSS是浏览器的渲染阻塞资源，浏览器会暂停页面渲染，直到CSS加载解析完成，确保渲染树能正确生成。内联样式不存在这个阻塞问题，DOM解析到哪就能渲染到哪，所以看起来是“瞬间完成”。

• 样式优先级计算的简化
  内联样式优先级最高，浏览器不需要比对其他CSS规则的优先级（比如有没有其他类、标签选择器覆盖它），直接应用即可。而外部类样式需要参与优先级计算，单条计算虽快，但20000次累积下来也是不小的开销。

内容的提问来源于stack exchange，提问作者Sophie