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

  • 时间:
  • 浏览:0

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

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

JS置后:或多或少人通常把JS代码放上页面底部,且JavaScript 应尽量少影响 DOM 的构建。

当解析html的之后 ,会把新来的元素插入dom树底下,一并去查找css,之后 把对应的样式规则应用到元素上,查找样式表是按照从右到左的顺序去匹配的。

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

本文或多或少人就浏览器渲染流程逐步了解了一遍,相信或多或少人一定总要所新的收获,机会或多或少人对于浏览器渲染流程还有任何大现象,欢迎反馈,或多或少人一并交流,一并学习,一并进步。

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

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

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

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

参考文献:

display:none 会触发 reflow,visibility: hidden属性不须算不算不可见属性,它的语义是隐藏元素,但元素仍然指在着布局空间,它会被渲染成原来空框,之后 visibility:hidden 只会触发 repaint,机会这样指在位置变化。

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

浏览器解析CSS文件并生成CSS规则树,每个CSS文件都被分析成原来StyleSheet对象,每个对象都富含CSS规则。CSS规则对象富含对应于CSS语法的确定器和声明对象以及或多或少对象。

之后 ,script 标签的位置不怎么要。实际使用时,可不可不能否否遵循下面原来原则:

(浏览器主要组件)

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

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

reflow: 原困分析元件的几何尺寸变了,或多或少人时要重新验证并计算渲染树。是渲染树的一每项或完全指在了变化。这之后 Reflow,或是Layout。

之后 或多或少人应该尽量减少reflow和replaint,我让愿意这也是为哪些地方现在很少有用table布局的原困之一。

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

或多或少情况表下,比如修改了元素的样式,浏览器不须会立刻 reflow 或 repaint 一次,之后 会把原来的操作积攒一批,之后 做一次 reflow,这又叫异步 reflow 或增量异步 reflow。

https://segmentfault.com/a/11900000129400187

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

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

(webkit渲染引擎流程)

作者:GavinHsueh

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