0x1 Node.js 的应用场景

  1. 前端工程化

    • 打包工具：webpack、vite、esbuild、parce
    • 代码压缩：uglifyjs
    • 语法转换：babeljs，typescript
    • 难以替代
  2. Web 服务端应用
    • 学习曲线平缓，开发效率较高
    • 运行效率接近常见的编程语言
    • 社区生态丰富及工具链成熟(npm)
    • 与前端结合的场景会有优势(SSR)
    • 竞争激烈
  3. Electron 跨端桌面应用
    • 商业应用：vscode、slack、discord、zoom
    • 大型公司内的效率工具
    • 值得考虑

0x2 Node.js 运行时结构

  1. V8、libuv

    • V8：JavaScript Runtime，诊断调试工具（inspector）
    • libuv：eventloop（事件循环）、syscall（系统调用）

  2. 特点

    1. 异步 I/O

      setTimeout(() => {
      
    console.log('B');
      
});
      
console.log('A');
      • 当 Node.js 执行 I/O 操作时，会在响应后恢复操作，而非阻塞线程，并占用额外内存等待

      举例：在执行读取文件功能readFile()时，执行fs.readFile()方法后，会将方法的请求异步调用至 Node 中处理的同时，继续执行其他调用，并在执行该功能回调前，将 Node 的处理结果返回回来，从而完成异步 I/O

    2. 单线程

      function fibonacci(num: number): number{
      
    if(num == 1 || num == 2)
      
        return 1;
      
    return fibonacci(num - 1) + fibonacci(num - 2);
      
}

fibonacci(2)
      
fibonacci(3)
      • JS 单线程

        • 实际情况：JS 线程+uv 线程+V8 任务线程池+V8 Inspector 线程
      • 优点
        • 不用考虑多线程状态同步问题，不需要锁
        • 比较高效地利用系统资源
      • 缺点
        • 阻塞会产生更多负面影响

    3. 跨平台

      const net = require('net');
      
const socket = new net.Socket('/tmp/scoket.sock')
      • Node.js 跨平台+JS 无需编译环境（+Web 跨平台+诊断工具跨平台）=开发和整体学习成本低

0x3 编写 Http Server

  1. 安装 Node.js

    推荐使用 nvm 安装 Node.js，可以有效解决跨版本问题（Windows 系统使用 nvm4w）

  2. 编写 Http Server + Client，进行收发 GET、POST 请求

    1. Http Server

      项目：Hello World

      /* filename:server.js */
      
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}`)
      
})
      

      /* filename:jsonServer.js */
      
const http = require('http');
      
const port = 3000;

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',
      
        }))
      
    })
      
})
      
server.listen(port, () => {
      
    console.log(`server listens on: ${port}`)
      
})

  3. 编写静态文件服务器

    const http = require('http')
    
const fs = require('fs')
    
const path = require('path')
    
const url = reuqire('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}`)
    
})

  4. 编写 React SSR 服务

    • SSR(Server Side Rendering) 特点

      • 相比传统 HTML 模板引擎，可以避免重复编写代码
      • 相比 SPA(Single Page Application)，可以更快渲染首屏，对 SEO(Search Engine Optimization) 友好
      • 缺点：通常 qps 较低，编写代码时需要考虑服务端渲染情况

    举例：

    HTML：

    const http = require('http')
    
const port = 3000
    
const server = http.createServer((req, res) => {
    
    res.setHeader('Content-Type', 'text/html')
    
    res.end(`
    
    <!DOCTYPE html>
    
    <html>
    
    	<head>
    
    		<title>Title</title>
    
    	</head>
    
    	<body>
    
    		<p>Content</p>
    
    	</body>
    
    </html>
    
    `)
    
})

server.listen(port, () => {
    
    console.log(`server listens on: ${port}`)
    
})

    替换成 React：

    const http = require('http')
    
const React = require('react')
    
const ReactDOMServer = require('react-dom/server')
    
function App() {
    
    return React.createElement('p', {
    
        children: 'Hello'
    
    })
    
}
    
const port = 3000
    
const server = http.createServer((req, res) => {
    
    res.setHeader('Content-Type', 'text/html')
    
    res.end(`
    
    <!DOCTYPE html>
    
    <html>
    
    	<head>
    
    		<title>Title</title>
    
    	</head>
    
    	<body>
    
    		<div id="main">
    
    			${ReactDOMServer.renderToString(React.createElement(App))}
    
    		</div>
    
    	</body>
    
    </html>
    
    `)
    
})

