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

行下星暇
89 阅读4分钟

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

一、本堂课重点内容

  • Node.js的应用场景
  • Node.js运行时结构
  • 编写Http Server
  • 延伸话题

二、详细知识点介绍：

1.Node.js的应用场景

[应用场景]

image.png

[前端工程化]

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

[Web服务器应用]

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

[Electron跨端桌面应用]

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

[Node.js在字节]

  • BFF应用、SSR 应用，举例:Modern.js
  • 服务端应用，举例:头条搜索,西瓜视频,懂车帝
  • Electron应用:飞连,飞书
  • 每年新增1000+ Node.js应用

image.png

2.Node.js运行时结构

[Node.js运行结构]

image.png

[V8 libuv]

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

[特点]

image.png

(1)异步IO

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

image.png

(2)单线程

  • JS单线程

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

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

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

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

(3)跨平台

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

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

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

3.编写Http Server

  • 安装Node. js
  • 编写Http Server + Client,收发GET, POST请求编写静态文件服务器
  • 编写React SSR 服务
  • 适用inspector 进行调试、诊断部署简介

[静态文件]

  • 简单的静态文件服务与高性能、可靠的服务相比,还差什么?

    1.CDN:缓存＋加速

    2.分布式储存,容灾

  • 外部服务:cloudflare,七牛云，阿里云，火山云等

[React SSR]

SSR (server side rendering)有什么特点?

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

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

  • 缺点:

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

  • SSR 难点:

    1.需要处理打包代码s trmp.js

    2.需要思考前端代码在服务端运行时的逻辑

    3.移除对服务端无意义的副作用，或重置环境

[Debug]

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

场景:

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

[部署]

部署要解决的问题

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

容器环境

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

4.延伸话题NAPI

[Node.js贡献代码]

好处:

  • 从使用者的角色逐步理解底层细节，可以解决更复杂的问题
  • 自我证明，有助于职业发展;
  • 解决社区问题，促进社区发展;

[诊断/追踪]

  • 诊断是一个低频、重要同时也相当有挑战的方向。是企业衡量自己能否依赖一门语言的重要参考。

  • 技术咨询行业中的热门角色。

难点:

  • 需要了解Node.js底层，需要了解操作系统以及各种工具
  • 需要经验

image.png

[WASM、NAPI]

  • Node.js (因为V8)是执行 WASM代码的天然容器，和浏览器WASM是同一运行时，同时Node.js支持WASI.
  • NAPI执行C接口的代码(C/C++/Rust...)，同时能保留原生代码的性能。
  • 不同编程语言间通信的一种方案。

三、实践练习例子：

[Http Server]

const http = .require('http')
const port = 3000
const server = http.createServer((req, res) => {
   res.end('hello')
})

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

四、课后个人总结：

在本章Node.js与前端开发实战的学习后，在这章节中学习到了Node.js的结构、理论等，以及前端开发中编写Http Server代码，本章的难点在于SSR、编写Http Server代码。

avatar
文章
阅读
粉丝