浏览器工作原理与实践--渲染流水线:CSS如何影响首次加载时的白屏时间

在上一篇文章中我们详细介绍了DOM的生成过程,并结合具体例子分析了JavaScript是如何阻塞DOM生成的。那本文我们就继续深入聊聊渲染流水线中的CSS。因为CSS是页面中非常重要的资源,它决定了页面最终显示出来的效果,并影响着用户对整个网站的第一体验。所以,搞清楚浏览器中的CSS是怎么工作的很有必要,只有理解了CSS是如何工作的,你才能更加深刻地理解如何去优化页面。

本文我们先站在渲染流水线的视角来介绍CSS是如何工作的,然后通过CSS的工作流程来分析性能瓶颈,最后再来讨论如何减少首次加载时的白屏时间。

渲染流水线视角下的CSS

我们先结合下面代码来看看最简单的渲染流程:

//theme.css
div{ color : coral;background-color:black
}
<html>
<head><link href="theme.css" rel="stylesheet">
</head>
<body><div>geekbang com</div>
</body>
</html>

这两段代码分别由CSS文件和HTML文件构成,我们来分析下打开这段HTML文件时的渲染流水线,你可以先参考下面这张渲染流水线示意图:

含有CSS的页面渲染流水线

下面我们结合上图来分析这个页面文件的渲染流水线。

含有CSS的页面渲染流水线

下面我们结合上图来分析这个页面文件的渲染流水线。

首先是发起主页面的请求,这个发起请求方可能是渲染进程,也有可能是浏览器进程,发起的请求被送到网络进程中去执行。网络进程接收到返回的HTML数据之后,将其发送给渲染进程,渲染进程会解析HTML数据并构建DOM。这里你需要特别注意下,请求HTML数据和构建DOM中间有一段空闲时间,这个空闲时间有可能成为页面渲染的瓶颈。

上一篇文章中我们提到过,当渲染进程接收HTML文件字节流时,会先开启一个预解析线程,如果遇到JavaScript文件或者CSS文件,那么预解析线程会提前下载这些数据。对于上面的代码,预解析线程会解析出来一个外部的theme.css文件,并发起theme.css的下载。这里也有一个空闲时间需要你注意一下,就是在DOM构建结束之后、theme.css文件还未下载完成的这段时间内,渲染流水线无事可做,因为下一步是合成布局树,而合成布局树需要CSSOM和DOM,所以这里需要等待CSS加载结束并解析成CSSOM。

那渲染流水线为什么需要CSSOM呢?

和HTML一样,渲染引擎也是无法直接理解CSS文件内容的,所以需要将其解析成渲染引擎能够理解的结构,这个结构就是CSSOM。和DOM一样,CSSOM也具有两个作用,第一个是提供给JavaScript操作样式表的能力,第二个是为布局树的合成提供基础的样式信息。这个CSSOM体现在DOM中就是document.styleSheets。具体结构你可以去查阅相关资料,这里我就不过多介绍了,你知道CSSOM的两个作用是怎样的就行了。

有了DOM和CSSOM,接下来就可以合成布局树了,我们在前面《05 | 渲染流程(上):HTML、CSS和JavaScript文件,是如何变成页面的?》这篇文章中讲解过布局树的构造过程,这里咱们再简单回顾下。等DOM和CSSOM都构建好之后,渲染引擎就会构造布局树。布局树的结构基本上就是复制DOM树的结构,不同之处在于DOM树中那些不需要显示的元素会被过滤掉,如display:none属性的元素、head标签、script标签等。复制好基本的布局树结构之后,渲染引擎会为对应的DOM元素选择对应的样式信息,这个过程就是样式计算。样式计算完成之后,渲染引擎还需要计算布局树中每个元素对应的几何位置,这个过程就是计算布局。通过样式计算和计算布局就完成了最终布局树的构建。再之后,就该进行后续的绘制操作了。

这就是在渲染过程中涉及到CSS的一些主要流程。

了解了这些之后,我们再来看看稍微复杂一点的场景,还是看下面这段HTML代码:

//theme.css
div{ color : coral;background-color:black
}
<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>

