- 博客(69)
- 收藏
- 关注
RSS订阅原创 Rspack
Rspack是由字节跳动 Web Infra 团队基于Rust开发的高性能JavaScript打包工具，旨在解决大型项目构建性能瓶颈（如构建时间长达十几分钟甚至半小时），提供 与Webpack生态系统的良好兼容性，可无缝替换Webpack，带来 闪电般的构建速度（相比Webpack提升 5-10 倍）。其特点包括 极快的启动速度、内置增量编译和HMR优化，以及 对TypeScriptCSS等开箱即用的支持。
2025-08-29 14:25:27
1378
原创 webpack升级
webpack5相对于webpack4改变比较大的一点就是不能直接用Buffer和process，要改用来提供polyfill所以我们先删除原来文件直接使用的process，然后再用defineplugin进行引用定义。
2025-08-29 14:24:45
1176
原创 CSS（面试）
块级格式化上下文，独立的渲染区域，与外部样式不相干规则：内部块级盒子会垂直方向上一个个排列，同一个BFC内相邻块级盒子编剧会发生重叠，计算高度的时候浮动元素高度也参与计算作用：清除浮动，避免外边距重叠，实现自适应布局（避开浮动元素）如何触发：float不为noneposition为absolute或fixeddisplay为inline-block、table-cell（表格单元格）、table-caption（表格标题）overflow不为visible：这是专门为创建 BFC 而设计的。
2025-08-27 17:27:03
995
原创 JS（面试）
变量提升是 JavaScript 在执行代码前，将变量和函数声明“提前”到其作用域顶端的机制（只提升声明，不提升赋值）。故let，const没有定义的时候会有暂时性死区var a = 1;// 输出：undefined（不是 1！var a = 2;test();// 原因：函数作用域内的 var a 会覆盖全局的 a，且提升后初始值为 undefinedajax是一种技术组合，通过浏览器内置的对象，实现异步请求，从而在不刷新页面的情况下更新数据。
2025-08-27 17:25:53
703
原创 React（面试）
React Fiber 从根本上改变了 React 处理更新的方式，使得应用能够更加流畅地运行，尤其是在高负载情况下。它不仅提高了性能，还为开发者提供了更多控制应用行为的可能性。通过使用 Fiber，React 能够更好地适应现代Web应用的需求，提供更佳的用户体验。React的Diff算法通过层级比较和key的机制，高效地计算出虚拟DOM的最小变更，从而减少真实DOM的操作次数。同级比较：只比较同一层级的节点。key的稳定识别：通过key识别节点的移动、添加和删除。双轮遍历策略。
2025-08-27 17:24:48
1144
原创 git（面试）
下面用「一句话 + 场景 + 示例」的方式，把日常 90% 的 Git 操作全部打包给你。按「工作流顺序」记忆，用完即走，不需要死记硬背。命令一句话示例告诉 Git 你是谁告诉 Git 你邮箱以后新建仓库默认分支叫 main一次配置命令一句话示例把当前文件夹变成仓库把远程仓库搬下来命令一句话示例看看哪些文件动了 / 把改动放进「暂存区」把暂存区打成一个快照命令一句话示例查看本地分支列表新建分支 / 跳到某分支新建并直接跳过去把某分支合到当前分支删除已合并分支命令一句话示例查看远程地址别名第一次推送建立关联
2025-08-27 17:24:05
837
原创 浏览器与计算机网络
3）服务器根据 if-modified-since 的值，与该资源在服务器最后被修改时间做对比，若服务器上的时间大于 Last-Modified 的值，则重新返回资源，返回200，表示资源已更新；反之则返回304，代表资源未更新，可继续使用缓存。3）服务器根据 If-None-Match 的值，与该资源在服务器的Etag值做对比，若值发生变化，状态码为200，表示资源已更新；2、服务器优先判断 Etag，若资源未变化状态码为304，客户端继续使用本地缓存，若资源发生变化，状态码为200 并返回最新的资源。
2025-08-27 17:23:31
974
原创 手写题（面试）
手写Promise，Promise.all,Promise.race,Promise.allSettled,Promise实现并发控制，最多请求三次。
2025-08-27 17:22:29
390
原创 ACM模式输入输出
);});});// 在这里写你的算法逻辑// 使用 console.log 输出结果🎉 搞定！现在你已经掌握了 ACM 模式下 JavaScript 的输入输出方法。下次遇到笔试题，直接套这个模板，就能专注于算法逻辑了！需要我帮你练习一道具体的 ACM 模式题目吗？比如“链表反转”、“最大子数组和”？
2025-08-21 15:37:42
557
原创 git命令
下面用「一句话 + 场景 + 示例」的方式，把日常 90% 的 Git 操作全部打包给你。按「工作流顺序」记忆，用完即走，不需要死记硬背。命令一句话示例告诉 Git 你是谁告诉 Git 你邮箱以后新建仓库默认分支叫 main一次配置命令一句话示例把当前文件夹变成仓库把远程仓库搬下来命令一句话示例看看哪些文件动了 / 把改动放进「暂存区」把暂存区打成一个快照命令一句话示例查看本地分支列表新建分支 / 跳到某分支新建并直接跳过去把某分支合到当前分支删除已合并分支命令一句话示例查看远程地址别名第一次推送建立关联
2025-07-28 19:50:00
650
原创 JS面试题
变量提升是 JavaScript 在执行代码前，将变量和函数声明“提前”到其作用域顶端的机制（只提升声明，不提升赋值）。故let，const没有定义的时候会有暂时性死区var a = 1;// 输出：undefined（不是 1！var a = 2;test();// 原因：函数作用域内的 var a 会覆盖全局的 a，且提升后初始值为 undefinedajax是一种技术组合，通过浏览器内置的对象，实现异步请求，从而在不刷新页面的情况下更新数据。
2025-07-28 17:06:33
763
原创 CSS面试题
块级格式化上下文，独立的渲染区域，与外部样式不相干规则：内部块级盒子会垂直方向上一个个排列，同一个BFC内相邻块级盒子编剧会发生重叠，计算高度的时候浮动元素高度也参与计算作用：清除浮动，避免外边距重叠，实现自适应布局（避开浮动元素）如何触发：float不为noneposition为absolute或fixeddisplay为inline-block、table-cell（表格单元格）、table-caption（表格标题）overflow不为visible。
2025-07-14 20:30:40
483
原创 HTML面试题
sessionstorage：存在会话存储中，每个域名最多5MB，浏览器关闭之后就消失，无法跨域，一般用于存储临时数据，购物车数据等。localstorage：存在本地存储，每个域名最多5MB，需要手动清除，无法跨域，一般用于存储用户偏好、主题设置。属性决定，没设置过期时间那就为临时cookie，浏览器关闭后消失，每次请求都会自动发送，可以通过设置。方法：play(),pause(),load(),分别是播放，停止，加载方法。方法：play(),pause(),load(),分别是播放，停止，加载方法。
2025-07-14 20:30:02
562
原创 ACM算法
在ACM编程竞赛或在线判题系统(如LeetCode、牛客网等)中，JavaScript/TypeScript需要特定的方式来获取输入值。
2025-05-14 21:38:55
424
原创 Preview 插件
3. **智能代码折叠**：自动折叠import等非核心代码，提升可读性"1. **双向绑定调试**：修改props实时反馈，同时生成对应代码示例。1. **代码净化**：移除危险API调用（如fetch、eval）2. **安全沙箱**：通过iframe隔离执行环境，防止恶意代码。2. **沙箱隔离**：iframe + sandbox属性限制。2. **新人 onboarding**：交互式学习组件API。/* 重置继承样式 */3. **API 设计反馈**：通过使用数据优化组件设计。
2025-05-14 10:50:27
738
原创 Eslint和perrier的作用
'@typescript-eslint/no-unnecessary-type-assertion': 'error' // 避免冗余类型断言。'@typescript-eslint/consistent-type-imports': 'error', // 强制类型导入风格。ignorePatterns: ['**/dist/**', '**/node_modules/**'], // 忽略目录。'react-hooks/rules-of-hooks': 'error', // 必须遵守hooks规则。
2025-05-14 09:17:09
718
原创 asadfdsadsad
好的，以下是一个关于如何通过重构 Webpack 构建策略来优化性能的示例。这个过程包括分析现有构建策略的问题、优化策略的制定以及具体的代码实现。
2025-05-13 15:51:12
735
原创 webpack重构优化
在参与公司的性能专项优化过程中，我发现现有的 Webpack 构建策略存在一些问题，例如构建速度慢、打包体积大、代码分割不合理等。- 使用 `HardSourceWebpackPlugin`，Webpack 会缓存构建结果，减少重复构建的时间，特别是在大型项目中效果显著。- 使用动态导入（`React.lazy` 和 `Suspense`），将 `LazyComponent` 按需加载，减少初始加载体积。- **用户体验改善**：按需加载的代码分割策略显著减少了初始加载时间，提升了用户体验。
2025-05-13 13:01:06
1053
原创 Ref是什么
createRef` 返回一个引用对象，其 `.current` 属性被初始化为 `null`。- **不要在函数式组件中使用字符串 `ref`**：在 React 16.3 之后，字符串 `ref` 已被废弃，应使用 `useRef` 或 `createRef`。- **`ref` 的值**：`ref` 的值在组件挂载后才会被赋值，因此在组件挂载之前访问 `ref` 的值可能会导致 `null`。- **避免过度使用 `ref`**：`ref` 是一种强大的工具，但应谨慎使用。
2025-05-12 17:32:30
777
原创 Fiber
Fiber 是 React 16 引入的一种新的数据结构和渲染机制，用于实现可中断的渲染过程，提高 React 应用的响应性和性能。React 使用任务队列来管理 Fiber 节点。- **提高响应性**：通过可中断的渲染机制，React 可以在渲染过程中处理更高优先级的任务，提高应用的响应性。- **更好的性能**：通过增量渲染，React 可以逐步完成渲染任务，减少主线程的阻塞时间，提高应用的性能。- **任务队列的管理**：React 使用任务队列来管理 Fiber 节点，确保任务的有序执行。
2025-05-12 17:22:44
557
原创 浏览器url解析
这些步骤共同确保了网页能够高效、准确地加载和显示。3. **本地 hosts 文件**：操作系统会检查本地的 `hosts` 文件（如 `/etc/hosts` 或 `C:\Windows\System32\drivers\etc\hosts`），看看是否有该域名的映射。2. **ACK**：服务器收到 `FIN` 请求后，回复一个 `ACK`（确认）响应，表示服务器已收到关闭连接的请求。4. **ACK**：浏览器收到服务器的 `FIN` 请求后，回复一个 `ACK` 响应，确认连接已关闭。
2025-05-12 15:43:00
606
原创 js事件循环机制
事件循环是 JavaScript 实现异步编程的核心机制，它使得单线程的 JavaScript 能够处理非阻塞 I/O 操作。下面我将从基础概念到实际运行过程全面讲解。
2025-05-11 15:59:44
529
原创 多包管理工具
公共库组件的特征之一就是代码复用率很高，改其中一部分代码，大部分组件就都需要更新一遍依赖，所以如何快速更新依赖、添加版本号、发布组件、上传组件代码就成了一个问题。这里我使用了bolt来批量管理组件的迭代。
2025-03-19 16:02:47
424
原创 事件动态挂载到组件上
如果你需要在组件挂载后动态绑定事件（例如绑定到原生 DOM 元素），可以使用 `useEffect`。- 如果需要绑定到原生 DOM 元素，可以使用 `useRef` 和 `useEffect`。你可以将事件处理函数存储在一个对象中，然后通过遍历对象动态绑定事件。### 4. **使用 `useEffect` 动态绑定事件**### 3. **通过 `props` 动态传递事件**### 1. **使用对象存储事件处理函数**### 2. **动态生成事件处理函数**### 5. **动态事件名称**
2025-03-05 11:10:57
496
原创 React事件动态挂在到组件上
如果需要简单绑定多个事件，可以使用对象展开语法（如果需要动态生成事件处理函数，可以在组件内部定义逻辑。如果需要绑定到原生 DOM 元素，可以使用useRef和useEffect。这些方法都可以帮助你灵活地处理事件绑定问题。
2025-03-05 11:01:38
702
原创 前后端对接
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
2025-03-04 16:50:49
2310
原创 前后端对接
前端与后端的对接主要依赖接口，通过 HTTP 请求（如 GET、POST）进行数据交互。清晰的接口文档。统一的请求和返回格式（通常是 JSON）。处理跨域、认证、错误等问题。使用工具进行联调和测试。通过良好的协作和规范，可以确保前后端高效对接。
2025-02-21 10:02:55
8493
原创 部署前端项目2
前端项目的部署方式多种多样，可以根据项目需求和团队技术栈选择合适的方案。常见的部署方式包括静态文件托管、云服务器部署、Docker 部署和 CDN 加速。结合 CI/CD 工具可以实现自动化部署，提高效率。
2025-02-19 10:26:47
952
原创 部署前端项目
常见的前端项目依赖包括框架（如React、Vue、Angular）、库（如webpack、Babel、ESLint等）。通过以上步骤，开发者可以顺利地将前端项目部署到各种平台，并确保项目的稳定运行和高质量用户体验。构建项目是将源代码转换为生产可用的文件（如HTML、CSS、JavaScript等）的过程，通常使用构建工具来完成。：创建一个构建配置文件（如webpack.config.js），定义项目的入口文件和输出文件等。：在项目根目录下运行命令构建项目。：根据项目的需求和特点，选择合适的部署平台。
2025-02-19 10:23:40
908
原创 对象的操作
前端开发中，熟练掌握 JavaScript 内置对象及其方法可以大大提高开发效率。结合现代 JavaScript 特性（如解构、箭头函数、async/await 等），可以编写更简洁、高效的代码。
2025-02-19 10:08:56
432
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人