浏览器运行原理浅析
浏览器
什么是浏览器？
网页浏览器（英语：web browser），常被简称为浏览器，是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志。信息资源中的超链接可使用户方便地浏览相关信息。
浏览器的主要功能室向服务器发送请求，在窗口中展示你想要获取的资源，这里所说的资源一般是指 HTML 文档，也可以是 PDF、 图片或其他的类型。 资源的位置由用户使用URI（统一资源标符）指定。
主流浏览器和浏览器分类
目前使用的主流浏览器有五个：Internet Explorer、 Firefox、 Safari、 Chrome 和 Opera。
浏览器按照引擎分类：
(1) Trident引擎：Internet Explorer
(2) Webkit引擎：Chrome（28版本后基于blink，blink是webkit的一个分支）和Safari
(3) Gecko引擎：Firefox
(4) Presto引擎：早期Opera采用，后用webkit引擎。
浏览器的主要构成
浏览器的主要组件包括：
- 用户界面：包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
- 浏览器引擎：用来查询及操作渲染引擎的接口。
- 渲染引擎：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
- 网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
- UI后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
- JS解释器：用来解释执行JS代码。
- 数据存储：属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。
浏览器运行原理
1.渲染引擎
浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。渲染引擎包含两部分，一部分是对HTML，CSS的代码解析（渲染引擎，如 blink 引擎 or 内核），一部分负责 JavaScript 代码的解析（JavaScript 引擎，如 V8 引擎）。
2.HTML解析过程
当用户在浏览器键入某网站地址，网站首页文档 index.html 加载完成后，浏览器开始解析 HTML。下文根据不同的 HTML 资源结构分析解析过程。
2.1 纯 HTML 文档，无 CSS 和脚本
如果 HTML 文档中只有 HTML，没有 CSS 和脚本的话，问题极其简单。浏览器解析 HTML，构建 DOM 树，DOM 树构建完成后（触发 DOMContentLoaded 事件），构建 render 树，接着布局和绘制像素。
2.2 包含内联样式和内联脚本的 HTML 文档
HTML文档中存在内联样式和脚本，这个时候就稍微复杂了一点。浏览器解析HTML，构建DOM树，当解析到 <style> 标签的时候样式信息开始被解析，CSSOM被构建。因为脚本有可能改变 DOM 内容，所以 HTML 的解析必须等到脚本执行完毕后再继续。脚本又有可能操作 CSSOM ，所以脚本必须等到 CSS 解析完毕后才能执行。确保此刻 CSS 解析完成，脚本被交到 JS 引擎手里，由 JS 引擎执行。当脚本执行完毕，HTML 继续解析，直到全部 HTML 解析完毕，DOM 树构建完成。
2.3 包含外部 CSS 和脚本的 HTML 文档
如果 HTML 文档中存在外联样式表和脚本，问题变得更复杂了。HTML 文档加载完成后，浏览器首先扫描 HTML 文档，查看有哪些外部资源需要启动 network operation 来请求资源，并在 HTML 解析的同时，发送所有的请求。CSS 资源加载完毕后，会立即开始解析构建 CSSOM。当 HTML 解析到<script>标签，先确认脚本加载完毕了没，如果没，那得等；如果加载好了，还得看 CSS 解析好了没。如果没，那还得等；如果 CSS 解析好了，那就能把脚本交给 JS 引擎去执行了。当 JS 执行完毕，HTML 继续解析，DOM 继续构建，直到全部构建完成，DOMContentLoaded 事件被触发。紧接着，就是构建 render 树。
如果脚本有async属性，问题就又不一样了。async属性默认该脚本不会影响到 DOM 内容，所以只要脚本下载完成，（相关）CSS 解析完毕，脚本立刻执行，不用等着 HTML 解析到<script>标签再开始执行。同样，HTML 也不会等着脚本执行完毕再解析。仿佛两者看不到对方，只管做自己的事情就行了。
3.JS解释器
上面提到解析后会把脚本交给 JS 引擎处理，那么JS引擎是如何执行脚本呢？
3.1扫描全局变量，确定所有已声明的变量或函数名
JS解释器会对全局变量进行扫描，结束后得到全局环境中的的变量对象此过程发生了变量声明提升和函数声明提升。
3.2 顺序执行所有语句
当 JS 解释器知道整个文件中都有哪些声明好的全局变量或函数后，就会开始顺序执行文件中的语句，当然是从第一行开始。如果是赋值语句，就执行赋值操作；如果是函数调用语句，就执行函数调用。
下图是 debugger 刚开始时变量的情况，很明显，刚刚被 JS 解释器点过名，还没有开始执行赋值操作。
变量声明提升
当解释器移动到下一行代码时，这个变量也就被赋值，存储了数据。在本例中这个数据是个对象类型，有两个属性，其中一个是数组，另一个是空值。
变量赋值操作
脚本的最后是函数调用语句：
函数调用
JS 解析器执行到这里，准备调用 octopus的 init方法。
当所有的语句执行完毕后，JS 解释器任务结束，主导权交到 HTML 解析器手中，浏览器继续解析 HTML 文档。
从上述过程，我们能看出浏览器解析渲染 HTML 文档是单线程的，除了发送外部资源请求的操作。
本文参考文章
链接：https://blog.****.net/u014744118/article/details/80698602
来源：****