这段代码是我在开头代码的基础之上做了一点小修改,在body标签内部加了一个简单的JavaScript。有了JavaScript,渲染流水线就有点不一样了,可以参考下面这张渲染流水线图:

含有JavaScript和CSS的页面渲染流水线

那我们就结合这张图来分析含有外部CSS文件和JavaScript代码的页面渲染流水线,上一篇文章中我们提到过在解析DOM的过程中,如果遇到了JavaScript脚本,那么需要先暂停DOM解析去执行JavaScript,因为JavaScript有可能会修改当前状态下的DOM。

不过在执行JavaScript脚本之前,如果页面中包含了外部CSS文件的引用,或者通过style标签内置了CSS内容,那么渲染引擎还需要将这些内容转换为CSSOM,因为JavaScript有修改CSSOM的能力,所以在执行JavaScript之前,还需要依赖CSSOM。也就是说CSS在部分情况下也会阻塞DOM的生成。

我们再来看看更加复杂一点的情况,如果在body中被包含的是JavaScript外部引用文件,Demo代码如下所示:

//theme.css
div{ color : coral;background-color:black
}
//foo.js
console.log('time.geekbang.org')
<html>
<head><link href="theme.css" rel="stylesheet">
</head>
<body><div>geekbang com</div><script src='foo.js'></script><div>geekbang com</div>
</body>
</html>

从上面代码可以看出来,HTML文件中包含了CSS的外部引用和JavaScript外部文件,那它们的渲染流水线是怎样的呢?可参考下图:

含有JavaScript文件和CSS文件页面的渲染流水线

从图中可以看出来,在接收到HTML数据之后的预解析过程中,HTML预解析器识别出来了有CSS文件和JavaScript文件需要下载,然后就同时发起这两个文件的下载请求,需要注意的是,这两个文件的下载过程是重叠的,所以下载时间按照最久的那个文件来算。

后面的流水线就和前面是一样的了,不管CSS文件和JavaScript文件谁先到达,都要先等到CSS文件下载完成并生成CSSOM,然后再执行JavaScript脚本,最后再继续构建DOM,构建布局树,绘制页面。

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

前面我们为什么要花这么多文字来分析渲染流水线呢?主要原因就是渲染流水线影响到了首次页面展示的速度,而首次页面展示的速度又直接影响到了用户体验,所以我们分析渲染流水线的目的就是为了找出一些影响到首屏展示的因素,然后再基于这些因素做一些针对性的调整。

那么接下来我们就来看看从发起URL请求开始,到首次显示页面的内容,在视觉上经历的三个阶段。

  • 第一个阶段,等请求发出去之后,到提交数据阶段,这时页面展示出来的还是之前页面的内容。关于提交数据你可以参考前面《04 | 导航流程:从输入URL到页面展示,这中间发生了什么?》这篇文章。

  • 第二个阶段,提交数据之后渲染进程会创建一个空白页面,我们通常把这段时间称为解析白屏,并等待CSS文件和JavaScript文件的加载完成,生成CSSOM和DOM,然后合成布局树,最后还要经过一系列的步骤准备首次渲染。

  • 第三个阶段,等首次渲染完成之后,就开始进入完整页面的生成阶段了,然后页面会一点点被绘制出来。

影响第一个阶段的因素主要是网络或者是服务器处理这块儿,前面文章中我们已经讲过了,这里我们就不再继续分析了。至于第三个阶段,我们会在后续文章中分析,所以这里也不做介绍了。

现在我们重点关注第二个阶段,这个阶段的主要问题是白屏时间,如果白屏时间过久,就会影响到用户体验。为了缩短白屏时间,我们来挨个分析这个阶段的主要任务,包括了解析HTML、下载CSS、下载JavaScript、生成CSSOM、执行JavaScript、生成布局树、绘制页面一系列操作。

通常情况下的瓶颈主要体现在下载CSS文件、下载JavaScript文件和执行JavaScript。

所以要想缩短白屏时长,可以有以下策略:

  • 通过内联JavaScript、内联CSS来移除这两种类型的文件下载,这样获取到HTML文件之后就可以直接开始渲染流程了。

  • 但并不是所有的场合都适合内联,那么还可以尽量减少文件大小,比如通过webpack等工具移除一些不必要的注释,并压缩JavaScript文件。

  • 还可以将一些不需要在解析HTML阶段使用的JavaScript标记上sync或者defer。

  • 对于大的CSS文件,可以通过媒体查询属性,将其拆分为多个不同用途的CSS文件,这样只有在特定的场景下才会加载特定的CSS文件。

