简述从url输入到页面展示的过程

最新推荐文章于 2024-05-17 14:32:46 发布

前端布道人

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量201

点赞数

分类专栏：前端面试题前端杂货铺文章标签：前端 vue.js

本文链接：https://blog.csdn.net/BradenHan/article/details/133724696

版权

前端杂货铺同时被 2 个专栏收录

271 篇文章 1 订阅

订阅专栏

前端面试题

141 篇文章 1 订阅

订阅专栏

简述从url输入到页面展示的过程
- 举例说明：
请描述浏览器渲染的过程，并举例说明
- 浏览器渲染的几个步骤包括：

用户在浏览器的地址栏中输入URL（统一资源定位符），例如http://www.example.com。浏览器将URL发送给DNS服务器（域名系统），以获取URL对应的IP地址。DNS服务器将返回对应的IP地址，例如192.168.1.1。 这个过程可能会利用到浏览器本地缓存、电脑缓存、路由器等中间缓存以及域名服务器。
浏览器使用获取到的IP地址与服务器建立TCP连接。TCP协议保证了可靠的数据传输。这个过程包括：三次握手建立TCP连接。这个握手过程包括一个“同步报文”，一个“同步-应答报文”和一个“应答报文”，这三个报文在浏览器和服务器之间传递。握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦建立了TCP连接，浏览器会通过HTTP协议发送一个HTTP请求给服务器。这个请求包含了需要获取的页面的信息，例如请求的方法（GET/POST），请求头、Cookies等。
服务器接收到浏览器发送的HTTP请求后，会根据请求的信息处理并生成响应。服务器可能会从数据库中读取数据，执行服务器端代码，或者处理其他逻辑。
服务器生成完整的HTTP响应后，使用TCP连接将响应发送回浏览器。
浏览器接收到服务器的响应后，会对响应进行解析。如果响应状态码为200，表示请求成功，浏览器会继续处理接下来的步骤。如果状态码为其他值，则根据不同的状态码执行相应的操作，例如重定向或报错。
浏览器开始解析服务器返回的HTML文档。它会根据HTML标记语言的规则，解析文档的结构，并获取网页中引用的其他资源，例如CSS样式文件、JavaScript脚本等。浏览器通过解析HTML文档，将页面渲染出来，并在浏览器窗口中展示给用户。浏览器会按照HTML标记语言的规则，将文本内容和其他资源进行排版和显示。在解析HTML文件时，会遇到<link>和<script>标签外链样式文件和脚本文件，其中CSS文件的加载不会阻塞DOM树的构建，但会阻塞render树的构建；脚本文件在加载后会立即执行，并且加载和执行的过程都会阻塞DOM树的构建。
页面展示完毕后，浏览器可能会继续加载页面中引用的其他资源，例如图片、音频、视频等。

从URL输入到页面展示的基本过程。整个过程涉及到浏览器、网络传输、服务器和HTML解析等多个环节。

以上仅是简要描述，实际过程可能更为复杂。

举例说明：

用户在浏览器中输入URL https://www.google.com，

浏览器通过DNS查询将主机名www.google.com转换为对应的IP地址，然后与服务器建立TCP连接。

浏览器发送HTTP请求到服务器，请求获取Google首页的HTML文档。

服务器收到请求后，处理并生成包含Google首页内容的HTTP响应。

浏览器接收到响应后，解析HTML文档并渲染页面，最终将Google首页展示给用户。

用户可以在浏览器中搜索内容、点击链接等操作与页面进行交互。

请描述浏览器渲染的过程，并举例说明

浏览器渲染的几个步骤包括：

解析HTML 、构建CSSOM 、渲染树构建、布局（回流）、绘制（重绘）、合成

浏览器渲染是将网页的 HTML、CSS 和 JavaScript 转换为用户在浏览器中看到的可视化页面的过程。

下面是浏览器渲染的详细步骤：

