深入浅知浏览器&&js高级知识总结

方木头
201 阅读9分钟 
前端知识概念纷繁复杂，相对零散，特在此对本人已知的知识概念作总结汇总，希望通过本文完成对前端知识汇总，
梳理前端背景知识架构。

一：B/S

    在软件工程中，绝大多数架构都基于两种架构：B/S，C/S。
    对于前端来说，我们所有开发的项目都属于B/S架构。
    B与S 俗称B端与S端，B端在我理解就是浏览器，web前端就是开发在pc端上浏览器的应用，h5就是开发在手机浏览器的应用。
    S端在这里统称为服务器端。针对前端我们主要的学习和研究的对象就是浏览器。

二：浏览器&浏览器内核

   针对浏览器，我们要知道浏览器是电脑上的一个应用程序，它与微信，qq一样是一个运行在pc或手机上的一个应用程序，
   是我们开发的前端程序的运行载体，也就是说我们开发的程序最终都是要在浏览器上运行的。

浏览器为什么能够运行我们的程序？

   一个完整的浏览器包括浏览器的内核和浏览器的外壳，其中浏览器的内核是浏览器的核心部分。所以浏览器能够运行我们的程序的
   主要原因是因为浏览的内核提供了对应的功能。

浏览器的内核构成

   浏览器的内核主要分为两个部分：渲染引擎(Render Engine)和JS引擎，由于JS引擎越来越独立，所以现在我们所指的浏览器
   内核只指渲染引擎。

内核都做了什么事情？

   渲染引擎： 负责取得网页的内容（HTML、XML、图象等等）、整理信息（例如加入CSS等），以及计算网页的显示方式然后会输出至
   显示器或打印机。
   JS引擎： 执行JavaScript代码的程序或解释器，JS引擎可以实现为标准解释器或即时编译器，它以某种形式将JavaScript
   编译为字节码。

浏览器内核的类型

常见的浏览器内核由如下几种：
       Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用;
       Trident:微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink;
       Webkit:苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用;
       Blink:是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等;

我们开发的应用程序是如何在浏览器上运行的？：从输入 URL 到页面展示这中间发生了什么

1.准备向服务发起请求

 (1)浏览器进程检查 URL，组装协议，构成完整 URL
 (2)浏览器进程通过进程通信（IPC）把 URL 请求发送给网络进程
 (3)网络进程接收到 URL 请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程
 (4)如果没有，网络进程向 web 服务器发起 http 请求（网络请求）

2.向服务器发起http请求

 (1)进行 DNS 解析，获取服务器 IP 地址，端口
 (2)利用 IP 地址和服务器建立 tcp 连接
 (3)构建请求头信息
 (4)发送请求头信息
 (5)服务器响应后，网络进程接收响应头和响应信息，并解析响应内容

3.解析响应内容

  （1)检查状态码，如果是 301/302，则需要重定向，从 Location 自动读取地址，重新进行第2步，如果是 200，则继续
      处理请求
   (2)响应处理：检查响应类型 Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行
              后续渲染。如果是 html 则通知浏览器进程准备渲染进程进行渲染

4.准备渲染

  (1)浏览器进程检查当前 URL 是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的
     渲染进程
  (2)传输数据、更新状态
  (3)渲染进程准备好后，浏览器向渲染进程发起“提交文档”的消息，渲染进程接收到消息和网络进程建立传输数据的“管道”
  (4)渲染进程接收完数据后，向浏览器发送“确认提交”
  (5)浏览器进程接收到确认消息后 engine 浏览器界面状态：安全、地址 URL、前进后退的历史状态、更新 web 页面
  (6)解析html文档过程

截屏2022-04-20 下午10.18.15.png

