优化

为什么我要对比这几套内存管理方案？ 最近在搞一个中后台管理系统，数据量大得离谱，稍微操作几下就发现内存占用蹭蹭往上涨。最烦的是页面切换后，旧的组件还没被回收，直接导致内存泄露。折腾了几天后，我决定把几...

我的写法，亲测靠谱 先说说我常用的缓存策略。在实际项目中，我一般会结合 HTTP 缓存和 Service Worker 来做，这样能覆盖大部分场景。HTTP 缓存用来处理静态资源，Service Wo...

又踩坑了，固定高度导致内容被截断 最近在开发一个项目时遇到了一个头疼的问题：页面中的某些模块设置了固定高度后，内容居然被莫名其妙地截断了。折腾了半天才发现是CSS样式和动态内容之间的冲突。 事情是这样...

又踩坑了，尾调用优化不生效 最近在写一个递归算法的时候，碰到了个挺棘手的问题。代码跑着跑着就爆栈了，明明记得ES6不是支持尾调用优化（Tail Call Optimization）吗？折腾了大半天才发...

先看效果，再看代码 最近在做一个项目，里面有个需求是展示一个超长的列表，几千条数据那种。直接用普通的 <ul> 渲染？开玩笑，页面直接卡死。于是我翻出了 react-window，亲测有效...

项目初期的技术选型 这个项目是一个中型的电商后台管理系统，功能模块比较多，代码量也挺大。一开始我用的是 Webpack 默认的打包配置，结果发现随着项目逐渐膨胀，打包后的文件体积变得特别大。首屏加载时...

优化前：卡得不行 最近接手了一个老项目，页面加载速度简直惨不忍睹。首页打开要5秒多，用户反馈说“卡得受不了”。尤其是图片和JS资源特别多，网络稍差一点就转圈转到怀疑人生。 最让人头疼的是，这个项目用了...

直接上代码，取消请求其实没那么难 先说重点，前端取消请求最常见的场景就是用户切换页面或者重复操作时，避免不必要的请求浪费资源。下面是我亲测有效的几种方法，建议直接用。 // Axios CancelT...

又一个性能问题，循环太慢了 最近在开发一个数据处理的功能时，我遇到了一个让人头疼的性能问题。说起来挺丢人的，一开始我还以为是后端接口的问题，后来才发现罪魁祸首居然是我自己写的循环代码。 具体场景是这样...

为什么要对比这几种方案？ 最近在项目中遇到一个需求：展示一个超长的列表，数据量可能达到几千条。直接渲染肯定不行，页面卡得跟PPT似的，用户体验直接崩盘。于是就开始研究虚拟滚动（Virtual Scro...

先看效果，再看代码 最近在优化一个项目时，我试着用了一下QUIC协议。说实话，刚开始我还挺犹豫的，毕竟这玩意儿听起来有点“高大上”，怕折腾起来太复杂。但最后发现，QUIC协议其实并没有想象中那么难搞，...

项目初期的技术选型 最近刚完成一个数据可视化大屏的项目，主要用到了ECharts和WebSocket实时推送。刚开始觉得功能点不多，应该挺简单的，结果被内存问题折腾得够呛。 在开发过程中，发现页面运行...

直接上代码，快速搞定Open Graph 最近在优化一个项目分享功能时，用到了Open Graph协议。简单说，它就是让网页在社交媒体分享时能展示好看的预览卡片。下面是我亲测有效的基础代码： <...

我的写法，亲测靠谱 最近在项目里处理敏感信息过滤，折腾了好几轮，终于整理出一套还算顺手的方案。说真的，这个需求乍一看挺简单，但实际操作起来坑真不少。 先上核心代码吧： function filterS...

先看效果，再看代码 最近在优化一个数据量超大的表格组件，渲染几千条数据的时候页面直接卡死。折腾了半天，发现时间分片（Time Slicing）是个不错的解法。简单来说，就是把耗时任务拆分成小块，分批执...

先看效果，再看代码 最近在优化一个项目的时候，发现页面加载速度总是差那么一点。尤其是有些第三方资源的域名解析特别慢，拖累了整个首屏时间。折腾了半天后，我发现用DNS预解析能解决这个问题。 简单来说，就...

先看效果，再看代码 增量静态生成（Incremental Static Regeneration，简称ISR）这玩意儿，我最近在项目里折腾了一阵子。说白了，它就是让你的静态页面能“动态更新”，听起来很...

优化前：卡得不行 前几天接手了一个老项目，说实话，刚跑起来的时候我人都傻了。页面加载慢就算了，滚动和交互还各种卡顿，简直没法用。尤其是列表页，稍微滚动一下内存占用就飙升，浏览器直接飙到100%的CPU...

谁更省事？三种滚动穿透方案的实战对比 最近在做移动端弹窗组件的时候，又被滚动穿透问题折腾得够呛。说实话，这个问题看似简单，但真要彻底解决还是有点麻烦的。这次我干脆把常用的几种方案都试了一遍，顺便给大家...

我的写法，亲测靠谱 先说结论吧，我一般这样用 will-change： .modal { transform: translateZ(0); will-change: transform, opaci...