这是我参与「第四届青训营 」笔记创作活动的的第14天,今天的课程是「Node.js 与前端开发实战」,老师主要讲解了 Node.js的应用场景 、 Node.js运行时的结构 、 编写Http Server 、 延伸话题 等内容。
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运行时的结构
特点:
1、异步I/O
当Node.js执行I/O操作时,会在响应返回后恢复操作,而不是阻塞线程并占用额外内存等待。
2、单线程
- js单线程
- 实际:JS线程+uv线程池+V8任务线程池+V8 Inspector线程
- 优点:不用考虑多线程状态同步问题,也就不需要锁;同时还能比较高效地利用系统资源。
- 缺点:阻塞会产生更多负面影响
- 解决办法:多进程或多线程
3、跨平台
- Node.js跨平台+JS无需编译环境(+Web跨平台+诊断工具跨平台)
- = 开发成本低(大部分场景无需担心跨平台问题),整体学习成本低
编写Http Server
Http Server:
Client:
编写一个简单的静态文件服务
const http = require('http')
const fs = require('fs')
const path = require('path')
const url = require('url')
const port = 3000
const server = http.createServer((req,res) => {
const info = url.parse(req.url)
const file = fs.createReadStream(path.resolve(_dirname,'.' + info.pathname))
file.pipe(res)
})
server.listen(port,()=>{
console.log('server listens on:${port}')
})
与高性能、可靠的服务相比,还差什么?
1、CDN:缓存+加速
2、分布式储存、容灾
React SSR
SSR(server side rendering)有什么特点?
1、相比传统HTML模板引擎:避免重复编写代码
2、相比SPA(single page application):首屏渲染更快,SEO友好
3、缺点:通常qps较低,前端代码编写时需要考虑服务端渲染情况
SSR难点:
1、需要处理打包代码
2、需要思考前端代码在服务端运行时的逻辑
3、移除对服务端无意义的副作用,或重置环境
部署
- 部署要解决的问题
- 守护进程:当进程退出时,重新拉起
- 多进程:cluster便捷地利用多进程
- 记录进程状态,用于诊断
- 容器环境
- 通常有健康检查的手段,只需考虑多核cpu利用率即可