- 博客(23)
- 收藏
- 关注
RSS订阅原创 React — Zustand状态管理库的使用详解
简单易用：Zustand 提供了非常简洁的 API，使得你可以轻松地管理和更新状态。无需大量 boilerplate：与 Redux 等库相比，Zustand 没有复杂的动作和 reducer，状态和操作封装在一个地方，减少了样板代码。高效：Zustand 在性能方面非常高效，能够实现按需渲染和优化。灵活：Zustand 支持中间件、持久化、subscribe等扩展功能，满足不同应用的需求。
2024-12-13 15:18:31
1496
1
原创 Typescript 常见的高级类型
TypeScript 中的高级类型增强了类型系统的灵活性和表达能力，使得代码更具可读性和可维护性。交叉类型和联合类型主要用于组合类型。索引类型和映射类型用于动态定义属性类型。条件类型和泛型使类型定义更灵活。工具类型提供了常见类型操作的快捷方式。掌握这些高级类型可以帮助开发者更灵活地处理复杂的数据结构和业务逻辑。
2024-11-04 10:03:50
1095
原创 浏览器渲染原理
浏览器的多进程架构，根据不同的功能划分了不同的进程，进程内不同的使命划分了不同的线程，当用户开始浏览网页时候，浏览器进程进行处理输入、开始导航请求数据、请求响应数据，查找新建渲染进程，提交导航，之后渲染又进行了解析HTML构建DOM、构建过程加载子资源、下载并执行JS代码、样式计算、布局、绘制、合成，一步一步的构建出一个可交互的WEB页面，之后浏览器进程又接受页面的交互事件信息，并将其交给渲染进程，渲染进程内主进程进行命中测试，查找目标元素并执行绑定的事件，完成页面的交互。
2024-10-28 17:08:03
672
原创 Vue3 从源码角度解析Vue.use()的原理以及实现一个简单的Plugin
Vue 插件通过install方法实现，并在Vue.use()中调用。插件可以添加全局方法、组件、指令和混入等。实现插件时，要注意避免全局污染，并通过配置项提供灵活性。
2024-10-28 15:03:48
1155
原创 Web性能优化 大批量接口请求的并发控制
前端实现大批量接口请求控制的核心在于限制瞬时并发数，可以通过分批处理、请求池、递归调用等方式实现。请求较少时，可以直接使用。请求较多时，推荐使用分批或请求池控制的方法。
2024-10-26 15:13:35
1092
原创 Typescript 关于泛型的理解
TypeScript 中的泛型是一种强大且灵活的工具。它允许开发者编写类型安全、复用性强的代码，同时提供更好的类型检查和智能提示功能。
2024-10-26 10:36:57
975
原创 Javascript 如何实现一个Promise
实现一个基本的PromisependingfulfilledrejectedpendingfulfilledrejectedthenthenPromiserejected以下是一个简单的Promise。
2024-10-26 10:30:13
584
原创 React 实现Vue的keep-alive效果
在React中实现类似Vue的keep-alive功能（组件缓存）通常需要将组件卸载后保留其状态。我们可以通过React提供的和React.memo等API来实现这种功能。
2024-10-26 10:07:16
1108
原创 Typescript中常用的工具类型及用法
TypeScript 提供了一些非常实用的，可以帮助我们简化类型定义和提高代码的可读性。这些工具类型主要是用来对现有类型进行一些变换，比如设置某些属性为可选、只读，或者从类型中排除某些属性等等。
2024-10-26 09:46:47
588
原创 详解HTTP1.0、HTTP1.1、HTTP2.0的区别
HTTP2.0相对于HTTP1.0在性能和效率上有了明显的改进。通过连接复用、多路复用、头部压缩、Server Push等特性，HTTP2.0在传输速度、网络资源利用率和用户体验方面都有了显著的提升。然而，要注意的是，HTTP2.0在某些特定的网络环境下可能会遇到兼容性问题，需要进行适当的配置和优化。随着互联网的不断发展，HTTP协议也在不断演进，HTTP3（基于UDP的QUIC协议）已经出现，并带来了更多的改进。
2024-10-23 11:04:01
3577
原创 Vue3在编译方面所做的优化(相比于Vue2)
静态提升：将不变的内容提升到渲染函数外部，避免重复创建。Patch Flag：通过动态标记优化虚拟 DOM 的 diff 过程，精准更新。Block Tree：分块渲染，只追踪和更新动态内容，进一步减少不必要的更新。事件缓存：静态事件处理函数缓存，减少不必要的函数创建。v-once 和 v-memo：优化了只渲染一次和缓存动态内容的场景。这些编译器层面的优化使 Vue 3 在渲染性能、内存消耗和代码执行效率上都比 Vue 2 更加出色，尤其是在处理大型或复杂的应用时优势更加明显。
2024-10-23 09:49:15
1169
原创 Vue3 从源码角度分析v-for中key的作用
在 Vue 3 的v-for指令中，使用key是确保列表渲染正确、高效的重要实践。通过为每个元素提供唯一标识，开发者可以避免因状态丢失和性能下降而导致的各种问题。因此，在循环渲染组件时，总是推荐为每个列表项指定key。
2024-10-23 09:42:27
956
原创 如何在NPM上发布一款自己的插件
首先，创建一个文件夹来保存你的插件。系统会提示你输入一些项目信息，如插件名称、版本号等。：如果你在发布时遇到名称冲突，意味着已有同名插件。可以尝试修改名称，或发布到你自己的。文件，编写插件的核心代码。这样，你就可以完整地发布自己的插件，并且通过npm与其他开发者共享。如果你对插件进行了改进或修复了bug，需要更新版本号并重新发布。文件，说明插件的用途、安装方法和使用方式。：发布后，如果你需要撤销发布，可以使用。，但注意只能在发布后的24小时内撤销。确认你已经登录npm，并且。或者，将包发布到私有。
2024-10-22 16:29:53
556
1
原创 Babel 的工作原理详解
Babel 是一个强大的 JavaScript 转译工具，通过将现代 JavaScript 特性转译为旧版 JavaScript，从而确保代码可以在更多浏览器中运行。它的核心过程包括**解析（Parsing）代码生成 AST，转换（Transforming）AST，然后再生成（Generating）**新的 JavaScript 代码。通过插件和预设，Babel 使得我们可以放心地使用最新的 JavaScript 语法和特性，而不用担心浏览器兼容性问题。
2024-10-22 16:21:31
1415
原创 vue3 template转为render函数过程详解
解析：Vue 首先将template模板解析成 AST，构建出整个模板的树状结构。AST优化：对 AST 进行优化，标记静态节点，避免不必要的更新。生成代码：将优化后的 AST 转换为render函数，render函数会根据响应式数据动态生成虚拟 DOM。模板解析 (Parsing)：Vue 将template模板解析为抽象语法树 (AST)。AST优化 (Optimization)：Vue 标记静态节点，优化后续的渲染效率。代码生成 (Code Generation)
2024-10-22 15:37:45
926
原创 Webpack热更新原理
Webpack 的热模块替换（HMR）是指在开发模式下，Webpack 监视源代码的变化，并只更新改变的模块，而不需要刷新整个页面。简单来说，当你修改一个文件（比如 JavaScript、CSS）并保存时，Webpack 会只替换被修改的部分，而不重载整个网页。Webpack 的热更新（HMR）是一种高效的开发工具，它允许在不刷新整个页面的情况下，只更新修改的部分代码。
2024-10-22 15:13:26
2018
原创 Webpack构建流程详解
初始化：读取配置文件，创建 Compiler 对象，注册所有的插件。开始编译：从入口文件开始分析依赖，创建 Compilation 对象。确定入口：找到入口文件，作为依赖图的起点。构建模块：递归解析每个模块的依赖，使用 Loader 转换文件。模块打包：将所有模块打包为一个或多个代码块（chunks），进行优化。输出文件：将打包好的文件写入到指定的输出目录。完成打包：触发done钩子，打包流程结束。
2024-10-22 14:50:47
2026
原创 Webpack之loader和plugin的工作原理
Webpack 是一个模块打包工具。它的工作原理是从项目的入口文件开始，递归地分析所有依赖，把它们打包成一个或多个文件，通常是 JavaScript 文件。因为在现代开发中，我们不仅仅使用 JavaScript 代码，还需要处理 CSS、图片、字体等其他资源，所以 Webpack 需要通过Loader和Plugin来处理这些非 JavaScript 文件。Loader：专注于处理文件内容的转换，比如将.scss文件转换为 CSS，将 TypeScript 转换为 JavaScript。Loader 是对。
2024-10-22 14:41:37
1028
原创 Vue3 nextTick实现原理
Vue 选择异步更新 DOM 是为了性能优化。通过将多个响应式数据的变化合并成一个更新任务，Vue 能够避免不必要的多次 DOM 重绘，从而提高应用性能。Vue 使用微任务来调度这些异步更新，确保在当前事件循环结束时批量执行所有更新任务。
2024-10-22 14:10:25
1410
原创 Vue3 computed 源码解析
从源码角度看，computed的实现依赖于 ReactiveEffect，并通过 lazy和 dirty标志实现了延迟计算和缓存机制。它的主要作用是派生状态，适合需要频繁访问且依赖关系明确的场景。与普通的watch或effect不同，computed更注重性能优化，通过缓存减少不必要的计算。依赖追踪：当访问computed的值时，Vue 会通过track函数追踪依赖。这样，当依赖的响应式数据发生变化时，会通知computed更新。// 追踪依赖关系依赖触发：当计算属性的依赖数据发生变化时，会通过。
2024-10-22 11:14:50
957
原创 Vue3 keep-alive实现原理
KeepAlive是 Vue 3 中用于优化组件切换性能的一个重要工具。通过缓存和复用组件实例，它可以避免组件反复销毁和创建，从而提高应用的性能。其工作原理主要依赖于Proxy和虚拟 DOM 的复用，同时通过生命周期钩子提供了灵活的组件状态管理方式。在实际使用时，KeepAlive尤其适合需要频繁切换的组件（如路由视图）以及那些状态需要被持久化的场景。
2024-10-22 11:06:48
2649
原创 Vue3 响应式原理详解
Vue 3 的响应式系统基于 Proxy对象，它允许 Vue 拦截对象的读写操作，并在这些操作发生时执行特定的逻辑。与 Vue 2 中基于的响应式实现相比，Proxy提供了更强大的功能，能够监听更多类型的操作（如属性的添加和删除），并且能够在性能上获得提升。reactive：创建一个深层响应式对象，可以跟踪所有嵌套属性的变化。ref：用于将基本类型的数据变成响应式，或者用来封装引用类型的对象。computed：用于定义计算属性，可以根据其他响应式数据动态计算值。effect。
2024-10-22 11:02:48
2714
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人