5.渲染页面

   (1)浏览器不能直接理解 HTML 数据，需要将其转化为 DOM 树结构；由于js代码会对dom结构进行修改，所以在这里需要对js文
      件进行解析，来构成完整的dom树。
   (2)生成 DOM 树后，根据 CSS 样式表，计算出 DOM 树所有节点样式；
   (3)创建布局树：遍历 DOM 树所有可见节点，把这些节点加到布局中，不可见节点忽略，如 head 标签下所有内容，display: 
       none 元素；
   (4)分层：层叠上下文属性的元素（比如定位属性元素、透明属性元素、CSS 滤镜属性元素）提升为单独的一层，需要裁剪的地方
     （比如出现滚动条）也会被创建为图层；
   (5)图层绘制：完成图层树构建后，渲染引擎会对图层树每一层进行绘制，把一个图层拆分成小的绘制指令，再把指令按照顺序组成
      一个带绘制列表；
   (6) 合成线程将图块提交给栅格线程进行栅格化，将图块转换为位图。栅格化过程都会使用 GPU 
      加速，生成的位图保存周期 GPU 内存中；一旦所有图块都被栅格化，合成线程会生成一个绘制图块命令（DrawQuad），
      然后将命令提交给浏览器进程，viz 组件接收到该指令，将页面内容绘制到内存中，显示在屏幕上；
   (7)重排：通过 JavaScript 或者 CSS 修改元素几何位置属性，会触发重新布局，解析后面一系列子阶段；

下面引入一张图辅助理解

截屏2022-04-20 下午10.26.38.png

js引擎详解（V8引擎）

为什么需要JavaScript引擎

(1) 高级的编程语言都是需要转成最终的机器指令来执行的;
(2)我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的
(3)但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行;
(4)所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行;
理解看下图

截屏2022-04-20 下午11.22.35.png

常见js 的引擎

SpiderMonkey:第一款JavaScript引擎，由Brendan Eich开发(也就是JavaScript作者)
Chakra:微软开发，用于IT浏览器;
JavaScriptCore:WebKit中的JavaScript引擎，Apple公司开发;
V8:Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出;

v8引擎

定义：

    (1) V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
    (2)它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32， ARM或MIPS处
     理器的Linux系统上运行。
    (3)V8可以独立运行，也可以嵌入到任何C ++应用程序中。

v8运行原理&&v8架构

运行原理

截屏2022-04-20 下午10.34.22.png

v8架构
Parse模块
(1)Parse模块会将JavaScript代码转换成AST(抽象语法树)，这是因为解释器并不直接认识JavaScript代码; 
(2)如果函数没有被调用，那么是不会被转换成AST的;
(3)Parse的V8官方文档:https://v8.dev/blog/scanner
Ignition
(1) Ignition是一个解释器，会将AST转换成ByteCode(字节码)(转化为字节码的原因是，这样做可以做到跨平台）
(2)同时会收集TurboFan优化所需要的信息(比如函数参数的类型信息，有了类型才能进行真实的运算); 
(3)如果函数只调用一次，Ignition会执行解释执行ByteCode;
(4)Ignition的V8官方文档:https://v8.dev/blog/ignition-interpreter
TurboFan模块
     (1)TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码;
     (2)如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能;
     (3)但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化(比如sum函数原来执行的
     是number类型，后来执行变成了string类型)，之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码;
     (4)TurboFan的V8官方文档:https://v8.dev/blog/turbofan-jit
V8 官方解析图&&执行细节

截屏2022-04-20 下午10.40.17.png

(1)Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换;
(2)Scanner会进行词法分析(lexical analysis)，词法分析会将代码转换成tokens;
(3)接下来tokens会被转换成AST树，经过Parser和PreParser: 
(4)Parser就是直接将tokens转成AST树架构;
(5) PreParser称之为预解析，为什么需要预解析呢?
   这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会 影响网页
的运行效率;
   所以V8引擎就实现了Lazy Parsing(延迟解析)的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂 时需要的内容，
而对函数的全量解析是在函数被调用时才会进行;
   比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析;生成AST树后，会被Ignition
   转成字节码(bytecode)，之后的过程就是代码的执行
   
   

写文章过程中有大量文字和图片引用自coderwhy视频课程资料，如有侵权请及时告知。另参考链接
https://baijiahao.baidu.com/s?id=1725544613016154004&wfr=spider&for=pc
avatar
文章
阅读
粉丝