白霁

默认读者已经具备了基本的Chrome DevTools 的知识，即了解Chrome开发者工具中每一个面板的基本用法。 如果尚未了解，请自助查看同事写的基本介绍。 当然，你也可以选择继续往下读。 Command+Option+C (Mac) 或 Control+Shift+C (…

整个浏览器原理系列文章正式完结了。因非科班出身，所以增加了对应的前置知识。整体的文章的思路还是不断的去问自己为什么，从而激发自己更有兴趣继续去思考下 这系列文章，只是用自己的语言重述了一遍 How Browsers Work: Behind the scenes of mode…

虽说文章还是比较老的，但浏览器发展也会变成一步历史，从有记录的历史的源头去了解当初的浏览器，进而更好的理解当代的浏览器。 这些基础的计算机概念还是要弄不清楚的。 知乎上这篇文章，更多就是 Inside look at modern web browser 的译文，发现这位小姐姐…

renderer 节点刚刚创建，插入 render tree 中并没有 position 和 size 信息，而 layout 阶段就是计算元素几何信息的地方。因为浏览器采用的是流式布局，计算元素的几何信息是一次性的，而且后面元素几乎不影响前面元素的几何信息，除 table 元…

DOM 树构建的同时，渲染引擎也在构建 render 树。 render 树是 HTML 文档的可视化表现，是由可视化元素按顺序展示组成的。换句话说 render 树和 DOM 树上的节点并非一一对应的，那这里有两个概念：可视化元素和非可视化元素。 非可视化元素：或是<head…

因为 HTML 语言在语法层面并有那么严格的语法规则，导致常规的解析器并不能解析HTML文档，对应的解决方案让浏览器厂商自定义 HTML 解析器。那么，让我们一起梳理一下 HTML 解析器到底是什么吧~ 因为 HTML 语法是由 W3C 组织创建的规范中进行定义的，而且语法格式…

解析器根据解析语法的顺序不同可分为两类。 自上而下解析器：从语法高层结构开始出发，尝试从中找到匹配的结构。用点人话说就是解析器先匹配高级的语法部分，然后慢慢降级匹配。 还是我们上述的例子（2+3-1），解析器将 2 + 3 标记为表达式，2 + 3 - 1标记为表达式，而不是先…

其实我们很明白「解析」到底做了什么，说白了就一句话咯：「将源代码转化机器码」。难道不好奇转化这一流程中到底涉及到什么环节吗？ 首先，我们展上述的那句话——「将源代码转化机器码」。 在浏览器中，大多数解析是文档，整个过程就是努力将文档转化为代码可以理解和使用的结构，对应输出的结果…

在介绍如何渲染的问题之前，我们还是需要了解一下什么是 Renderer Process，即浏览器内核。 浏览器内核是由各大浏览器厂商依照 W3C 标准自行研发。因为由各大厂商自主研发，必定产生不同的种类，我们先来看看市面上主流浏览器内核： Trident：俗称 IE 内核，也被…