诸葛韩信-优快云博客

原创面试高频题之性能优化

本文总结了提升网页加载速度的五大优化方向：1）减少请求数量，包括合并资源、避免重定向和合理使用缓存；2）压缩资源大小，涵盖HTML、CSS、JS和图片的压缩处理；3）优化网络连接，采用CDN、DNS预解析和持久连接技术；4）优化资源加载顺序和时机，如CSS前置、JS后置及懒加载策略；5）Webpack打包优化，包括代码分割、Tree Shaking、长效缓存等。通过多维度性能优化手段，可显著提升网页响应速度和用户体验。

2025-12-18 08:53:27 525

原创前端工程化1——npm insatall背后的工作原理

摘要：npm install 是 Node.js 包管理的核心命令，其执行过程主要包括：解析 package.json 文件、创建/更新 node_modules 目录、构建依赖树、下载安装包（优先使用缓存）、执行安装钩子脚本，并生成 package-lock.json 锁定版本。该文件记录精确的依赖信息，通过 name+version+integrity 生成唯一 key 定位缓存。npm3 之后采用扁平化目录结构，将重复依赖提升到顶层，优化了模块查找路径（从当前目录逐级向上查找）。整个过程使用广度优先遍

2025-11-27 17:46:31 890

原创让我们熟悉一下AST（抽象语法树）

摘要： AST（抽象语法树）是一种用树形结构表示代码语法层次的数据核心概念，广泛应用于现代前端工具链。它的核心价值在于将代码转化为可操作的结构化数据，从而支持代码转换（如Babel转译ES6）、静态分析（ESLint检查）、代码优化（Terser压缩）、模块打包（Webpack依赖分析）等场景。通过AST Explorer工具可直观观察代码与语法树的映射关系。理解AST需要掌握其生成过程：词法分析将代码拆分为标记流，语法分析构建节点间的嵌套关系形成树状结构。掌握AST原理不仅能应对技术面试，更是突破&quo

2025-11-17 17:58:19 749

原创 JavaScript的模块化

本文梳理了前端模块化的发展历程，从最初的script标签到CommonJS、AMD等规范，最终演进为ES Module标准。模块化解决了代码复用性差、全局污染等问题，通过拆分功能模块提升可维护性。关键优势包括：隔离作用域避免命名冲突、声明式依赖管理、按需加载优化性能。随着前端工程化发展，模块化配合npm和构建工具成为现代前端开发的基础。文章还对比了CommonJS和ES Module的导出机制差异，解释了require和import的适用场景。模块化是应对复杂前端应用的核心方案，推动了前端从脚本到应用的质变

2025-11-11 11:02:57 942

原创我们需要了解的Web Workers

JavaScript设计为单线程运行以避免DOM操作冲突，但随着应用复杂度提升，其单线程模型在处理计算密集型任务时会出现性能瓶颈。HTML5引入Web Worker标准，允许创建子线程执行耗时任务，保持主线程响应能力。文章详细对比了进程与线程的区别：进程是独立资源分配单位，线程是CPU调度的基本单元并共享进程资源。对于浏览器的多线程架构（如GUI渲染线程、事件触发线程等）进行了说明。最后介绍了Web Worker的API和使用方法，包括其功能限制和支持的接口（如Fetch、IndexedDB等）。通过Wor

2025-11-07 14:15:07 696

原创 Typescript 中的 interface 和 type 有什么区别

本文比较了TypeScript中interface和type的异同。相同点：都支持extends扩展和类实现(implements)。不同点：type支持基本类型、联合类型、元组等，而interface仅描述对象类型；interface支持声明合并，type则不支持。使用建议：官方推荐优先使用interface，但联合/交叉类型等常用场景仍需type；React组件props/state建议用type保证严格性，三方库开发可使用interface以获得声明合并的灵活性。两者可根据具体场景配合使用，inter

2025-11-06 18:34:14 987

