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

  • 时间:
  • 浏览:1
  • 来源:uu快3玩法_uu快3新平台_棋牌

作者:GavinHsueh

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

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

(webkit渲染引擎流程)

一些情况汇报下,比如修改了元素的样式,浏览器不需要会立刻 reflow 或 repaint 一次,本来会把原来的操作积攒一批,本来做一次 reflow,这又叫异步 reflow 或增量异步 reflow。

参考文献:

display:none 会触发 reflow,visibility: hidden属性不本来否不可见属性,它的语义是隐藏元素,但元素仍然位于着布局空间,它会被渲染成一个多空框,本来visibility:hidden 只会触发 repaint,将会那么 位于位置变化。

本来,script 标签的位置很糙要。实际使用时,要能 遵循下面一个多原则:

在以前写过的一篇《"天龙八步"细说浏览器输入URL后位于了有哪些》一文中,和亲戚亲戚朋友分享了从在浏览器中输入网址URL到最终页面展示的整个过程。每项读者向我反馈对于最后的浏览器渲染布局这块总要很清晰,本来本文就浏览器渲染流程单独开篇讲解,希望亲戚亲戚朋友都能有新的收获。

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

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

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

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

reflow: 原因元件的几何尺寸变了,亲戚亲戚朋友要能 重新验证并计算渲染树。是渲染树的一每项或完全位于了变化。这本来Reflow,或是Layout。

本来亲戚亲戚朋友应该尽量减少reflow和replaint,我我你会 这也是为有哪些现在很少有用table布局的原因之一。

浏览器解析CSS文件并生成CSS规则树,每个CSS文件都被分析成一个多StyleSheet对象,每个对象都带有CSS规则。CSS规则对象带有对应于CSS语法的选泽器和声明对象以及一些对象。

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

JS置后:亲戚亲戚朋友通常把JS代码装入去 页面底部,且JavaScript 应尽量少影响 DOM 的构建。

当解析html的以前,会把新来的元素插入dom树上面,同时去查找css,本来把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。

(浏览器主要组件)

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

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

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

本文亲戚亲戚朋友就浏览器渲染流程逐步了解了一遍,相信亲戚亲戚朋友一定总要所新的收获,将会亲戚亲戚朋友对于浏览器渲染流程还有任何大问题,欢迎反馈,亲戚亲戚朋友同时交流,同时学习,同时进步。

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

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

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

https://segmentfault.com/a/11900000129200187