浏览器工作原理与实践
文章平均质量分 95
火兰
正在努力的人
展开
-
渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?
好了,我们现在已经分析完了整个渲染流程,从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程:完整的渲染流水线示意图渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。渲染引擎将 CSS 样式表转化为浏览器可以理解的,计算出 DOM 节点的样式。创建布局树,并计算元素的布局信息。对布局树进行分层,并生成分层树。为每个图层生成绘制列表,并将其提交到合成线程。合成线程将图层分成图块,并在光栅化线程池中将图块转换成位图。原创 2022-10-15 12:56:09 · 298 阅读 · 0 评论 -
渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?
好了,今天正文就到这里,我画了下面这张比较完整的渲染流水线,你可以结合这张图来回顾下今天的内容。渲染流水线图从图中可以看出,本节内容我们介绍了渲染流程的前三个阶段:DOM 生成、样式计算和布局。浏览器不能直接理解 HTML 数据,所以第一步需要将其转换为浏览器能够理解的 DOM 树结构;生成 DOM 树后,还需要根据 CSS 样式表,来计算出 DOM 树所有节点的样式;最后计算 DOM 元素的布局信息,使其都保存在布局树中。原创 2022-10-15 12:55:10 · 487 阅读 · 0 评论 -
导航流程:从输入URL到页面展示,这中间发生了什么?
服务器可以根据响应头来控制浏览器的行为,如跳转、网络数据类型判断。Chrome 默认采用每个标签对应一个渲染进程,但是如果两个页面属于同一站点,那这两个标签会使用同一个渲染进程。浏览器的导航过程涵盖了从用户发起请求到提交文档给渲染进程的中间所有阶段。导航流程很重要,它是网络加载流程和渲染流程之间的一座桥梁,如果你理解了导航流程,那么你就能完整串起来整个页面显示流程,这对于你理解浏览器的工作原理起到了点睛的作用。原创 2022-10-12 13:25:56 · 354 阅读 · 0 评论 -
HTTP请求流程:为什么很多站点第二次打开速度会很快?
本篇文章的内容比较多、比较碎,但是非常重要,所以我先来总结下今天的主要内容。为了便于你理解,我画了下面这张详细的“HTTP 请求示意图”,用来展现浏览器中的 HTTP 请求所经历的各个阶段。HTTP 请求流程示意图从图中可以看到,浏览器中的 HTTP 请求从发起到结束一共经历了如下八个阶段:构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。原创 2022-10-11 17:37:38 · 259 阅读 · 0 评论 -
TCP协议:如何保证页面文件能被完整送达浏览器?
好了,这一节就到这里,下面我来做一个简单的总结。互联网中的数据是通过数据包来传输的,数据包在传输过程中容易丢失或出错。IP 负责把数据包送达目的主机。UDP 负责把数据包送达具体应用。而 TCP 保证了数据完整地传输,它的连接可分为三个阶段:建立连接、传输数据和断开连接。其实了解 TCP 协议,是为了全方位了解 HTTP,包括其实际功能和局限性,之后才会更加深刻地理解为什么要推出 HTTP/2,以及为什么要推出 QUIC 协议,也就是未来的 HTTP/3。原创 2022-10-11 13:13:51 · 357 阅读 · 0 评论 -
Chrome架构:仅仅打开了1个页面,为什么有4个进程?
计算机中的并行处理就是同一时刻处理多个任务,比如我们要计算下面这三个表达式的值,并显示出结果。A = 1+2B = 20/5C = 7*8复制代码任务 1是计算 A=1+2;任务 2是计算 B=20/5;任务 3是计算 C=7*8;任务 4是显示最后计算的结果。正常情况下程序可以使用单线程来处理,也就是分四步按照顺序分别执行这四个任务。如果采用多线程,会怎么样呢?我们只需分“两步走”:第一步,使用三个线程同时执行前三个任务;第二步,再执行第四个显示任务。原创 2022-10-11 13:12:26 · 557 阅读 · 0 评论