Karam
Articles68
Tags50
Categories14
CSS如何影响首屏加载时间

CSS如何影响首屏加载时间

为什么渲染流水线需要CSSOM

因为渲染引擎同样无法理解CSS样式,所以把CSSOM转换成一样的结构便于理解,作用是:为Javascript操作样式表提供能力,为布局树的合成提供样式,在这个过程中,因为构架布局树依赖执行Javascript,依赖于构建CSSOM,所以CSS也可能会阻塞页面的加载,无论是CSS和Javascript文件哪个先下载好,都要等CSS构建好CSSOM后在执行Javascript代码,最后构建布局树

影响页面展示的因素和优化策略

页面从请求到显示的过程为:

  1. 从当前页面发起请求去另一个界面,到提交数据阶段,此时还是之前的界面
  2. 提交数据后,页面进入空白等待时间,也就是“白屏时间”,这段时间要等待CSS,Javascript文件下载好,并构建好DOM和CSSOM,最后构建好布局树,最后经过一系列步骤准备渲染
  3. 等首次渲染完毕以后,页面就一点点绘制出来

步骤二就是我们主要优化白屏时间的地方,这个阶段主要包括,解析HTML,加载CSS,Javascript,构建CSSOM,执行Javascript,最后构建布局树
瓶颈主要在于:下载CSS和Javascript和执行Javascript

所以优化白屏时间的策略为:

  1. 一些在解析阶段不必要的Javascript文件用sync或者defer,异步解析
  2. 大的css文件,根据不同用途使用媒体查询属性拆分成多用途的css文件
  3. 可以通过webpack打包减少Javascript文件的大小
  4. 移除内联,html加载完即可开始渲染

还有更多优化白屏时间的策略,要根据实际情况来做