- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 SPA首屏加载速度慢的怎么解决
SPA（单页应用）首屏加载慢的核心原因是，且路由渲染依赖前端 JS 解析，容易出现 “白屏” 或加载延迟。以下是一套分层优化方案，从。
2026-01-06 14:34:27
988
原创 DNS协议
DNS协议（Domain Name System，域名系统）是互联网的核心协议之一，其核心功能是将人类可读的域名转换为机器可读的IP地址，从而简化互联网访问过程。
2026-01-06 10:44:24
659
原创 移动端点击事件300ms延迟如何去掉？原因是什么？
移动端浏览器中的 300ms 点击延迟 是早期移动端 Web 开发中常见的性能问题，主要源于浏览器对双击缩放（double-tap to zoom）的兼容性处理。
2026-01-04 15:50:28
653
原创 Vue的nextTick()方法
Vue.nextTick() 用于在 DOM 更新后执行回调。优先使用微任务（性能更高），降级方案为宏任务。在 Vue 3 中通过 import { nextTick } from ‘vue’ 使用。典型场景：DOM 操作、异步更新后的逻辑处理。
2026-01-04 14:52:45
571
原创 什么是数组扁平化
推荐方法：优先使用原生 flat()，简单高效。兼容性处理：如果环境不支持 flat()，用递归或 reduce() 实现。特殊需求：如需惰性求值或处理大数据量，考虑 Generator。
2026-01-04 14:14:58
425
原创 cookie可以实现不同域共享吗
方案适用场景安全性实现复杂度共享父域名子域名间共享（如企业内部系统）较高低完全不同域名间共享（需 HTTPS）中（需配置）中服务器端代理复杂跨域场景（如微前端架构）高高SSO/Token 认证多域名统一认证（如电商、社交平台）最高中优先使用 Token 认证：如 JWT，避免直接共享 Cookie，提升安全性。严格配置安全属性：设置 HttpOnly、Secure 和 SameSite=Strict/Lax，减少攻击面。遵循最小权限原则。
2025-12-31 10:23:54
844
原创 px 如何转为rem
方法适用场景优点缺点手动计算简单项目或少量转换无依赖，直接控制易出错，效率低CSS 预处理器使用 Sass/Less 的项目可复用函数，维护方便需预编译流程PostCSS 插件现代构建工具（Webpack/Vite）全自动转换，支持复杂配置需配置构建工具动态根字体响应式布局适配不同屏幕尺寸需 JavaScript 动态计算开发阶段：使用 PostCSS 插件（如 postcss-pxtorem）自动转换，配合动态根字体实现响应式。设计稿标注。
2025-12-31 09:45:33
992
原创 requestlIdleCallback api
requestIdleCallback 是优化页面性能的有效工具，尤其适合处理非关键任务。通过合理利用浏览器的空闲时间，可以减少主线程压力，提升流畅度。但需注意兼容性和执行时间限制，必要时结合 polyfill 或回退方案。
2025-12-30 17:41:49
336
原创 documentFragment api是什么，有哪些使用场景
需要批量插入或修改节点时。构建复杂结构（如 Web Components 模板）。追求高性能的动态内容渲染。通过减少重排/重绘次数，它能显著提升页面性能，尤其在数据量大或频繁更新的场景下效果更明显。
2025-12-30 14:03:21
1220
原创 web应用中如何对静态资源加载失败的场景做降级处理
在Web应用中，对静态资源（如CSS、JavaScript、图片、字体等）加载失败的场景进行降级处理，可以显著提升用户体验和应用的健壮性。
2025-12-30 11:40:40
842
原创 前端如何通过设置失效时间清除本地存储的数据？
方法适用场景优点缺点附加时间戳简单需求灵活控制单个键的过期时间需要手动检查第三方库复杂项目功能完善（如自动清理）增加依赖定时清理大量数据批量处理过期数据可能影响性能根据项目需求选择合适的方法。对于大多数场景，方法一（附加时间戳）是最简单高效的解决方案。
2025-12-29 15:55:38
337
原创 什么是反柯里化
在 JavaScript 中，反柯里化（Uncurrying）是一种将柯里化函数转换回接受多个参数的普通函数的技术，其核心目的是扩大函数的适用性，使原本仅适用于特定对象的方法能够被任意对象调用。
2025-12-29 10:30:40
920
原创 js如何判空？
return (value == null || // null 或 undefined(typeof value === "string" && value.trim() === "") || // 空字符串或全空格(Array.isArray(value) && value.length === 0) || // 空数组(typeof value === "object" && Object.keys(value).length === 0) || // 空对象。
2025-12-26 14:33:13
544
原创 如何减少项目里面if-else
方法适用场景前端框架示例策略模式复杂条件分支逻辑表单验证、支付方式状态模式对象状态驱动行为订单状态机、UI 状态对象映射简单的键值对路由路由跳转、枚举处理多态组件化UI 渲染分支React 动态组件、Vue 插槽默认参数默认值处理函数参数解构函数式工具数组/对象操作filter、map提前返回减少嵌套条件权限检查、表单提交核心原则将变化的部分封装：将条件逻辑提取为独立模块（策略、状态、组件）。用数据驱动UI：优先使用对象映射或配置表代替条件判断。
2025-12-26 11:32:53
784
原创 git 提交报 Updates were rejected because the tip of your current branch is behind
推荐流程：git pull → 解决冲突（如有）→ git push。强制推送：仅在明确后果时使用。变基：适合需要干净历史的场景。执行 git pull 后，问题通常会解决。如果仍有疑问，可以检查 git status 或 git log 确认分支状态。
2025-12-26 10:07:22
883
原创 长文本溢出，展开/收起如何实现
如果你使用的是React、Vue等前端框架，或者Bootstrap等UI库，它们通常提供了现成的组件或插件来实现展开/收起功能。利用CSS的text-overflow属性和max-height属性，结合过渡效果，可以实现简单的展开/收起效果。使用JavaScript或jQuery可以更灵活地控制展开/收起效果，包括动画、状态切换等。/* 展开后的高度，根据实际内容调整 *//* 或者设置为一个足够大的值 *//* 初始高度 */
2025-12-24 09:57:51
610
原创 大文件切片上传时切片数量的考量因素
考量因素优化方向文件大小大文件 → 更多切片；小文件 → 更少切片网络带宽高带宽 → 增大单片；低带宽 → 减小单片服务端并发根据服务端限制调整并发数，反向推导切片数量客户端资源移动端优先小切片（1-5MB），桌面端可放宽（5-20MB）容错需求高可靠性场景 → 更小切片（1MB）传输协议避免单片过小导致HTTP头部开销占比过高最终策略通过压测确定最优单片大小（通常1-10MB），结合文件大小计算切片数量，并动态适配网络和服务端状态。
2025-12-23 17:53:03
982
原创 防止前端页面重复请求
在前端开发中，防止页面重复请求（如重复提交表单、重复调用接口等）是提升用户体验和系统稳定性的关键。以下是 多种防重复请求的方案，涵盖不同场景（表单提交、接口调用、按钮点击等），并提供代码示例和最佳实践。
2025-12-23 17:51:16
1230
原创 在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
对比维度整体上传切片上传理论耗时由文件大小和带宽决定相同条件下与整体上传一致实际耗时接近理论值因额外开销通常更长核心优势简单直接支持大文件、断点续传、并发上传适用场景小文件或稳定网络大文件、不可靠网络、需要高可靠性最终结论在网络带宽一定时，切片上传的耗时通常长于整体上传，但其通过功能设计（如断点续传、并发上传）提升了上传的可靠性和灵活性，适合大文件或不稳定网络环境。若仅关注速度且文件较小，整体上传更优。
2025-12-22 11:29:14
390
原创 如何统计页面的long task（长任务）
定义：主线程执行时间超过 50ms 的任务（如 JavaScript 执行、样式计算、布局、绘制等）。影响：导致页面卡顿（Jank），尤其是动画或滚动时。检测标准：通过 Performance Observer API 监听 longtask 事件。
2025-12-22 10:39:08
708
原创 判断页签是否为活跃状态
页面内页签：通过 CSS 类名、事件监听或路由状态判断。浏览器页签：使用 Page Visibility API 监听 visibilitychange 事件。框架中：利用状态管理（如 React 的 useState 或 Vue 的 data）动态切换活跃页签。
2025-12-22 10:38:49
1196
原创 navigator.sendBeacon方法
navigator.sendBeacon() 是处理页面卸载时数据上报的最佳实践，尤其适合日志、埋点等场景。它的异步非阻塞特性和高可靠性使其成为传统方法的理想替代方案。使用时需注意数据大小和兼容性，并避免依赖其响应结果。
2025-12-19 10:06:09
729
原创 将多次提交合并成一次提交
在前端开发中，将多次提交（如用户频繁点击按钮、多次触发事件）合并成一次提交（防抖/节流 + 批量处理）是常见的优化手段，可以减少网络请求、提升性能。
2025-12-18 11:03:17
458
原创 如何判断用户设备
在前端开发中，判断用户设备（如桌面、平板或手机）通常通过检测 用户代理（User Agent）、屏幕尺寸 或 触摸支持 等特性来实现。
2025-12-18 10:21:20
795
原创 使用＜picture＞或srcset为不同屏幕提供最合适尺寸的图片
技术适用场景特点<picture>不同屏幕需要不同图片/格式回退灵活，支持媒体查询srcset相同内容的不同分辨率图片简洁，优化高DPR设备混合使用复杂需求（如艺术指导 + 高DPR）最精细控制。
2025-12-11 10:01:25
890
原创 ES6有什么新特性，作用是什么
ES6（ECMAScript 2015）引入了众多新特性，这些特性极大地增强了JavaScript语言的表达能力，提升了开发效率，并改善了代码的可维护性。
2025-11-19 14:09:04
858
原创 ES6的Generator
yield 1;yield 2;yield 3;// 返回一个 Generator 对象Generator 通过 yield 暂停执行，实现惰性计算和可控迭代。核心方法：.next()、.return()、.throw()。可用于异步控制（需结合 Promise）、无限序列生成、状态机等。现代开发中，async/await 更适合异步场景，但 Generator 仍适用于特定需求（如 Redux Saga）。
2025-11-18 17:24:15
987
原创 JavaScript Promise 的内部原理是什么？它的优缺点是什么？使用方式？
Promise 通过状态机和任务队列实现了异步操作的规范化管理，解决了回调地狱问题，但需注意其无法取消和错误处理的局限性。合理使用链式调用和静态方法（如 all、race）可高效处理复杂异步场景，而 async/await 语法糖（基于 Promise）进一步简化了代码书写。
2025-11-18 14:36:46
871
原创 JavaScript原型链
原型链是 JavaScript 对象继承的基石，通过__proto__和prototype形成链式结构，实现属性和方法的共享。理解原型链有助于掌握 JavaScript 的继承机制，但在实际开发中，推荐使用 ES6 的class或来更清晰地管理继承关系。
2025-11-17 11:14:22
555
原创 JavaScript 标签里的 async 和 defer 有什么区别？
属性加载阻塞 HTML执行时机执行顺序典型场景无属性是立即执行（阻塞解析）按顺序关键脚本async否下载完立即执行（可能乱序）不保证独立脚本（如统计、广告）defer否HTML 解析后按顺序执行按顺序依赖 DOM 或顺序的脚本。
2025-11-17 10:44:19
1215
原创 JavaScript基本类型与引用类型有什么区别
特性基本类型引用类型存储位置栈内存（直接存储值）堆内存（存储地址，变量保存引用）赋值行为复制实际值（独立）复制引用（共享同一对象）比较方式比较值是否相等比较引用地址是否相同可变性不可变（修改创建新值）可变（直接修改原对象）类型数量固定 7 种动态（所有对象类型）方法支持临时转换为对象调用方法（原值不变）直接调用方法修改原对象。
2025-11-14 15:37:43
1425
原创 TypeScript 快速上手指南
它在 JavaScript 的基础上增加了静态类型系统和面向对象编程（OOP）特性，旨在提升代码的可维护性、可读性和开发效率，尤其适合大型项目或团队协作。
2025-11-13 16:56:22
366
原创 JavaScript虚拟DOM与diff算法
虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的抽象表示。// 虚拟DOM对象示例props: {id: 'app',},tag: 'h1',props: {},虚拟DOM和Diff算法是现代前端框架的核心机制，而:key属性是优化这一过程的关键工具。✅ 提高列表渲染性能✅ 维护组件状态一致性✅ 避免不必要的DOM操作✅ 确保正确的组件生命周期。
2025-11-13 14:37:17
543
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人