【机制】浏览器渲染机制&在浏览器中输入一个url发生了哪些事情_用户输入url浏览器做哪些事情(浏览器的渲染机制是什么?)-优快云博客

本文链接：https://blog.youkuaiyun.com/webFrontEndDev/article/details/102381742

本文深入探讨了网页渲染机制，包括DOCTYPE的作用、浏览器渲染过程、重排与重绘原理及其优化策略，帮助开发者理解并优化网页性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：渲染机制

渲染机制

什么是DOCTYPE 及作用

DTD（document type definition,文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。直白地说，DTD告诉浏览器当前的文档类型，浏览器将会用该类型解析、渲染当前文档。

DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。

常见的DOCTYPE

HTML5

<!DOCTYPE html>

HTML 4.0.1 strict（严格模式）该DTD包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（如 font）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.0.1 Transitional （宽松模式）该DTD包含所有 HTML 元素和属性，包括展示性的和弃用的元素（如 font）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

浏览器渲染过程

1、HTML 经过 HTML Parser 转成DOM Tree、CSS 经过 CSS Parser 转成 CSSOM Tree

2、把DOM Tree 和 CSSOM Tree 结合形成 Render Tree、通过 layout 精确计算要显示的dom 的宽、高、颜色等

3、Painting. 浏览器通过GUI画图

在浏览器中输入一个url发生了哪些事情？

1、浏览器搜索自身的DNS缓存

2、搜索操作系统自身的DNS缓存（浏览器没有找到缓存或缓存已经失效）

3、读取本地的HOST文件

4、浏览器发起一个DNS的系统调用

5、浏览器获得域名对应的IP地址后，发起HTTP“三次握手”，建立TCP/IP 连接

6、TCP/IP 连接建立起来后，浏览器就可以向服务器发送 HTTP 请求了，比如说：用 HTTP 的 GET 方法请求一个根域里的域名，协议可以采用 HTTP 1.0 的一个协议

7、服务器端接受到了这个请求，根据路径参数，经过后端的一些处理之后，把处理后的一个结果的数据返回给浏览器，也就是服务器端会把完整的HTML页面代码返回给浏览器

8、浏览器拿到了完整的HTML页面代码，在解析和渲染这个页面的时候，里面的JS、CSS、图片静态资源，他们同样也是一个个 HTTP 请求，都需要经过上面的主要的七个步骤

9、浏览器根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户

重排Reflow

定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个位置称之为 reflow

触发Reflow

1、增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint

2、移动 DOM 的位置，或是动画

3、修改CSS 样式

4、Resize 窗口时（移动端没有resize），或是滚动时

5、修改网页默认字体时

重绘Repaint

定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为 repaint。简单来讲页面要呈现的内容都画在屏幕上

触发Repaint：DOM 改动 CSS改动

如何尽量减少Repaint？

减少DOM操作，如平时业务中的列表渲染。