浏览器工作原理和V8引擎

想赚点零花钱
278 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

前言

本篇主要是我学习的浏览器工作原理和V8引擎的归纳总结，在这里分享给大家，一起学习，相互进步！如果有写的不对的地方，欢迎掘友们指出，弥补自己的不足，这会促使我不断在前端的道路上努力进步！

游览器的工作原理

大家有没有想过JS在浏览器中是如何执行的？在此之前，我们看下这张图，浏览器是进行怎么样的一个工作流程。

image.png

浏览器的渲染过程

不同的浏览器由不同的浏览器引擎(浏览器内核)组成，而浏览器在渲染的时候，html生成DOM树，css生成style规则附加合并（attachment）生成为渲染树（render tree),然后进行绘制（painting)展示。

提示：Layout作用是浏览器适配布局

image.png

在这个渲染过程中，当html渲染时如果遇到JS标签,则会停止解析，去加载JS代码，JS会对DOM进行操作，这时候用到了JS引擎。

JS引擎

什么是JS引擎，用最简单的话来解释为：将我们编写的js代码来翻译成CPU指令来完成,而我们常说的V8引擎则是由Google开发的高性能JS和Web引擎，用于Chrome和Node.js等。

V8引擎工作原理

V8引擎是由C++编写的，可以单独单独运行，也可以嵌入到任何C++程序中。下图为V8引擎的官方图。

image.png 根据该图我简单的来解释一下这个执行过程：

[Blink] :Google起初使用Webkit作为Chrome浏览器的引擎，后来以Webkit引擎为基础创造了Blink引擎

  1. [Blink(浏览器引擎）]:解析HTML，解析过程中遇到JS就会下载下来以引流的方式传递给V8引擎

  2. [Stream（数据流）]：获取源码并进行编码转换               

  3. [Scanner（扫描器）]：做词法分析的,将JS代码转成tokens                 

  4. [Parser（解析）]：将tokens转换成AST抽象语法树        

  5. [PreParser（预解析）]：预解析后再将数据交给Parser                        

  6. [bytecode（字节码）]: 生成AST树后，会被Ignition（解释器）转成字节码（bytecode）

PreParser（预解析）的作用： 并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会 影响网页的运行效率；
所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行解析(比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析)

avatar
文章
阅读
粉丝