原创 Webpack与Vite的常用配置及主要差异分析

Webpack和Vite是现代前端构建工具的典型代表，二者在配置和性能上差异显著。Webpack配置复杂但功能强大，支持多入口、Loader机制和丰富插件，适合大型项目；而Vite基于ES模块，开发启动快、配置简单，内置预处理支持，适合中小型现代项目。关键区别体现在：开发速度（Webpack慢需打包/Vite快按需编译）、HMR效率（Webpack较慢/Vite极快）、配置复杂度（Webpack高/Vite低）以及资源处理方式。Webpack适合复杂定制场景，Vite更优开发者体验，未来两者可能趋向功能融合

2025-10-30 10:47:49 973

原创 Vue3 中 watch 和 watchEffect 的相同点与不同点

使用watch处理需要精细控制的监听逻辑，用于需要细粒度控制响应式数据变化的场景，比如需要手动停止监听或访问数据变化前后的值。使用简化依赖管理，避免重复声明响应式引用，更适合用于自动追踪响应式数据并触发副作用的场景，如执行异步操作或更新UI。两者均基于 Vue3 的实现，但设计目标和适用场景不同。详情可以看官网，

2025-10-30 10:16:33 502

原创 vue3 在路由守卫中设置token过期方法

发现该项目token设置了，token的过期时间另外存了，没有更新token，也没有对过期token进行判断，导致前端的token没有有效期，但是后端却设置了过期时间。最近有个bug，就是用户在系统登陆进去后没有操作一段时间，这个时候用户再次打开网站或者刷新界面，有后端的接口报错了401，导致不该抛出异常抛出了异常，然后页面才跳转到login登陆页面。路径4：src/utils/request.js。路径3：src/stores/auth.js。路径：src/utils/token.js。

2025-10-27 17:02:18 171

原创我们项目中如何运用vueuse

最近项目中遇见了别人使用了vueuse的存储方法，感觉这个组合式函数集合还是比较多的地方可以用到的，而我之前没有怎么使用它，现在做一个简单的介绍。极致简化的代码，使用起来是非常的舒适的，比如说，我们开发过程中需要用到一些本地存储，那么可以使用它，这些函数都需要多去使用才能够熟练，或者需要用的时候去官网找到对应的方法，能够加快我们开发的脚步。如果我们需要操作复制文字的功能，我们可以直接用 useClipboard进行操作，我们就不需要自己去封装一个复制相关的代码了。组合式函数支持独立测试，使用。

2025-10-25 16:14:36 742

原创配置 Vite 如何自动修改 Vue3 项目中的 index.html title

通过以上方法，可以灵活控制 Vue3 项目中的页面标题，满足不同场景需求。在 Vue3 项目中，通过 Vite 配置可以动态修改。结合 Vue Router 的路由守卫动态修改。中配置环境变量，通过。

2025-10-23 11:50:15 314

原创关于下载上传的sheetjs

一、背景需要讲后端返回来的表格数据通过前端设置导出其中某些字段，而且得是xlsx格式的。那就考虑使用控件SheetJS。如果是几年前，一般来说，保存excel的文件都是后端去处理，处理完成给前端一个接口，前端调用了打开就可以下载到该表格了。但是，因为PC电脑的硬件处理数据的能力越来越好，前端也具备了处理一些大数据的能力。那么处理大数据就需要把相关的情况考虑完全的控件，SheetJS就是这样的一个工具。二、官网三、常用的API。

2024-04-30 15:22:49 1360

原创 Vue3插件——一文讲透

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。Vue 3 插件可以全局注册、本地注册或在组件内部使用。Vue 插件通常以可重用的形式提供，可以在任何基于Vue.js应用程序中使用。/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()// 配置此应用。

2023-06-12 16:42:24 4719

原创 uni-app简单的教程（一）

个人简单写明的uni-app入门教程

2023-03-09 17:24:39 561

原创 rollup.js 一个简单实用的打包工具

