浏览器的关键渲染路径深入解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

在in面试被CTO问到的问题,谨以此翻译来表达对自己知识匮乏的鄙视。

当浏览器接收到从服务器发送过来的HTML页面信息,在将其绘画渲染到屏幕上之前会有许多的步骤要做。浏览器绘制页面需要做的这一系列行为我们称为关键渲染路径。

了解CRP的知识对于你理解如何提升网站渲染效率非常有用,CRP总共有六步:

  • 构建DOM树
  • 构建CSSOM树
  • 运行JavaScript
  • 创建渲染树
  • 生成布局

浏览器的关键渲染路径深入解析

  • 绘制页面

1、构造DOM树

DOM(Document Object Model)树是一个表示全解析过的HTML页面的对象。从根节点元素开始,会逐个创建页面中的每个元素/文本节点。元素包裹的其他元素会被作为子元素节点,并且每个节点会包含其全部的属性。例如:标签会有href属性与其节点关联。 举个例子:


  
  
  1. <html>   
  2. <head>   
  3.   <title>Understanding the Critical Rendering Path</title> 
  4.   <link rel="stylesheet" href="style.css"
  5. </head>   
  6. <body>   
  7.   <header> 
  8.       <h1>Understanding the Critical Rendering Path</h1> 
  9.   </header> 
  10.   <main> 
  11.       <h2>Introduction</h2> 
  12.       <p>Lorem ipsum dolor sit amet</p> 
  13.   </main> 
  14.   <footer> 
  15.       <small>Copyright 2017</small> 
  16.   </footer> 
  17. </body>   
  18. </html> 

上述HTML会被解析成如下的DOM树

浏览器的关键渲染路径深入解析

HTML很好的特点在于不需要全部加载完成页面所有内容才来显示网页,可以解析完成一部分内容呈现一部分。但是,其他资源比如CSS和JavaScript会阻止页面的渲染。

2、构建CSSOM树

CSSOM(CSS Object Model)是一个表示各个DOM相关样式的对象,它的表示方法与DOM相似,但是各个节点存在相关的样式值。不论其是显示、还是隐式声明这些样式。 在style.css文件中,我们有如下样式:


  
  
  1. body { font-size: 18px; }  
  2. header { color: plum; }   
  3. h1 { font-size: 28px; }  
  4. main { color: firebrick; }   
  5. h2 { font-size: 20px; }  
  6. footer { display: none; } 

接着会创建如下的CSSOM树:

浏览器的关键渲染路径深入解析

CSS一直被认为是一种渲染阻塞资源。因此如果在首次加载时没有全部解析资源内容就无法进行渲染树的构建。与HTML不同,CSS具有层叠继承的特性,因此不能进行局部加载。定义在文档后面的样式属性会覆盖或更改写之前定义的同类属性。即,如果如果CSS可以进行局部加载的话会导致出现加载错样式的情况。因此表明,CSS必须全部解析之后才能进行下一步。

如果CSS文件适用于当前设备的话,仅仅只是会阻塞渲染。标签可以接受media属性来指定特定样式宽度的特定媒体查询。例如:如果我们有一个样式表具有orientation:landscape的媒体属性,并且我们查看该页面使用portrait模式,就不会出现资源加载而产生的渲染阻塞情况。

CSS要会导致脚本阻塞,这是由于JavaScript文件必须等待CSSOM构建结束之后才进行加载。

运行JavaScript

JavaScript被认为是解析阻塞资源,这表示当解析HTML文档自身时候会被JavaScript给阻塞掉。

当解析器解析到<script>标签时,无论该资源是内部还是外链的都会停止解析,并且等到资源被下载并运行结束后才继续进行解析。这也是为什么如果我们有一个引用了JavaScript文件的元素,它必须被放在可视文档元素之外的原因。

为避免JavaScript解析阻塞,它可以通过设定async属性来要求其异步加载。


  
  
  1. <script async src="script.js"

4、创建渲染树(Render Tree)

渲染树是DOM树和CSSOM树的结合体,它代表最终会渲染在页面上的元素的结构对象。它表示只会关注可见内容,对于被隐藏或者CSS属性display:none的属性,不会被包含在结构内。

使用上面例子的DOM和CSSOM,渲染树被创建如下:

浏览器的关键渲染路径深入解析

5、生成布局

布局决定了浏览器视窗大小,它提供了上下文依赖的CSS样式,如百分比或窗口的单位。视窗尺寸通常通过<head>标签中的<meta>中的viewport设定来决定。如果不存在该标签,则通常默认为980px。

例如:最常用的meta viewport值是设定视窗大小与设备宽度对应:


  
  
  1. <meta name="viewport" content="width=device-width,initial-scale=1"

举个例子,如果用户使用设备访问网页,宽度为1000px。然后整体视窗尺寸就会基于这个宽度值了,比如50%就是500px,10vw就是100px。

6、绘制页面

最后,在绘制页面步骤。页面上的所有可见内容都会被转换为像素并呈现在屏幕上。

具体的绘制时间跟DOM数以及应用的样式有关。有些样式会话费更多的执行时间,比如复杂的渐变背景图片所需要的计算时间远超过简单固定背景色。

整合所有

