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

94 阅读2分钟

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

Node.js的应用场景

前端工程化

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

Web服务端应用

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

Electron跨端桌面应用

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

Node.js运行时结构

image.png

Node.js特点

  1. 异步I/O:当Node.js执行I/O操作时,会在响应返回后恢复操作,而不是阻塞线程并占用额外内存等待
  2. 单线程:js单线程 = js线程+uv线程池+v8任务线程池+v8 Inspector线程,不用考虑多线程状态同步问题,也就不需要锁,同时能比较高效地利用系统资源。缺点是阻塞会产生更多的负面影响。解决方法是多线程或多进程。
  3. 跨平台:Node.js + js无需编译环境(+web跨平台+诊断工具跨平台)= 开发成本低,整体学习成本低。

编写Http Server

安装Node.js

Windows使用nvm4w或是安装包。
可以在官网下载安装包然后配置环境就可以使用
通过node -vnpm -v可查看是否安装成功

编写Http Server + Client,收发GET\POST请求

const http = require('http')
const port = 3000
const server = http.createServer((req,res) =>{
    res.end('hello')
})
server.listen(port,() =>{
    console.log(`server listens on: ${port}`)
})

编写React SSR服务

SSR(server side rendering)的特点
相比传统HTML模板引擎:避免重复编写代码
相比SPA(single page application):首屏渲染更快,SEO友好
缺点:通常qps较低,前端代码编写的时候要考虑服务端渲染情况。

SSR难点:

  • 需要处理打包代码
  • 需要思考前端代码在服务端运行时的逻辑
  • 移除对服务端无意义的副作用,或重置环境。

适用inspector 进行调试、诊断

V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台
使用node --inspect
场景:

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

部署简介

部署要解决的问题

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

容器环境:通常有健康检查的手段,只需要考虑多核CPU利用率即可。

延伸话题

快速了解Node.js代码:github.com/nodejs/node