这是我参与「第四届青训营」笔记创作活动的的第12天
本堂课重点内容
- Node.js 运行时结构
详细知识点介绍
Node.js 的应用场景
前端工程化
-
Bundle: webpack,vite, esbuild, parcel
-
Uglify: uglifyjs
-
Transpile: bablejs, typescript
-
其他语言加入竞争:esbuild, parcel, prisma
-
现状:难以替代
Web 服务端应用
-
学习曲线平缓,开发效率较高
-
运行效率接近常见的编译语言
-
社区生态丰富及工具链成熟 (npm, V8 inspector)
-
与前端结合的场景会有优势(SSR)
-
现状:竞争激烈,Node.js 有自己独特的优势
Electron 跨端桌面应用
-
商业应用:vscode, slack, discord, zoom
-
大型公司内的效率工具
-
现状:大部分场景在选型时,都值得考虑
Node.js 运行时结构
V8,libuv
-
V8: JavaScript Runtime,诊断调试工具 (inspector)
-
libuv: eventloop(事件循环),syscall (系统调用)
-
举例:用 node-fetch 发起请求时...
特点
-
异步 I/O
当 Node.js 执行 I/O 操作时,会在响应返回后恢复操作,而不是阻塞线程并占用额外内存等待
-
单线程
-
JS 单线程
- 实际:JS 线程+uv 线程池 + V8 任务线程池 +V8 Inspector 线程
-
优点:不用考虑多线程状态同步问题,也就不需要锁;同时还能比较高效地利用系统资源
-
缺点:阻塞会产生更多负面影响
- 解决办法:多进程或多线程
-
-
跨平台
大部分功能、API
- Node.js 跨平台+JS 无需编译环境(+ Web 跨平台+诊断工具跨平台) = 开发成本低(大部分场景无需担心跨平台问题),整体学习成本低
Http Server
SSR (server side rendering) 有什么特点?
-
相比传统 HTML 模版引擎:避免重复编写代码
-
相比 SPA (single page application):首屏渲染更快,SEO 友好
-
缺点:
- 通常 qps 较低,前端代码编写时需要考虑服务端渲染情况
Debug
-
V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台
-
node --inspect
-
-
场景:
-
查看 console.log 内容
-
breakpoint
-
高 CPU、死循环:cpuprofile
-
高内存占用:heapsnapshot
-
性能分析
-
实践练习例子
编写 Http Server
安装 Node.js
-
Mac,Linux 推荐使用 nvm。多版本管理
-
Windows 推荐 nvm4w 或是官方安装包
-
安装慢,安装失败的情况,设置安装源
编写 Http Server + Client,收发 GET, POST 请求
例一: Hello World
const http = require('http')
const server = http.createServer((req,res) => {
res.end('hello')
})
const port = 3000
server.listen(port,() =>{
console.log('listening on:',port)
})
运行结果
例二:JSON server
const http = require('http')
const server = http.createServer((req,res) => {
const bufs = []
req.on('data',(buf) => {
bufs.push(buf)
})
req.on('end',() => {
// bufs
const buf = Buffer.concat(bufs).toString('utf-8')
let msg = 'hello'
try{
const ret = JSON.pares(buf)
msg = ret.msg
} catch (err) {
//
}
const responseJson = {
msg: `receive: ${msg}`
}
res.setHeader('Content-Type','application/json')
res.end(JSON.stringify(responseJson))
})
})
const port = 3000
server.listen(port,() =>{
console.log('listening on: ', port)
})
运行结果
例三:client
const http = require('http')
const body = JSON.stringify({
msg: 'hello from my own client',
})
const req = http.request('http://127.0.0.1:3000',{
method: 'POST',
headers:{
'Content-Type': 'application/json',
}
},(res) => {
const bufs =[]
res.on('data',(buf) =>{
bufs.push(buf)
})
res.on('end',() => {
const buf = Buffer.concat(bufs)
const json = JSON.parse(buf)
console.log('json.msg is:',json.msg)
})
})
req.end(body)
运行结果
课后个人总结
我很久以前就对 NodeJs 很感兴趣,但是因为各种各样的原因,一直没有办法深入的了解和掌握 Nodejs,而在学习了这次的课程之后,我发现自己对 NodeJs 的理解变得更加深刻了,但是还不够透彻,需要继续努力学习。
引用参考
第四届字节跳动青训营「Node.js 与前端开发实战」课程