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

鸩鸠
222 阅读3分钟

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

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

Node.js的应用场景

1. 前端工程化

  • Bundle（构建）：webpack,vite,esbuild,parcel
  • Uglify:uglifyjs
  • Transpile（语法转换）:bablejs,typescript
  • 其他语言加入竞争：(基于go实现的)ebuild,parcel,prisma
  • 现状：难以替代

2. web 服务端应用

在web服务端开发中，传统的后端语言有恒多，而node.js最大的特点优势：

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

3. Electron 跨端桌面应用

  • 商业应用：vscode， slack， discord， zoom等等的桌面应用都是用Electron开发的
  • 大型公司的效率工具，大部分都是基于 Electron 做的
  • 现状：大部分场景在选型时，都值得考虑

4.字节中node.js做的应用

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

Node.js运行时结构

结构

image.png

  • V8：JavaScript Runtime，诊断调试工具（inspector）
  • libuv：eventLoop（事件循环），syscall（系统调用）

Node.js运行时结构特点

image.png

1. 异步I/O

场景分析：

image.png

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

2. 单线程

  • js单线程

    • 实际：JS线程+ uv线程 +V8任务线程池 + V8 Inspector线程

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

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

    • 解决问题：多线程或多进程

3. 跨平台

  • 跨平台（大部分功能，api）

  • Node.js跨平台+JS无需编译环境（+web跨平台+诊断工具跨平台）

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

Node.js 写服务端

安装node.js

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

编写http Server

Http Server

image.png

Http Client

image.png

Promisify

  • Promisify
    • 用Promise+async await重写
    • 技巧：将callback转成promise

image.png

静态文件

  • 静态文件服务
    • 与高性能可靠的服务相比还差什么
      • CDN：缓存+加速
      • 分布式存储，容灾

image.png

React SSR

  • React SSR
    • SSR（server side rendering）特点
      • 相比传统html引擎：避免重复编写代码
      • 相比SPA(single page application):首屏渲染更快，SEO友好
      • 缺点；通常qps较低，前端编写时需要考虑服务端渲染情况
    • SSR难点
      • 需要处理打包代码
      • 需要思考前端代码在服务端运行的逻辑
      • 移除服务端无意义的副作用，或充值环境

image.png

image.png

Debug

  • Debug
    • V8 Inspector：开箱即用，特性丰富强大，与前端开发一致、跨平台
      • node --inspect
      • 查看方式：
      • 方式1.打开 [http://localhost:9229/json] 进入devtoolsFrontendUrl后的url
      • 方式2.打开 chrome://inspect 然后点击Open dedicated DevTools for Node
    • 场景
      • 查看console.log内容
      • breakpoint
      • 高CPU、死循环：cpuprofile
      • 高内存占用：heapsnapshot
      • 性能分析

image.png

部署

  • 需要解决的问题
    • 守护进程：当进程退出时，重新垃圾
    • 多进程：cluster便捷的利用多进程
    • 记录进程状态，用于诊断
  • 容器环境
    • 通常有健康检查手段，只需考虑多核cpu利用率即可
avatar
文章
阅读
粉丝