前端性能优化之css性能的三种优化方案

前端性能优化之css性能提升的三种方案,对非首屏的css做异步或预加载处理

dom和css的关系:

并行关系: dom解析和css解析是并行的
串行关系: dom渲染依赖css,css放在头部会阻塞dom渲染。

1. css 直接预加载



2. dom渲染完成在去加载,利用onlaod操作css的media或rel属性

设置link标签media属性为noexis,含义为浏览器会认为当前样式表不适用当前类型,会在不阻塞页面渲染的情况下再进行下载。加载完成后,将media的值设为screen或all,从而让浏览器开始解析CSS


通过rel属性将link元素标记为alternate可选样式表,也能实现浏览器异步加载。同样别忘了加载完成之后,将rel设回stylesheet


你可能感兴趣的:(前端,css,性能优化)