<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewpo
2024-09-18
react原理篇幅-requestidlecallback
requestidlecallback它提供了一种机制，允许开发者在浏览器空闲时运行低优先级的任务，而不会影响关键任务和动画的性能。
requestidlecallback 执行阶段
浏览器一帧里面做的任务
处理事件的回调： 用户的点击
2024-03-08
Vue3.0里为什么要用 Proxy API 替代 defineProperty API
一、Object.defineProperty定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
为什么能实现响应式通过defineProperty 两个属性
2023-11-02
http 强缓和协商缓存
一、http缓存
HTTP 缓存策略分为: 强制缓存 和 协商缓存
为什么需要 HTTP 缓存 呢 ? 👇
直接使用缓存速度 >> 远比重新请求快
缓存对象有那些呢 ？👇
图片 JS文件 CSS文件 等等
二、强缓存
强
2023-08-05
浏览器中 JS 的事件循环机制
1.事件循环机制
浏览器执行JS代码大致可以分为三个步骤，而这三个步骤的往复构成了JS的事件循环机制（如图）。
第一步：主线程（JS引擎线程）中执行JS整体代码或回调函数（也就是宏任务），执行过程中会将对象存储到堆（heap）中，将函数
2023-05-30
如何编写一个 Webpack Plugin
1. webpack 内部执行流程
一次完整的 webpack 打包大致是这样的过程：
将命令行参数与 webpack 配置文件 合并、解析得到参数对象。
参数对象传给 webpack 执行得到 Compiler 对象。
执行 Compi
2023-04-20
如何编写一个 Webpack Loader
在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个 Webpack Loader。
1. L
2023-04-13
性能优化
1. 首屏性能指标
FP First Paint/首次绘制
FCP First Contentful Paint/首内容绘制
FMP First Meaningful&n
2023-02-03
常规的React项目(优化四)
React 的代码分割与懒加载通过 React.lazy 和 Suspense 实现动态加载组件，可以有效减少初始加载时间，提高页面的首屏性能。代码分割的核心思想是将大文件拆分为多个小文件，按需加载，从而避免一次性加载过多内容。
示例场景
2023-01-18
常规的React项目(优化三)
合理使用useEffect，避免不必要的副作用
在 React 中，useEffect 是一个常用的钩子，用于处理副作用（例如数据获取、订阅等）。但是，如果 依赖数组 配置不当，会导致以下问题：
副作用重复执行：依赖数组过大或配置错误时，
2023-01-16
常规的React项目(优化二)
优化图片和资源加载：使用现代图片格式和懒加载提升图片和资源加载性能是前端优化的重要环节，尤其在页面中存在大量图片时。下面是优化的几种方法以及代码示例。
优化方式
现代图片格式：
WebP、AVIF 是现代图片格式，具有更高的压缩率和更小的文
2023-01-15
常规的React项目(优化一)
在优化 React 应用时，有许多具体的细节可以关注，以提升性能、可维护性和用户体验。以下是一些关键的优化细节
1. 使用React.memo对于纯组件（Pure Components），使用 React.memo 包装 防止不必要的重
2023-01-14