浏览器的渲染机制和页面渲染流程

1,从输入一个网址到浏览器显示页面经历的过程
a,DNS解析,找到对应网址的IP地址
b,根据IP地址,找到对应的服务器
c,建立TCP连接(三次握手)
d,连接建立完后,发出HTTP请求
e,服务器根据请求作出HTTP响应
f,浏览器得到响应内容,进行解析与渲染,并显示出来
g,断开连接(四次挥手)
这个过程叫一次HTTP事务。

2,浏览器的渲染机制
 在这里插入图片描述
浏览器开一个选项卡,就是一个进程,操作系统就会给这个进程分配cpu和内存,进程中有多个线程,这里可以把html,css看做一个UI线程处理,把JS看做一个JS线程处理。UI线程把HTML构建成DOM树,把CSS构建成CSS树,DOM树和CSS树合并,形成渲染树,只有树形成了,浏览器才能根据这颗树进行渲染。
浏览器的渲染过程主要包括以下几步:

  1. 解析HTML生成DOM树。
  2. 解析CSS生成CSS规则树。
  3. 将DOM树与CSS规则树合并在一起生成渲染树。
  4. 遍历渲染树开始布局,计算每个节点的位置大小信息。
  5. 将渲染树每个节点绘制到屏幕。

3,简单总结一个什么是HTTP(HyperText Transfer Protocol,超文本传输协议)协议
HTTP 协议和 TCP/IP 协议族内的其他众多的协议相同,用于客户端和服务器之间的通信。HTTP协议是基于TCP协议,作用于应用层。

4,三次握手和四次挥手
(1)三次握手(建立TCP连接)
客户端向服务器发起连接请求;
服务器确认收到连接请求,并且向客户端发送连接请求;
客户端确认收到服务器发送的连接请求。
(2)四次挥手(断开连接)
客户端发出断开连接的请求
服务端确认收到请求
服务端发出断开连接的请求
客户端确认收到请求
当客户端发出断开连接请求,服务端确认收到后,可能服务器端还有数据没有给客户端,所以客户端不能立即断开连接,只能等到服务器把所有的事件处理完后,才能给客户端发一个可以断开连接的请求。
5,进程是操作系统分配和调度资源的基本单位。
浏览器的内核指渲染引擎(UI 线程(css线程,HTML线程),js线程),互斥。
6,发起HTTP请求的方式以有哪些
get :从服务器获取数据
post:向服务器提交数据

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
浏览器渲染机制可以分为以下几个步骤: 1. 构建 DOM 树:根据 HTML 文本构建 DOM 树,即将 HTML 文本解析成一个个的节点,然后将这些节点按照其在文档中的层级关系组成一棵树。 2. 构建 CSSOM 树:根据 CSS 文本构建 CSSOM 树,即将 CSS 文本解析成一个个的样式规则,然后将这些样式规则按照其在文档中的层级关系组成一棵树。 3. 合并生成渲染树:将 DOM 树和 CSSOM 树组合成渲染树(也称为呈现树或布局树)。渲染树只包含需要显示的节点和这些节点的样式信息。渲染树的构建过程中,浏览器会忽略掉那些不需要显示的节点,例如 head 标签、display:none 的节点等。 4. 计算布局信息:根据渲染树计算每个节点在屏幕上的位置和大小,这个过程被称为布局或排版(layout 或 reflow)。布局是一个相当昂贵的操作,因为浏览器需要遍历渲染树的每个节点,并根据节点的样式、大小、位置等信息计算其在屏幕上的位置和大小。 5. 绘制页面:根据渲染树和布局信息,将页面绘制到屏幕上,这个过程被称为绘制(painting 或 rasterization)。绘制的过程中,浏览器会将渲染树中每个节点的内容转换成位图,然后将这些位图组合成一张完整的页面。 6. 提交更新:将绘制好的页面提交到 GPU,由 GPU 将其显示到屏幕上。 以上是浏览器渲染机制的主要流程,其中布局(layout 或 reflow)是整个渲染过程中最耗时的步骤,因此在开发中需要尽可能减少布局的次数,以提高页面的性能表现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

么心么肺

你的鼓励将是我学习的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值