ZiuChen.github.io/assets/note_Front-end Engineering.md.66f43176.js

2 lines
3.7 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{_ as e,o as i,c as l,a as n}from"./app.94d5b31a.js";const j=JSON.parse('{"title":"前端工程化","description":"","frontmatter":{},"headers":[{"level":2,"title":"Node.js","slug":"node-js","link":"#node-js","children":[{"level":3,"title":"什么是Node.js","slug":"什么是node-js","link":"#什么是node-js","children":[]},{"level":3,"title":"Node.js的应用场景","slug":"node-js的应用场景","link":"#node-js的应用场景","children":[]}]}],"relativePath":"note/Front-end Engineering.md","lastUpdated":1675783866000}'),o={name:"note/Front-end Engineering.md"},t=n('<h1 id="前端工程化" tabindex="-1">前端工程化 <a class="header-anchor" href="#前端工程化" aria-hidden="true">#</a></h1><h2 id="node-js" tabindex="-1">Node.js <a class="header-anchor" href="#node-js" aria-hidden="true">#</a></h2><ul><li>什么是Node.JS Node的应用场景</li><li>JS代码执行</li><li>Node的输入和输出</li><li>Node的全局对象</li></ul><h3 id="什么是node-js" tabindex="-1">什么是Node.js <a class="header-anchor" href="#什么是node-js" aria-hidden="true">#</a></h3><p>Node.js是一个基于<strong>V8 JavaScript引擎</strong>的<strong>JavaScript运行时环境</strong></p><ul><li>V8可以嵌入到任何C++应用程序中无论是Chrome还是Node.js事实上都嵌入了V8引擎来执行JavaScript代码</li><li>在Chrome浏览器中还需要解析、渲染HTML、CSS等相关渲染引擎另外还需要支持浏览器操作的API、浏览器自己的事件循环</li><li>在Node.js中我们也需要进行一些额外操作文件系统读写、网络IO、加密、压缩解压文件等</li></ul><p>可以简单总结出Node.js和浏览器的区别</p><ul><li><p>Chrome浏览器</p><ul><li><p>Blink负责解析HTML文档遇到JavaScript标签时将内容交给V8引擎</p></li><li><blockquote><p>Blink 是 Google Chrome 浏览器的渲染引擎V8 是 Blink 内置的 JavaScript 引擎</p></blockquote><ul><li>预分析检查语法错误但不生成AST树</li><li>生成AST语法分析、词法分析后生成抽象语法树AST <ul><li>AST 为每一行代码定义键值对。初始类型标识符定义 AST 属于一个程序,然后所有代码行将定义在主体内部,主体是一个对象数组。</li></ul></li><li>生成字节码基线编译器Ignition将 AST 转换为字节码</li><li>生成机器代码:优化编译器 (Turbofan) 将字节码转换为优化的机器代码。另外,在逐行执行字节码的过程中,<strong>如果一段代码经常被执行V8会直接将这段代码转换并保存为机器码</strong>,下次执行不需要经过字节码,优化了执行速度</li></ul></li></ul></li><li><p>Node.js</p><ul><li>只处理JavaScript代码 内部V8引擎负责JS代码的执行</li><li>JavaScript代码 -&gt; V8 -&gt; Node.js Bindings -&gt; LibUV</li><li>LibUV是使用<strong>C语言编写的库</strong>,提供了<strong>事件循环、文件系统读写、网络IO、线程池</strong>等等内容</li></ul></li></ul><p>![The Node.js System](Front-end Engineering.assets/The Node.js System.jpeg)</p><h3 id="node-js的应用场景" tabindex="-1">Node.js的应用场景 <a class="header-anchor" href="#node-js的应用场景" aria-hidden="true">#</a></h3><ul><li>前端开发的库都是以node包形式管理的</li><li>npm yarn pnpm成为前端开发使用最多的工具</li><li>使用Node.js作为Web服务器开发、中间件、代理服务器</li><li>借助Node.js完成前后端渲染的同构应用</li><li>编写脚本工具 构建项目 打包代码等</li><li>Electron桌面应用程序</li></ul>',11),s=[t];function d(a,r,c,h,p,u){return i(),l("div",null,s)}const _=e(o,[["render",d]]);export{j as __pageData,_ as default};