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

清染小林
49 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 7 天。今日学习内容：Node.js 与前端开发实战。

一、Node.js使用场景

  1. 前端工程化场景

    Bundle打包：webpack、vite、esbuild、parcel

    Uglify压缩：uglifyjs

    Transpile转义：bablejs、typescript

    其他语言加入竞争：esbuild、parcel、prisma

    目前Node.js现状仍很难被代替

  2. 构建Web服务端应用

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

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

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

    与前端结合的场景会有优势（SSR）

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

  3. Electron跨端桌面应用

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

    大型公司内的效率工具

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

二、Node.js运行时结构

image.png

1. V8，libuv

  • V8：Javascript Runtime，诊断调试工具（inspector）
  • libuv：eventloop（事件循环），syscall（系统调用）
  • eg：使用 node-fetch发起请求时

2. 特点

  1. 异步I/O

    setTimeout(() => {
  console.log('B')
})
console.log('A')

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

    image.png

    优势：不需要阻塞线程执行，从而减少内存占用

  2. 单线程

    function fibonacci(num: number): number {
  if(num === 1 || num === 2) {
    return 1
  }
  return fibonacci(num - 1) + fibonacci(num - 2)
}
fibonacci(42)
fibonacci(43)

    worker_thread可以起独立线程，但每个线程的模型没有太大变化

    实际上，JS单线程是由JS线程 + uv线程池 + V8任务线程池 + V8 Inspector线程组成

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

    缺点：阻塞会产生更多负面影响 --> 多进程或多线程

  3. 跨平台

    const net = require('net')
const socket = new net.Socket('/tmp/socket.sock')

    大部分功能、api都可以跨平台

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

三、编写Http Server

image.png

image.png

想要实现更加高性能、高可靠的服务，还需要实现：

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

React SSR： 特点：

  1. 相比传统HTML模板引擎：避免重复编写代码
  2. 相比SPA：首屏渲染更快，SEO更好 缺点：通常qps较低，前端代码编写时需要考虑服务端渲染情况

image.png

Debug：

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

    使用场景：

    1. 查看 console.log内容
    2. breakpoint
    3. 高CPU、死循环：cpuprofile
    4. 高内存占用：heapsnapshot
    5. 性能分析
avatar
文章
阅读
粉丝