解析HTML：浏览器首先下载并解析 HTML 文档，并构建称为 DOM（文档对象模型）树的结构。DOM 树表示了网页的层次结构，包括元素、标签、属性和它们之间的关系。例如，在以下 HTML 代码片段中，浏览器会解析出一个包含两个段落的 DOM 树：
```
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Welcome to my page.</p>
    <p>This is a sample paragraph.</p>
  </body>
</html>
```
构建CSSOM：浏览器将 CSS 样式表加载并解析，生成称为 CSSOM（CSS 对象模型）的树状结构。CSSOM 表示了网页的样式信息，包括选择器、属性和它们之间的关系。例如，在以下 CSS 代码片段中，浏览器会生成一个包含一条针对段落的样式规则的 CSSOM：
```
p {
  font-size: 16px;
  color: red;
}
```

构建渲染树：浏览器将 DOM 树和 CSSOM 结合起来，生成称为渲染树的树状结构。渲染树只包含需要显示的内容，例如可见元素和其样式信息，而不包含如隐藏元素或不可见元素等。对于每个可见元素，浏览器会确定其盒模型大小、位置和样式信息，并将它们添加到渲染树中。例如，在以上 HTML 和 CSS 代码片段中，浏览器会生成以下渲染树：

Render Tree:
+--------------------------------------------------+
|        +-----------------------------------------+
|        |                  BODY                   |
|        +------------------------------------+----+
|                                             |
|            +----------------------+         |
|            |          P           |         |
|            +--------------+-------+         |
|                            |                 |
|       +-----------+--------+------+          |
|       |    TEXT   |               |           |
|       +-----------+---------------+          |
|                                             |
|            +----------------------+         |
|            |          P           |         |
|            +--------------+-------+         |
|                            |                 |
|       +-----------+--------+------+          |
|       |    TEXT   |               |           |
|       +-----------+---------------+          |
|                                             |
+--------------------------------------------------+

布局（回流）：渲染树构建完成后，浏览器计算每个元素在屏幕上的几何位置和大小，这个过程称为布局或回流（Layout or Reflow）。浏览器需要确定每个元素的准确位置，以便进行正确的绘制。在布局阶段，浏览器可能会触发多次回流，因为一个元素的布局可能会影响其他元素的位置和大小。例如，在以下代码中：
```
<html>
  <body>
    <div>
      <p>Hello, world</p>
    </div>
    <p>This is a test.</p>
  </body>
</html>
```
当第一个段落的盒模型大小改变时，浏览器需要重新计算第二个段落的位置和大小，导致触发回流。
绘制（重绘）：浏览器根据渲染树和布局信息开始绘制（Paint）每个元素。绘制过程涉及将元素转换为像素，以在屏幕上显示。绘制的顺序通常是从上到下、从后到前的顺序。在绘制过程中，浏览器可能会触发多次重绘，因为一个元素的样式可能会影响其他元素的外观。例如，在以下 CSS 中：
```
p {
  background-color: red;
  color: white;
}
```
当段落的背景色改变时，浏览器需要重新绘制它，并可能会导致其他元素的重绘。
合成：对于复杂的页面，浏览器可能会将多个渲染层合成为单个图层，以提高性能和效果。合成是将绘制的结果放入合成层中，并将其合成为最终的页面图像。
显示：最后，浏览器将渲染的图像发送给显示设备，用户就能够看到网页内容了。

举个例子，当用户访问一个包含大量图片和视频的网页时，浏览器需要下载这些资源，并在加载完成后开始进行渲染。它首先会解析 HTML 和 CSS，构建渲染树并计算元素的位置和大小，然后将元素绘制到屏幕上。如果页面中有动画效果，浏览器可能会使用合成和重绘技术来提高性能和响应速度。最终，浏览器将渲染的图像发送到显示设备，用户就可以看到完整的网页内容。

前端布道人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简述从url输入到页面展示的过程

一旦建立了TCP连接，浏览器会通过HTTP协议发送一个HTTP请求给服务器。这个请求包含了需要获取的页面的信息，例如请求的方法（GET/POST），请求头、Cookies等。服务器接收到浏览器发送的HTTP请求后，会根据请求的信息处理并生成响应。服务器可能会从数据库中读取数据，执行服务器端代码，或者处理其他逻辑。服务器生成完整的HTTP响应后，使用TCP连接将响应发送回浏览器。浏览器接收到服务器的响应后，会对响应进行解析。如果响应状态码为200，表示请求成功，浏览器会继续处理接下来的步骤。
复制链接

扫一扫