前端 js 之 浏览器工作原理 和 v8引擎 01

已于 2024-04-24 14:50:32 修改
阅读量638 收藏 2
点赞数
分类专栏： Js. 文章标签： 前端 javascript
于 2023-10-19 15:11:53 首次发布
来自于 夏夏好好哒，关注我，让我们一起学习
本文链接：https://blog.csdn.net/m0_47186697/article/details/133927377
版权

嘿，老哥，来了就别跑 ！学完 ，不亏 😂

文章目录

一、输入url 之后做了什么


   我们再用百度都上网的时候，假设我们在地址栏输入我们想去的网址，然后就得到了我们想要的网站，输入url 之后做了什么呢？就可以执行到我们想要的目的？

   是这样，我们在输入 url 之后，浏览器会通过 DNS 进行解析，得到对应的 ip 地址，换句话来说，得到对应的服务器地址。这时服务器会返回一个 index.html（一般情况下，或者main.index等），浏览器会根据这个入口文件，解析这个html，当我们遇到css文件，就会下载css 文件，遇到srcipt 文件 就会下载script 文件。把所有文件下载完毕之后浏览器内核再去解析文件

   这是第一次读取，当我们第二次读取时，域名解析的 ip 会存在本地，浏览器可以直接读取浏览器缓存

二、简单了解下浏览器内核

        浏览器可以分为两部分：渲染引擎 和 js引擎 , 渲染引擎 决定了浏览器该如何显示网页内容及页面的格式信息，渲染引擎是浏览器兼容性问题出现的根本原因；js 引擎 用来解释网页语法，并渲染到网页上。 由于 js引擎 越来越独立，浏览器内核偏向指向于 渲染引擎

  1. 渲染引擎： 负责HTML解析、布局、渲染等相关的工作
  2. JS引擎: 是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

不同浏览器是有不同内核组成的

  1. Gecko：早期被 Netscape 和 Mozilla Firefox 浏览器浏览器使用
  2. Trident：由微软开发，被IE4~IE11浏览器使用，但是 Edge 浏览器已经转向 Blink
  3. Webkit：苹果基于KHTML开发、开源的，用于 Safari，Google Chrome在之前也在使用
  4. Blink：由Google 在KHTML 基础上开发的，是Webkit的一个分支，目前应用于Google Chrome、Edge、Opera等；
  5. …

三、浏览器渲染过程 （渲染引擎）



在这里插入图片描述

刚刚我们说到，各种文件下载下来之后，再由浏览器引擎进行解析，根据上附图，我们来看下渲染过程

  1. 我们都知道啊，index.html 是第一个被下载的，html 里面无非就是一些标签，这时就会通过我们的浏览器内核 parser 会将我们的html 解析成一个 Dom Tree
  2. 在解析dom 过程中，如果遇到 javaScript 标签，会停止解析html , 而去加载执行js 代码，因为js 会对dom 进行一些操作的，比如新增一个节点。 （ 我们都知道js 是一个高级语言，cpu 是不认识的，那这就要用 js引擎 来执行 ）
  3. 同样的道理，浏览器内核 parser 解析我们的css ，因为style 有很多规则，color ，display 等等，这些规则会应用到dom树上，通过html 和 css的结合，就会生成一个渲染树
  4. layout 是布局引擎，比如在设置了定位之后，布局引擎会根据浏览器页面大小进行处理，这时再生成新的渲染树
  5. 最后我们浏览器内核再进行绘制，进行展示

四、js 引擎


我们都知道 js 是一个高级语言，cpu 是不认识的 ，js 引擎 用来执行 js 代码

为啥？

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

JavaScript引擎

  1. SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
  2. Chakra：微软开发，用于IT浏览器；
  3. JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
  4. V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
  5. 等等…



请添加图片描述


五、chrome


十年前，你说浏览器就是IE , 有人会出来反对
现在，你说浏览器是Chrome ，最多有人纠正你


那 chrome 浏览器 为什么能占据 60% 的市场呢？

“基于多进程模型” 和 “V8 的高效快速”，还有 关于遵循的开源协议


关于进程 可以看看我在最下面写的 关于浏览器的周边知识 (以下)

五、v8 引擎原理


我们来看一下官方对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 ++ 应用程序中

(看的懂，看！ 看不懂，没关系，接着看！！！)


