很久一前就看了网上经常看到的浏览器原理的一篇文章,文章的作者是保罗爱丽诗,那是刚入行时候看到的,当时确实不太理解,后来面试也经常被问到你懂浏览器的原理吗?
我只能说不懂!
后来就又仔细看了看,但是一直没去记录下自己的认识。今天只是为了记录下我感觉需要认真看的几个点。
首先就算浏览器的构成,因为在浏览器的构成之中有一个呈现引擎。
呈现引起无疑就是用来解析dom文档,并将它绘制出来,让人可以去操作的页面。
呈现引擎在解析的过程中也有一个主流程,就是先生成dom树,在生成渲染树,在去布局layout,也就是定位,最后才是真正的绘制。
这是一个渐进的过程,并不需要整个文档都的加载完成再去进行解析。
这样我就门就可以明白什么是重排或者布局,以及重绘这些概念了。
很明显重排就是在引擎解析结构时候所触发的事件。而重绘是在最后的绘制过程中发生的。
也就是说更新节点,或者更改全局字体,都可能造成结构变化。
而更换颜色和背景只会有重绘过程。
显然重排比重绘消耗更多的时间。
在解析的过程中,引擎会先从词法和语法两个方面分析。
而词法就像单词,就像汉字,首先我们要先认识这些东西,再去探讨它的使用规则,而这些规则就是他的语法。
解决了这些问题计算机就可以正确的将页面呈现出来。
这里我省略了计算机如何解析他的词法和语法规则,因为这些对于不是研究浏览器如何开发出来的前端来说我觉得意义不是很大,而且复杂难懂。
还有就是dom树和呈现树,并不是11对应关系,取决于元素的display属性,会产生差异。
css解析和查找元素需要了解一下,以便造成不必要的性能消耗。
再就是dirty位系统。它是一个元素的标记。
以及全局布局和增量布局。
浏览器的缓存机制可以存储呈现器的大小,而无需重新计算。可以提高性能。