前端之路

机器信息：4C32G 测试工具：wrk Node: v14.17.0 express.js 'use strict' const express = require('express') const app = express() app.get('/', function (req, res) { res.json({ hello: 'world' }) }) app.listen(3000) fastify.js 'use strict' const fastify = require('fastify')() fastify.get('/', function (req, reply) { reply.send({ hello: 'world' }) }) fastify.listen(3000) ~ 测试结果 # express.js Running 10s test @ http://127.0.0.1:3000 12 threads and 400 connections Thread Stats Avg Stdev Max +/- Stdev Latency 55.36ms 11.53ms 173.22ms 93.16% Req/Sec 602....

环境： ARM64 <--- Last few GCs ---> <--- JS stacktrace ---> # # Fatal process OOM in insufficient memory to create an Isolate # 在Dockerfile上设置max-old-space-size的node.js启动参数， 亲测有效。 CMD node --report-on-fatalerror --max-old-space-size=1536 dist/index.js Currently, by default v8 has a memory limit of 512mb on 32-bit and 1gb on 64-bit systems. You can raise the limit by setting –max-old-space-size to a maximum of ~1gb for 32-bit and ~1.7gb for 64-bit systems. But it is recommended to split your single process into several workers if you are hitting memory limits....

1. 选择安装包 访问 https://nodejs.org/en/download/ 选择Linux Binaries(x64) 2. 解压 下载后的文件是一个tar.xz的文件。 xz -d node-xxxx.tar.zx // 解压xz tar -xvf node-xxxx.tar // 拿出文件夹 解压后的目录如下，其中 ➜ node-v14.17.0-linux-x64 ll total 600K drwxr-xr-x 2 wangdd staff 4.0K May 13 09:34 bin -rw-r--r-- 1 wangdd staff 469K May 12 02:14 CHANGELOG.md drwxr-xr-x 3 wangdd staff 4.0K May 13 09:34 include drwxr-xr-x 3 wangdd staff 4.0K May 13 09:34 lib -rw-r--r-- 1 wangdd staff 79K May 12 02:14 LICENSE -rw-r--r-- 1 wangdd staff 30K May 12 02:14 README....

在v11.7.0中加入实验性功能，诊断报告。诊断报告的输出是一个json文件，包括以下信息。 进程信息 操作系统信息 堆栈信息 内存资源使用 libuv状态 环境变量 共享库 诊断报告的原始信息 如何产生诊断报告 必需使用 –experimental-report 来启用 process.report.writeReport() 来输出诊断报告 node --experimental-report --diagnostic-report-filename=YYYYMMDD.HHMMSS.PID.SEQUENCE#.txt --eval "process.report.writeReport('report.json')" Writing Node.js report to file: report.json Node.js report completed 用编辑器打开诊断报告，可以看到类似下面的内容。 如何从诊断报告中分析问题？ 诊断报告很长，不太好理解。IBM开发了report-toolkit工具，可以用来分析。 要求：node > 11.8.0 npm install report-toolkit --global 或者 yarn global add report-toolkit 查看帮助信息 rtk --help 自动出发报告 node --experimental-report \ --diagnostic-report-on-fatalerror \ --diagnostic-report-uncaught-exception \ index.js $ node –help grep report --experimental-report enable report generation 启用report功能 --diagnostic-report-on-fatalerror generate diagnostic report on fatal (internal) errors 产生报告当发生致命错误 --diagnostic-report-on-signal generate diagnostic report upon receiving signals 产生报告当收到信号 --diagnostic-report-signal=....

标准文档 WebRTC https://w3c.github.io/webrtc-pc/ MediaStream https://www.w3.org/TR/mediacapture-streams/ 实现接口 MediaStream: 获取媒体流，例如从用户的摄像机或者麦克风 RTCPeerConnection: 音频或者视频呼叫，以及加密和带宽管理 RTCDataChannel: 端到端的数据交互 WebRTC架构 架构图颜色标识说明： 紫色部分是Web开发者API层 蓝色实线部分是面向浏览器厂商的API层 蓝色虚线部分浏览器厂商可以自定义实现 WebRTC有三个模块： Voice Engine（音频引擎） Voice Engine包含iSAC/iLBC Codec（音频编解码器，前者是针对宽带和超宽带，后者是针对窄带） NetEQ for voice（处理网络抖动和语音包丢失） Echo Canceler（回声消除器）/ Noise Reduction（噪声抑制） Video Engine（视频引擎） VP8 Codec（视频图像编解码器） Video jitter buffer（视频抖动缓冲器，处理视频抖动和视频信息包丢失） Image enhancements（图像质量增强） Transport SRTP（安全的实时传输协议，用以音视频流传输） Multiplexing（多路复用） P2P，STUN+TURN+ICE（用于NAT网络和防火墙穿越的） 除此之外，安全传输可能还会用到DTLS（数据报安全传输），用于加密传输和密钥协商 整个WebRTC通信是基于UDP的 WebRTC底层协议 WebRTC 核心的协议都是在右侧基于 UDP 基础上搭建起来的。 其中，ICE、STUN、TURN 用于内网穿透, 解决了获取与绑定外网映射地址，以及 keep alive 机制 DTLS 用于对传输内容进行加密，可以看做是 UDP 版的 TLS。由于 WebRTC 对安全比较重视，这一层是必须的。所有WebRTC组件都必须加密，并且其JavaScript API只能用于安全源（HTTPS或本地主机）。信令机制并不是由WebRTC标准定义的，所以您必须确保使用安全协议。 SRTP 与 SRTCP 是对媒体数据的封装与传输控制协议 SCTP 是流控制传输协议，提供类似 TCP 的特性，SCTP 可以基于 UDP 上构建，在 WebRTC 里是在 DTLS 协议之上 RTCPeerConnection 用来建立和维护端到端连接，并提供高效的音视频流传输 RTCDataChannel 用来支持端到端的任意二进制数据传输 WebRTC 协议栈解释...