最近在看vue3相关的知识的时候，发现了一个新的打包工具，至少于我而言是新鲜的。它就是rollup.js。一说到JS打包、合并、压缩、模块处理等都会想到webpack，这是王者，当然入门的难度偏高。而vue3中搭配的vite运行速度确实非常快，里边有很多的rollup.js相关的回调函数。而我们今天就来简单的看看rollup.js打包神器。官网地址为Rollup | Rollup

2023-02-23 15:12:46 1538

转载 JS—节流与防抖

JS的防抖其实可以理解成为防止抖动，也就是在操作时限内，只做最后一次处理，不让程序过多“抖动”；而节流就是相当于节省能源，可以理解成每隔一段时间执行一次程序，依次做到“节流”。

2023-02-15 11:18:16 771

原创后台文件流xlsx文件，进行下载

现在的需求很简单，就是后端把excel文档通过接口方式，在前端进行接收，是一个文档流，并且文档content是加密过的。

2023-02-09 15:24:11 903

原创 JavaScript算法——桶排序

一、桶排序的原理桶排序是计数排序的升级版。它利用了函数的映射关系，高效与否的关键就在于这个映射函数的确定。思路大致是，设置一个定量的数组当作空桶；遍历输入数据，并且把数据一个一个放到对应的桶里去；对每个不是空的桶进行排序；从不是空的桶里把排好序的数据拼接起来。二、静态示意图元素分布在桶中：然后，元素在每个桶中排序：其实，很明显，这是计数排序的优化版，当然也可以说成是升级版。主要是分好桶。三、代码实现function bucketSort(arr, bucketSize) {

2022-05-07 16:43:08 1264 1

原创 JavaScript算法——计数排序

一、原理逻辑：1. 准备一个新的数组=> 遍历原始数组, 把原始数字当做新数组的索引向新数组内填充数据=> 新数组的数据按照计数排列2. 遍历新数组=> 把索引在当做数据放进原始数组内=> 前提: 把原始数组清空二、注意点计数排序的核心在于将输入的数据值转化为键存储在额外开辟的数组空间中。作为一种线性时间复杂度的排序，计数排序要求输入的数据必须是有确定范围的整数。就是遍历数组记录数组下的元素出现过多次，然后把这个元素找个位置先安置下来，简单点说就是以原数组每个元

2022-05-06 17:14:51 652

原创 JavaScript算法——堆排序

一、知识准备**首先是堆的概念。**这里的堆其实可以简单的理解成金字塔形的形象体。我们用二叉树来构造，但是我们这个二叉树是完全体，也就是树的扩展是要有顺序排列的。堆是一个完全二叉树。完全二叉树：二叉树除开最后一层，其他层结点数都达到最大，最后一层的所有结点都集中在左边（左边结点排列满的情况下，右边才能缺失结点）。大顶堆：根结点为最大值，每个结点的值大于或等于其孩子结点的值。小顶堆：根结点为最小值，每个结点的值小于或等于其孩子结点的值。堆的存储：堆由数组来实现，相当于对二叉树做层序遍历。

2022-04-28 17:38:13 2261

原创 JavaScript算法——插入排序

一、概念**插入排序（Insertion-Sort）**的算法描述是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。这里需要注意的就是，插入排序是在原来数组上进行对比排序。要借鉴的话，这个如同现实生活中打扑克或者打麻将的时候，把牌排列好，把一手牌给分好我们常用的就是拿出没有排序的部分的牌移动到排好序的牌中，位置定好，让它插入。二、算法描述一般来说，插入排序都采用 in-place 在数组上实现：从第一个元素开始，该元素可以认

2022-04-24 19:57:42 1977

原创 JavaScript算法——冒泡排序

一、概念冒泡排序（Bubble Sort）也叫气泡排序、泡沫排序，是一种比较简单的排序算法。它通过遍历数组，比较相邻的两个元素，如果前一个元素比后一个元素大，则交换它们的位置，这样第一次遍历后数组的最大元素就排在了数组的末尾。采用相同的方法再次遍历，直至整个数组都有序为止。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端；这样，大的数就移动到了后端。二、算法描述比较相邻的元素。如果第一个比第二个大，就交换它们两个；对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对，这

2022-04-20 10:32:45 2612

原创 JavaScript算法——快速排序

一、概念快速排序算法由 C. A. R. Hoare 在 1960 年提出。它的时间复杂度也是 O(nlogn)，但它在时间复杂度为 O(nlogn) 级的几种排序算法中，大多数情况下效率更高，所以快速排序的应用非常广泛。注意：快速排序不一定是最快的排序方法，这取决于需要排序的数据结构、数据量。不过，大多数情况下，面试官和工作场所用它的概率也是相对较高的，所以我们应该花时间把它学透彻。二、工作原理首先设定一个分界值，通过该分界值将数组分成左右两部分。将大于或等于分界值的数据集中到数组右边

2022-04-19 17:26:14 6893

原创 Proxy——拦截 JavaScript 操作的方法

概述Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。va

2022-04-14 21:44:12 2754

原创 Reflect——拦截 JavaScript 操作的方法

JavaScript中，万事万物都是对象。在做项目的时候，往往都需要获取或者修改删除对象的一些操作，而且操作的过程中，可能会有一些条件的限定或者有条件的分支。所以，我们ES6开始就有了Reflect，Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。但是我们要知道，Reflect不是一个函数对象，因此它是不可构造的。虽然，我们知道Proxy可以用new运算符调用，但是Reflect是不能够的，这是它的属性并非一个构造函数决定的。Reflect设计目的（1）将Object对

2022-04-12 17:34:46 1782

原创 async 函数——JS中的异步处理方式

async 函数的语法async function name([param[, param[, ... param]]]) { statements }name: 函数名称。param: 要传递给函数的参数的名称。statements: 函数体语句。async 函数的书写方式如下：// 函数声明async function foo() {}// 函数表达式const foo = async function () {};// 对象的方法let obj = { async foo(

2022-04-11 15:46:01 14433

原创 Promise对象——JS中的异步处理方式

关于Promise对象所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。这是一种异步方式，Promise的写法相对来说会让人摆脱回调的苦恼，不必一层层嵌套相关的方法，维护代码也更加的方便。设计思想Promise

2022-04-11 11:46:21 1020

原创 nvm中, vue不是内部或外部命令

最近更换了一个npm的管理器，nvm。安装好了nvm之后，感觉世界都是光明的，可以很随意的更换自己的nodejs的版本，可谓之随心所欲了哇。但是，我居然发现想要重新搞一个vue2的项目玩一下都被可恨的系统提示“vue不是内部或外部命令”。首先，重新安装了一下vuenpm install vue然后再次在命令行输入vue -v还是报了一个“vue不是内部或外部命令”。现在看来，这很明显就是vue的环境变量不对劲导致的问题了。网络上大把的文章都在揭露这个问题，但是没有几个人能够把这个

2021-11-24 17:19:21 3284 5

原创 Vue3新特性——Vue3的新特性新功能一览

Vue3已经更新到了第三个大版本。感谢尤大大及其团队的开发，让我们体验到了一个很优秀的mvvm框架。如果是之前有用过vue的话，那么对vue的双向绑定一定不会陌生的，那种只需要关注数据，不用过多盯住视图就可以开发出更好交互体验视觉美感的前端项目，实在是过瘾。vue3已经正式上线，vue2还是仍旧可以正常使用。vue3更新了，肯定是更快，更小，更简单使用的了。那么vue3到底有什么新的东西呢？下面我们来具体瞧瞧吧！（一览而过，不会深入）Comparing the Options API and Compo

2021-06-21 20:06:25 945

原创 Teleport——Vue3项目中的传入，传送门

为什么会有Teleport的出现？那是因为写组件有的时候真的很繁琐，而且一个项目有可能有很多tankuang

2021-06-18 18:00:50 746

原创 vue的单文件组件

最近翻阅了一下vue。发觉有一个单文件组件之前基本忽视掉了。vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容。也就是说，一个页面或者是一个组件，我们想将他们捆绑在一起，那么vue的这个单文件组件可以做到。正如vue的官网说的，“在很多 Vue 项目中，我们使用 app.component 来定义全局组件，紧接着用 app.mount(’#app’) 在每个页面内指定一个容器元素。”这里的组件，都是相对简单的，而面对一个比较复杂的项目，这种方式就行不通。原因如下：全局定义 (Global

2021-06-17 21:24:55 1588 8

原创 chrome浏览器91版本，Chrome中跨域请求无法携带Cookie的解决方案

前些时候，发觉自己的vue项目node环境上跑不起来。请求后台的接口直接来了个400报错。如下：这一看，不太妙，服务器直接来一个“您提交的数据无法被验证” 。好家伙，发现就是携带的cookiedi丢失了。请求接口Set-Cookie后头有一个黄色的感叹号，鼠标放上去有一个浮窗弹出，大致意思就是说，有一个另一个域的请求被组织了，可以通过将“SameSite=Lax”修改成为“SameSite=None”。意思很明确了，就是人家google的浏览器chrome不让跨域乱搞了，哦豁，这就玻璃心了。我y的就在

2021-06-16 19:42:54 9872 13

转载 Git常用指令

git config配置 Git 的相关参数。Git 一共有3个配置文件：1. 仓库级的配置文件：在仓库的 .git/.gitconfig，该配置文件只对所在的仓库有效。2. 全局配置文件：Mac 系统在 ~/.gitconfig，Windows 系统在 C:\Users\<用户名>\.gitconfig。3. 系统级的配置文件：在 Git 的安装目录下（Mac 系统下安装目录在 /usr/local/git）的 etc 文件夹中的 gitconfig。作者：笑叶林链接：

2021-06-15 18:44:36 139

原创关于toFixed的精度问题

解决方式一，直接上代码Number.prototype.toFixed = function (s) { var that = this, changenum, index; changenum = (parseInt(that * Math.pow(10, s) + 0.5) / Math.pow(10, s)).toString(); index = changenum.indexOf("."); if (index < 0 &am

2021-04-21 17:15:45 410

原创 vue项目中，不修改之前的文件引入ts

前言我们项目中，可能回想着将typescript引入进来，但是又苦于项目过于繁杂，不能够简单的全部文件都修改成ts文件，那么这个时候能不能在新加入的vue文件引入ts相关的语法，而不需要修改其它的文件呢？答案是肯定的。以下是vue-cli3的修改操作。安装依赖首先必须要安装typescript 和相应的loader 转换器 ts-loader，我们把它们先下载安装到当前项目：npm install typescript ts-loader --save-dev接着我们需要在vue项目中不仅仅

2021-03-11 17:40:15 1812 1

原创在vue中的axios请求数据前如何对数据进行劫持

前言今天同事一起探讨了一个问题，就是后台返回来的数据，有一些接口需要弹框处理不同的业务。返回来的数据要进行加工处理，在弹框中点击取消按钮还需要关闭弹框的同时阻断继续请求。同事一开始以为不可能在公用层写一个公用的弹框做不一样的业务处理。但是这个确实是可以解决的问题，不需要在业务页面进行独立的处理。需要用到异步处理。处理逻辑在axios处理之前就需要对它进行截获了，有一个钩子，axios.interceptors.request.use可以实现；由于需要弹框来决定往下走与否，我们就要加一个异步的

2021-03-10 19:42:30 576

转载 CSS 面试题

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？盒模型都是由四个部分组成的，分别是margin、border、padding和content。标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。知

2020-10-22 14:31:14 2372

锋利的jQuery

js中文手册

空空如也