Skip to content

Instantly share code, notes, and snippets.

@chengmu

chengmu/Browser Internal Notes.md

Last active June 30, 2023 16:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chengmu/5946229 to your computer and use it in GitHub Desktop.
Save chengmu/5946229 to your computer and use it in GitHub Desktop.
Download ZIP
Browser Internal(Render)
Raw
Browser Internal Notes.md

#浏览器渲染

##浏览器组成 浏览器组成

  1. 用户界面－ 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

  2. 浏览器引擎－ 用来查询及操作渲染引擎的接口

  3. 渲染引擎－ 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来

    • Webkit
    • Gekco

  4. 网络－ 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作

  5. UI 后端－ 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口

  6. JS解释器－ 用来解释执行JS代码

  7. 数据存储－ 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

##过程

pro

  1. 渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

  2. Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

  3. Render树构建好了之后，将会执行布局（reflow, Mozilla称其为layout;）过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制（paint,IE称之为draw），即遍历render树，并使用UI后端层绘制每个节点。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

###webkit 渲染流程 Webkit render flow

###Gekco 渲染流程 Gekco render flow

渲染树和Dom树的关系 The render tree relation to the DOM tree 渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。

还有一些Dom元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。例如，select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。同样，当文本因为宽度不够而折行时，新行将作为额外的渲染元素被添加。另一个多个渲染对象的例子是不规范的html，根据css规范，一个行内元素只能仅包含行内元素或仅包含块状元素，在存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元

##Terminology 术语

  • 渲染树（render tree ）

    • DOM树的可视部分 the visual part of the DOM tree
    • 渲染树的节点被称为frames或者boxes(nodes in the render tree are called frames or boxes)

  • reflow[Mozilla] layout[其他浏览器]

    • 重新计算渲染树(recalculating parts of the render tree is called reflow (in Mozilla), and called layout in every other browser, it seems)

  • repaint; redraw[IE/DynaTrace]

    • 使用重新计算的渲染树更新屏幕显示；（Updating the screen with the results of the recalculated render tree is called repaint, or redraw (in IE/DynaTrace)）

#Reference 参考

Mozilla: notes on reflow David Baron of Mozilla: Google tech talk on Layout Engine Internals for Web Developers WebKit: rendering basics - 6-part series of posts Opera: repaints and reflows is a part of an article on efficient JavaScript Dynatrace: IE rendering behavior

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment