- 博客(81)
- 收藏
- 关注
RSS订阅原创 前端检查内存泄露
前端内存泄漏检测与解决方法 前端内存泄漏会导致页面性能下降甚至崩溃，常见于SPA应用。主要泄漏场景包括：意外的全局变量、滥用闭包、未清理的DOM引用、未销毁的定时器/事件监听、第三方库残留和无限增长的缓存数据。 检测工具主要使用Chrome开发者工具的Memory和Performance面板： 通过Performance录制内存曲线，观察操作后内存是否回落 使用Memory面板的堆快照对比功能，定位未回收对象 利用时间线分配记录观察内存分配过程 典型示例及解决方案： 闭包泄漏：返回的变量被全局引用，应避免长
2026-01-24 22:37:17
1000
原创 前端浏览器缓存深度解析：从原理到实战
本文深入解析浏览器缓存机制，分为强缓存和协商缓存两类。强缓存通过Cache-Control/Expires响应头实现，直接从本地读取资源；协商缓存通过Last-Modified/ETag与服务器交互验证资源更新。缓存配置需由后端/服务器完成，静态资源建议配置强缓存，动态资源使用协商缓存，HTML文件应禁用强缓存作为更新入口。合理运用缓存可显著提升页面加载速度，降低服务器负载。
2026-01-22 18:01:33
554
原创 一文搞懂 SSR 与 SSG：前端渲染优化的两大核心方案
SSR 服务端渲染指: 浏览器发起请求后,服务器先完成页面组件加载,数据请求与组装,生成包含完整DOM结构的HTML页面,再将这份"成品HTML"返回浏览器,浏览器拿到后可直接渲染展示内容,同时加载前端JS完成"客户端激活", 最终将页面转化为可交互的SPA 页面。
2026-01-21 17:55:49
868
原创 前端必懂：CDN 到底是什么？为什么能加速？如何在项目中正确使用？
CDN(Content Delivery Network),即内容分发网络,是一组分布在不同地理位置的服务器集群,核心作用是将前端静态资源(JS,CSS,图片,视频等)缓存到离用户最近的服务器节点,让用户从"就近节点"获取资源,而非直接从源服务器获取1. CDN 的核心是"就近分发", 前端使用CDN 的核心目标是提升静态资源加载速度,减轻源站压力;2. 第三方库优先用成熟的公共CDN,自有资源需购买CDN服务并配置加速域名;3. 缓存规则和资源哈希值是CDN使用的关键,需避免缓存更新不及时的问题。
2026-01-21 13:31:51
845
原创 前端大文件上传(切片并发/断点续传/秒传/WebWorker 计算Hash) 含完整代码
大文件上传时前端开发常见需求之一,尤其在处理较大的Excel,高清图片,视频等文件时,优化上传链路不仅能提升用户体验,也能显著降低服务端压力,本文围绕一套工业界常用的方案展开,包含: 直接整文件上传通常会遇到: 因此, 大文件上传通常采用切片上传 + 状态查询+ 合并的方式实现可靠传输整体流程建议这样设计: 1. 前端选择文件==> 生成fileId (hash 或 hash+size)2. 前端向服务器查询上传状态: /upload/status?fileId=...3. 前端切片后跳过已上传切片,并发上
2026-01-18 20:01:24
965
原创 前端首屏加载时间的度量:FCP、LCP等指标的规范理解
浏览器首次在视口中渲染任意文本,图像(包括背景图), SVG或Canvas的时间点在视口范围内,面积最大的内容元素完成渲染的时间点首屏主图Banner首屏列表主要文本块首屏加载不是浏览器时间,而是体验指标FCP反映首次可见内容LCP是首屏完成时间的最佳近似Load 与 DOMContentLoaded 不适合作为首屏指标。
2026-01-18 15:55:43
688
原创 一文读懂IndexedDB: 前端本地数据库入门与实践
一句话总结:indexedDB 是前端领域真正意义上的"本地数据库"当你遇到以下需求时,请直接考虑它:数据量大结构复杂需要索引和事务需要离线能力。
2026-01-16 21:13:50
657
原创 Vite5 基础篇
Vite是一款基于原生ES模块的前端构建工具，相比Webpack具有显著的开发速度优势。它采用按需编译机制，仅在浏览器请求时处理对应模块，大幅提升大型项目的启动和热更新效率。Vite内置对Vue3、React和TypeScript的支持，配置简洁，但也存在对老旧浏览器兼容性不足的问题。配置方面，Vite提供开发服务器选项（端口、代理等）、生产构建配置（输出目录、代码压缩等）和共享选项（路径别名、CSS预处理等）。通过Rollup实现生产构建，支持自定义输出格式和静态资源分类。插件系统可扩展功能，如自动导入V
2026-01-12 01:29:35
572
原创 Webpack 面试题
Loader负责把不同类型的文件转换成Webpack能处理的模块,而Plugin通过参与Webpack的构建生命周期,扩展和优化整个打包过程。
2026-01-12 00:00:00
965
原创 Webpack5 高级篇(二)
优化代码运行性能打包代码时会将所有js文件打包到一个文件中，体积太大了，我们如果只要渲染首页，就应该只加载首页的js文件，其他文件不应该加载 所以我们需要将打包生成的文件进行代码分割，生成多个js文件，渲染哪个页面就只加载某个js文件，这样的加载的资源就少，速度就更快主要做了两件事代码分割实现方式有不同的方式，为了更加方便体现它们之间的差异，我们会分别创建新的文件来演示5.npx webpack 此时在dist 目录我们能看到输出了两个js文件总结： 配置了几个入口，至少输出几个js文件如果多入口
2026-01-11 18:07:30
695
原创 Webpack5 高级篇(一)
本文介绍了Webpack高级配置的优化方法，主要从四个方面展开：提升开发体验、打包速度、减少代码体积和运行性能。在开发体验方面，推荐使用SourceMap实现源码映射；通过HotModuleReplacement实现热更新；使用OneOf、include/exclude规则优化loader处理流程。在打包速度方面，建议开启缓存(Cache)和多进程打包(Thead)。在代码体积方面，介绍了TreeShaking自动删除未使用代码，使用@babel/plugin-transform-runtime减少辅助代码
2026-01-09 22:56:26
707
原创 Webpack5 基础篇(二)
开发中可能还存在一些其他资源,如音视频 原因是: Webpack对 jc 处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能再IE等浏览器运行,所以我们希望做一些兼容性处理其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测. 可组装的 js和JSX检查工具这计划意思就是: 它是用来检测js和jsx语法的工具,可以配置各项功能 我们使用Eslint,关键是写Eslint配置文件,里面写上各种rules规则,将来运行Eslint时就会以写的规
2026-01-06 15:19:20
790
原创 Webpack5 基础篇(一)
Webpack 本身功能是有限的:开发模式: 仅能编辑 JS中的ES Module语法生产模式: 能编译JS中的ES Module 语法, 还能压缩JS代码开始使用这个模式我们主要做两件事css - loader : 负责将Css文件编译成Webpack能识别的模块style-loader : 会动态创建一个Style标签,里面放置Webpack中Css模块内容,此时样式就会以Style标签的形式在页面上生效sass-loader : 负责将Sass 文件编译成css文件。
2026-01-06 12:20:24
740
原创 前端竞态问题
前端静态问题本质上是"多个异步任务竞争同一份状态",最终 UI 或数据结果取决于不可控的返回顺序,典型场景包括搜索联想,接口重复触发,Tab频繁切换,自动保存等,解决静态的核心只有一句话: 只让当前有效请求的结果生效,工程上常用手段主要有三类:防抖 / 节流能控制频率,但它们解决的是 "触发次数", 并不能保证"结果正确",所以不能当做静态的核心解法。
2026-01-04 18:26:05
1252
原创 单点登录(SSO) 是什么? 一篇讲透原理,实现与安全的详细指南
单点登录(SSO)是一种身份认证机制，允许用户一次登录即可访问多个相互信任的系统。其核心是通过统一认证中心(IdP)集中管理身份验证，业务系统只需校验IdP颁发的凭证即可确认用户身份。SSO工作流程包括：用户首次登录IdP后生成凭证，后续访问其他系统时通过共享token或cookie实现无感知登录。优点包括提升用户体验、简化账号管理；缺点可能存在安全隐患。为提高安全性，可采取强制密码策略、多因素认证等措施。SSO广泛应用于企业内网和互联网服务，如微信生态、阿里系产品等。
2026-01-04 11:11:05
1190
原创 uniapp 折叠动画 ＜transition＞ 踩坑记录
view v-for="n in [11,12]" :key="n" class="tool-item">功能{{ n }}</view>原因是 在小程序中,父容器是flex时,子元素的max-height变化不会触发布局动画。子元素的max-height不参与flex计算,因此不会引发动画过渡。动画帧直接跳到了最终状态,看起来就是无动画。
2026-01-03 15:30:22
158
原创 uniapp 实现一个底部悬浮面板
本文介绍了微信小程序地图界面与浮动面板交互设计方案。通过三层结构布局：底层地图、中层搜索栏和悬浮按钮、顶层可滚动浮层实现半屏地图展示。核心采用scroll-view包裹透明占位区与工具面板的结构，利用CSS控制初始显示50%地图，用户滚动时面板自然上移覆盖地图。方案避免了复杂JS拖拽计算，实现了流畅的半屏到全屏切换效果，同时适配微信小程序环境并保持代码结构清晰易扩展。
2025-10-29 11:39:46
387
原创 Uni-App 页面跳转监控实战：快速定位路由问题
通过简单的函数代理，我们就能轻松实现全局路由监控。无侵入，不需要改业务代码。实时可见，能直接看到参数和调用堆栈。扩展方便，可以加日志上报、埋点统计。
2025-09-27 16:57:44
485
原创 css3的 --自定义属性, 变量
root {.card {/* 继承自 .container */2.可以在CSS变量中使用计算,比如通过calc( ) 函数来计算尺寸:root {.element {3.css变量与媒体查询结合使用CSS变量非常适合和媒体查询一起使用,能够帮助你轻松地创建响应式设计,你可以在不同的屏幕尺寸下,修改变量的值以实现不同的布局主题:root {body {:root {/* 在小屏幕下修改字体大小 */
2025-09-10 11:51:16
825
原创 Pinia 两种写法全攻略：Options 写法 vs Setup 写法
/ 第一个参数是id 第二个个参数是配置对象count: 0,}),getters: {},actions: {},},})导入使用:// 在组件里。
2025-09-09 18:51:30
329
原创 Vue + ECharts 中 Prop 数据被修改导致图表合并的问题及解决方案
在项目中,我封装了一个Echarts柱状图组件(BarChart.vue),父组件传入seriesData和xData来渲染不同的柱子,但在实际使用中,遇到了问题多次切换不同数据, 图标柱子会出现"合并残留",旧数据还在图标显示不正确。
2025-08-28 18:54:47
771
原创 Vue2 Vue父子传参使用computed属性,子组件接收参数为undefined, 问题二 子组件自定义事件传递数据,父组件直接把props或绑定对象替换掉,导致无限递归
本文分析了Vue父子组件数据传递中的两个常见问题：1) 计算属性初始化顺序导致子组件接收undefined的问题，建议在created钩子或computed中初始化数据；2) 双向绑定导致的无限循环问题，应避免直接替换对象引用，推荐通过字段级更新或浅拷贝解决。文章提供了完整的解决方案和优化后的查询组件代码，实现了安全的数据传递和更新机制。
2025-08-22 21:17:56
504
原创 Vue 项目中父子传值使用Vuex异步数据不更新问题
摘要：Vue项目中父组件传递配置数组给子组件时，若配置项引用了Vuex异步数据，会因初始化引用问题导致子组件无法获取更新后的数据。解决方案：1）推荐使用计算属性动态生成配置数组，依赖Vuex数据变化自动更新；2）通过watch监听Vuex数据变化手动更新配置项。核心问题是data()中的引用在初始化时固定，不会随Vuex更新自动刷新，计算属性方案能优雅解决此问题。
2025-08-21 20:40:51
388
原创 解决 vue2 不能使用可选链?. 和??
Vue2项目中使用可选链运算符(?. )和空值合并运算符(?? )需要配置Babel插件。安装@babel/plugin-proposal-optional-chaining和@babel/plugin-proposal-nullish-coalescing-operator依赖后，修改babel.config.js文件，在plugins数组中添加这两个插件。配置完成后需重启项目才能生效，这样就能用obj?.user?.name和name?? '默认用户名'简化代码，避免冗长的对象属性判断。生产环境还可配置
2025-08-13 10:47:10
417
原创 js面试题 高频(12-22题)
1.代码服用与抽象: 高阶函数可以将重复的逻辑抽象出来,形成通用函数,提高代码的复用性,柯李华可以将复杂的函数调用转化为一系列简单的步骤,便于部分应用和服用2.函数组合: 高阶函数和柯里化是构建函数式编程风格的关键,它们使的函数的组合变得更容易,从而构建更复杂的功能3.延迟执行与配置化: 柯里化可以将函数执行延迟到所有参数都传入后进行,同时允许在传入部分参数时进行配置,生成定制化的新函数。
2025-07-29 01:46:31
1183
原创 vue2+vue3面试题 高频 2025 (1-14) 题
Vue自定义指令其实是对原生DOM操作的封装指令钩子函数会接受到当前绑定的DOM元素el,通过操作它实现各种效果本质上,Vue在编译模版时,会解析指令,调用对应的钩子函数完成操作。
2025-07-27 10:01:57
985
原创 js面试题 高频(1-11题)
JavaScript核心概念摘要 变量声明： var函数作用域，let/const块作用域 let解决for循环闭包问题 const不可重新赋值但对象内容可变 类型系统： 7种原始类型+引用类型 typeof null返回"object"是历史遗留问题 值类型按值传递，引用类型按引用传递 对象拷贝： 浅拷贝复制第一层，深拷贝递归复制所有层级 JSON方法深拷贝有局限性（忽略函数等） 数组方法： 增删：push/pop/shift/unshift/splice 遍历：map/filter/
2025-07-23 23:19:13
1093
原创 uni-push 统一推送
是指服务器主动向客户端发送消息的技术,无需客户端持续轮询服务器,既可获得即时数据客户端应用必须实时在线;手机端耗电严重;服务器负载高且浪费资源手机的通知栏,小程序的订阅消息都是一种push,由手机操作系统或微信在底层提供了push通道,屏蔽了轮询的各种弊端,你的应用可以被关闭,只有手机有网,操作系统提供的push通道是实时在线的,提醒: web浏览器的webnotification其实是一个本地通知栏功能,浏览器厂商没有提供push通道.
2025-07-22 00:53:17
1643
原创 web前端渡一大师课 02 浏览器渲染原理
reflow 的本质就是重新计算Layout树.当进行了会影响布局树的操作后,需要重新计算布局树,会引发Layout为了避免连续的多次操作导致不拘束反复计算,浏览器会合并这些操作,当JS代码全部完成后再进行统一计算,所以,改动属性造成的reflow是异步完成的.也同样因为如此,当JS获取布局属性时,就可能造成无法获取到最新的布局信息浏览器在反复权衡下,最终决定获取属性立即reflowrepaint 的本质就是重新根据分层信息计算了绘制指令.
2025-07-19 20:05:19
1022
原创 web前端渡一大师课 03 歌词滚动效果
01:20.90]凭这两眼与百臂或千手不能防。[01:28.68]贪欢一刻偏教那女儿情长埋葬。[01:41.69]凭这两眼与百臂或千手不能防。[01:49.54]贪欢一刻偏教那女儿情长埋葬。[03:05.27]凭这两眼与百臂或千手不能防。[03:13.06]贪欢一刻偏教那女儿情长埋葬。[03:26.21]凭这两眼与百臂或千手不能防。[03:33.92]贪欢一刻偏教那女儿情长埋葬。[03:47.04]凭这两眼与百臂或千手不能防。[04:07.90]凭这两眼与百臂或千手不能防。
2025-07-18 01:31:40
899
原创 web前端渡一大师课 01 事件循环
浏览器采用多进程多线程模型保障稳定性，其中渲染主线程负责执行HTML/CSS/JS代码。由于需要处理解析、渲染、交互等多种任务，主线程采用事件循环机制调度任务：通过消息队列实现异步处理，避免阻塞。当遇到计时器、网络请求等异步操作时，主线程将任务交由其他线程处理，完成后回调加入队列等待执行。JS的单线程特性决定了同步代码会阻碍渲染，如死循环会导致页面冻结。任务优先级方面，微队列（如Promise）优先级最高，其次是交互队列和延时队列。定时器因系统偏差和事件循环机制无法实现精确计时。理解事件循环机制是掌握JS异
2025-07-15 16:05:16
1803
原创 css 面试题
主轴方向由flex-direction控制(默认row,水平从左到右)交叉轴始终垂直于主轴,用于控制垂直对齐当你使用某些CSS属性(如transform,filtter,opacity等)时,浏览器会将这些元素提升到一个单独的合成层,这意味着这些元素的渲染不会影响其他部分的渲染,从而提高性能GPU加速: 合成层使用GPU来加速渲染,提高动画流畅性和页面交互速度合成与重排: 合成层可以减少重排和重绘;
2025-07-08 15:29:16
1122
原创 深入理解CSS中的BFC 与IFC , 布局的两大基础概念
本文介绍了CSS布局中的两个重要概念：BFC（块级格式化上下文）和IFC（行内格式化上下文）。BFC是独立布局环境，影响块级元素垂直排列，可解决浮动导致的高度塌陷和外边距合并问题，通过设置overflow、float、position等属性触发。IFC控制行内元素水平排列，处理文本对齐和换行行为，由display:inline或inline-block等触发。文章通过实例展示了BFC清除浮动、防止外边距合并，以及IFC实现行内元素对齐和图文混排的应用场景，比较了两者的区别，帮助开发者更好地控制页面布局。
2025-07-03 15:58:43
843
原创 CSS外边距合并（塌陷）全解析：原理、场景与解决方案
CSS外边距合并的三大场景及解决方案：1.相邻元素、父子元素和空元素的外边距合并现象；2.5种主流解决方案：BFC隔离（推荐flow-root）、物理隔离（padding/border）、Flex/Grid布局、行内块和伪元素法；3.方案选择指南：现代项目首选flow-root，兼容需求用overflow:hidden，响应式布局推荐Flex/Grid。文章详细说明了每种方案的优缺点和适用场景，帮助开发者精准解决布局问题。
2025-07-02 20:05:47
501
原创 uniapp 中使用路由导航守卫,进行登录鉴权
Uniapp登录路由守卫实现方案摘要 本文介绍了两种Uniapp登录状态路由守卫实现方案。方案一使用第三方插件(hh-router-guard或uni-simple-route)，方案二通过uni.addInterceptor实现。重点讲解了方案二的实现细节：1)配置白名单机制；2)权限校验逻辑；3)拦截器核心方法；4)初始化调用方式。该方案支持白名单动态更新，可检查token有效性，未登录用户自动跳转登录页并携带来源路径。在App.vue的onLaunch中调用initRouteGuard()即可启动全局
2025-07-01 15:43:11
678
原创 前端开发工作流: ESLInt+ Prettier+VS Code终极指南
前端团队协作中，代码质量工具链（ESLint+Prettier+VSCode插件）能有效解决三大问题：代码一致性、潜在错误检测和协作效率。ESLint侧重代码质量检查和规范执行，Prettier专注代码风格统一，两者配合使用时需用eslint-plugin-prettier解决规则冲突。VSCode插件则提供实时反馈和自动格式化功能。此外，ESLint默认规则可扩展为Airbnb、Standard等开源规范，而settings.json文件控制着编辑器的格式化行为。实际开发中，建议同时配置项目级.prett
2025-06-24 19:17:41
1053
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人