芒果茶叶

requestAnimationFrame (通常简写为 rAF) 这个浏览器方法。我会用一个生动的比喻开始，然后逐步深入技术细节。 一、一个生动的比喻：电影放映机 想象一...

并行SSR 前端实现 SSR（服务器端渲染）的并行加载，核心思想是避免服务器端的数据请求瀑布（Waterfall），将页面分块、流式（Streaming）地发送给浏览器，从...

本文深度剖析表单组件的演进历程，通过手写简化版实现，揭示 HOC 模式的性能瓶颈与 Hooks 架构的优雅解决方案，从状态提升到发布订阅，从组件嵌套到独立状态管理。...

🧱 基础弹窗搞定了？那该进阶了！ 之前我们已经搞定了一个基础版的 Modal 组件，实现了以下功能： ✅ 打开/关闭控制 ✅ 内置确认和取消按钮 ✅ 使用 Portal ...

配置： .env App.tsx src/pages/channl/index.tsx src/hooks/useChannl.tsx src/api/channl.ts ...

插件下载 基础 Auto Close Tag：自动闭合HTML标签  ESLint：代码规范检查与实时纠错  Prettier：代码格式化工具，支持多语言  GitLens...

事情起因是这样的，大家在刷抖音，小红书等短视频平台、发现他们的布局是这样的瀑布流布局。 反应是瀑布流，怎么做呢？我们第一反应是flex，grid？是的这是大部分人的固态思维...

强缓存 (Strong Caching) 原理：强缓存是一种直接从浏览器缓存中读取资源的策略，不需要向服务器发请求。即使资源更新，只要缓存未过期，浏览器也会直接使用缓存数据...

该方案并没能解决浏览器拦截问题，根本原因还是点击事件非用户所为。 该方案亲测是有效的，可以解决浏览器拦截问题，但是在异步请求期间，新打开的窗口会出现空白页，对用户体验不是太...

背景 今年两次用到虚拟列表技术，一种是二维平面因为实际现场要求支持1000 * 1000的百万节点展示，另一种是一维垂直列表最大每年有万条数据。 二维虚拟列表 如下图，实际...

如何通过和 APP 的配合大幅提升 H5 页面的首屏加载速度，如何构建一套秒开系统，让 H5 拥有类似小程序的性能体验。通过接口预请求让APP打开H5的同时并行请求数据，消...

本章节主要介绍 Webpack 高级配置。 所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 提升开发体验 ...

本章节我们学会了 Webpack 基本使用，掌握了以下功能： 两种开发模式 开发模式：代码能编译自动化运行 生产模式：代码编译优化输出 Webpack 基本功能 开发模式：...

提取 Css 成单独文件 Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式 这样对于网站来说，会出现闪屏现象，用户体验不...

生产模式是开发完成代码后，我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化，让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度...

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化 1. 下载包 2. 配置 webpack.config.js 3. 运行指令 注意运行指令发生了变...

使用html插件自动引入js等资源 1. 下载包 2. 配置 webpack.config.js 3. 修改 index.html 去掉引入的 js 文件，因为 HtmlW...