flytree

浏览器原理

浏览器内核与js引擎

浏览器内核又称“排版引擎”,“渲染引擎”,“浏览器引擎”,叫法很多,简单来说干的活就是将代码(HTML,XML,CSS,图片等)解析排版布局后输出到显示器让你看到。

JavaScript引擎是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器之中。

主流浏览器内核与js引擎:

浏览器 内核 js引擎
Safari WebKit javaScriptCore
Chrome Blink V8
firefox Gecko SpiderMonkey...

浏览器渲染过程概述

输入网址,服务器返回html,浏览器内核开始解析html,遇到link 等之类则会暂停,去下载对应的css或者js。

  1. 首先hmtl会被解析为dom树;
  2. 然后css会被解析为cssom规则树;
  3. 根据dom树和cssom规则树构建渲染树。
  4. 浏览器根据渲染数据进行布局(回流),此阶段浏览器计算各节点在页面中确切位置和大小,也称自动重排。
  5. 布局后进行绘制,将内容显示在屏幕上。

渲染引擎不会等所有html解析完成后再去,构建render tree,而是解析完一部分就显示一部分。以提高用户体验。

V8引擎的执行

V8引擎解析过程概述

image
BLinK内核遇到js代码后,会以流的形式传递给v8,然其开始工作:

  • 首先接收到流后,会有扫描器Scanner对其进行词法分析将代码转化为tokens
  • 然后解析器parser将其转换为AST抽象语法树。
  • 再由解释器ignition(图中闪电部分)生成字节码再进行执行。

Parser再探:

Parser解析的时并不会进行全量解析(全部解析1.耗时间;2.解析后的字节码需放入内存耗内存),而是有延迟解析的策略,也就是一种按需解析给方案,( 理解:首先会Perpaser会解析出所需的最少限度的内容,比如内部有未调用的函数,则解析出函数声明,当调用时则paser对该函数进行完整的解析 )。

Ignition再探:

Ignition关注的是减少 V8 的内存开销,会进行执行前的优化工作。它会将AST进行分析将多次调用的函数标记为热点函数 交由TurboFan进行编译生成优化后的机器码(优化,方便快速调用)执行。而单次调用的函数则会被生成字节码再做执行。所以它也会有编译过程的,所以也有人对JS是否是解释型语言有争议。而正如最新的MDN上的文档说的JavaScript是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,应该是最准确的吧。

V8内存模型

V8的内存主要分为堆和栈两部分,用以执行代码,和JVM有点类似

相关文章: