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

dreammaker
104 阅读2分钟

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

Node.js的应用场景

  1. 前端工程化
  2. Web服务端应用
  3. Electron跨端桌面应用

前端工程化

  • 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、libuv

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

特点

  1. 异步I/O
  2. 单线程
  3. 跨平台

异步I/O

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

单线程

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

跨平台

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

编写 Http server

安装Node.js

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

示例

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较低，前端代码编写时需要考虑服务端渲染情况

Debug

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

  • 场景:

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

部署

  • 部署要解决的问题

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

  • 容器环境

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