浏览器工作原理之从请求到页面绘制

这篇文章是通过学习极客时间winter大大的《重学前端》中 浏览器是如何工作的 系列的总结

浏览器工作原理之从请求到页面绘制_第1张图片

构建dom树过程

浏览器工作原理之从请求到页面绘制_第2张图片

词法解析

text text text

如果我们从最小有意义单元的定义来拆分,第一个词(token)是什么呢?显然,作为一个词(token),整个 p 标签肯定是过大了(它甚至可以嵌套)。

那么,只用 p 标签的开头是不是合适吗?我们考虑到起始标签也是会包含属性的,最小的意义单元其实是“

我们继续拆分,可以把这段代码依次拆成词(token):

class=“a” 属性;

‘>’“标签开始”的结束;
text text text 文本;

标签结束。 这是一段最简单的例子,类似的还有什么呢?现在我们可以来来看看这些词(token)长成啥样子:

浏览器工作原理之从请求到页面绘制_第3张图片
用状态机进行词法解析,把每个词的“特征字符”逐个拆开独立的状态,然后组合起来形成联通图。

DOM构建

构建 DOM 树通过栈来实现:

function HTMLSyntaticalParser(){
    var stack = [new HTMLDocument];
    this.receiveInput = function(token) {
        //……
    }
    this.getOutput = function(){
        return stack[0];
    }
}


  • 栈顶元素就是当前节点;
  • 遇到属性,就添加到当前节点;
  • 遇到文本节点,如果当前节点是文本节点,则跟文本节点合并,否则入栈成为当前节点的子节点;
  • 遇到注释节点,作为当前节点的子节点;
  • 遇到 tag start 就入栈一个节点,当前节点就是这个节点的父节点;
    -遇到 tag end 就出栈一个节点(还可以检查是否匹配)。

具体的过程可参考词法解析和语法解析模拟过程

渲染-合成-绘制

渲染过程把元素变成位图,合成把一部分位图变成合成层,最终的绘制过程把合成层显示到屏幕上。

  • 渲染
    元素变成位图的过程。这里的位图就是在内存里建立一张二维表格,把一张图片的每个像素对应的颜色保存进去(位图信息也是 DOM 树中占据浏览器内存最多的信息,我们在做内存占用优化时,主要就是考虑这一部分)。

浏览器中渲染这个过程,就是把每一个元素对应的盒变成位图。这里的元素包括 HTML 元素和伪元素,一个元素可能对应多个盒(比如 inline 元素,可能会分成多行)。每一个盒对应着一张位图。

  • 合成
    渲染过程不会把子元素渲染到位图上面,合成的过程,就是为一些元素创建一个“合成后的位图”(我们把它称为合成层),把一部分子元素渲染到合成的位图上面。
    这就是我们要讲的合成的策略。我们前面讲了,合成是一个性能考量,那么合成的目标就是提高性能,根据这个目标,我们建立的原则就是最大限度减少绘制次数原则。

目前,主流浏览器一般根据 position、transform 等属性来决定合成策略,来“猜测”这些元素未来可能发生变化。

你可能感兴趣的:(个人总结,技术)