Node.js 与 前端开发实战 | 青训营笔记

凤之兮原
63 阅读4分钟

这是我参与【第四届青训营】笔记创作活动的第 11 天，今天学习了 Node.js 的一些知识点

1. Node.js 的应用场景

  • 前端工程化

image.png

  • Web 服务端应用 image.png
  • Electron 跨端桌面引用 image.png

1.1 前端工程化

  • Bundle：webpack , vite, esbuild , parcel
  • Uglify: uglifyjs
  • Transpile: babeljs, typescript
  • 其他语言假如竞争：esbuild，parcel，prisma
  • 现状：难以替代

1.2 Web 服务端应用

  • 学习曲线平缓，开发效率较高
  • 运行效率接近常见的编译语言
  • 社区生态丰富及工具链成熟（ npm , V8 inspector）
  • 与前端结合的场景会有优势（SSR）
  • 现状：竞争激烈，Node.js 有自己独特的优势

1.3 Electron 跨端桌面应用

  • 商业应用：vscode，slack，discord，zoom
  • 大型公司内的效率工具
  • 现状：大部分场景在选型时，都值得考虑

1.4 Node.js 在字节

  • BFF 应用、SSR 应用，例如 Modern.js
  • 服务端应用
  • Electron 应用
  • 每年新增 1000 + Node.js 应用

image.png

2. Node.js 运行时的结构

image.png

2.1 V8, libuv 介绍

  • V8: JavaScript Runtime，诊断调试工具（inspector）
  • libuv: eventloop（事件循环），syscall（系统调用）
  • 举例：用 node-fetch 发起请求时....

2.2 运行时的特点

2.2.1 异步 I/O

image.png

当 Node.js 执行 I/O 操作时，会在相应返回后恢复操作，而不是阻塞线程并占用额外内存等待，如下图

image.png

2.2.2 单线程

image.png

  • JS 单线程
    • 实际：JS 线程 + uv 线程池 + V8 任务线程池 + V8 inspector 线程
  • 优点
    • 不用考虑多线程状态同步问题，也就不需要锁；同时还能比较高效地利用系统资源；
  • 缺点
    • 阻塞会产生更多负面影响
      • 解决方法：多进程 或 多线程

work_thread 可以起独立线程，但每个线程的模型没有太大变化

2.2.3 跨平台

image.png

  • 跨平台
  • Node.js 跨平台，JS 无需编译环境（+ Web 跨平台 + 诊断工具跨平台）
    • = 开发成本低（大部分场景无需担心跨平台问题），整体学习成本低

3. 编写 Http Server

本节目标

  1. 安装 Node.js
  2. 编写 Http Server + Client，收发 GET、POST 请求
  3. 编写静态文件服务器
  4. 编写 React SSR 服务
  5. 适用 inspector 进行调试、诊断
  6. 部署简介

3.1 安装 Node.js

  • Mac, Linux 推荐使用 nvm。多版本管理
  • Windows 推荐 nvm4w 或是官方安装包
  • 安装慢，安装失败的情况，设置安装源
    • NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node nvm install 16

3.2 编写 Http Server

3.2.1 Hello World

image.png

页面展示 image.png

3.2.2 JSON

image.png

页面展示 image.png

3.2.3 Http-Client

image.png

3.2.4 Promisify

用 Promise + async await 重写这两个例子 技巧：将 callback 转换成 promise image.png

3.3 静态文件

编写一个简单的静态文件服务

image.png

与高性能、可靠的服务相比，还差什么？

  1. CDN：缓存 + 加速
  2. 分布式储存，容灾

外部服务：cloudflare，七牛云，阿里云，火山云......

3.4 React SSR

SSR(``server side rendering) 有什么特点

  • 相比传统 HTML 模板引擎：避免重复编写代码
  • 相比 SPA（simple page application）：首屏渲染更快，SEO 友好
  • 缺点
    • 通常 qps 较低，前端代码编写时需要考虑服务端渲染情况

HTML 例子 image.png 页面展示 image.png

替换成 React： image.png

SSR 难点：

  1. 需要处理打包代码 image.png
  2. 需要思考前端代码在服务端运行时的逻辑 image.png
  3. 移除对服务端无意义的副作用，或重置环境

3.5 Debug

V8 Inspector：开箱即用、特性丰富强大、与前端开发一致、跨平台

场景

  • 查看 console.log 内容
  • breakpoint
  • 高 CPU、死循环：cpuprofile
  • 高内存占用：heapsnapshot
  • 性能分析

演示 image.png

image.png

image.png

3.6 部署

部署要解决的问题

  • 守护进程：当进程退出时，重新拉起
  • 多进程：cluster 便捷地利用多进程
  • 记录进程状态，用于诊断

容器环境

  • 通常有健康检查的手段，只需考虑多核 CPU 利用率即可

4. 延伸知识

4.1 贡献代码

快速了解 Node.js 代码

好处

  • 从使用者的角色逐步理解底层细节，可以解决更复杂的问题
  • 自我证明，有助于职业发展
  • 解决社区问题，促进社区发展

难点

  • 花时间

4.2 编译 Node.js

为什么要学习编译 Node.js

  • 认知：黑盒到白盒，发生问题时能有迹可循
  • 贡献代码的第一步

如何编译

4.3 诊断 / 追踪

诊断是一个低频、重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考。

技术咨询行业中的热门角色

难点

  • 需要了解 Node.js 底层，需要了解操作系统以及各种工具
  • 需要经验 image.png

4.4 WASM,NAPI

Node.js（因为 V8）是执行 WASM 代码的天然容器，和浏览器 WASM 是一同运行时，同时 Node.js 支持 WASI

NAPI 执行 C 接口的代码（C/C++/Rust...），同时能保留原生代码的性能,

不同编程语言间通信的一种方案

总结

本文针对于 Node.js 的应用场景，运行时的结构，如何编写一个 HTTP Server 以及延伸的一些知识做了简单的介绍，Node.js 在我们前端开发中起着不可忽视的作用，因此深入了解其底层代码也是十分有必要的，我们了解底层代码并不是要去理解它的怎么做出来的，而是要学习其中的设计思想，这样我们才能不断提高~

avatar
文章
阅读
粉丝