Oliver

核心一：流 Stream####流 非阻塞式的数据处理方式可提升效率 chunk 数据分块可以节省内存 管道可提高扩展性，方便组合 管道 pipe 两种方式实现 pipe Stream 对象的原型链 fs.createReadStream 自身属性 由 fs.ReadStream 构造 原型：stream.Readable.prototype 二级原型：stream.Stream.prototype 三级原型：events.EventEmitter.prototype 四级原型：Object.prototype 结论：Stream 对象都继承了 EventEmitter Stream 分类 Readable Stream Writable Stream Duplex Stream Transform Stream 如何自定义 Stream核心二：子进程 child_process什么是进程 进程是程序的执行实例 程序在 CPU 上执行时的活动叫做进程 一个进程可以创建另一个进程（父进程与子进程） 通过任务管理器可以看到进程 了解 CPU 特点：一个单核 CPU，在一个时刻， ...

前端性能优化—-雅虎 35 条军规 减少 HTTP 请求 80%的终端响应时间主要花费在前端，而这部分时间主要在下载网页中的图片，样式文件，脚本文件，flash 等资源。减少这些资源的数量就相应地减少了用于渲染页面的 HTT 请求数量。以下是一些具体的方法 简化设计 打包文件，将多个 JS 文件打包成一个 JS 文件，同样地，将多个 CSS 文件打包成一个 CSS 文件 使用 CSS Sprites，将页面中用到的背景小图标并合成一张图片，再使用 CSS 中的bakground-image和background-position来显示所需图像部分 图像映射，html 标签，可以创建可点击的图像区域，具体参考w3school或者 W3C 文档 内嵌图片，通过data:URL scheme内嵌 使用 CDN 在现有的网络中增加一层新的网络架构，将网站的内容发布到最接近用户的 Cache 服务器内，通过 DNS 负责均衡技术，判断用户来源就近访问 Cache 服务器上所需的内容。如此便可以减少数据在网络上传输的时间，提高速度 设置头文件过期时间或者缓存策略 静态内容： ...

React 事件系统描述性定义 React 基于 Virtual DOM 实现的一个 SyntheticEvent （合成事件）层 比如我们在 JSX 里给一个按钮添加的 onClick 处理方法就是 React 合成事件 它完全符合 W3C 标准，不存在浏览器兼容问题 与原生浏览器事件接口一样，同样支持事件冒泡 所有事件都自动绑定到最外层，如果需要访问原生事件对象，可以使用 nativeEvent 属性 合成事件如何绑定？ 在 React 组件中，每个方法的上下文都会指向该组件的实例，即自动绑定 this 为当前组件 在使用 ES6 class 或者 函数组件的时候，需要手动绑定 手动绑定方法有：bind 绑定，constructor 绑定，箭头函数这三种 合成事件代理机制 React 并不会把事件处理函数直接绑定到真实节点上，而是绑定在最外层，使用一个统一的事件监听器，这个事件监听器维持了一个映射来保存所有组件内部的事件监听和处理函数 当组件挂载或者卸载时，只是在这个统一的事件监听器上插入或者删除一些对象 当组件事件发生时，首先被这个统一的事件监听器处理，然后再映射里找到真正的 ...

深入浅出 Webpack[TOC] 入门系列模块化 什么是模块化？ 复杂的系统分解到多个模块以方便编码 为什么要使用模块化思想组织代码？ 以前使用的是命名控件方式组织代码，比如 jQuery 库把它的 API 都放在了 window.$，这样会带来命名空间冲突、无法合理的管理项目的依赖和版本和无法有效控制依赖加载顺序等问题 两种模块化规范：CmmonJS(CJS),AMD 和 ESM CommonJS 的优点： 代码可复用于 Node.js 环境下并运行，例如做同构应用； 通过 NPM 发布的很多第三方模块都采用了 CommonJS 规范。 CommonJS 的缺点: 代码无法直接运行在浏览器环境下，必须通过工具转换成标准的 ES5 AMD 的优点在于： 可在不转换代码的情况下直接在浏览器中运行； 可异步加载依赖； 可并行加载多个依赖； 代码可运行在浏览器环境和 Node.js 环境下。 AMD 的缺点: JavaScript 运行环境没有原生支持 AMD，需要先导入实现了 AMD 的库后才能正常使用。 ES6 模块化 ES6 模块化是欧洲计算机制造联合会 ECMA 提出 ...

Webpack 源码浅析参考 https://segmentfault.com/a/1190000021585435 https://juejin.cn/post/6844903987129352206

为什么需要自动化测试为什么选择 CypressPupperSeleniuumCypress 特点 Pro：界面美观友好 Pro：支持模拟手机 Pro：每一步操作截图 Pro：全程录屏 Pro：支持 debug，随时暂停 Pro：自动等待 UI 更新，减少异步代码 Cypress 怎么做 关键在快速安装 cypress vscode 打开 cypress 测试窗口：node_modules\.bin\cypress open webstorm 安装 cypress 插件，然后会识别测试文件，可以单个或者多个测试 安装 reporter：npm install -D cypress-intellij-reporter 命令行打开浏览器窗口测试：cypress run --no-exit --headed --spec "**/*.spec.js" 全局安装了的话直接：cypress open

看 webpack 源码总结的一点方法论用到的工具 WebStorm Collapse All 功能 Go To Declaration or Usages 功能 Back 功能 Forward 功能 按两下 Shift 搜索功能名 可获悉快捷键 VSCode Fold All 功能 Go To Definition 功能 Go Back 功能 Go Forward 功能 按 Ctrl+Shift+P 搜索功能名 可获悉快捷键 准备代码 使用 webpack 创建一个 demo 项目，用来调试 webpack 和 webpack-cli 运行 webpack-cli 将 src/index.js 打包为 dist/main.js 下载 webpack 从 GitHub 下载 webpack 的源码，切换至 v5.10.1 从 GitHub 下载 webpack-cli 的源码，切换至 webpack-cli@4.2. ...

解析 webpack 核心——Loader 原理 我们再上一次的分享中已经做出了一个简易的打包器，但是我们只能加载 JS 不能加载 CSS本次分享我们给出 css 加载思路并对 css-loader 和 style-loader 进行解析 如何加载 CSS 思路：目前bundler_1.ts只能加载 JS，想要加载 CSS，就需要将 CSS 转化为 JS 代码： 12345678910111213// 如果文件路径以.css结尾，就把CSS改为JS，并自动加载到head里if (/\.css$/.test(filepath)) { code = ` const str = ${JSON.stringify(code)} if (document) { const style = document.createElement('style') style.innerHTML = str style.type = 'text ...

解析 webpack 核心——Plugin 原理

解析 webpack 核心——Webpack 原理Webpack 要解决的两个问题 编译 import 和 export 关键字 将多个文件打包成一个 如何编译 import 和 export 关键字 不同浏览器功能不同 现代浏览器可以通过<script type="module">来支持 import/export IE 8~15不支持 import/export 兼容策略 激进兼容策略 把代码全部放到<script type="module">里面 缺点 不被IE 8~15支持；而且会导致文件请求过多 平稳兼容策略 把关键字转译为普通代码(通过转译函数完成)，并把所有文件打包成一个文件 缺点 需要写复杂代码来完成这件事情 那么怎么写这个转译函数？ @babel/core已经帮我们做了 示例 123456789101112131415161718192021222324// project_1/index.jsimport a from './a.js'impo ...