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

zayyo
86 阅读3分钟

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

Node.js应用场景

  • 前端工程化

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

  • 服务端应用

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

  • 跨端桌面应用

    • 商业应用:vscode, slack, discord, zoom

    • 大型公司内的效率工具

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

image.png

Node.js运行时结构

image.png

V8，libuv

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

Node.js运行时结构-特点

  • 异步I/O

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

image.png

image.png

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

worker_thread可以起独立线程,但每个线程的模型没有太大变化 image.png 当Node.js执行I/O操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待

image.png

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

image.png

编写HTTP server

安装Node.js

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

HTTP server

const http = require("http")
const port = 3000

const server = http.createServer((req,res)=>{
res.end("hello")
})

server.listen(port,()=>{
    console.log(`server listens on: ${sport}`)
)}

打开浏览器访问服务端

image.png

编写一个静态的文件服务

const server = http.createServer((req,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){
      }
        res.setHeader('Content-Type', 'application/ json')
        res.end (JSON.stringify({
            echo: reqData.msg || 'Hello' ,
        }))
  })
  })

image.png

Http Client

image.png

Promisify

用Promise+ansync await重写这两个例子 技巧：将callback转换成promise

image.png

静态文件

编写一个简单的静态文件服务

与高性能、可靠的服务相比还差什么？

  • CDN：缓存+加速
  • 分布式存储，容灾
  • 外部服务：cloudflare，七牛云，阿里云，火山云

image.png

React SSR

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

例子：

image.png

image.png

替换成React：

image.png

image.png

Debug

  • V8 Inspector:开箱即用、特性丰富强大、与前端开发致、跨平台
    • node -inspect
    • pen htp://locahost:9229/json
  • 场景:
    • 查看console.1og内容
    • breakpoint
    • 高CPU、死循环: cpuprofile
    • 高内存占用: heapsnapshot
    • 性能分析

image.png

image.png

image.png

部署需要解决的问题

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

容器环境：通常有健康检查的手段，只需要考虑多核cpu利用率就可以

。

avatar
文章
阅读
粉丝