微观介绍浏览器 renderer process 做了哪些事情

微观的介绍 renderer process 做了哪些事情。
解析阶段
介绍浏览器
关于 HTML 的 link、img、script 标签需求加载远程资源的,浏览器会调用 network thread 优先并行处理,但遇到 script 标签就必须停下来优先履行,由于 js 代码可能会改动任何 dom 目标,这可能导致浏览器要重新解析。所以假如你的代码没有修正 dom 的副效果,能够增加 async、defer 标签,或 JS 模块的方法使浏览器不必等候 js 的履行。
 
只有 DOM 是不可的,style 标签声明的款式需求效果在 DOM 上,所以根据 DOM,浏览器要生成 CSSOM,这个 CSSOM 主要是根据 css 选择器(selector)确认效果节点的。
有了 DOM、CSSOM 依然不足以制作网页,由于咱们仅知道结构和款式,但不知道元素的方位,这就需求生成 LayoutTree 以描绘布局的结构。
原文特别提到,LayoutTree 有个很大的技能难点,即排版,Chrome 专门有一整个团队在霸占这个技能难题。为什么排版这么难?能够从这几个例子中体会冰山一角:盒模型间磕碰、字体撑开内容导致换行,引发更大区域的重新排版、一个盒模型撑开挤压另一个盒模型,但另一个盒模型大小改动后内容排版也随之改动,导致盒模型再次改动,这个改动又导致了外部其它盒模型的布局改动。
 
绘图
 
有了 DOM、CSSOM、LayoutTree、PaintRecord 之后,终于能够绘图了。但是当 HTML 改动时,重绘的价值是巨大的,由于上面任何一步的核算成果都依赖前面一步,HTML 改动时,需求对 DOM、CSSOM、LayoutTree、PaintRecord 进行重新核算。
 
组成
 
现在一般采用较为老练的组成技能(compositing),行将烘托内容分层制作与烘托,这能够大大提高功能,并可经过 CSS 特点 will-change 手动声明为一个新层(不要乱用)。
 
组成层会将绘图内容切分为多个栅格并交由 GPU 烘托,因而功能会非常好。
 
从烘托分层看功能优化
其实从功能优化视点来看,解析环节能够被替代为 JS 环节,由于现代 JS 结构往往没有什么 HTML 模版内容要解析,简直满是 JS 操作 DOM,所以能够看作 5 个新环节:JS、款式、布局、绘图、组成。
 
 
修正元素几许特点(方位、宽高等)会触发一切层的重新核算,由于这是一个非常重量级的修正。
修正某个元素绘图特点(比方颜色和背景色),并不影响方位,则会越过布局层。
修正比方 transform 特点会越过布局与绘图层,这看上去很难以想象。
所以站在浏览器开发者的视点,能够轻松了解为什么这种优化不是奇技淫巧了,由于自身浏览器的完成就把布局、绘图与组成层的行为别离开了,不同的代码底层计划不同,功能肯定会不同。你能够经过 csstriggers 检查不同 css 特点会引发哪些层的重核算。
 
隐式组成层、层爆破、层主动合并
 
而隐式组成是指元素没有被特别符号,但也被提高到组成层的状况,这种状况常见发生在 z-index 元素发生堆叠时,下方的元素显现声明提高到组成层,则浏览器为了确保 z-index 掩盖联系,就要隐式把上方的元素提高到组成层。
 
浏览器也会支持层主动合并,比方隐式提高到组成层时,多个元素会主动合并在一个组成层里。但这种方法也并不总是靠谱,主动处理毕竟猜不到开发者的意图,所以最好的优化方法是开发者主动干预。
 
总结
 
最终想要吐槽的是,浏览器标准由所以逐渐迭代的,因而看似都在描绘方位的 css 特点其实背面完成原理是不同的,尽管这个规矩体现在 W3C 标准上,但假如仅从特点名是很难看出来端倪的,因而想要做极致功能优化就必须了解浏览器完成原理。

【本文关键词】:介绍浏览器