如何提升浏览器CSS的网络性能？ – csswizardry

21-01-25 banq

总结用于加载CSS的最佳网络性能做法：
  • 延迟加载Start Render不需要的任何CSS：
    • 这可能是关键CSS；
    • 或将CSS分成依据媒体Media不同的文件。
  • 避免@import：
    • 在您所有的HTML中；
    • 特别是在CSS中；
    • 并当心Preload Scanner预加载扫描仪的怪事。
  • 注意同步CSS和JavaScript的顺序：
    • CSS之后加载JavaScript在CSSOM完成之前不会运行。
    • 因此，如果您的JavaScript不依赖于CSS，
      • 在CSS之前加载它；
    • 但如果确实取决于您的CSS：
      • 在CSS之后加载它。
  • 根据DOM需要加载CSS：
    • 这将不会阻塞“Start Render”，并允许进行渐进式渲染。

更详细案例点击标题进入原文