想要看到关键渲染路径的执行流程,可以使用Chrome的DevTools:


  
  
  1. <html>   
  2. <head>   
  3.   <title>Understanding the Critical Rendering Path</title> 
  4.   <link rel="stylesheet" href="style.css"
  5. </head>   
  6. <body>   
  7.   <header> 
  8.       <h1>Understanding the Critical Rendering Path</h1> 
  9.   </header> 
  10.   <main> 
  11.       <h2>Introduction</h2> 
  12.       <p>Lorem ipsum dolor sit amet</p> 
  13.   </main> 
  14.   <footer> 
  15.       <small>Copyright 2017</small> 
  16.   </footer> 
  17.   <script src="main.js"></script> 
  18. </body>   
  19. </html> 

可以看关于页面加载时的事件日志,以下是我们获得的:

浏览器的关键渲染路径深入解析

  1. 发送请求:发送GET请求index.html
  2. 解析HTML然后发送请求:开始解析HTML并构建DOM,然后发送GET请求style.css和main.js。
  3. 解析样式表:根据style.css生成CSSOM
  4. 执行计算脚本:执行main.js
  5. 布局:基于HTML的元视窗标签,生成布局





本文作者:佚名
来源:51CTO
目录
相关文章
|
3天前
|
JavaScript 前端开发 开发者
Vue执行流程及渲染解析
【10月更文挑战第2天】
|
6天前
|
前端开发 JavaScript 异构计算
简述浏览器的渲染原理
浏览器渲染原理主要包括以下步骤:1)解析HTML文档生成DOM树;2)解析CSS生成CSSOM树;3)结合DOM与CSSOM生成渲染树;4)布局计算(回流)确定元素大小和位置;5)绘制(Paint)将节点转为图形内容;6)合成(Composite)多层图像。整个过程从文档解析到最终输出完整网页,并通过优化技术提升性能。
|
23天前
|
缓存 API 网络架构
Nuxt Kit API :路径解析工具
【9月更文挑战第20天】在 Nuxt Kit API 中,路径解析工具如 `resolvePath()`、`joinPaths()` 和 `relativePath()` 帮助开发者高效处理应用路径,确保资源准确加载,并支持动态路由与组件导入。这些工具提升了应用的灵活性和可扩展性,同时需注意路径准确性、跨平台兼容性和性能优化,以提升用户体验。
29 12
|
19天前
|
XML 编解码 JavaScript
从浏览器的解析规则认识XSS防御
从浏览器的解析规则认识XSS防御
26 2
|
2月前
|
JavaScript 搜索推荐 前端开发
从零搭建到部署:Angular与Angular Universal手把手教你实现服务器端渲染(SSR),全面解析及实战指南助你提升Web应用性能与SEO优化效果
【8月更文挑战第31天】服务器端渲染(SSR)是现代Web开发的关键技术,能显著提升SEO效果及首屏加载速度,改善用户体验。Angular Universal作为官方SSR解决方案,允许在服务器端生成静态HTML文件。本文通过具体示例详细介绍如何使用Angular Universal实现SSR,并分享最佳实践。首先需安装Node.js和npm。
34 1
|
2月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
81 0
|
2月前
|
区块链 C# 存储
链动未来:WPF与区块链的创新融合——从智能合约到去中心化应用,全方位解析开发安全可靠DApp的最佳路径
【8月更文挑战第31天】本文以问答形式详细介绍了区块链技术的特点及其在Windows Presentation Foundation(WPF)中的集成方法。通过示例代码展示了如何选择合适的区块链平台、创建智能合约,并在WPF应用中与其交互,实现安全可靠的消息存储和检索功能。希望这能为WPF开发者提供区块链技术应用的参考与灵感。
51 0
|
2月前
|
开发者 C# Windows
WPF与游戏开发:当桌面应用遇见游戏梦想——利用Windows Presentation Foundation打造属于你的2D游戏世界,从环境搭建到代码实践全面解析新兴开发路径
【8月更文挑战第31天】随着游戏开发技术的进步,WPF作为.NET Framework的一部分,凭借其图形渲染能力和灵活的UI设计,成为桌面游戏开发的新选择。本文通过技术综述和示例代码,介绍如何利用WPF进行游戏开发。首先确保安装最新版Visual Studio并创建WPF项目。接着,通过XAML设计游戏界面,并在C#中实现游戏逻辑,如玩家控制和障碍物碰撞检测。示例展示了创建基本2D游戏的过程,包括角色移动和碰撞处理。通过本文,WPF开发者可更好地理解并应用游戏开发技术,创造吸引人的桌面游戏。
120 0
|
2月前
|
Java 数据库 API
JSF与JPA的史诗级联盟:如何编织数据持久化的华丽织锦,重塑Web应用的荣耀
【8月更文挑战第31天】JavaServer Faces (JSF) 和 Java Persistence API (JPA) 分别是构建Java Web应用的用户界面组件框架和持久化标准。结合使用JSF与JPA,能够打造强大的数据驱动Web应用。首先,通过定义实体类(如`User`)和配置`persistence.xml`来设置JPA环境。然后,在JSF中利用Managed Bean(如`UserBean`)管理业务逻辑,通过`EntityManager`执行数据持久化操作。
43 0
|
2月前
|
缓存 网络协议 Linux
在Linux中,当用户在浏览器当中输入⼀个网站,计算机对dns解释经过那些流程?
在Linux中,当用户在浏览器当中输入⼀个网站,计算机对dns解释经过那些流程?

推荐镜像

更多