当前位置：首页 > news >正文

深入解析：从URL到页面渲染的完整过程与性能优化【页面渲染、重排、重汇】

news 2024/11/15 10:57:09

在前端开发中，深入理解URL到页面渲染的过程以及哪些CSS属性不会引起重排（Reflow），对于优化性能和提升用户体验至关重要。本文将分为两个部分详细探讨这两个主题。

一、URL 到页面渲染的过程

当用户在浏览器中输入一个URL并访问一个网页时，浏览器会经历一系列复杂的步骤来将URL转换为用户可见的页面。以下是这一过程的详细分解：

1.1 输入URL并解析

用户输入URL：
- 用户在浏览器的地址栏中输入URL（例如 https://www.example.com）并按下回车键。
URL解析：
- 浏览器解析URL，确定协议（如HTTP/HTTPS）、主机名（如 www.example.com）、端口号（默认80或443）、路径、查询参数等。

1.2 DNS 查询

检查浏览器缓存：
- 浏览器首先检查本地DNS缓存，看看是否已经存储了该主机名对应的IP地址。
操作系统缓存：
- 如果浏览器缓存中没有，浏览器会请求操作系统的DNS缓存。
路由器和ISP：
- 如果操作系统缓存中也没有，DNS请求会被发送到路由器，进一步传递到互联网服务提供商（ISP）的DNS服务器。
DNS解析过程：
- 如果ISP的DNS服务器没有缓存该域名，它会递归查询根DNS服务器、顶级域（TLD）DNS服务器，直到找到权威DNS服务器并获取IP地址。
返回IP地址：
- 最终，解析到的IP地址会被返回给浏览器，并存储在本地缓存中以备未来使用。

1.3 建立TCP连接

TCP三次握手：
- 浏览器与服务器之间建立TCP连接，过程包括发送SYN包、接收SYN-ACK包、发送ACK包，完成三次握手。
HTTPS中的TLS握手：
- 如果使用HTTPS协议，还需要进行TLS握手，确保数据传输的加密和安全。TLS握手包括协商加密算法、交换证书、生成会话密钥等步骤。

1.4 发送HTTP请求

构建HTTP请求：
- 浏览器构建包含请求方法（如GET、POST）、URL路径、请求头（如User-Agent、Accept）、Cookies等信息的HTTP请求。
发送请求：
- 通过已建立的TCP连接，将HTTP请求发送到服务器。

1.5 服务器处理请求

服务器接收请求：
- 服务器接收并解析HTTP请求，确定所需资源。
处理业务逻辑：
- 服务器可能需要处理数据库查询、执行业务逻辑、调用其他服务等。
生成HTTP响应：
- 服务器生成HTTP响应，包含状态码（如200 OK、404 Not Found）、响应头（如Content-Type、Set-Cookie）、响应体（如HTML、JSON数据等）。
发送响应：
- 通过TCP连接，将HTTP响应发送回浏览器。

1.6 浏览器接收响应并渲染页面

接收响应：
- 浏览器接收到服务器的HTTP响应。
处理响应头：
- 浏览器解析响应头，处理缓存策略（如Cache-Control、Expires）、内容类型等。
解析HTML：
- 浏览器开始解析HTML文档，构建DOM树（Document Object Model）。
解析CSS：
- 解析所有关联的CSS文件，构建CSSOM树（CSS Object Model）。
构建渲染树：
- 将DOM树和CSSOM树结合，生成渲染树（Render Tree），只包含可见元素及其样式。
布局（Reflow）：
- 根据渲染树计算每个节点的位置和大小，执行布局过程，确定元素在页面上的具体位置。
绘制（Paint）：
- 将渲染树中的每个节点绘制到屏幕上，形成可见的页面。
合成（Composite）：
- 对页面进行合成处理，将不同的绘制层（如固定元素、动画元素）合成最终的像素图像。

1.7 资源加载与异步操作

JavaScript执行：
- 解析和执行JavaScript代码，可能会修改DOM或CSS，触发重排（Reflow）或重绘（Repaint）。
异步资源加载：
- 异步加载的资源（如图片、视频、Ajax请求）会在页面渲染完成后继续加载和处理。
事件处理：
- 用户交互事件（如点击、滚动、输入）会被监听和处理，可能会引发动态的DOM更新和重新渲染。

1.8 详细解析过程

在URL到页面渲染的过程中，涉及多个解析过程，这些解析对于正确显示网页非常重要。以下是关于HTML、CSS、JavaScript的详细解析过程：

1.8.1 HTML解析过程

当浏览器接收到服务器返回的HTML文档时，HTML解析器会按照以下步骤解析HTML并生成DOM树：

