杜明清的个人博客

# 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...

# eslint 知识点 # extends 与 plugins plugins 本质是为了加强 eslint 的扩展性，使我们可以直接使用别人写好的 eslint 规则，方便快速用于项目中。 官方规定 npm 包的扩展必须以 eslint-config - 开头，插件以 eslint-plugin - 开头，在使用过程中可以省略这个开头。 eslint-config - 文件是我们共享的一些配置文件，里面就是一个 JS 对象，其中包含一些配置信息，而 eslint-plugin - 文件是我们自定义的集合规则，可以导入和使用。 一个插件能带来： 额外的规则，如...

关于打包工具：esbuild、webpack 和 rollup 三者的介绍推荐这里： 简单来说就是 esbuild 打包更快；rollup 打包产物更纯净、体积更小，但不支持热更新；webpack 功能更全，生态更完善，支持文件类型更多。 # 介绍 Esbuild 是一个类 webpack 的打包工具，速度是 webpack 的几十倍。其底层基于 go 语言进行编写，不使用 AST，优化了构建流程。js 是单线程串行，esbuild 是新开了一个进程，使用多线程并行，充分发挥了多核的优势。 # 作用 esbuild 最显著的作用就是：快。它也是 vite 和 snowpack...

# 常见浏览器性能指标 # TTFB(Time To First Byte) 发出页面请求到接收到应答数据第一个字节的时间总和，包含了： DNS 解析时间 TCP 链接时间 发送 HTTP 请求时间 获得响应消息第一个字节的时间。 # FP（First Paint） 首次绘制时间，这个指标用于记录页面第一次绘制像素的时间。 # FCP（First Contentful Paint） 首次内容绘制时间，这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。 # LCP（Largest Contentful...

# 概念 函数重载是指在编程语言中允许定义多个同名函数，但是他们的参数类型、参数个数或者返回类型不同，编译器或解析器会根据调用时提供的参数类型和个数来确定使用哪个函数 # 作用 函数重载的主要目的就是提高代码的可读性和灵活性，同时避免了为不同功能编写不同的函数名导致的变量命名冲突和混乱。 # 实现函数重载 # ts ts 中进行函数重载其实就是根据型参数组的个数和对变量进行 typeof 检测，然后根据不同的情况进行分支处理 // 函数重载的声明function average(numbers: number[]): number; // 函数签名 1：接受数字数组并返回数字function...

# 深拷贝 # 介绍 我们知道在 javascript 中有八种数据类型：其中 number，string，undefined，null，boolean，symbol 和 bigint 为基本数据类型，而 object 为复杂数据类型 #...

# 脚手架开发 常见工具包 Commander 提供一个连贯的 API ，用于定义 CLI 应用程序的各个方面，如命令、选项、别名和帮助。简化了命令行应用程序的创建。 yargs 脚手架开发框架，通过解析参数和生成优雅的用户界面来帮助您构建交互式命令行工具。 lerna 多 package 管理 Inquirer 一个易于嵌入且美观的 Node.js 命令行界面。 提供了很棒的查询会话流程。 Chalk Chalk 是一个非常简单的库，创建它的目的很简单 —— 给你的终端字符串添加样式。 colors 打印 不同颜色的log信息 ora 命令行 中高级的 、...

# # vue-router 源码 # vue-router 路由模式 # hash 模式（#） SEO 不友好，资源不变，不会刷新。 # history 模式（/） SEO 友好，重新请求资源。 history 模式发布时出现的问题： 发布到服务器上时，点击路由跳转正常但是刷新后路由跳转 404，出现的原因刷新后跳转的根路径并不是当前项目的 index.html 导致资源路径不匹配单页面应用路由，采取的方法是每次请求资源都 fallback 到 index.html 文件，可以使用静态资源服务器的支持。（例如在 nginx 中 location 字段添加：try_files 字段） #...

# jest 测试 市面上有很多测试框架，例如：mocha 、jasmine、vue test utils、vitest、react testing library 和 testing frameworks for jacascript 等，但语法和思想大致相同，现在依 jest 框架进行简单的使用 /** * jest 简单的语法 * expect toBe 语法 */test('tow plus to 4',()=>{ expect(2+2).toBe(4);})/** * toEqual 语法，递归检查对象或数组的每个字段...