server.listen(port, () => {
    
    console.log(`server listens on: ${port}`)
    
})

    • SSR 难点：

      1. 需要打包处理

        require('./static/style.css')

      2. 需要思考前端代码在服务端运行时的逻辑

        async componentDidMount() {
        
    const res = await fetch('http://my.server.domain')
        
}

      3. 移除对服务端无意义的副作用，或重置环境

  5. 适用 Inspector 进行调试、诊断

    • V8 Inspector

      • node --inspect
      • open http://localhost:9229/json
    • 场景
      • 查看console.log()内容
      • 断点
      • 高 CPU、死循环：cpuprofile
      • 高内存占用：heapasnapshot
      • 性能分析

  6. 部署

    • 需要解决的问题

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

0x4 延申

  1. Node.js 贡献代码

    • 好处

      • 理解底层细节
      • 自我证明
      • 解决社区问题
    • 难点
      • 费时

  2. 编译 Node.js

    • 从认知角度：发生问题时能有迹可循
    • 是贡献代码的第一步
    • 如何编译
      • ./config && make install

  3. 诊断 / 追踪

    • 诊断

      • 低频但重要，充满挑战性的方向
      • 利于企业衡量是否可依赖某种语言的重要参考

    • 难点

      • 需要理解 Node.js 底层、操作系统以及各种工具

      • 需要经验

  4. WASM、NAPI

    • WASM：WebAssembly
    • NAPI：NewAPI

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

-End-

Node.js 与前端开发实战的更多相关文章

  1. Node JS后端项目开发与生产环境总结

    原文地址:Node JS后端项目开发与生产环境总结 Node JS常用后端框架有express.koa.sails.国产框架有个egg js,已经在cnode投入生产了,还有个think js,类似t ...

  2. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  3. 深入浅出node.js游戏服务器开发1——基础架构与框架介绍

    2013年04月19日 14:09:37 MJiao 阅读数:4614   深入浅出node.js游戏服务器开发1——基础架构与框架介绍   游戏服务器概述 没开发过游戏的人会觉得游戏服务器是很神秘的 ...

  4. Node.js 从零开发 web server博客项目[express重构博客项目]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  5. Node.js 从零开发 web server博客项目[安全]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  6. Node.js 从零开发 web server博客项目[日志]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  7. Node.js 从零开发 web server博客项目[登录]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  8. Node.js 从零开发 web server博客项目[项目介绍]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  9. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  10. 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

随机推荐

  1. adb monkey 有哪些参数？

    adb monkey 是 Android Debug Bridge (ADB) 工具中的一个命令,用于执行随机事件来对 Android 应用进行压力测试.以下是 adb monkey 命令的一些常用参 ...

  2. 使用Kubernetes搭建带有ik分词的Elasticsearch集群

    创建好带有Ik分词的es镜像,并上传到镜像仓库中,创建镜像可参考链接中的文档 https://www.cnblogs.com/hi-lijq/p/16895206.html 编写es_cluster- ...

  3. 【大语言模型基础】GPT（Generative Pre-training ）生成式无监督预训练模型原理

    GPT,GPT-2,GPT-3 论文精读[论文精读]_哔哩哔哩_bilibili   ELMo:将上下文当作特征,但是无监督的语料和我们真实的语料还是有区别的,不一定符合我们特定的任务,是一种双向的特 ...

  4. MySql注入—DNS注入

    MySql注入-DNS注入 1.DNS注入原理 一.DNS注入原理 DNS注入,是通过查询相应DNS解析产生的记录日志来获取想要的数据 对于sql盲注这样的方法常常用到二分法,非常麻烦而且没有回显,要 ...

  5. 最简洁明了的Linux常用命令

    1.ls 命令 查看当前目录下可见的文件.文件夹及其相关权限 常用参数:-l 列表式查看 -al 查看所有,包括隐藏的文件.文件夹 [root@qinshengfei bin]# ls --color ...

  6. Welcome to YARP - 2.3 配置功能 - 配置过滤器(Configuration Filters)

    目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...

  7. 不使用microlib实现STM32串口printf重定向：

    不使用microlib实现STM32串口printf重定向: 突然发现有一篇markdown忘记上传了,补一下 注:使用的是CubeMX生成的工程文件 生成后,在usart.c中添加如下代码: //u ...

  8. csproj技巧，以及使用其他类库冲突，以及引入第三方UI方式

    1.在项目中我们经常写 string? Message{get;set;} 明明是引用类型,它底下还是会出现波浪线,我们可以打开csproj 找到Nullable将它改为disable,或者删除,它默 ...

  9. 记录--vue3 setup 中国省市区三级联动options最简洁写法，无需任何库

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在写页面的时候,发现表单里面有一个省市区的 options 组件要写,因为表单很多地方都会用到这个地址选择,我便以为很简单嘛. 虽然很简单 ...

  10. 用于vivado的TCL脚本创建工程

    用于实现在脚本所在的目录创建工程并初始化工程 点击查看代码 #获取脚本所在的文件 variable My_File [file normalize [info script]] #prj_path_f ...