标记化（Tokenization）：
- 浏览器将HTML文档的内容逐字读取，并将其转化为不同的标记（Token）。这些标记包括开始标签、结束标签、文本节点、注释等。例如 <div> 是一个开始标签，而 </div> 是对应的结束标签。
树构建：
- 在标记化的同时，浏览器根据这些标记构建DOM树。每个HTML标记会被转换为一个DOM节点，并按照嵌套关系构成树形结构。例如，<div><p>text</p></div> 会生成一个<div>元素节点，内部包含一个<p>元素节点，<p>节点包含一个文本节点。
错误处理：
- HTML具有容错性，当HTML文档中有不合规的部分时，浏览器会自动修正这些错误。例如，如果某个标签未闭合，浏览器会尝试推断它的闭合位置，以保持解析的顺利进行。

1.8.2 CSS解析过程

浏览器解析CSS的过程稍微复杂一些，因为CSS不仅描述了样式，还涉及到继承、层叠和优先级的计算。CSS解析的主要步骤如下：

CSS标记化：
- 浏览器首先将CSS代码分割为若干个标记（Tokens），每个标记代表一个样式规则。比如，color: red; 会被解析为属性（color）和值（red）。
规则解析：
- CSS解析器将每个样式规则解析为对象，这些对象描述了选择器和对应的样式属性。例如，选择器 h1 对应的样式属性可能是 font-size: 20px;。
层叠计算：
- 浏览器根据CSS层叠样式表模型计算优先级（CSS Specificity），确定哪些样式规则应用于哪个元素。当多个规则作用于同一个元素时，浏览器根据优先级、继承关系和样式来源（内联样式、内部样式、外部样式表）决定最终应用的样式。
构建CSSOM：
- 浏览器将解析后的CSS规则应用到DOM树中的元素上，并构建CSSOM树（CSS对象模型）。CSSOM树是与DOM树对应的另一种树结构，表示每个DOM元素的样式信息。

1.8.3 JavaScript解析与执行

JavaScript的解析和执行会影响DOM和CSS的构建过程，因为JavaScript可以动态地修改HTML结构和样式。因此，浏览器在解析和执行JavaScript时有以下步骤：

下载与解析：
- 浏览器遇到<script>标签时，会暂停HTML解析，并开始下载和解析JavaScript文件（除非使用async或defer属性）。解析器将JavaScript代码转化为可执行的指令。
构建执行上下文：
- 在执行JavaScript之前，浏览器会为每个函数和全局脚本构建执行上下文。执行上下文决定了变量和函数的可访问性（作用域），并管理调用堆栈。
编译与执行：
- JavaScript是一种解释性语言，现代浏览器使用JIT（即时编译）技术，将JavaScript代码编译成机器码并立即执行。
DOM与CSS的动态修改：
- JavaScript可以通过DOM API（如 document.createElement()、element.innerHTML）动态修改页面内容。这会导致DOM树的变化，可能引发重新计算布局（Reflow）和重新绘制（Repaint）。
事件循环：
- JavaScript的执行是单线程的，事件循环机制负责管理异步事件的执行。当遇到异步操作（如网络请求、定时器等）时，JavaScript引擎将这些操作挂起，等到它们完成后再放入任务队列（Task Queue），等待事件循环调度执行。

1.8.4 渲染与优化

在解析和执行JavaScript的过程中，浏览器会实时根据DOM和CSSOM的变化进行页面的渲染。这包括布局计算、绘制和合成操作。为了保证性能，现代浏览器会对渲染过程进行多种优化：

布局（Layout）与重排（Reflow）：
- 当DOM结构或元素的大小、位置发生变化时，浏览器会重新计算页面的布局。这一过程较为耗时，特别是在大规模的DOM树中。为了减少重排，开发者应避免频繁修改元素的几何属性。
绘制（Paint）与重绘（Repaint）：
- 布局计算完成后，浏览器会根据渲染树中的信息，将元素绘制到屏幕上。如果仅修改了元素的外观属性（如背景色、字体颜色等），浏览器会执行重绘，而无需重新计算布局。
合成层与GPU加速：
- 对于复杂的页面，浏览器会将某些元素（如固定位置的背景、CSS动画）划分为独立的合成层，使用GPU进行加速渲染。通过将这些合成层独立处理，可以减少不必要的重排和重绘，提升页面性能。
异步加载与渲染：
- 浏览器可以使用异步技术（如async和defer）来优化资源加载，避免阻塞页面渲染。此外，图片和视频等大资源通常使用懒加载（Lazy Loading）技术，在用户需要时才加载，减少初始加载时间。

1.9 浏览器渲染引擎的工作原理

不同浏览器使用不同的渲染引擎，常见的包括：

Blink：Chrome 和 Edge 使用的引擎。
WebKit：Safari 使用的引擎。
Gecko：Firefox 使用的引擎。

