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

59 阅读3分钟

这是我参与「第四届青训营」笔记创作活动的的第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 运行时结构

01_运行时结构.png

V8,libuv

  • V8: JavaScript Runtime,诊断调试工具 (inspector)

  • libuv: eventloop(事件循环),syscall (系统调用)

  • 举例:用 node-fetch 发起请求时...

特点

  1. 异步 I/O

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

  2. 单线程

    • JS 单线程

      • 实际:JS 线程+uv 线程池 + V8 任务线程池 +V8 Inspector 线程
    • 优点:不用考虑多线程状态同步问题,也就不需要锁;同时还能比较高效地利用系统资源

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

      • 解决办法:多进程或多线程
  3. 跨平台

    大部分功能、API

    • Node.js 跨平台+JS 无需编译环境(+ Web 跨平台+诊断工具跨平台) = 开发成本低(大部分场景无需担心跨平台问题),整体学习成本低

Http Server

SSR (server side rendering) 有什么特点?

  • 相比传统 HTML 模版引擎:避免重复编写代码

  • 相比 SPA (single page application):首屏渲染更快,SEO 友好

  • 缺点:

    • 通常 qps 较低,前端代码编写时需要考虑服务端渲染情况

Debug

  • V8 Inspector:开箱即用、特性丰富强大、与前端开发一致、跨平台

  • 场景:

    • 查看 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)
})
运行结果

02_hello world运行结果.png

例二: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)
})
运行结果

03_JSON server运行结果.png

例三: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)
运行结果

04_client运行结果.png

课后个人总结

 我很久以前就对 NodeJs 很感兴趣,但是因为各种各样的原因,一直没有办法深入的了解和掌握 Nodejs,而在学习了这次的课程之后,我发现自己对 NodeJs 的理解变得更加深刻了,但是还不够透彻,需要继续努力学习。

引用参考

第四届字节跳动青训营「Node.js 与前端开发实战」课程