通过以上策略就能缩短白屏展示的时长了,不过在实际项目中,总是存在各种各样的情况,这些策略并不能随心所欲地去引用,所以还需要结合实际情况来调整最佳方案。

总结

好了,今天就介绍到这里,下面我来总结下今天的内容。

我们首先介绍了CSS在渲染流水线中的位置,以及CSS是如何影响到渲染流程的;接下来我们通过渲染流水线分析了从发出请求到页面首次绘制的三个阶段;最后重点介绍了第二个白屏阶段以及优化该阶段的一些策略。

通过今天的内容我们可以知道虽然JavaScript和CSS给我们带来了极大的便利,不过也对页面的渲染带来了很多的限制,所以我们要关注资源加载速度,需要小心翼翼地处理各种资源之间的关联关系。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/812737.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构复习指导之绪论(数据结构的基本概念)

文章目录 绪论&#xff1a; 考纲内容 知识框架 复习提示 1.数据结构的基本概念 1.1基本概念和术语 1.数据 2.数据元素 3.数据对象 4.数据类型 5.数据结构 1.2数据结构三要素 1.数据的逻辑结构 2.数据的存储结构 3.数据的运算 绪论&#xff1a; 考纲内容 算法时…

开源AI图像识别:支持文件批量识别快速对接数据库存储

随着数字化转型的不断深入&#xff0c;图像识别技术在各行各业中的应用越来越广泛。文件封识别作为图像识别技术的一个分支&#xff0c;能够有效地提高文件处理的自动化程度和准确性。本文将探讨文件封识别技术的原理、应用场景以及如何将识别后的内容批量对应数据库字段进行存…

CSS特效---HTML+CSS实现3D旋转卡片

1、演示 2、一切尽在代码中 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title&…

Day23_学点儿Java_多态复习

1 做错的选择题 Java中的多态性是通过以下哪个机制实现的&#xff1f;&#xff08;&#xff09; A. 方法重载 B. 方法覆盖 C. 抽象类 D. 接口2 多态复习 2.1 学点儿Java_Day7_继承、重载、重写、多态、抽象类 2.2 面向对象四大基本特征 封装、抽象、继承、多态 封装 面向…

Linux文件IO

文章目录 1.文件操作的知识点2.文件的理解3.标记位4.文件的本质5.文件的应用5.1 重定向5.1.1 重定向的接口5.1.2 缓冲区的理解 6.文件描述符2(stderr)的深入理解7.磁盘文件7.1 物理磁盘7.2 磁盘的存储结构7.3 磁盘存储的逻辑7.4 细化磁盘存储 8.dd指令挂载 1.文件操作的知识点 …

OpenHarmony编译构建系统

这篇来聊聊OpenHarmony的编译构建&#xff0c;经过前面的实践&#xff0c;再来看编译构建。 编译构建概述 在官网中提到了&#xff0c;OpenHarmony编译子系统是以GN和Ninja构建为基座&#xff0c;对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能…

C++ | Leetcode C++题解之第26题删除有序数组中的重复项

题目&#xff1a; 题解&#xff1a; class Solution { public:int removeDuplicates(vector<int>& nums) {int n nums.size();if (n 0) {return 0;}int fast 1, slow 1;while (fast < n) {if (nums[fast] ! nums[fast - 1]) {nums[slow] nums[fast];slow;}f…

uni-app实现分页--(2)分页加载,首页下拉触底加载更多

业务逻辑如下&#xff1a; api函数升级 定义分页参数类型 组件调用api传参

如何优化卷积算法

