杜明清的个人博客

# 介绍 rollup 是一个 ES 模块化打包工具，可以帮助我们编译小的代码到一个大的、负责的代码中，比如一个库或者一个应用程序 # 对比 我们会发现 Rollup 的定义、定位和 webpack 非常的相似： Rollup 也是一个模块化的打包工具，但是 Rollup 主要是针对 ES Module 进行打包的； 另外 webpack 通常可以通过各种 loader 处理各种各样的文件，以及处理它们的依赖关系； rollup 更多时候是专注于处理 JavaScript 代码的（当然也可以处理 css、font、vue 等文件 另外 rollup 的配置和理念相对于 webpack...

# 介绍 gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的理器，能在开发过程中做很多重复的任务，并使用工具自动完成，可以大大提高我们的工作效率 glup 对工程化的作用：自动压缩 JS 文件 。自动压缩 CSS 文件。自动合并文件。自动编译 sass。自动压缩图片。自动刷新浏览器 等 # 安装 使用 gulp 命令需要安装对应的脚手架工具 # 使用 根目录下创建一个 gulpfile.js 文件，在文件中定义具体流程（可以使用各种插件），导出的就是一个个任务。 # API gulp 常用的 API 有： Task：这个 API 用来创建任务，在命令下可以输入...

推荐 # 分层架构 两层中间，使用下层所提供的服务，为上层提供封装处理后的服务 分层架构是隔离业务复杂度和技术复杂度的利器 使得关注点分离和复用 # 管道架构 前一层的输出作为下一层的输入，例如：express 中间件和 webpack-loaders # 复制风格 使用单个实例提供相同的服务，来改善服务的可访问性和可伸缩性，以及性能，最常见的复制风格的应用就是: node.js 中的 cluster 模块 #...

# React # 响应性原理 内存中维护了一个最小任务堆存储副作用，根据 timeout 属性进行排序，每一个副作用都对应有一个 lane 车道，通过 lane 车道和 hooks 的调用方式将副作用打上 timeout 标记 为了避免高优先级任务打断低优先级任务导致 UI 延迟渲染而造成的卡顿现象，react 采用 Message Channel 和 performance.now 这两个 api 模拟 requestIdleCallback，使得任务在不影响 UI 渲染的情况下执行 requestIdleCallback 这个 api 有 FPS 最大帧率限制，一帧执行 8...

# 虚拟化技术 虚拟化是一种计算机资源管理的技术，是将计算机的各种硬件资源，比如服务器、网络、CPU、内存、以及存储等，通过抽象和转换后呈现出的一套新的硬件资源环境，在这套资源环境中可以按照操作系统，部署应用环境等 虚拟化技术打破了计算机硬件资源不可切割的障碍，提高了计算机硬件资源的利用率 # 虚拟机 (硬件级虚拟化技术) 虚拟机是使用虚拟化的技术，使用抽象逻辑对物理计算机的模拟，包含整个操作系统和其中的应用程式。 缺点是：启动慢、使用空间很大、性能通常不高，无法完全使用计算机的性能。 # 容器...

# CICD CI：持续集成 CD：持续交付 CD：持续部署 # 上线流程 发布上线流程举例：git 上传，开始跑测试，进行打包，使用 docker 容器化镜像打包，推送到 dev 开发环境，部署到 staging 测试环境，最后部署到 production 生产环境 # pipeline 一次 pipeline 就相当于一次构建任务，里面可以包含多个流程，如：安装依赖，跑测试代码，eslint 校验，编译，部署测试服务器，部署生产服务器等流程，任何提交或者 Merge Request 的合并都可以触发 Pipeline。 # runner 一个 runner...

# OSI 七层网络模型 # 七、应用层（应用） 应用层就是我们最接近我们、最常用的一层，例如： ajax 调用接口发送 http 请求 使用 DNS 域名查询系统 邮件协议 SMTP websock 长连接 SSH 协议 等。 # 六、表示层（安全、压缩、翻译） 表示层做了几件重要的事情如： 压缩 安全（数据发送前进行加密，在接受者的表示层进行解密） 程序在网络中的翻译官（对图片文件等格式进行解码和编码） #...

Electron 中 preload 模块最为重要，它的源码逻辑如下： 首先 electron 中封装了 c++ 模块对接 node.js 的 addon 模块，方法是：在头文件中标注了：#include <node/addon.h> 此 c++ 模块将 app 实例绑定 (linkedBinding) 到 process 上，app 实例中有 exposeAPIInWorld 方法 接着 contextBridge 中的 expostInMainWorld 方法返回的是 process.linkedBinding.exposeAPIInWorld...

# v8 执行 JS # v8 引擎介绍 Blink 内核用于解析 HTML、DOM、CSS 渲染、嵌入了 v8 引擎用于解析 Javascript V8 是谷歌的开源高性能 JavaScript 和 WebAssembly 引擎，用 C++ 编写。它被用于 Chrome 和 Node.js 等。用于解析并执行 JavaScript 代码。 # 执行过程 初始化运行环境 堆栈空间 全局执行上下文 全局作用域 事件循环系统 利用 Scanner 扫描器将输入的代码词法分析成 tokens 分析的结果就是一个个的 tokens 对象组成的数组 分析的过程利用了有限自动状态机的概念 利用...

# Blob Blob 的全称为：binary larget object（二进制大对象），blob 的本质是一个 js 对象，里面可以存储大量的二进制编码的数据。 # 特点： 不可修改 只能使用 FileReader 读取内容 存储大量二进制数据的 js 对象 # 使用： new Blob(array,options) array 是由 ArrayBuffer、ArrayBufferView、Blob 和 DOMString 对象构成的，将对被放进 blob 中 options 配置项有： type：默认值为：” “，表示将会被放入到 blob 中的数组内容的 MIME...