这些渲染引擎的基本工作原理大致相同，都是将HTML、CSS、JavaScript解析为内部数据结构，并最终生成用户可见的页面。不同引擎在性能优化、标准支持等方面可能有所不同。

总结

从用户输入URL到页面最终渲染，整个过程涉及网络通信（DNS查询、TCP连接）、资源加载（HTML、CSS、JavaScript）、解析与执行（构建DOM、CSSOM、执行JavaScript）、渲染优化（布局、绘制、合成）。这一系列步骤的高效执行依赖于现代浏览器的渲染引擎和多种性能优化技术，以提供流畅的用户体验。

二、哪些CSS属性未必会引起重排

在浏览器渲染过程中，**重排（Reflow）**是指当页面的布局需要被重新计算时发生的操作。重排会影响性能
，尤其是在频繁发生时。因此，了解哪些CSS属性不会引起重排，可以帮助开发者优化性能。

2.1 重排（Reflow）与重绘（Repaint）的区别

重排（Reflow）：
- 也称为布局（Layout）。
- 当元素的几何属性（如尺寸、位置）发生变化时，浏览器需要重新计算页面布局。
- 触发重排的操作包括修改元素的尺寸、位置、显示/隐藏等。
重绘（Repaint）：
- 当元素的外观（如颜色、背景）发生变化，但不影响布局时，浏览器只需重新绘制元素。
- 重绘相对于重排来说，开销较小。

2.2 不会引起重排的CSS属性

以下CSS属性的改变通常只会引起重绘，而不会触发重排：

颜色相关属性：
- color
- background-color
- border-color
- outline-color
- text-decoration-color
视觉效果属性：
- visibility（当从 hidden 切换到 visible 或反之时，如果不涉及布局变化）
- opacity
- background-image（改变背景图片，但不改变元素的尺寸或位置）
- box-shadow
- text-shadow
- transform（某些变换，如 translate，可能只影响绘制）
其他装饰性属性：
- cursor
- filter（如模糊、亮度调整）
- pointer-events

2.3 会引起重排的CSS属性

为了更好地理解哪些属性不会触发重排，了解哪些属性会触发重排也是有帮助的。以下是一些会引起重排的CSS属性：

尺寸相关属性：
- width
- height
- min-width
- min-height
- max-width
- max-height
位置相关属性：
- top
- right
- bottom
- left
- position（如从 static 切换到 absolute）
外边距和内边距：
- margin
- padding
布局属性：
- display（如从 none 切换到 block）
- float
- clear
- overflow（某些情况下）
字体和文本：
- font-size
- font-family
- line-height
- text-align
其他影响布局的属性：
- border-width
- border-style
- flex 属性
- grid 属性

2.4 示例说明

示例1：修改颜色 vs 修改尺寸

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS Reflow vs Repaint</title><style>#box {width: 200px;height: 200px;background-color: lightblue;transition: background-color 0.3s, width 0.3s;}</style>
</head>
<body><div id="box"></div><button onclick="changeColor()">Change Color</button><button onclick="changeWidth()">Change Width</button><script>function changeColor() {document.getElementById('box').style.backgroundColor = 'lightgreen';}function changeWidth() {const box = document.getElementById('box');box.style.width = box.offsetWidth === 200 ? '300px' : '200px';}</script>
</body>
</html>

点击 “Change Color” 按钮：
- 修改 background-color 只会触发重绘。
点击 “Change Width” 按钮：
- 修改 width 会触发重排和重绘。

示例2：使用 `transform` vs 修改 `left`

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Transform vs Position</title><style>#box {width: 100px;height: 100px;background-color: coral;position: absolute;top: 50px;left: 50px;transition: transform 0.3s, left 0.3s;}</style>
</head>
<body><div id="box"></div><button onclick="moveWithTransform()">Move with Transform</button><button onclick="moveWithLeft()">Move with Left</button><script>let moved = false;function moveWithTransform() {const box = document.getElementById('box');if (!moved) {box.style.transform = 'translateX(100px)';} else {box.style.transform = 'translateX(0)';}moved = !moved;}function moveWithLeft() {const box = document.getElementById('box');if (!moved) {box.style.left = '150px';} else {box.style.left = '50px';}moved = !moved;}</script>
</body>
</html>

点击 “Move with Transform” 按钮：
- 修改 transform 属性只会触发重绘。
点击 “Move with Left” 按钮：
- 修改 left 属性会触发重排和重绘。

2.5 如何优化避免不必要的重排与重绘

重排（Reflow）和重绘（Repaint）是影响页面性能的两个关键过程。为了避免不必要的重排和重绘，提高网页的渲染效率，可以采取以下几种优化策略：

批量修改DOM：

