浏览器实现原理概述

342 阅读1分钟

这里有一份简洁的前端知识体系等待你查收,看看吧,会有惊喜哦~如果觉得不错,麻烦star哈~


我们先来共同思考一下。一个浏览器到底是如何工作的。

实际上,对浏览器的实现者来说,他们做的事情,就是把一个URL变成一个屏幕上显示的网页。

这个过程是这样的:

  1. 浏览器首先使用HTTP协议或者HTTPS协议,向服务端请求页面;
  2. 把请求回来的HTML代码经过解析,构建成DOM树;
  3. 计算DOM树上的CSS属性;
  4. 最后根据CSS属性对元素逐个进行渲染,得到内存中的位图;
  5. 一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;
  6. 合成之后,再绘制到界面上。

我们在开始详细介绍之前,要建立一个感性认识。我们从HTTP请求回来开始,这个过程并非一般想象中的一步做完再做下一步,而是一条流水线。

从HTTP请求回来,就产生了流式的数据,后续的DOM树构建、CSS计算、渲染、合成、绘制,都是尽可能地流式处理前一步的产出:即不需要等到上一步骤完全结束,就开始处理上一步的输出,这样我们在浏览网页时,才会看到逐步出现的页面。

浏览器原理部分会由五讲构成,分别是网络通讯,构建DOM树,计算CSS,排版,渲染、合成、绘制。