浏览器基础

什么是浏览器？

---

通俗来讲，浏览器就是用来浏览网页用的东西。比如说，火狐、谷歌、ie、safari、欧鹏，对于我们前端来讲我们更多的是关注浏览器的内核。
通用内核：Trident（IE），Gecko（Firefox ），Webkit（Safari），Blink（Chrome ）;
专⽤用浏览器器:Android WebView、iOS UIWebView、WeChat WebView

浏览器结构

---

浏览器一般由七个模块组成，User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI 后端）、Date Persistence（数据持久化存储），如下图：

image.png

• User Interface（用户界面）：包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分；

• Browser engine（浏览器引擎）：可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心；

• Rendering engine（渲染引擎）：解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，也有人称之为排版引擎，我们常说的浏览器内核主要指的就是渲染引擎；

• Networking（网络）：用来完成网络调用或资源下载的模块,基于TCP协议，如HTTP,Websocket；

• UI Backend（UI 后端）： 用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同，但功能都是一样的；

• JavaScript Interpreter（JS解释器 ）：用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore；

• JavaScript Interpreter（数据存储）：浏览器在硬盘中保存的数据，如，BC(浏览器和server)互通数据 cookie、临时Kv,SessionStorage、持久化数据LocalStorage等各种数据，可通过浏览器引擎提供的API进行调用；

浏览器内核

---

通常讲的浏览器内核就是指代的浏览器的渲染引擎（Rendering engine）。不同的浏览器使用不同的渲染内核，对HTML/JS/CSS的标准语法的解释也存在差异，导致在显示效果、语法支持度和渲染效率上也存在差别，所以也就导致了网页程序在不同内核的浏览器下的表现和渲染差异，乃至bug都不统一。

内核是如何来处理网页，让页面显示出来的？

如下图所示：

image.png

一个页面的呈现，粗略的说会经过以下这些步骤：

• DOM 树的构建（Parse HTML）

• 构建 CSSOM 树（Recaculate Style）

  为什么是 Re-caculate Style 呢？这是因为浏览器本身有 User Agent StyleSheet，所以最终的样式是我们的样式代码样式与用户代理默认样式覆盖/重新计算得到的。

• 合并 DOM 树与 CSSDOM 树为 Render 树

• 布局（Layout）

• 绘制（Paint）

• 瓦片化（Tiling）

DOM 树的构建

html通过解析之后会转换成DOM,也就是Document Object Model,

Document Object Model也称'文本对象模型',DOM模型是一个树状的结构（tree），每一层拥有node（节点）

image.png

每个节点有不同的类型，每个类型有基于DOM构建出来更专业的模型；每个模型有Object、Attribute、内容部分的Text。DOM存在的意义一是，方便的把html渲染出来，二是，给JavaScript暴露操作的api接口，所以不管我们用什么方式，我们都是在操作DOM，DOM有的功能，我们都可以用，没有的话，无论用什么方式也没用。如下图所示：

image.png

构建 CSSOM 树

CSSOM 树的构建 “原料” 的来源有：外部 CSS 文件、内部样式、内联样式。
当那浏览器拿到css之后，会根据规则解析成styleSheet，

image.png

构建渲染树（Render）

1.把那到的DOM 树与 CSSOM 树融合成渲染树；
2.渲染树只包括渲染页面需要的节点；

排除

上面是一段嵌入网页的脚本，注意必须指定