请添加图片描述
                           先不要慌，稳住！老哥！别怕，不难 👌


   我们都知道，cpu 是执行我们的指令的，而高级语言是不能直接被 cpu 执行的，需要转化为低级语言才行，所以我们需要借助 js 引擎帮助我们把高级语言 " 翻译 " 为低级语言， 现在把你卡姿兰的大眼睛瞄到上个图，红色框框的就是v8 引擎做的事，v8 引擎 是目前性能最高的 js 引擎，先不用在意看不懂这件事，接着往下走

假设我这有一坨代码： const name = ‘haha’

  1. 看图，

  2. parse 是解析，它包括 词法分析 和 语法分析

  3. 词法分析：

    生成一个数组 tokens: [ ]，用来存放每个词的信息

    对每个词进行分割， tokens: [ { type: ‘keyword’ , value:‘const’ } , { type: ‘indentifier’ , value:'name }]

    会进行判断，比如 const , 会先定义他的类型是一个关键字（keyword），并且它的值为 const
    包括等号，分号都会进行分析

    好处: 我们把这些划分为一个个小对象，这样很容易进行语法分析
    …

  4. 语法分析： AST 抽象语法树

    根据语法分析之后我们进行语法分析，会生成一个 AST 抽象语法树

    比如 ts 转化为 js ：
    ts ——> 通过ast 生成一个新的 ast ——> 改变之后生成新的代码 generate code ——> js代码

    好处: 因为他是一个树形，有些属性值是固定的，这样我们很容易转成 es5代码、es6代码、字节码…非常好操作，这个操作是由 ignation 执行的，可以把 ignition 当成一个解释器，

  5. 通过 ignition 我们可以转化为字节码，字节码也要经过处理变成汇编指令再得到结果，转化为字节码的好处就是可以跨平台 ( 往下看ps )

  6. 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 又有着不一样的架构，执行的机器指令是不一样的，所以 字节码的好处就是可以跨平台

备注：

  1. 机器码：机器码就是cpu能够直接读取并运行的代码，用二进制编码表示，也叫做机器指令码。
  2. 字节码：字节码是一种中间状态的二进制代码，是由源码编译过来的，可读性没有源码高。而且cpu也不能够直接读取字节码，在java中，字节码需要经过JVM虚拟机转译成机器码之后，cpu才能够读取并运行
  3. 采用字节码的好处：比如java语言，通过字节码的方式，在一定程度在解决了传统解释型语言执行效率低的问题，同时又保留了解释型语言可移植的特点。所以java程序运行时比较高效，而且由于字节码并不专对于一种特定的机器，因此java程序无需重新编译便可以在多种不同的计算机上运行
  4. 什么是字节码文件？
    字节码文件是经过编译器预处理过的一种文件，是JAVA执行文件的存在形式。
    它本身是二进制文件，但是不可以被系统直接执行，而是需要虚拟机（JVM）解释执行。由于被预处理过，所以比一般的解释代码要快，但是仍然会比系统直接执行的慢

代码执行过程，可以看下我写的文章， 02

八、浏览器性能优化


加载时

  1. 减少http请求 （精灵图，文件的合并）
  2. 减少文件大小 （资源压缩，图片压缩，代码压缩）
  3. CDN （第三方库，大文件，大图）
  4. SSR 服务器端渲染，预渲染
  5. 懒加载
  6. 分包
  7. 减少dom操作，避免回流，文档碎片（一种虚拟的DOM节点，存在于内存中）

九、前端性能优化

缓存：客户端控制的强缓存策略

降低请求成本

  1. http dns 由客户端控制，隔一段时间主动请求dns获取域名ip，不走系统的dns
  2. tcp/tls 连接复用：减少请求数
  3. js.css打包到html
  4. js控制图片异步加载或者懒加载
  5. 小型图片使用精灵图
  6. 减少传输体积
  7. 懒加载：自定义属性data-src存放真正需要显示的图片路径

告辞！！！！

请添加图片描述











v8性能高的原因：

  1. 编译器优化：v8引擎使用了即时编译（Just-in-Time Compilation）技术，将JavaScript代码转换为本地机器码，以提高执行速度。它包括解析、分析和优化代码的过程，以便生成高效的机器码。

  2. 内存管理：v8引擎使用了高效的内存管理机制，如垃圾回收器（Garbage Collector），用于自动管理内存的分配和释放。它能够及时回收不再使用的内存，避免内存泄漏和过度消耗。

  3. 即时优化：v8引擎还具有即时优化功能，它会在代码执行过程中动态地优化性能。例如，它会根据运行时的上下文信息进行内联优化，将函数调用内联到调用处，避免了函数调用的开销。

  4. 多线程支持：v8引擎通过使用多线程技术，如并行编译和并行垃圾回收等，提高了执行效率。它可以同时处理多个任务，并充分利用多核处理器的计算能力



关于浏览器的周边知识 (以下)


先说两个概念，互联网 internet 泛指具有互通的计算机网络；因特网 Internet 是基于TCP/IP 协议族的最大的计算机网络；万维网 web (word wide web) 是基于互联网，由超链接和统一资源标识符（连接）的文件和其他资源的全球集合

万维网由三个部分构成 ：

  1. 统一资源标识符 URI （由一个字符串来表示抽象的或者物理的资源）
  2. 超文本标记语言 html ( 超文本：含有指向其他资源链接的文本；标记语言：通过一些标签包裹的元素，这些标记会被浏览器识别为超链接或者文本段等)
  3. 超文本传输协议 http （传输 html 的一个协议）

URL 和 URI 的区别：

  1. URL 统一资源 定位 符
  2. URI 统一资源 标识 符
  • 这样说吧， URI 是一个抽象的地址，URL 是一个具体的地址
    抽象的地址：安徽省亳州市
    具体的地址：安徽省亳州市利辛县汝集镇 223号
  • 所以说 URL 是 URI 的子集
  • 再举个例子：
    http://www.csdn.net 是一个服务器地址，但是没有具体到文件是什么类型 (URI)
    http://www.csdn.net/image/logo.gif 这就是一个很具体的地址 （URL）

一、 浏览器 Chrome


        浏览器可以分为两部分：渲染引擎 和 js引擎 , 渲染引擎 决定了浏览器该如何显示网页内容及页面的格式信息；js 引擎 用来解释网页语法，并渲染到网页上。 由于 js引擎 越来越独立，浏览器内核偏向指向于 渲染引擎

  1. 渲染引擎： 负责HTML解析、布局、渲染等相关的工作
  2. JS引擎: 是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

  • 十年前，你说浏览器就是IE , 有人会出来反对
    现在，你说浏览器是Chrome ，最多有人纠正你

  • 那 chrome 浏览器 为什么能占据 60% 的市场呢？
    基于多进程模型和 V8引擎的高效快速

关于V8引擎的原理 可以看看我 前端 js 之 浏览器工作原理 和 v8引擎 01 这篇文章。

二、 进程


进程是一个程序的运行实例，当我们启动一个程序时，那么操作系统会创建一块内存给代码和运行时的数据使用，并且创建一个线程来处理任务。这个环境就是叫做进程

线程：它是进程的 一个执行任务 或者可以叫做控制单元，负责当前进程中程序的执行。一个进程至少有一个线程，一个进程也可以运行多个线程。

  1. 多个线程之间可以进行数据共享，
  2. 进程关闭后内存会正确回收，
  3. 但是如果一个线程发生崩溃，整个进程就会崩溃，

不同进程之间的内容相互隔离，进程通信需要依靠 IPC ( 进程间通讯机制 )


在这里插入图片描述

在 chrome 浏览器诞生之前，大多数浏览器都是单进程

  1. 单进程的所有功能模块都在同一个进程中运行的，如果有一个产生问题，整个进程都会跟着崩溃，必须对浏览器进行重启；
  2. 因为页面所有的功能都在一个进程中，当一个页面卡住时，所有页面都会卡住，所以卡也是一个问题；
  3. 因为所有页面都在一个进程中，单个页面的数据因为代码编写问题而出现内存泄漏，在关闭页面时，泄露的内存并不会进行回收会导致浏览器会越用越卡；
  4. 插件和渲染线程拥有很高的权限。插件和渲染线程中包括各种脚本代码，而这些脚本代码通常是由第三方编写的，如果有恶意插件或者网站可以通过权限来读取本地数据

所以 chrome 浏览器采用 多进程架构

  1. 每个页面有单独渲染进程和插件进程
  2. 每个页面的渲染进程和插件进程都放进沙箱内，让他们不能获取系统权限
  3. 权限问题统一交给浏览器的主线程来操作
  4. 不同进程之间通过 IPC 来传输数据

浏览器是多进程的： 在浏览器中，每打开一个tab页面，其实就是新开了一个进程，在这个进程中，还有ui渲染线程，js引擎线程，http请求线程等。 所以，浏览器是一个多进程的


请添加图片描述


一个浏览器的进程

请添加图片描述

  • 浏览器进程： 负责页面的展示，用户的交互，管理子进程还有提供存储功能
  • 网络进程 : 下载网络资源
  • GPU进程：绘制网页和UI界面
  • 渲染引擎：js引擎 和 排版引擎
  • 插件引擎： 扶着加载和运行页面上的插件

三、协议

协议：保证了通信双方都可以识别的一种约定的数据格式

通过计算机网络可以使多台计算机实现连接，但是位于同一个网络中的计算机 在进行连接和通信时 必须要遵守一定的 规则，就像比在道路中行驶的汽车要遵守交通规则。在计算机网络中，这些连接和通信的规则被称为网络通信协议，它对数据的传输格式、传输速率、传输步骤等做了统一规定，通信双方必须同时遵守才能完成数据交互。

协议类型

  1. 互联网协议：基于IP协议的一个体系架构，想要进行数据的传输，每个主机都要有特定的 ip 地址
  2. ip协议，通过dns 进行域名解析，找到对应的网址，并进行缓存
  3. http 超文本传输协议：规定传输包的数据格式
  4. 通过tcp/ip 发送到网络中
  5. udp ,通过端口号访问指定程序，但是不能保证对方确定接受到
  6. tcp（传输控制协议） 解决了udp 传输不可靠问题，增加了重传机制，tcp协议是面对连接的，传输前会和目标设备进行连接，传输完成后断开

http 请求流程:

我们通过URL 请求服务器，服务器会返回给我们网页数据文件，那之间的流程是怎样的呢？
在这里插入图片描述

当我们发送请求时，浏览器会找有没有上次请求缓存的文件，如果有且文件没有过期，就会直接使用不再请求，减少了服务器的压力，而且可以快速加载。

如果没有，通过http 做应用层协议（ http 协议规定传输包的数据格式），通过 TCP/IP 把他们发送到发送到网络中，发送之前会通过 DNS 通过域名查找到对应的服务器地址，查找到以后对他们进行缓存，如果输入的域名没有加端口号会默认加 80；完成以后为 TCP 建立连接，三次握手四次挥手，就可以正式发送我们的 HTTP ，接下来就是服务端接收到请求并返回数据。

在这里插入图片描述



四、浏览器渲染


渲染流程:

在这里插入图片描述

我们都知道网页的三件套： html css javascript

  1. html 超文本标记语言，由各种标签组成，标签可以代表元素类型，html 是网页的骨架
  2. css 层叠样式表，可以赋予网页各种好看的样式，排版
  3. js 给网页赋予各种逻辑，让网页变得具有交互性
  • 因为网页不能识别html , 需要通过 html 解析器转化为dom树，供后续的步骤使用 （网络进程加载多少数据，解析器就会解析多少数据，网络进程会实时把获取的数据传递给渲染进程，由解析器解析 ）
  • …
  • 看我正篇吧，比较详细
夏夏好好哒
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
interview:前端面试浏览器原理v8内存管理http1.xhttp2 webpack babel前端es6手撕
03-23
打字稿 引导程序 http，html，浏览器 jQuery的 吞咽 网路 数据结构与算法 安全 节点 项目业务 自我介绍 手撕代码 路由实现babel实现webpack实现配置加载程序插件优化文件监听工作原理 vue原理实现vuex 汇总webpack之间选择 css浏览器的一些宽高可是区域滚动区域 docker原理kubernetes 信使 地理服务器 浏览器原理浏览器缓存机制缓存 http https 项目优化为什么要使用单页面应用 基础实战经验欠缺刷题 js基础 1.let const var let const不存在变量提升 var声明的变量会挂到windows上，让const不会 var是函数作用域，let const是代码块作用域 const初始化的时候就要赋值，并且赋值之后不能被修改对象不能修改引用地址，引用属性可以修改 2.箭头函数 没有自己的这个和参数 没有原型
浏览器的组成
weixin_30852367的博客
06-26 177
·外壳shell：User Interface（用户界面）、Browser engine（浏览器引擎）、Networking（网络）、UI Backend（UI 后端）、Date Persistence（数据持久化存储） 1.相互工作： 用户界面 －包括地址栏、后退/前进按钮、书签目录等，也就是你-所看到的除了页面显示窗口之外的其他部分 浏览器引擎 －可以在用户界面和渲染引擎之...
图解 V8 执行 JS 的过程
dfc_dfc的博客
02-09 1028
v8引擎解析JS过程
frontend-notes:前端学习笔记
05-24
home heroImage actionText actionLink features footer true ./logo.jpg 开始阅读 → HTML/标准模式与混杂模式.md title details HTML 包含 HTML 标准、特殊属性、H5 新增功能和开发中需要注意的地方 title details CSS 包含页面布局、BFC、清除浮动、CSS3 和屏幕适配 title details JavaScript 包含 JS 数据类型、闭包、原型链、JS 继承、执行上下文、事件循环和异步 title details 计算机网络 包含五层协议栈、TCP、HTTP、Ajax 通信和跨域等 title details 浏览器 包含浏览器多进程架构、网络请求和页面渲染流程、事件循环和消息队列、垃圾回收和 V8 引擎等 title details 前端框架 常见的 React、Vu
前端面试必备最新八股文（基础+进阶内容)2024年最新.docx
03-05
博主收录了面试中遇到的问题，帮助前端同行拿offer，冲大厂。适用于前端初级开发，中级开发，高级开发。包括了css，javascript，vue，webpack，vite，html5新特性等等，包括了面试中比较常见的BFC，v8垃圾回收机制，vite和webpack的区别，vue中遇到的问到，防抖节流，深拷贝，浅拷贝，盒子模型，作用域，闭包，浏览器缓存机制，css变量，script标签中的defer和async，HTTP1.0 和 HTTP2.0的区别，SEO（Search Engine Optimization）搜索引擎优化，map 、set 、weakMap 、weakSet，强引用和弱引用之间的区别，Arraybuffer应用场景， 同步、异步、宏任务、微任务，纯函数和副作用函数，AMD CMD CommonJs，module、chunk、bundle有什么区别，vdom优缺点，vmin/vmax 概述（B站为什么使用的是vmin），清除浮动，script标签中的defer等等等。 冲大厂必备，社招必备，已经帮助近百名同学拿下offer，博主在这里分析给大家，祝愿大家拿高薪！
2023年前端面试必备最新八股文（基础+进阶内容+持续更新）
02-27
博主收录了面试中遇到的问题，帮助前端同行拿offer，冲大厂。适用于前端初级开发，中级开发，高级开发。包括了css，javascript，vue，webpack，vite，html5新特性等等，包括了面试中比较常见的BFC，v8垃圾回收机制，vite和webpack的区别，vue中遇到的问到，防抖节流，深拷贝，浅拷贝，盒子模型，作用域，闭包，浏览器缓存机制，css变量，script标签中的defer和async，HTTP1.0 和 HTTP2.0的区别，SEO（Search Engine Optimization）搜索引擎优化，map 、set 、weakMap 、weakSet，强引用和弱引用之间的区别，Arraybuffer应用场景， 同步、异步、宏任务、微任务，纯函数和副作用函数，AMD CMD CommonJs，module、chunk、bundle有什么区别，vdom优缺点，vmin/vmax 概述（B站为什么使用的是vmin），清除浮动，script标签中的defer等等等。 冲大厂必备，社招必备，已经帮助近百名同学拿下offer，博主在这里分析给大家，祝愿大家拿高薪！
前端JS学习（一）
qq_50086023的博客
09-01 410
前端JS学习（一）
前端——JS
m0_68519425的博客
05-12 925
（1）一个事件可以同时绑定多个JS函数（2）一个页面元素可以同时绑定多个事件。
web前端 js基础
S788977SS的博客
05-03 122
数组也是一个对象它和我们普通对象功能类似，也是用来储存一些值。不同的是普通对象是使用字符串作为属性名的，而数组使用数字来作为索引来操作元素索引（index）：从0开始的一个整数数组存储性能比普通对象好，在开发中经常使用数组来储存数据var arr=new Array()//创建一个数组arr[0]=12;arr[1]=22;arr[2]=33;console.log(arr[1])//读取数组中的元素，读取到不存在的索引会返回undefind获取数组长度。
JS系列(二) - V8引擎的运行原理
qq_44376306的博客
10-21 609
当我们编写JavaScript代码时，它实际上是一种高级语言，这种语言并不是机器语言。高级语言是设计给开发人员使用的，它包括了更多的抽象和可读性。但是，计算机的CPU只能理解特定的机器语言，它不理解JavaScript语言。这意味着，在计算机上执行JavaScript代码之前，必须将其转换为机器语言。这就是JavaScript引擎的作用：事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
前端javaScript
weixin_71243923的博客
09-27 1565
java后端程序员需要用到的前端js知识
前端必备Node学习，node一学前端通透
12-26
Node.js是目前非常火热的技术，但是它的诞生经历却很奇特。Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具！Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使得 Node.js 的性能非常好。npm 以其简单的结构帮助 Node.js 生态系统蓬勃发展，现在 npm 仓库托管了超过 1,000,000 个开源包，你可以自由使用。
node-v14.7.0-x64.msi
08-07
Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！ Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使 Node.js 表现得非常出色。 Node.js 应用程序运行于单个进程中，无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原生功能（用以防止 JavaScript 代码被阻塞），并且 Node.js 中的库通常是使用非阻塞的范式编写的（从而使阻塞行为成为例外而不是规范）。 当 Node.js 执行 I/O 操作时（例如从网络读取
JavaScript-Algorithms:基础理论+ JS框架应用+实践，从0到1内置整个前端算法体系
03-14
JavaScript算法 我是瓶子君，公众号“前端瓶子君”作者，前端进阶博客： : 作为一名前端，虽然在平常开发中很少编写算法，但当我们需要深入前端框架，开发语言，开源库时，懂算法将大大提高我们看源码的能力。例如： virtual-dom diff算法做了一些约定，后将原先O（n3）的时间复杂度降到了O（n），核心原理就是一个树的深度优先搜索 babel这些就是一些编译原理的解析器，生成抽象语法树的知识，再将抽象语法树进行转换操作生成文件 浏览器的历史，只能可以使用栈来实现 webpack中利用tree-shaking优化 v8中的调用栈，消息集群等等 这些就大量使用了算法，看懂了就能更好地了解它们的性能，更高效的解决问题，提升我们的代码质量与思维视野，进阶到更高层次，赚更多钱 :money_bag: :money_bag: :money_bag: 。 所以说，学算法是每个前端进阶必备！ :fuel_pump: :fuel_pump: :fuel_pump: 所以，这里我整理了一份适用
前端开源库-qp-utility
08-30
前端开源库-qp-utilityqp实用程序、用于服务器（v8）和现代浏览器的javascript实用程序
vue中的node框架
05-21
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。 Node在vue项目开发中起到很大的重要，相关的语句我会在后期的文章中有所提及，今天我上传的只是Node框架的相关文件，有需要者下载即可。
chrome 浏览器本地安装包
04-08
chrome浏览器官方版是Google开发的一款基于JavaScript V8引擎的快速、安全浏览器,chrome浏览器官方版的最大特点超级简洁的界面,给用户最简单的使用体验,上网更轻松。 通过 Gmail、Google Pay 和 Google 助理等 ...
function:具有浏览器访问权限JavaScript无服务器功能
04-03
内容怎么运行的每次调用Microlink Function时，都会在安全的V8沙箱中远程编译和执行代码功能。 它与AWS Lambda非常相似，但是所有代码都将远程执行，而不是捆绑您的代码，将执行结果返回给您。 可以在前端或后端调用...
【前端】数组的常用处理函数
最新发布
lcukyNwa的博客
04-22 418
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
Vue与node.js的工作原理
05-10
Vue和Node.js是两个不同的技术，分别用于前端和后端开发。Vue是一个流行的JavaScript框架，用于构建单页面应用程序（SPA）以及其他Web应用程序。而Node.js是一个基于Chrome V8引擎的JavaScript运行时，用于构建服务器端应用程序。 Vue的工作原理是通过组合各种组件来构建一个完整的Web应用程序。Vue应用程序通常由多个组件组成，每个组件都有自己的状态和行为。Vue使用虚拟DOM（Virtual DOM）来追踪应用程序的状态变化，并在必要时更新DOM。Vue还提供了一组内置指令和组件，可以轻松地处理用户输入、渲染列表、显示条件内容等常见任务。 Node.js的工作原理是通过事件驱动、非阻塞I/O的方式来处理并发请求。Node.js使用单线程事件循环模型来处理客户端请求，可以处理大量的并发连接。Node.js还提供了一组内置模块，可以轻松地处理文件I/O、网络I/O、加密、压缩等任务。 当Vue和Node.js一起使用时，Vue通常作为前端框架，在浏览器中运行，而Node.js作为后端框架，运行在服务器上。Vue应用程序可以通过HTTP请求与Node.js后端进行通信，例如通过AJAX或WebSockets发送数据。Node.js后端可以处理这些请求并返回响应，或者处理与数据库的交互等任务。通过这种方式，Vue和Node.js可以协同工作，构建完整的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值