- 博客(257)
- 收藏
- 关注
RSS订阅原创 nvm use 某个包之后用nvm ls 为什么查到的包没有箭头指引
通过以上步骤，箭头会正确指向当前激活的 Node.js 版本。如果问题依旧，可能是系统策略限制，建议检查组策略或联系 IT 管理员。切换 Node.js 版本后，如果。未显示箭头指示当前版本，通常是因为。在 Windows 系统使用。
2025-04-14 18:03:57
911
原创 中国大陆网站用了lightHouse之后还有必要用WebPageTest么？
需验证多地域/CDN 性能需分析资源加载时序和网络链路需模拟复杂交互或自定义网络条件需监控第三方资源对大陆用户的影响最终建议小型项目：Lighthouse 快速优化 + 定期 WebPageTest 深度检查。中大型项目：Lighthouse 本地调试 + WebPageTest 多节点自动化测试 + 国内监控工具（如腾讯云 RUM）。
2025-03-22 12:32:57
952
原创 线上的中国大陆网站用PSI检测性能好一点，还是用本地的lightHouse检测好一点
进行性能检测，需结合具体需求和场景权衡。：PSI 可能误判服务器响应速度问题，而实际用户访问速度更快。对于中国大陆的线上网站，选择。
2025-03-22 12:13:45
739
原创 中国大陆用户没有CrUX上的数据，也可以使用pageSpeedIndex么？
直接回答：中国大陆用户即使没有 CrUX（Chrome User Experience Report）数据，依然可以使用 PageSpeed Insights（PSI）。PSI 的核心功能包括两部分：因此，即使 CrUX 数据缺失，PSI 仍能通过 Lighthouse 提供技术性优化建议，但需结合其他工具弥补真实用户数据的不足。3. 结合国内工具验证结果腾讯云 Web 应用性能监控（RUM）：采集真实用户性能数据（支持多浏览器），覆盖国内网络环境。阿里云 ARMS：提供页面加载瀑布图、资
2025-03-22 12:12:03
718
原创 如果我用pageSpeedIndex测试我们的网站，那么用到的真实用户数据CrUX是用户访问我们的网站后上报给google的么？
是的，CrUX（Chrome User Experience Report）的数据来源于。
2025-03-22 11:57:34
741
原创 我用PSI检测我们的网站，但是我们的网站是中国大陆的，那PSI的获取的真实用户数据（CrUX）是从哪里来的，能获取到么？
CrUX（Chrome User Experience Report）是 Google 收集的。
2025-03-22 11:55:11
877
原创 PageSpeed Insights 是什么？该什么情况下使用？和lighthouse的关系是什么？
PageSpeed Insights（PSI）是 Google 提供的一款免费在线工具，用于分析和优化网页性能。它通过评估网页的加载速度、性能指标和用户体验，提供具体的优化建议。通过结合两者，可以更全面地优化网页性能：先用 PSI 定位问题，再用 Lighthouse 深入调试，最终通过 PSI 的 CrUX 数据验证优化效果。
2025-03-22 11:52:39
443
原创 详解解释Speed Index以及如何优化
的核心指标，由 WebPageTest 团队提出，并被 Lighthouse 等工具采用。其核心目标是量化用户感知的页面加载进度。通过以上策略，可显著提升用户感知的加载速度，优化效果需结合工具验证与持续迭代。的累计缺失面积，最终得出 Speed Index 值（单位：毫秒）。将首屏所需样式直接嵌入 HTML，消除外链 CSS 的请求阻塞。将超过 50ms 的 JavaScript 任务拆分为小块。或 Intersection Observer API。通过捕获页面加载期间每秒的屏幕截图，计算各时间点。
2025-03-22 00:37:40
889
原创 解释下Cumulative Layout Shift (CLS)以及如何优化？
通过以上策略，可显著降低 CLS 值，提升用户体验和 SEO 排名。建议结合工具定期监控，确保优化效果持续有效。它量化了页面在加载或交互过程中，元素意外移动的程度。CLS 值越低，用户体验越稳定。是衡量网页视觉稳定性的核心指标，属于 Google 的。
2025-03-21 22:14:28
955
原创 在使用umi框架的项目中如何“避免链接关键请求”
在使用 Umi 框架的项目中，“避免链接关键请求”的核心目标是优化关键渲染路径（Critical Rendering Path, CRP），减少资源加载的链式依赖，从而提升页面加载性能。实际案例中，某中后台项目通过上述优化，构建时间从 3.5 分钟降至 1.1 分钟，包体积从 50MB 压缩至 23MB。建议结合具体业务场景选择组合策略，并通过性能工具持续验证效果。Umi 默认支持基于页面的代码分割，访问。/* 内联关键 CSS */// 内联核心初始化逻辑。
2025-03-21 20:28:35
588
原创 content-visibility 讲解以及使用 content-visibility 延迟渲染屏幕外元素
是 CSS 的一个现代属性，旨在优化页面渲染性能，通过控制浏览器渲染内容的范围，通过合理使用此属性，开发者可以轻松实现接近虚拟滚动的性能优化，同时减少代码复杂度。，从而减少初始加载时间和提升交互流畅性。/* 高度预估为 800px */
2025-03-21 19:28:52
738
原创 详细说明脚本评估和耗时较长的任务
指浏览器解析（Parsing）、编译（Compiling）和执行（Executing）JavaScript代码的全过程。
2025-03-21 17:50:34
1405
原创 网页性能优化中 有一条叫做“避免使用未合成的动画”，请问该如何理解？
通过这种方式，可以显著提升动画的流畅性，尤其是在低端设备或复杂页面上效果更为明显。在网页性能优化中，“避免使用未合成的动画”是指通过减少浏览器渲染流程中的。步骤，从而提升动画的流畅性和性能。），浏览器可以跳过布局和绘制，直接进入合成阶段，性能更高效。：过度使用会导致内存占用增加，仅在必要时使用。若动画直接修改了元素的布局属性（如。这两个属性在大多数现代浏览器中。
2025-03-21 17:27:01
596
原创 前端项目中应该如何选择正确的图片格式
通过合理选择图片格式、压缩优化和兼容性处理，可显著提升页面加载速度并降低带宽消耗。最终决策需结合实际场景、浏览器兼容性和性能测试（如 Lighthouse 评分）。在前端项目中选择正确的图片格式是优化页面性能、提升用户体验的关键步骤之一。
2025-03-20 23:48:22
778
原创 react 技术栈请问该如何优化 DOM 大小
优化方向具体措施减少节点数量虚拟滚动、条件渲染、懒加载简化节点层级使用 Fragment、避免过度嵌套、优化第三方组件提升渲染效率缓存组件（React.memo）、避免重复渲染动态内容管理及时清理未使用的 DOM、按需加载工具辅助使用 DevTools 和 Lighthouse 定期分析。
2025-03-20 22:57:58
1046
原创 webpack等构建工具如何支持移除未使用的代码
通过合理配置 Webpack、Rollup 或 Vite 的 Tree Shaking 功能，结合 ESM 语法和副作用标记，可以有效移除未使用的代码，显著减少打包体积，提升应用性能。
2025-03-20 22:57:23
938
原创 webpack等构建工具如何支持移除未使用的代码
通过合理配置 Webpack、Rollup 或 Vite 的 Tree Shaking 功能，结合 ESM 语法和副作用标记，可以有效移除未使用的代码，显著减少打包体积，提升应用性能。
2025-03-20 19:16:40
834
原创 webpack动态导入在用的时候才去请求资源会导致执行时间变长么？会不会导致用户体验变差?
动态导入（Dynamic Imports）确实会导致代码在使用时才去请求资源，这可能在，但。关键在于如何合理使用动态导入，平衡性能和用户体验。
2025-03-20 19:01:44
631
原创 如果我的项目是用ts写的，那么如何使用webpack的动态导入功能呢？
在 TypeScript 项目中使用 Webpack 的动态导入（Dynamic Imports）功能，需要结合 TypeScript 的语法和 Webpack 的配置。
2025-03-20 17:49:38
1062
原创 webpack的SplitChunksPlugin和在路由或组件级别进行拆分
”“在大型应用中，延迟加载第三方依赖项并不是常见的模式。通常，第三方依赖项会拆分为单独的供应商软件包，因为它们的更新频率较低，因此可以缓存。使用客户端框架时，在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分。请问下面内容中提到的SplitChunksPlugin和“在路由或组件级别进行拆分是一种更简单的方法，可用于延迟加载应用的不同部分”在前端项目中如何应用？优化代码加载性能是 Webpack 的核心实践。和路由级代码拆分，可以显著提升大型应用的加载性能和用户体验。
2025-03-20 17:28:07
898
原创 如何使用webpack预加载 CSS 中定义的资源和预加载 CSS 文件
在 Webpack 中预加载 CSS 文件及其内部定义的资源（如图片、字体等），可以通过 资源预加载（Preloading） 技术优化关键资源的加载优先级。以下是具体的实现方法和步骤：Webpack 默认不直接支持 CSS 文件的预加载，但可以通过插件或手动添加 实现。方法一：通过 安装插件：配置 Webpack（）：方法二：手动在 HTML 模板中添加在 HTML 入口文件中直接添加 标签：2. 结合 若使用 提取 CSS，可通过其内置的 选项优化：二、预加载 CSS 内部
2025-03-20 16:50:52
892
原创 Webpack 中动态导入（Dynamic Import）的几种典型用法
这段代码展示了 Webpack 中动态导入（Dynamic Import）的几种典型用法，并通过。通过这种方式，开发者可以精细控制 Webpack 的打包逻辑，显著优化前端应用的性能和用户体验。对打包行为进行精细控制。
2025-03-20 16:33:31
607
原创 前端import() 中的动态表达式有哪些？怎么用？
使用动态导入的准则按需加载：对非首屏关键资源使用动态导入，减少初始加载体积。明确路径：尽量让动态表达式可被构建工具静态分析。错误处理：使用try/catch处理模块加载失败的情况。结合工具链：利用 Webpack/Vite 的优化能力（如魔法注释、预加载）。示例代码// 动态加载并预加载（Webpack 魔法注释）${// 动态加载并预加载（Webpack 魔法注释） const loadModule = async(name) => {.js`
2025-03-20 16:26:58
507
原创 提取关键 CSS: react 的项目中如何使用criticalCSS
在 React 项目中优化首屏加载性能时，（关键 CSS）是一项重要技术。
2025-03-20 16:01:16
808
原创 chrome devTools中有个覆盖率工具，里面有按函数，按块选项，还有个内容脚本，请问他们分别是什么意思？
它们分别对应不同的代码分析粒度及覆盖范围。合理选择分析模式，可以更高效地识别冗余代码并提升性能！在 Chrome DevTools 的。
2025-03-20 11:21:21
695
原创 记录一点关于前端安装依赖的东西
peerDependencies：用于指定 外部依赖 的兼容版本范围，不能直接引用工作区中的其他包。仅表示包的使用者需要手动安装该依赖，而不是自动安装。是为开发环境、文档生成和构建过程准备的依赖。，而在实际的代码中不需要它，你应该将。在这种情况下，package-a。如果仅仅是为了在文档中使用。，但是在发布或运行时，不会将。，但是在 package-a。如果 package-a。）会在构建文档时使用。
2025-02-18 10:22:50
277
原创 jest测试带异步操作的自定义hook
然而，在这个例子中，由于我们直接测试的是 Hook 而不是组件，所以。然后，我们编写了两个测试用例：一个用于验证成功的数据获取，另一个用于验证错误处理。被正确地 mock，并且你能够验证 Hook 的行为（包括其状态更新和副作用）是否按预期进行。只在组件挂载时运行一次（由于依赖数组为空），因此我们只需要在测试中等待一次更新即可。也能工作）来等待异步操作完成，并验证 Hook 的状态是否按预期更新。Hook，那么你可能需要使用不同的方法来等待组件的渲染和状态更新。，如果它适用于你的场景）来处理异步操作。
2024-09-13 11:59:45
492
原创 我的react组件中用到了一个自定义hook:useA的返回值reportData,我想写这个组件的单元测试，我想mock这个自定义useA的返回值reportData在不同值的情况下组件的不同表现
如果useA是通过导出的，并且useA的返回值是一个对象，那么在测试文件中模拟这个Hook时，你需要确保mock函数返回的也是一个具有相同结构的对象。（假设组件使用这个Hook）在这个示例中，mockUseA是一个mock函数，它返回了一个对象，该对象具有与useA实际返回相同的结构（即一个包含reportData属性的对象）。然后，在测试用例中，我们通过调用来为不同的测试场景设置不同的返回值。请注意，由于我们使用了jest.mock来模拟整个模块，因此我们不需要（也不能）从模块中解构出useA。
2024-09-13 11:04:18
636
原创 jest需要mock自定义hook导出的数据，同一个测试文件不同的用例需要不同的数据，该怎么mock
RTL与Jest结合使用时，虽然不直接支持Hook的mock，但它提供了更贴近用户实际使用场景的组件测试方式。当在同一个测试文件中针对不同的测试用例需要mock自定义Hook导出不同的数据时，你可以使用Jest的动态mock功能或者利用Jest的。），你可能需要使用一些额外的配置或技巧来动态地修改mock的行为。来重置mock，确保每个测试用例的mock行为是独立的，不会受到前一个测试用例的影响。但是，请注意，如果你使用的是ES Modules（即使用。是静态的，在模块加载时就已经确定了，而。
2024-09-13 09:58:25
427
原创 使用@test-library/react的screen中的方法和直接使用getByText,getByTestId等的区别？
使用上下文：直接使用getByText等方法时，你可能需要指定一个容器元素（尽管在大多数情况下，你会从render函数的返回结果中直接调用它们）。而screen对象则不需要，因为它已经代表了整个 DOM。全局性screen对象提供了一种全局查询的方式，这在某些情况下非常有用，比如当你需要查询不在当前组件作用域内的元素时。推荐做法：虽然你可以直接调用getByText等方法，但使用screen对象进行全局查询是 React Testing Library 推荐的做法，因为它更符合库的设计哲学和最佳实践。
2024-09-10 10:24:22
882
原创 jest的toEqual测试两个对象或者两个数组的时候会要求顺序么？
在Jest中，.toEqual()方法用于测试两个对象或数组是否相等时，对于对象的属性顺序是不敏感的，因为对象的属性是无序的。然而，对于数组的顺序，.toEqual()是敏感的。
2024-08-29 21:04:35
348
原创 jest 的.toContainEqual(item)和.toContain的区别？
jest的和===itemitem.toContain.toContainitem.toContain。
2024-08-28 10:28:38
538
原创 zustand的用法
则意味着新的状态将完全替换旧的状态，这可以用于重置状态等场景。另外，这个参数也可以是一个自定义的比较函数，用于更复杂的比较逻辑。：这是一个必须提供的参数，它是一个回调函数，返回一个对象，该对象包含了状态数据以及修改这些状态的方法。函数的第二个参数，它用于自定义状态变化的比较逻辑。函数的基本用法是接受一个函数或对象作为参数，该函数或对象描述了状态应该如何被更新。函数的第二个参数，它是一个可选的项，用于自定义状态变化的比较逻辑。函数的第二个参数，通常需要注意的是，函数的第二个参数，或者是与。
2024-08-27 09:47:56
328
原创 ts的Pick,Omit,Partial,Required怎么使用？
是一个非常有用的工具类型，它允许你从一个已存在的类型中“挑选”出一个或多个属性，创建一个新的类型。这对于类型映射、条件类型以及创建基于现有类型的新类型时非常有用。是三个非常有用的内置工具类型，它们允许你以声明式的方式修改现有类型的属性。是TypeScript类型系统中一个非常强大的工具，能够帮助你以类型安全的方式处理复杂的类型映射问题。例如，你可能有一个复杂的对象，但只需要其部分属性用于某个特定的函数或组件。，你可以轻松地创建一个仅包含所需属性的新类型，从而保持类型安全和代码清晰度。的属性名的集合（通过。
2024-08-27 09:27:23
839
原创 lodash-es中的set和get的用法
通过这两个函数，你可以灵活地在 JavaScript 对象或数组中读取和设置值，而无需担心路径是否存在。这对于避免在深度嵌套的对象中访问不存在的属性时引发错误非常有用。的一个模块化版本，允许你通过 ES 模块（ECMAScript Modules）的方式按需导入函数，以减少最终打包体积。函数用于设置对象路径上的值。这对于动态地向深层嵌套的对象添加属性非常有用。是一个一致性、模块化、高性能的 JavaScript 实用工具库。是两个非常有用的函数，用于在深层嵌套的对象中安全地读取和设置值。
2024-08-24 18:05:05
1093
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人