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

foursheep
49 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第12天

Node.js 的应用场景

  • 前端工程化

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

  • Web 服务端应用

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

  • Electron 跨端桌面应用

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

Node.js 运行时结构

image.png

V8

JavaScript Runtime，诊断调试工具（inspector）

libuv

eventloop（事件循环），syscall（系统调用）

特点

  1. 异步 I/O

image.png

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

  1. 单线程

image.png

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

image.png

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

编写 Http Server

  1. 安装 Node.js

  2. 编写 HttpServer + Client ，收发 GET，POST 请求

在 前端 项目编写：

image.png

  • 它将会向 http://127.0.0.1:3000 发送 POST 请求，这个请求带有 Content-Type 和 Content-Length 响应头

接着在 后端 的入口文件 app.js 中编写：

image.png

可以看到如下效果：

image.png

修改 server 函数为：

image.png

可以看到后端服务接收到了前端调用接口的请求，并响应了数据给前端：

image.png

  1. 编写静态文件服务器

image.png

  1. 使用 inspector 进行调试，诊断

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

使用场景：

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

演示：

先在控制台打好断点： image.png

就可以看到这样的面板： image.png image.png

  1. 部署

  • 部署要解决的问题

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

  • 容器环境

    • 通常有健康检查的手段，只需考虑多核cpu利用率即可
avatar
文章
阅读
粉丝