嘿,老哥,来了就别跑 !学完 ,不亏
我们再用百度都上网的时候,假设我们在地址栏输入我们想去的网址,然后就得到了我们想要的网站,输入url 之后做了什么呢?就可以执行到我们想要的目的?
是这样,我们在输入 url 之后,浏览器会通过 DNS 进行解析,得到对应的 ip 地址,换句话来说,得到对应的服务器地址。这时服务器会返回一个 index.html(一般情况下,或者main.index等),浏览器会根据这个入口文件,解析这个html,当我们遇到css文件,就会下载css 文件,遇到srcipt 文件 就会下载script 文件。把所有文件下载完毕之后浏览器内核
再去解析文件
这是第一次读取,当我们第二次读取时,域名解析的 ip 会存在本地,浏览器可以直接读取浏览器缓存
浏览器可以分为两部分:
渲染引擎
和js引擎
, 渲染引擎 决定了浏览器该如何显示网页内容及页面的格式信息,渲染引擎是浏览器兼容性问题出现的根本原因;js 引擎 用来解释网页语法,并渲染到网页上。 由于 js引擎 越来越独立,浏览器内核偏向指向于 渲染引擎
渲染引擎:
负责HTML解析、布局、渲染等相关的工作JS引擎:
是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器之中。不同浏览器是有不同内核组成的
刚刚我们说到,各种文件下载下来之后,再由浏览器引擎进行解析,根据上附图,我们来看下渲染过程
加载执行js 代码
,因为js 会对dom 进行一些操作的,比如新增一个节点。 ( 我们都知道js 是一个高级语言,cpu 是不认识的,那这就要用 js引擎
来执行 )我们都知道 js 是一个高级语言,cpu 是不认识的 ,js 引擎 用来执行 js 代码
为啥?
高级的编程语言
都是需要转成最终的机器指令
来执行的CPU执行
的机器语言
),才能被CPU所执行JavaScript引擎
帮助我们将JavaScript代码翻译成CPU指令
来执行JavaScript引擎
十年前,你说浏览器就是IE , 有人会出来反对
现在,你说浏览器是Chrome ,最多有人纠正你
那 chrome 浏览器 为什么能占据 60% 的市场呢?
“基于多进程模型” 和 “V8 的高效快速”,还有 关于遵循的开源协议
关于进程 可以看看我在最下面写的 关于浏览器的周边知识 (以下)
我们来看一下官方对V8引擎的定义:
C ++
编写的Google
开源高性能
JavaScript 和 WebAssembly引擎
,它用于 Chrome 和 Node.js 等。(看的懂,看! 看不懂,没关系,接着看!!!)
先不要慌,稳住!老哥!别怕,不难
我们都知道,cpu 是执行我们的指令的,而高级语言是不能直接被 cpu 执行的,需要转化为低级语言才行,所以我们需要借助 js 引擎帮助我们把高级语言 " 翻译 " 为低级语言, 现在把你卡姿兰的大眼睛瞄到上个图,红色框框的就是v8 引擎做的事,v8 引擎 是目前性能最高的 js 引擎,先不用在意看不懂这件事,接着往下走
假设我这有一坨代码: const name = ‘haha’
看图,
parse 是解析,它包括 词法分析
和 语法分析
词法分析:
生成一个数组 tokens: [ ],用来存放每个词的信息
对每个词进行分割, tokens: [ { type: ‘keyword’ , value:‘const’ } , { type: ‘indentifier’ , value:'name }]
会进行判断,比如 const , 会先定义他的类型是一个关键字(keyword),并且它的值为 const
包括等号,分号都会进行分析
好处:
我们把这些划分为一个个小对象,这样很容易进行语法分析
…
语法分析: AST 抽象语法树
根据语法分析之后我们进行语法分析,会生成一个 AST 抽象语法树
比如 ts 转化为 js :
ts ——> 通过ast 生成一个新的 ast ——> 改变之后生成新的代码 generate code ——> js代码
好处:
因为他是一个树形,有些属性值是固定的,这样我们很容易转成 es5代码、es6代码、字节码…非常好操作,这个操作是由 ignation 执行的,可以把 ignition 当成一个解释器,
通过 ignition 我们可以转化为字节码,字节码也要经过处理变成汇编指令再得到结果,转化为字节码的好处就是可以跨平台
( 往下看ps )
v8 引擎之所以性能这么高,是因为他还有个库,trunboFan 用来收集信息,比如类型信息。对于执行频率高的函数的就保留
可以看下这个,就是一个模拟 AST 抽象语法树 https://astexplorer.net/
总结:
Parse 模块
会将 JavaScript 代码转换成 AST(抽象语法树),这是因为解释器并不直接认JavaScript代码,如果函数没有被调用,那么是不会被转换成AST的
Ignition
是一个解释器,会将 AST 转换成 ByteCode(字节码),同时会收集 TurboFan 优化所需要的信息(比如函数参数的类型信息,有了类型才能进行真实的运算);如果函数只调用一次,Ignition 会执行解释执行 ByteCode;
TurboFan
是一个编译器,可以将字节码编译为CPU可以直接执行的机器码;如果一个函数被多次调用,那么就会被标记为热点函数,那么就会经过 TurboFan 转换成优化的机器码,提高代码的执行性能; 但是,机器码实际上也会被还原为ByteCode,这是因为如果后续执行函数的过程中,类型发生了变化( 比如 sum 函数原来执行的是 number 类型,后来执行变成了 string 类型),之前优化的机器码并不能正确的处理运算,就会逆向的转换成字节码;
ps :
我们都知道 AST 抽象语法树操作方便,为什么不直接转为机器码呢?是这样的,因为我们 js 代码可能跑在window系统的浏览器里,可能跑在iso 系统的浏览器,可能跑在linux 系统上的浏览器上面…跑的环境不一样,就会拥有不同的 cpu , 不同 cpu 又有着不一样的架构,执行的机器指令是不一样的,所以 字节码的好处就是可以跨平台
备注:
代码执行过程,可以看下我写的文章, 02
加载时
缓存
:客户端控制的强缓存策略
降低请求成本
告辞!!!!
编译器优化:v8引擎使用了即时编译(Just-in-Time Compilation)技术,将JavaScript代码转换为本地机器码,以提高执行速度。它包括解析、分析和优化代码的过程,以便生成高效的机器码。
内存管理:v8引擎使用了高效的内存管理机制,如垃圾回收器(Garbage Collector),用于自动管理内存的分配和释放。它能够及时回收不再使用的内存,避免内存泄漏和过度消耗。
即时优化:v8引擎还具有即时优化功能,它会在代码执行过程中动态地优化性能。例如,它会根据运行时的上下文信息进行内联优化,将函数调用内联到调用处,避免了函数调用的开销。
多线程支持:v8引擎通过使用多线程技术,如并行编译和并行垃圾回收等,提高了执行效率。它可以同时处理多个任务,并充分利用多核处理器的计算能力
先说两个概念,互联网 internet 泛指具有互通的计算机网络;因特网 Internet 是基于TCP/IP 协议族的最大的计算机网络;万维网 web (word wide web) 是基于互联网,由超链接和统一资源标识符(连接)的文件和其他资源的全球集合
万维网由三个部分构成 :
URL 和 URI 的区别:
浏览器可以分为两部分:
渲染引擎
和js引擎
, 渲染引擎 决定了浏览器该如何显示网页内容及页面的格式信息;js 引擎 用来解释网页语法,并渲染到网页上。 由于 js引擎 越来越独立,浏览器内核偏向指向于 渲染引擎
渲染引擎:
负责HTML解析、布局、渲染等相关的工作JS引擎:
是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器之中。十年前,你说浏览器就是IE , 有人会出来反对
现在,你说浏览器是Chrome ,最多有人纠正你
那 chrome 浏览器 为什么能占据 60% 的市场呢?
基于多进程模型
和 V8引擎的高效快速
关于V8引擎的原理 可以看看我 前端 js 之 浏览器工作原理 和 v8引擎 01
这篇文章。
进程是一个程序的运行实例,当我们启动一个程序时,那么操作系统会创建一块内存给代码和运行时的数据使用,并且创建一个线程来处理任务。这个环境就是叫做进程
线程:它是进程的 一个执行任务
或者可以叫做控制单元,负责当前进程中程序的执行。一个进程至少有一个线程,一个进程也可以运行多个线程。
不同进程之间的内容相互隔离,进程通信需要依靠 IPC ( 进程间通讯机制 )
在 chrome 浏览器诞生之前,大多数浏览器都是单进程
所以 chrome 浏览器采用 多进程架构
浏览器是多进程的: 在浏览器中,每打开一个tab页面,其实就是新开了一个进程,在这个进程中,还有ui渲染线程,js引擎线程,http请求线程等。 所以,浏览器是一个多进程的
一个浏览器的进程
协议:保证了通信双方都可以识别的一种约定的数据格式
通过计算机网络可以使多台计算机实现连接,但是位于同一个网络中的计算机
在进行连接和通信时
必须要遵守一定的规则
,就像比在道路中行驶的汽车要遵守交通规则。在计算机网络中,这些连接和通信的规则被称为网络通信协议,它对数据的传输格式、传输速率、传输步骤等做了统一规定,通信双方必须同时遵守才能完成数据交互。
协议类型
http 请求流程:
我们通过URL 请求服务器,服务器会返回给我们网页数据文件,那之间的流程是怎样的呢?
当我们发送请求时,浏览器会找有没有上次请求缓存的文件,如果有且文件没有过期,就会直接使用不再请求,减少了服务器的压力,而且可以快速加载。
如果没有,通过http 做应用层协议( http 协议规定传输包的数据格式),通过 TCP/IP 把他们发送到发送到网络中,发送之前会通过 DNS 通过域名查找到对应的服务器地址,查找到以后对他们进行缓存,如果输入的域名没有加端口号会默认加 80;完成以后为 TCP 建立连接,三次握手四次挥手,就可以正式发送我们的 HTTP ,接下来就是服务端接收到请求并返回数据。
渲染流程:
我们都知道网页的三件套: html css javascript