【干货】十分钟读懂浏览器渲染流程

  • 时间:
  • 浏览:0
  • 来源:大发彩神下载—大发彩神APP

https://www.zybuluo.com/lizlalala/note/43300042

https://segmentfault.com/a/11900000129300187

本文当我们 就浏览器渲染流程逐步了解了一遍,相信当我们 一定有的是所新的收获,是因为当我们 对于浏览器渲染流程还有任何问題,欢迎反馈,当我们 同時 交流,同時 学习,同時 进步。

参考文献:

Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎,它曾经是为linux平台研发的,我想要由Apple移植到Mac及Windows上。

关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源,为什么会么会让解析、构建树、渲染布局、绘制,最后呈现给客户能都看的界面这整个过程。

渲染树构建完成后,每个节点有的是可见节点为什么会么会让都蕴藏 其内容和对应规则的样式。这也是渲染树与DOM树的最大区别所在。渲染树是用于显示,那此不可见的元素当然就不要再在这棵树中总出 了,譬如。除此之外,display等于none的我想要 会被显示在这棵树里头,为什么会么会让visibility等于hidden的元素是会显示在这棵树里头的。

我想要 清况 下,比如修改了元素的样式,浏览器从不要再立刻 reflow 或 repaint 一次,我想要 会把曾经的操作积攒一批,为什么会么会让做一次 reflow,这又叫异步 reflow 或增量异步 reflow。

作者:GavinHsueh

根据渲染树布局,计算CSS样式,即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的,CSS和js会打破你你这个布局,改变DOM的外观样式以及大小和位置。这时就要提到曾经重要概念:replaint和reflow。

replaint:屏幕的一每项重画,不影响整体布局,比如某个CSS的背景色变了,但元素的几何尺寸和位置不变。

reflow: 因为元件的几何尺寸变了,当我们 时要重新验证并计算渲染树。是渲染树的一每项或全部指在了变化。这我想要 Reflow,或是Layout。

我想要 当我们 应该尽量减少reflow和replaint,我想要这也是为那此现在很少有用table布局的因为之一。

在绘制阶段,遍历渲染树,调用渲染器的paint()依据在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

当浏览器接收到服务器响应来的HTML文档后,会遍历文档节点,生成DOM树。

在事先写过的一篇《"天龙八步"细说浏览器输入URL后指在了那此》一文中,和当我们 分享了从在浏览器中输入网址URL到最终页面展示的整个过程。每项读者向我反馈对于最后的浏览器渲染布局这块有的是很清晰,我想要 本文就浏览器渲染流程单独开篇讲解,希望当我们 都能有新的收获。

本文我主要以webkit渲染引擎来讲解,尽管webkit和Gecko使用的术语稍有不同,当我们 的主要流程基本相同。

https://sylvanassun.github.io/2017/10/03/2017-10-03-BrowserCriticalRenderingPath/

JS置后:当我们 通常把JS代码放入 页面底部,且JavaScript 应尽量少影响 DOM 的构建。

当解析html的事先,会把新来的元素插入dom树上面,同時 去查找css,为什么会么会让把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。

浏览器解析CSS文件并生成CSS规则树,每个CSS文件都被分析成曾经StyleSheet对象,每个对象都蕴藏 CSS规则。CSS规则对象蕴藏 对应于CSS语法的选着器和声明对象以及我想要 对象。

(浏览器主要组件)

我想要 浏览器的渲染过程主要包括以下几步:

Firefox使用Geoko——Mozilla自主研发的渲染引擎。

我想要 ,script 标签的位置一阵一阵要。实际使用时,可不也能 遵循下面曾经原则:

http://taligarsiel.com/Projects/howbrowserswork1.htm

display:none 会触发 reflow,visibility: hidden属性从不要再是不可见属性,它的语义是隐藏元素,但元素仍然指在着布局空间,它会被渲染成曾经空框,我想要 visibility:hidden 只会触发 repaint,是因为这麼 指在位置变化。

(webkit渲染引擎流程)