CSS如何影响首次加载时的白屏时间？

最新推荐文章于 2021-11-10 16:20:45 发布

xxz15152

最新推荐文章于 2021-11-10 16:20:45 发布

阅读量228

点赞数 1

文章标签： javascript css

本文链接：https://blog.csdn.net/u013448372/article/details/108954950

版权

上一篇文章我们介绍了DOM的概念，以及JavaScript是如何阻塞DOM生成的，今天我们继续探究CSS的工作原理，以及对页面渲染的影响

渲染流程

结合下面的代码看一下渲染流程：

//theme.css
div { 
    color: green;
    background-color: #000;
}

html片段：

<html>
<head>
    <link href="theme.css" rel="stylesheet">
</head>
<body>
    <div>some text</div>
</body>
</html>

这段代码的渲染如下示意图所示:

在这里插入图片描述
首先发起主页面的请求，发送的请求被送到网络进程中去执行，网络进程接收到数据之后发送给渲染进程，渲染进程开始解析html并构建DOM，请求html到渲染DOM中间有空闲时间，这里是发起请求的事件。请求渲染进程接受HTML文件字节流时，会先开启一个预解析线程，如果遇到JavaScript或者CSS文件，那么会先下载这些数据，这段代码里会先下载css文件，下载的过程中，渲染进程处于空闲状态

CSSDOM

渲染进程无法直接识别CSS，需要先将其解析成渲染引擎能够识别的CSSDOM，CSSDOM可以被JavaScript操作，也可以为布局树的合成提供基础的样式表。

当有了DOM和CSSDOM，渲染引擎就可以开始合成DOM树了，DOM树会将不需要显示的标签过滤掉，如html，head，display为none的，有了布局树之后，开始对DOM进行样式计算，然后是位置计算，然后就可以进行绘制操作了。

上面例子是一个只有CSS的，下面看一个中间有JavaScript脚本的

//theme.css
div { 
    color: green;
    background-color: #000;
}


<html>
<head>
    <link href="theme.css" rel="stylesheet">
</head>
<body>
    <div>geekbang com</div>
    <script>
        console.log('time.geekbang.org')
    </script>
    <div>geekbang com</div>
</body>
</html>

这个例子中，除了CSS样式之外，还有JavaScript脚本，其绘制流程如下:

在这里插入图片描述
上一篇文章中我们说了，如果外部文件有CSS样式表，又有JavaScript脚本，那么会优先执行JavaScript脚本，因为JavaScript脚本可能会修改当前状态下的DOM。

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

渲染流水线影响了首次页面展示的速度，那么有什么方法可以提高首页的渲染速度呢？

通常情况下，页面显示的瓶颈主要有下载CSS文件，下载JavaScript文件，执行JavaScript脚本

所以内联样式会比外部引入CSS文件渲染更快

JavaScript文件的引入可以使用defer关键字

自适应的css样式采用媒体查询的方式会处理的更快

xxz15152

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS如何影响首次加载时的白屏时间？

上一篇文章我们介绍了DOM的概念，以及JavaScript是如何阻塞DOM生成的，今天我们继续探究CSS的工作原理，以及对页面渲染的影响渲染流程结合下面的代码看一下渲染流程：//theme.cssdiv { color: green; background-color: #000;}html片段：<html><head> <link href="theme.css" rel="stylesheet"></head&g.
复制链接

扫一扫