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

祛毒a
69 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

以下为今日课上笔记内容

  • 一.Node.js 的应用场景

570eb7bfee9ac3e881b330dfea46eff.png

1.Node.js 的应用场景 - 前端工程化

  • Bundle: webpack, vite, esbuild, parcel
  • Uglify: uglifyjs
  • Transpile: bablejs, typescript
  • 其他语言加入竞争: esbuild,parcel,prisma
  • 现状: 难以替代

2.Node.js 的应用场景 - Web 服务端应用

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

3.Node.js 的应用场景- Electron跨端桌面应用

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

4.Node.js 的应用场景 - Node.is 在字节

  • BFF 应用、SSR 应用，举例:Modern.js
  • 服务端应用，举例: 头条搜索,西瓜视频,懂车帝
  • Electron 应用:飞连，飞书
  • 每年新增 1000+ Node.js 应用

d4c180215a9a1da60a031d5c75990eb.png

二.Node.js 运行时结构

607bfc88d3268d3becfbbeacdf52a49.png 1.Node.js 运行时结构 - V8,libuv

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

2.Node.js 运行时结构 - 特点

14245903b493a8258ae0bea5e7ed9e8.png

3.Node.js 运行时结构 -异步 IO

  • 当 Node.is 执行 I/0 操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待

d9865cf6bff5037900478639ee06d03.png

4.Node.js 运行时结构 - 单线程 JS 单线程

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

5.Node.js 运行时结构 - 跨平台

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

三.编写 Http Server

1.编写 Http Server-安装 Node.js

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

2.编写 Http Server - Http Server b327372f61e5d89bb5cc5f1b5f10a25.png

3.编写 Http Server - Http Client 4f2a420dba31314f7f6c16ed32cd08f.png

4.编写 Http Server - Promisify

用 Promise +async await 重写这两个例子(why)

技巧: 将 callback 转换成 promise

f8104608c998193cdab24d8af02ac93.png

5.编写 Http Server - 静态文件

编写一个简单的静态文件服务: f46f1822dc4cc01844757475aacc224.png 与高性能、可靠的服务相比，还差什么?

1.CDN: 缓存 +加速

2.分布式储存，容灾

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

6.编写 Http Server - React SSR

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

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

2e619fa599262e443001588298cc250.png

7.编写 Http Server - React SSR b8ec1e2383e44a6c1d556842f97a6e9.png

8.编写 Http Server - Debug

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

场景:

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

9.编写 Http Server -部署

部署要解决的问题

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

容器环境

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

四.延伸话题

1.延伸话题 - Node.js 贡献代码

快速了解 Node.js 代码

  • Node.js Core 贡献入门

好处

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

难点

  • 花时间

2.延伸话题 - 编译 Node.js

为什么要学习编译 Node.js

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

如何编译

  • 参考: Maintaining the build files
  • /configure && make install
  • 演示: 给 net 模块添加自定义属性

3.延伸话题 - 诊断 /追踪

  • 诊断是一个低频、重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考。
  • 技术咨询行业中的热门角色

难点:

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

1f99d3a1a4316b930d324f93e242a1e.png

4.延伸话题- WASM、NAPI

  • 和浏览器Node.js (因为 V8) 是执行 WASM 代码的天然容器WASM 是同一运行时，同时 Node.is 支持WASI。
  • NAPI 执行 C 接口的代码(C/C++/Rust...)，同时能保留原生代码的性能。
  • 不同编程语言间通信的一种方案
avatar
文章
阅读
粉丝