浏览器的工作原理

前言

        我相信从事前端开发的童鞋，那必然浏览器会是我们经常打交道的一个“工具”，也会知道不同的浏览器由不同内核组成的

场景的浏览器内核

• Gecko：早期被NetScape和Mozillz FireFox浏览器使用
• Trident：微软开发，被IE4-IE11浏览器使用，但Edge浏览器以及转向Blink
• Webkit：苹果基于KHTML开发，开源的，用于Safari，Google Chrome知己去拿也在使用
• Blink：是WebKit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等等
• 等等...

        但是事实上，我们经常说的浏览器内核指的是浏览器的排版引擎：

• 排版引擎也称为浏览器引擎、页面渲染引擎，和样板引擎。

浏览器的渲染过程

        那么，大家有没有深入思考过：JavaScipt代码，在浏览器中是如何被执行的？

        当我们输入服务器地址的时候，通常在浏览器中给我吗呈现出来的画面其实是一个.html文件，比如index.html。在浏览器中：HTML解析器会将各个标签解析成DOM树，这个时候可能会存在javascript操作dom的情况，这一部份是交给浏览器中的引擎完成的。当遇到css文件的时候，浏览器中的css解析器会将其解析成带有一定规则的css，然后和Dom Tree一起结合，形成渲染树（render tree）。紧接着layout布局引擎对render tree进行布局，形成最终的render tree，进而进行绘制和展示。

        总结浏览器渲染的过程：从下载html/js、css，到浏览器内核进行解析 转成dom tree、render tree再到最终的绘制和展示的过程

认识JavaScript引擎

        在浏览器渲染过程中，我们需要着重需要关注的是，HTML解析的时候遇到javascript标签，会停止解析HTML，而去加载jvavscript代码，那么Javascript是由谁来执行的呢？那便是javaScript引擎。

        为什么需要javascript引擎呢？

• javascript是高级编程语言，高级编程语言都需要转成最终的机器指令来执行的（cpu可识别的指令）
• 我们所编写的javascript无论是交给浏览器还是node执行，最终都需要被cpu执行的
• 而cpu只认识自己的指令集，实际上是机械语言，才能被cpu所执行
• 所以我们需要javascript引擎帮助将我们所编写的代码编译成cpu指令来执行

        比较常见的javascript引擎：

• SpiderMonkey：第一框javascript引擎，由Brendan Eich开发（也是javascript的作者）
• Chakra：微软开发，用于IT浏览器
• JavaScriptCore：WebKit中的javascript引擎，Apple公司开发
• V8：Google开发的强大的javascript引擎，也帮助Chrome从众多浏览器中脱颖而出
• 等等...

浏览器内核和JavaScript引擎的关系

        我们以WebKit内核为例，实际上其是由两个部分组成的。

• WebCode：负责HTML解析，布局，渲染等工作
• JavaScriptCode：负责解析、执行JavaScript代码

如果开发过微信小程序的童鞋应该都这道，讲到这里，其实跟微信小程序段架构非常相似的。

其中微信小程序的架构也是主要由两个部分组成：渲染层与逻辑层

• WebView渲染层：主要是用来进行页面的渲染
• 逻辑层：主要负责对js的解析和执行（实质等价于JavaScript引擎）
• 

V8引擎的执行原理

• V8是用C++编写的Google开源高性能JavaScript‘和WebAssembly引擎，它用于Chrome和Node.js等
• V8可以独立运行，也可以嵌入任何C++应用程序中

         虽然我们的代码是在浏览器中运行的，但实质是浏览器帮我做了这么一件事情。浏览器中的js引擎将js代码转成了cpu可识别的代码，我们是看不到这个过程的，但是最终还是由cpu在运行js代码的，只不过我们看不到。