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

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

一、Node.js的应用场景

前端工程化

Bundle：webpack, vite, esbuild, parcel

Uglify：uglifyjs

Transpile：bablejs, typescript

其他语言加入竞争：esbuild（go）, parcel（rust）, prisma

现状：难以替代

Web服务端应用

学习曲线平缓，开发效率较高

运行效率接近常见的编译语言

社区生态丰富及工具链成熟(npm, V8 inspector)

与前端结合的场景会有优势(SSR)

现状：竞争激烈，Node.js有自己独特的优势

Electron跨端桌面应用

商业应用：vscode, slack, discord, zoom

大型公司内的效率工具

现状：大部分场景在选型时，都值得考虑

Node.js在字节

BFF应用、SSR应用，举例：Modern.js

服务端应用，例如：头条搜索，西瓜视频，懂车帝

Electron应用：飞连，飞书

每年新增1000+ Node.js应用

二、Node.js运行时结构

结构

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

特点

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

1. 单线程

• JS单线程

实际：JS线程+uv线程池+V8任务线程池+V8 Inspector线程

优点：不用考虑多线程状态同步问题，也就不需要锁；同时还能比较高效地利用系统资源

缺点：阻塞会产生更多负面影响

解决办法：多进程或多线程

• 跨平台

跨平台(大部分功能、api)

Node.js跨平台+JS无需编译环境(+ Web 跨平台+诊断工具跨平台)

开发成本低(大部分场景无需担心跨平台问题)，整体学习成本低

三、编写 Http Server

Hello World

const http =require('http')
const port = 3008
const server = http.createServer((req,res)=>{ // 每次接到回调请求时回调函数就被触发
res.end("hello")
})
server.listen(port,()=>{
console.log('server listens on: ${port}')
})

JSON

const server = http.createServer((reg,res)=>{
  const bufs =[]
  req.on('data', data=> { 
    bufs.push(data)
})
req.on('end',() => {
  let reqData = {}
  try { 
    reqData = JSON.parse(Buffer.concat(bufs).toString())
    } catch (err){
// receive invalid json data
}
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify({
  echo: reqData.msg || 'Hello",
  ))
 })
})

React SSR

SSR (server side rendering)的特点：

相比传统HTML模版引擎: 避免重复编写代码

相比 SPA (single page application): 首屏渲染更快, SEO友好

缺点: 通常 qps 较低，前端代码编写时需要考虑服务端渲染情况

部署

部署要解决的问题：

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

容器环境：

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