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

91 阅读1分钟

一、Node.js的应用场景

前端工程化

  • Bundle:webpack,vite,esbuild,parcel
  • Uglify:uglifyjs
  • Transpile:bablejs,typescript

Web服务端应用

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

Electron跨端桌面应用

  • 商业应用:vscode,slack,discord,zoom
  • 大型公司内的效率工具

Node.js运行时结构

image.png

特点

  • 异步I/O

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

image-20220809135948339.png

  • 单线程
    • 实际:JS线程+UV线程池+V8任务线程池+V8 Inspector线程
    • 优点:不用考虑多线程状态同步问题,也不需要锁;同时还能比较高效地利用系统资源;
    • 缺点:阻塞会产生更多负面影响
    • 解决办法:多进程或多线程
  • 跨平台
  • Node.js跨平台+JS无需编译环境(+Web跨平台+诊断工具跨平台)
  • 开发成本低,整体学习成本低

编写 Http Server

Hello World

const http =require('http')
const port = 3008
const server = http.createServer((req,res)=>{ // 每次接到回调请求时回调函数就被触发
res.end("hello")
})
server.listen(port,()=>{
console.log('server listens on: ${port}')
})

React SSR

服务端渲染(Server-Side Rendering),页面上的内容是通过服务端渲染生成的,服务端直接返回拼接好的html,浏览器直接显示服务端返回的html就可以了

image-20220816133253207.png

SSR(server side rendering)特点:

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