避免频繁、逐项操作DOM，因为这会导致多次重排和重绘。可以使用DocumentFragment或其他批处理技术，一次性插入或修改多个元素，从而减少渲染次数。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const newDiv = document.createElement('div');newDiv.textContent = `Item ${i}`;fragment.appendChild(newDiv);
}
document.body.appendChild(fragment); // 一次性插入到DOM

使用transform和opacity属性进行动画：
- transform和opacity是不会触发重排的CSS属性，因此可以用它们来处理动画和交互效果。这类属性变化只会引发重绘，不会重新计算布局。
```
.box {transition: transform 0.3s, opacity 0.3s;
}
```
避免频繁读取布局属性：
- 频繁读取布局相关属性（如offsetWidth、offsetHeight）会导致浏览器强制同步布局，触发重排。因此，应该尽量避免在循环中多次读取这些属性。如果需要读取，可以先将其缓存，然后在循环中使用缓存值。
```
const width = element.offsetWidth; // 读取一次
for (let i = 0; i < 10; i++) {element.style.width = (width + 10) + 'px'; // 写入操作
}
```
避免触发全局样式重排：
- 修改一些会影响整个文档布局的属性（如width、height、margin等），会导致大范围的重排。如果频繁修改这些属性，可以通过设置position: absolute或fixed来隔离元素，使其独立于文档流，减少对其他元素的影响。
```
#box {position: absolute;top: 100px;left: 50px;
}
```
利用will-change属性进行优化：
- 使用will-change属性可以提前告知浏览器即将发生的样式变化，帮助浏览器做出性能优化，尤其是在有复杂动画或交互时。这会促使浏览器预先为这些变化分配合成层，并开启GPU加速。
```
.box {will-change: transform, opacity;
}
```

异步操作与requestAnimationFrame：

在高频率操作（如滚动、调整窗口大小等）中，使用requestAnimationFrame来同步DOM更新和动画帧，确保在每一帧绘制前执行必要的操作，从而避免过多的重排和重绘。

let lastKnownScrollPosition = 0;
let ticking = false;window.addEventListener('scroll', function () {lastKnownScrollPosition = window.scrollY;if (!ticking) {window.requestAnimationFrame(function () {handleScroll(lastKnownScrollPosition);ticking = false;});ticking = true;}
});

利用虚拟DOM技术：
- 在复杂应用中，可以使用如React、Vue等框架的虚拟DOM机制，合并多次DOM操作，减少实际的DOM更新次数，从而减少重排和重绘。
使用contain属性进行布局隔离：
- contain属性可以限制某个元素的影响范围，使得它的布局、样式变化不会影响其外部元素，从而减少重排范围，特别适用于复杂的页面布局。
```
.container {contain: layout;
}
```

2.6 监控重排与重绘

为了识别性能瓶颈，开发者可以借助浏览器的开发者工具进行监控。通过查看页面中哪些操作频繁引发重排和重绘，可以针对性地进行优化。

Chrome DevTools：

通过“Performance”面板，开发者可以记录并分析页面的性能数据，查看重排和重绘的频率和时间，识别JavaScript事件、CSS动画和布局计算的开销。

2.7 总结

优化网页性能的核心在于减少不必要的重排和重绘操作，尤其是在复杂的应用场景中，频繁的布局计算和绘制会显著影响用户体验。通过合理利用CSS属性、批量操作DOM、借助硬件加速以及提前进行优化提示，开发者可以大幅减少渲染的开销。

关键优化要点：

使用不会引起重排的属性：如color、background-color、opacity、transform等属性，减少复杂的重排计算。
批量操作DOM：减少逐项操作DOM，避免多次重排和重绘。
硬件加速和预优化：通过transform、will-change等属性，让浏览器启用硬件加速，优化渲染。
合理使用开发工具监控性能：通过DevTools等工具监控页面重排和重绘的次数和开销，找到性能瓶颈。

掌握这些优化技术和工具，可以帮助开发者创建更高效、流畅的网页，提升用户体验。

三、总结

3.1 从URL到页面渲染的过程

浏览器将用户输入的URL转换为可视化页面，整个过程包括DNS解析、TCP连接、HTTP请求与响应、HTML和CSS的解析、DOM和CSSOM的构建，以及页面的布局和绘制。理解这个复杂流程中的每一步，尤其是网络请求的优化、资源的加载顺序、以及浏览器的渲染机制，可以帮助前端开发者改善页面的加载速度和提升用户体验。

3.2 CSS属性与性能优化

在CSS中，修改某些属性（如width、height、position等）会导致浏览器重新计算布局（重排），而另一些属性（如color、background-color、opacity、transform）则只会触发重绘。避免不必要的重排可以显著提升页面性能。开发者可以通过批量操作DOM、利用硬件加速（如transform和will-change）、异步操作、使用虚拟DOM等技术，减少重排和重绘的频率，从而优化页面的渲染效率。