GC释放时机 当HeapUsed接近最大堆内存时，出发GC释放。 下图是深夜，压力比较小的时候。 下图是上午工作时间 内存泄漏 OOM

process.memoryUsage() { rss: 4935680, heapTotal: 1826816, heapUsed: 650472, external: 49879, arrayBuffers: 9386 } heapTotal 和 heapUsed指向V8’s 内存使用 external 指向 C++ 对象的内存使用， C++对象绑定js对象，并且由V8管理 rss, 实际占用内存，包括C++, js对象和代码三块的总计。使用 ps aux命令输出时，rss的值对应了RSS列的数值 node js 所有buffer占用的内存 heapTotal and heapUsed refer to V8’s memory usage. external refers to the memory usage of C++ objects bound to JavaScript objects managed by V8. rss, Resident Set Size, is the amount of space occupied in the main memory device (that is a subset of the total allocated memory) for the process, including all C++ and JavaScript objects and code....

v8内存模型 Code Segment: 代码被实际执行 Stack 本地变量 指向引用的变量 流程控制，例如函数 Heap V8负责管理 HeapTotal 堆的总大小 HeapUsed 实际使用的大小 Shallow size of an object: 对象自身占用的内存 Retained size of an object: 对象及其依赖对象删除后回释放的内存

网页上的报错，一般都会和HTTP请求出错有关。 在Chrome浏览器中，按F12或者command+option+i可以打开Dev tools，在网络面板中可以找到报错的的HTTP请求。 通过提交Copy as cURL 和 Copy response的内容，就会非常准确的把问题报告给开发。开发也会非常快速的定位问题。

1. Front-End Developer Handbook 2017 地址：https://frontendmasters.com/books/front-end-handbook/2017/ 这是任何人都可以用来了解前端开发实践的指南。它大致概述并讨论了前端工程的实践：如何学习它，以及在2017年实践时使用什么工具。 这是专门为潜在的和目前实践的前端开发人员提供专业资源，以配备学习材料和开发工具。其次，管理者，首席技术官，导师和猎头人士可以使用它来了解前端开发的实践。 手册的内容有利于网络技术（HTML，CSS，DOM和JavaScript）以及直接构建在这些开放技术之上的解决方案。本书中引用和讨论的材料是课堂上最好的或目前提出的问题。 该书不应被视为对前端开发人员可用的所有资源的全面概述。这本书的价值被简单，集中和及时地组织起来，仅仅是足够的绝对信息，以免任何人在任何一个特定的主题上压倒一切。 目的是每年发布一次内容更新。 手册分为三部分。 第一部分。前端实践 第一部分广泛描述了前端工程的实践。 第二部分：学习前端发展 第二部分指出了自主导向和直接的资源，用于学习成为前端开发人员。 第三部分：前端开发工具 第三部分简要解释和识别交易工具。 2. JS函数式编程指南 英文版地址： 中文版地址：https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ 这本书的主题是函数范式（functional paradigm），我们将使用 JavaScript 这个世界上最流行的函数式编程语言来讲述这一主题。有人可能会觉得选择 JavaScript 并不明智，因为当前的主流观点认为它是一门命令式（imperative）的语言，并不适合用来讲函数式。但我认为，这是学习函数式编程的最好方式，因为： 你很有可能在日常工作中使用它 这让你有机会在实际的编程过程中学以致用，而不是在空闲时间用一门深奥的函数式编程语言做一些玩具性质的项目。 你不必从头学起就能开始编写程序 在纯函数式编程语言中，你必须使用 monad 才能打印变量或者读取 DOM 节点。JavaScript 则简单得多，可以作弊走捷径，因为毕竟我们的目的是学写纯函数式代码。JavaScript 也更容易入门，因为它是一门混合范式的语言，你随时可以在感觉吃力的时候回退到原有的编程习惯上去。 这门语言完全有能力书写高级的函数式代码 只需借助一到两个微型类库，JavaScript 就能模拟 Scala 或 Haskell 这类语言的全部特性。虽然面向对象编程（Object-oriented programing）主导着业界，但很明显这种范式在 JavaScript 里非常笨拙，用起来就像在高速公路上露营或者穿着橡胶套鞋跳踢踏舞一样。我们不得不到处使用 bind 以免 this 不知不觉地变了，语言里没有类可以用（目前还没有），我们还发明了各种变通方法来应对忘记调用 new 关键字后的怪异行为，私有成员只能通过闭包（closure）才能实现，等等。对大多数人来说，函数式编程看起来更加自然。+ 以上说明，强类型的函数式语言毫无疑问将会成为本书所示范式的最佳试验场。JavaScript 是我们学习这种范式的一种手段，将它应用于什么地方则完全取决于你自己。幸运的是，所有的接口都是数学的，因而也是普适的。最终你会发现你习惯了 swiftz、scalaz、haskell 和 purescript，以及其他各种数学偏向的语言。 3. 前端开发笔记本 地址：http://chanshuyi.github.io/frontend_notebook/ 前端开发笔记本涵括了大部分前端开发所需的知识点，主要包括5大部分：《页面制作》、《JavaScript程序设计》、《DOM编程》、《页面架构》、《前端产品架构》。