浏览器渲染原理简述

在浏览器中输入网址到浏览器显示完整页面的过程中有三个阶段:

  • http请求阶段(request)
  • http响应阶段(response)
  • 浏览器渲染阶段

本文对浏览器渲染阶段进行简要概括。

request 和 response 阶段

浏览器首先对服务器发出请求,服务器将项目磁盘中的代码返回给浏览器。

浏览器渲染阶段

  1. 解析html和css,生成Render Tree

浏览器拿到代码后,在内存条中开辟出一块栈内存,为代码的运行提供环境。然后分配出一条主线程将代码一行一行进行执行。
例如:

<!DOCTYPE html>
<link href="1.css">
<link href="2.css">

执行第一行时,将第一行代码入栈,将文本文件声明为html文件,执行完后出栈。

执行第二行时,另分配一条线程请求1.css资源文件(link/script/img都会这样),此时开辟出一条新的内存空间名为Task Queue(等待队列),将1.css存入等待队列中。

执行第三行时,再另分出一条线程请求2.css资源文件,并将2.css存入等待队列。

然后主线程继续执行html代码,直至html代码执行完毕,此时第一次自上而下执行完毕,完成DOM树

第一次执行完毕后,主线程在等待队列中寻找请求好的资源文件,并放入栈中运行(一次只能运行一个,1.css或2.css,因此要进行事件循环机制),执行完所有的css文件后,生成CSSOM树

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值