前端

这篇笔记记录了Node.js与前端开发相关的一些知识

一、本堂课重点内容

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

二、详细知识点介绍

1、Node.js应用场景

  • 前端工程化
    • Bundle: webpack, vite, esbuild, parcel
    • Uglify: uglifyjs
    • Transpile: babeljs, typescript
    • 现状：难以替代
  • Web服务端应用
    • 学习曲线平缓，开发效率较高
    • 运行效率接近常见的编译语言
    • 社区生态丰富及工具链成熟(npm, V8 inspector)
    • 与前端结合的场景会有优势（SSR）
    • 现状：竞争激烈，Node.js有自己独特的优势
  • Electron跨端桌面应用
    • 商业应用：vscode, slack, discord, zoom
    • 大型公司内的效率工具
    • 现状：大部分场景在选型时，都值得考虑

2、Node.js运行时结构

a558e3b5-c8b2-43c1-a854-ca6af5bd80ae.png

  • V8：JavaScript Runtime，、诊断调试工具（inspector）
  • libuv：eventloop（事件循环），syscall（系统调用）
  • 举例：用 node-fetch 发起请求时…
  • 特点：
    • 异步IO：当Node.js执行IO操作时，会在响应返回后恢复操作，而不是阻塞线程并占用额外内存等待
    • 单线程
      • JS单线程实际上是JS线程+uv线程池+V8任务线程池+V8 Inspector线程
      • 优点：不用考虑多线程状态同步问题，也就不需要锁；同时还能比较高效地利用系统资源
      • 缺点：阻塞会产生更多负面影响
        • 解决办法：多进程或多线程
    • 跨平台：Node.js跨平台+JS无需编译环境+Web跨平台+诊断工具跨平台=开发成本低

三、实践练习例子

1、Http Server

  • Hello World
JAVASCRIPT
const http = require('http')
const port = 3000
const server = http.createServer((req, res) => {
    res.end('hello')
})
server.listen(port, () => {
    console.log(`server listens on: ${port}`)
})
  • JSON
JAVASCRIPT
const server = http.createServer((req, res) => {
    const bufs = []
    req.on('data', data => {
        bufs.push(data)
    })
    req.on('end', () => {
        let reqData = {}
        try {
            reqData = JSON.parse(Buffer.concat(bufs).toString())
        } catch(err) {
            // receive invalid json data
        }
        res.setHeader('Content-Type', 'application/json')
        res.end(JSON.stringify({
            echo: reqData.msg || 'Hello',
        }))
    })
})

2、Http Client

JAVASCRIPT
const http = require('http')
const body = JSON.stringify({ msg: 'hello from my client'})
const req = http.request('http://127.0.0.1:3000', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Content-Length': body.length,
    },
}, (res) => {
    const bufs = []
    res.on('data', data => {
        bufs.push(data)
    })
    res.on('end', () => {
        const receice = JSON.parse(Buffer.concat(bufs).toString())
        console.log('receive:', receive)
    })
})
req.end(body)

3、静态文件

JAVASCRIPT
const server = http.createServer((req, res) => {
    const info = url.parse(req.url)
    const file = fs.createReadStream(path.resolve(__dirname, '.' + info.pathname))
    file.pipe(res)
})

4、React SSR

  • SSR特点
    • 相比传统HTML模板引擎：避免重复编写代码
    • 相比SPA：首屏渲染更快，SEO友好
    • 缺点：通常qps（每秒查询率）较低，前端代码编写时需要考虑服务端渲染情况
    • 样例略

5、Debug

  • V8 Inspector： 开箱即用，特性丰富强大，与前端开发一致，跨平台
    • 命令：node执行时加上 --inspect 命令
    • open http://localhost:9229/json
  • 场景
    • 查看console.log内容
    • breakpoint（打断点）
    • 高CPU、死循环：cpuprofile
    • 高内存占用：heapsnapshot
    • 性能分析

6、部署

  • 部署要解决的问题
    • 守护进程：当进程退出时，重新拉起
    • 多进程：cluster便捷地利用多进程
    • 记录进程状态，用于诊断
  • 容器环境
    • 通常有健康检查的手段，只需考虑多核cpu利用率即可

四、课后个人总结

  • 受控组件有一点像Vue中的双向数据绑定v-model

五、引用参考