从访问URL到浏览器渲染
zhezhongyun 2025-05-27 19:13 22 浏览
DNS 查询
当用户在地址栏输入一个 URL，浏览器要做的第一步是要去寻找页面资源的位置。如果导航到 https://example.com，HTML 页面被定位到 IP 地址为 93.184.216.34 的服务器。如果以前没有访问过这个网站，就需要进行 DNS 查询（Domain Name System Lookup）。浏览器向域名服务器发起 DNS 查询请求，最终得到一个 IP 地址。
获取到服务器 IP 地址，浏览器就会通过TCP“三次握手”与服务器建立连接。一旦我们建立了和 web 服务器的连接，浏览器就会代表用户发送一个初始的 HTTP GET 请求，对于网站来说，这个请求通常是一个 HTML 文件。浏览器收到第一个数据分块后，它就可以开始将接收的数据转换为 DOM 和 CSSOM 通过渲染器在屏幕上将它们绘制成用户在屏幕上看到的页面。
构建 DOM 树
浏览器从网络接收到 HTML 文件后，会从上到下、边解析边构建 DOM（Document Object Model）树。
DOM 树描述了文档的内容。<html> 元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。DOM 节点的数量越多，构建 DOM 树所需的时间就越长。
构建 CSSOM 树
浏览器解析 HTML 时遇到 <link> 或 <style> 标签，会加载并解析 CSS。CSS 解析后生成 CSSOM（CSS Object Model）树，表示样式的结构。
CSS 对象模型和 DOM 是相似的。DOM 和 CSSOM 是两棵树。它们是独立的数据结构。浏览器将 CSS 规则转换为可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和兄弟关系的节点树。
构建 Render Tree（渲染树）
浏览器将 DOM 树与 CSSOM 树合并，生成 Render Tree，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。
布局（Layout）
渲染树构建完毕后，浏览器就开始布局。渲染树标识了哪些节点会显示（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器会从渲染树的根开始遍历。
在网页上，大多数东西都是一个盒子。不同的设备和不同的桌面设置意味着无限数量的不同视区大小。在此阶段，根据视口大小，浏览器将确定屏幕上所有盒子的大小。
布局是根据渲染树计算每个节点的位置与大小（即盒模型），以及确定呈现树中所有节点的尺寸和位置的过程。
这个过程也叫回流或重排（Reflow），第一次确定每个节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为重排。假设初始布局发生在返回图像之前，我们没有声明图像的尺寸，因此一旦知道图像的尺寸，就会出现重排。
绘制（Painting）
浏览器根据 Layout 结果将元素的每个可见部分绘制到屏幕上，包括文本、颜色、边框、阴影以及按钮和图像等替换元素。
绘制可以将布局树中的元素分解为多个层。将内容提升到 GPU 上的层（而不是 CPU 上的主线程）可以提高绘制和重新绘制性能。有一些特定的属性和元素可以实例化一个层，包括 <video> 和 <canvas>，任何 CSS 属性为 opacity 、3D transform、will-change 的元素，还有一些其他元素。
合成（Compositing）
当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。
当页面继续加载资源时，可能会发生回流（例如没有声明图像的尺寸），回流会触发重新绘制和重新合成。如果我们定义了图像的大小，就不需要重新绘制，只需要绘制需要重新绘制的层，并在必要时进行合成。
回流 （Reflow）是指浏览器重新计算元素的几何属性（如位置、尺寸），并更新渲染树（Render Tree）的过程，回流必定引起重绘。
重绘 （Repaint）是指浏览器根据新的样式（如颜色、背景）重新绘制元素，但 不改变布局（即不触发回流），重绘不一定引起回流。
相关推荐
- Qt setAttribute设置窗口属性（qt设置窗口名字）
-
this->resize(500,400);this->setWindowTitle("主窗口");QLabel*label=newQLabel(...
- 利用Axure+js创建可配置地图页面（axure制作app界面）
-
编辑导语：如何利用Axure实现自定义地图展示？本篇文章里，作者结合Axure与高德地图，对如何在Axure中设置相应参数、进而预览时实现自定义地图展示效果的操作流程进行了示范和总结，一起来看一下。本...
- Excel如何获取所有类型的工作表，详细编程方法介绍
-
No.1Excel可以创建不同类型的工作表，编程中会遇到返回某一类型的工作或所有类型的工作表，对表进行操作，那么如何得到想要的工作表呢？下面介绍一个方法。首先要认识一下Sheets对象，它表示工作簿中...
- VBA中的常用单元格引用方式（vba中单元格的引用方法）
-
VBA编程经常和“对象”打交道，其中最频繁的对象大概就是“单元格”了。（听说您还没有对象？那……我想你大概需要一份Excel，包邮988……）今天我们就来聊一下单元格的各种引用方式，比如单个单元格、行...
- 强烈安利试试这个!效果爆炸的漫画变身AI，火到服务器几度挤爆
-
金磊丰色发自凹非寺量子位报道|公众号QbitAI“排队1241人，等待2600秒……”——这届网友为了看一眼自己在动漫里的样子，可真是拼了！“始作俑者”是一款可以把人像变动漫的生成器。只...
- 软网推荐:为窗口控制菜单添加扩展控制命令
-
当我们点击Windows标准窗口（如记事本、资源管理器等）左上角的窗口控制按钮时，会弹出一个含有窗口控制基本命令的菜单，其中包括移动、大小、最小化、最大化、关闭等窗口控制命令。如果我们觉得这些命令不能...
- 45、VBA字典去重，两种不同的方法在实战中的运用(VBA进阶)
-
1、在VBA字典去重的操作中，若程序仅需要使用key值，那么无论采用哪种方法都不会有问题；但如果需要获得对应的item值，就必须根据实际需求选择合适的方法了。学VBA要知其然而知其所以然，不能似懂非懂...
- Excel VBA学习笔记:合并单元格的相关操作
-
合并单元格，一个在工作中很常见的，但是是令写（工作表）公式和VBA代码的人都很不喜欢的东东，今天来讲讲与它相关的操作语法。1、Range("A1:B2").Merge；合并A1到B2单...
- 软网推荐:图片编辑 小而不凡（秽的读法）
-
说起图片编辑小工具，咱手边就有个“画图”软件。但是，这个工具比较简单，对于处理透明背景、应用滤镜效果、添加边框、做拼接图和全景照、图层操作等，就无能为力了。同样是小软件，PhotoPad就能满足上述需...
- Android弹软键盘时之ListView的变化控制
-
前几天有个人问我，说在最底下有个输入框，弹出键盘时整个界面都一起跟着移动，上面的标题栏都移到上面看不到了，界面非常难看。其实这种问题一般存在于这样的界面布局中那就是，上面是标题栏，中间是Listvie...
- 如何将数组值传递到工作表中（怎么传数组）
-
【分享成果，随喜正能量】不与别人盲目攀比，自己就会悠然自得;不把人生目标定得太高，自己就会欢乐常在;不刻意追求完美，自己就会远离痛苦;不是时时苛求自己，自己就会活的自在;不每每吹毛求疵，自己就会轻轻松...
- 【VBA入门必备】Offset和Resize这样用，工作效率翻3倍!
-
大家好！今天共同学习下VBA中单元格属性Offset和Resize操作。一、Offset：单元格的"导航仪"功能说明：以当前单元格为坐标原点，灵活跳转位置语法格式：单元格.Offset...
- 50道阿里巴巴MySql经典面试题(附答案)
-
1、MySQL中有哪几种锁？1、表级锁：开销小，加锁快；不会出现死锁；锁定力度大，发生锁冲突的概率最高，并发度最低。2、行级锁：开销大，加锁慢；会出现死锁；锁定粒度最小，发生锁冲突的概率最低，并发度...
- 如何在Vue3项目中集成ESLint+Prettier+Stylelint+Husky?
-
随着前端工程化的发展,前端代码规范也显得越来越重要,所以作为一个前端对于这方面还是需要有一定的了解的。本篇文章将带大家使用ESLint+Prettier+Stylelint+Husky从零搭建一个Vi...
- SpringBoot 中 Json 格式化配置（springboot json转对象）
-
SpringBoot针对jackson是自动化配置的，如果需要修改，也可以自定义配置。0x01：通过application.yml配置属性说明：spring.jackson.date-form...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)