我们可以写一个卷积算法。 for (int oh 0; oh < OH; oh) {for (int ow 0; ow < OW; ow) {for (int oc 0; oc < OC; oc) {C[oh][ow][oc] 0;for (int kh 0; kh < KH, kh){for (int kw 0; kw < KW, kw){for (int ic 0; ic < IC, ic){C[oh][ow][oc] A[o…

Java JDK 22全新发布 - 猫头虎博主带你一起深入了解JDK22!

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

消息队列RabbitMQ入门学习

目录 1.初识MQ 1.1.同步调用 1.2.异步调用 1.3.技术选型 2.RabbitMQ 2.1.收发消息 2.1.1.交换机 2.1.2.队列 2.1.3.绑定关系 2.1.4.发送消息 3.SpringAMQP 3.1WorkQueues模型 3.1.1消息接收 3.1.2测试 3.1.3.能者多劳 3.1.3.总结 3.2.交换机类型 3.3.Fanout交…

C++设计模式:门面模式(十二)

1、概念与定义 “接口隔离”模式&#xff1a;在组建构建过程中&#xff0c;某些接口之间直接的依赖常常会带来很多问题、甚至根本无法实现。采用添加一层间接&#xff08;稳定&#xff09;接口&#xff0c;来隔离本来相互紧密关联的接口是一种常见的解决方案。 门面设计模式定…

SpringCloud、SpringBoot、JDK版本对应关系

SpringCloud与SpringBoot 版本 官网说明&#xff1a;https://spring.io/projects/spring-cloud#overview SpringBoot 与 JDK版本关系 发布说明&#xff1a;https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.0-Release-Notes SpringBoot 3.x不再支持JDK1.…

低空经济再火,通过了解飞行汽车产业链与核心技术,我发现了汽车行业从业者新的机会!

低空经济最近又一次成为资本市场热议的话题&#xff0c;同时在两会报告中大篇幅的写入低空经济&#xff0c;并将其定义成为“新质生产力的代表”&#xff0c;低空经济是什么&#xff1f;与我们此前所聊过的飞行汽车之间又有什么样子的联系&#xff1f;我们作为汽车行业的从业者…

Unity笔记之Android打包、减小包体之类的问题

打包问题 问题1&#xff1a; 一般大部分问题就是JDK、SDK、NDK之类的问题。现在是其他的问题&#xff0c;之前遇到过&#xff0c;好久没玩android了都忘了。 这试了半天&#xff0c;结果是需要有密钥库。那就给他创建一个填一下就行了 &#xff08;在网上看了半天&#xff…

Android 加密之 打包为arr 项目依赖或者为jar

Android 加密之 打包为arr 项目依赖或者为jar 1. 修改build.gradle plugins {//id com.android.application// 1. 修改为libraryid com.android.library }android {namespace com.dzq.iccid2compileSdk 33defaultConfig {//applicationId "com.dzq.iccid2"// 2. 注…

【数据结构】05树

树 树1.2 结点的分类1.3 结点间的关系1.4 树的其他概念1.5 树的性质 2. 二叉树2.1 满二叉树2.2 完全二叉树2.3 二叉排序树&#xff08;二叉查找树&#xff09; 3. 二叉树的存储结构3.1 二叉树顺序存储结构3.2 二叉树的链式存储结构 4. 二叉树的遍历4.1 层次遍历4.1 前序遍历4.2…

如何申请阿里云服务器学生优惠,入口在这呢!

阿里云学生服务器免费申请&#xff0c;之前是云翼计划学生服务器9元/月&#xff0c;现在是高校计划&#xff0c;学生服务器可以免费申请&#xff0c;先完成学生认证即可免费领取一台云服务器ECS&#xff0c;配置为2核2G、1M带宽、40G系统盘&#xff0c;在云服务器ECS实例过期之…

Elasticsearch初步了解学习记录

目录 前言 一、ElasticSearch是什么&#xff1f; 二、使用步骤&#xff08;python版&#xff09; 1.引入包 2.连接数据库 3.创建索引 4.写入数据 5.查询数据 三、相关工具介绍 1.ES浏览器插件 总结 前言 随着数据量的不断增加&#xff0c;传统的查询检索在速度上遇…

IO——文件IO

1.1 概念 又称为系统IO&#xff0c;是系统调用&#xff0c;是操作系统提供的函数接口。 posix中定义的一组用于输入输出的函数。 1.2 特点 (1)没有缓冲机制&#xff0c;效率较低 (2)围绕文件标识符操作&#xff0c;非负整数&#xff0c;依次分配 (3) 文件IO默认打开了三个文…