🎯 总结对比

1️⃣ TypeIt（超强大，推荐！）

🎉 特点：高自定义、易用、支持暂停、删除、换行等丰富动画

安装：

npm install typeit

# 或直接用 CDN

简单用法：

<div id="typeit"></div>

<script src="https://cdn.jsdelivr.net/npm/typeit@8.8.3/dist/typeit.min.js"></script>

<script>

  new TypeIt("#typeit", {

    strings: ["Hello, 掘金！", "我是打字机效果~"],

    speed: 100,

    breakLines: false,

    loop: true

  }).go();

</script>

2️⃣ Typed.js（最流行的打字机插件）

🚀 轻量、简单、社区大，支持多字符串轮播

安装：

npm install typed.js

# 或 CDN

用法：

<span id="typed"></span>

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

<script>

  new Typed('#typed', {

    strings: ['欢迎来到掘金！', '一起学习前端吧~'],

    typeSpeed: 80,

    backSpeed: 40,

    loop: true

  });

</script>

3️⃣ t-writer.js（国人开发，API友好）

🔥 支持多种打字动画，API 设计简洁

安装：

npm install t-writer.js

用法：

<div id="twriter"></div>

<script src="https://cdn.jsdelivr.net/npm/t-writer.js/dist/t-writer.min.js"></script>

<script>

  const target = document.getElementById('twriter');

  const writer = new TypeWriter(target, {

    loop: true,

    typeColor: 'blue'

  })

  writer

    .type('你好，掘金！')

    .rest(500)

    .changeOps({ typeColor: 'orange' })

    .type('打字机效果轻松实现~')

    .rest(1000)

    .clear()

    .start()

</script>

4️⃣ ityped（极简小巧）

⚡️ 零依赖，体积小，适合极简需求

安装：

npm install ityped

用法：

<div id="ityped"></div>

<script src="https://unpkg.com/ityped@1.0.3"></script>

<script>

  ityped.init(document.querySelector("#ityped"), {

    strings: ['Hello 掘金', '前端打字机效果'],

    loop: true

  })

</script>

🛠️ 补充：用原生 JS 实现简单打字效果

如果你不想引入第三方库，也可以用 setTimeout/async 实现基础打字动画：

<div id="simpleType"></div>

<script>

  const text = "Hello, 掘金！这是原生JS打字机效果~";

  let i = 0;

  function typing() {

    if (i < text.length) {

      document.getElementById('simpleType').innerHTML += text[i];

      i++;

      setTimeout(typing, 100);

    }

  }

  typing();

</script>

🌟 结语

• 需要高级动画，选 TypeIt/t-writer.js


• 需要轻量简单，选 Typed.js/ityped


• 只需基础效果，也可以原生 JS 10 行搞定！

系列回顾（性能·错误·埋点三部曲）：不做工具人｜从 0 到 1 手搓前端监控 SDK

在前三篇文章中，我们搞定了性能、行为和错误的采集。但有掘友在评论区灵魂发问：“数据是抓到了，
发不出去有啥用？进电梯断网了咋办？页面关太快请求被掐了咋办？”

今天这篇，我们就来聊聊如何上报数据？

• 用什么方式上报最稳、最省事?


• 什么时候上报最合适?


• 遇到断网/弱网/关页怎么兜底?

一、上报方式与策略：如何选出最优解？

我们平时上报数据主要有三种方式：Image（图片请求）、sendBeacon 和 XHR/Fetch。

1. 三种上报方式详解

1. GIF/Image

这招就是利用图片请求（new Image().src）来传数据。

• 原理很简单：把要上报的数据拼在 URL 后面（如 https://log.demo.com/gif?id=123），浏览器发起请求，服务器解析参数拿到数据，然后返回一张 1×1 的透明GIF图（体积小、看不见），浏览器收到后触发 onload 回调即完成上报。


• 特点：天然支持跨域，绝无“预检”请求（因为是简单请求）。


• 局限：只能发 GET 请求，URL 长度有限（通常 < 2KB），无法携带大数据。

2. sendBeacon

• 原理：navigator.sendBeacon(url, data)。浏览器会将数据放入后台队列，即使页面关闭了，浏览器也会尽力发送。


• 特点：异步非阻塞（不卡主线程），且可靠性极高。


• 局限：数据量有限（约 64KB），且无法自定义复杂的请求头。

3. XHR / Fetch

普通的网络请求。

• 原理：使用 XMLHttpRequest 或 fetch 发送 POST 请求。


• 特点：容量极大（几兆都没问题），适合发送录屏、长堆栈。


• 局限：跨域时通常会触发 OPTIONS 预检（成本高），且页面关闭时请求容易被掐断（fetch需配合 keepalive）。

注: 所谓的预检，就是浏览器在发送跨域且非简单请求前，先偷偷发个 OPTIONS 问服务器：“大佬，我能发这个请求吗？”。只要你用了自定义 Header 或 application/json 就会触发。这会导致请求量直接翻倍，在弱网下多一次往返就多一分失败的风险。

2. 策略篇：如何组合使用？

怎么选并不是随意决定的，而是为了解决两个核心痛点：

基于这两个维度，我们将三种方式排个序，也就形成了我们的降级策略：

1. 首选方案：sendBeacon（六边形战士）

这是现代浏览器的首选方案。

• 优势：专为监控设计，页面关闭了也能发（浏览器将其放入后台队列）。


• 特点：容量适中（~64KB），且通常不触发预检，完美平衡了“存活”与“成本”。


• 适用：绝大多数监控事件。

2. 降级方案：GIF/Image（老牌救星）

当 sendBeacon 不可用（如 IE）或数据极小的时候用它。

• 优势：天然跨域，绝无预检。利用 new Image().src 发起请求，服务器返回一张 1x1 透明图即可。


• 特点：兼容性无敌，但数据量受 URL 长度限制（~2KB），且页面关闭时发送成功率低。


• 适用：PV、点击、心跳等轻量指标。

3. 兜底方案：XHR / Fetch

只有前两招搞不定时（数据量太大）才用它。

• 优势：容量极大，适合传录屏、大段错误堆栈。


• 劣势：跨域麻烦（需配 CORS），有预检成本。


• 注意：使用 Fetch 时务必加 keepalive: true，告诉浏览器“就算页面关了也别杀我”，尽量提升卸载时的成功率。

选型对比表

总结我们的代码套路（降级策略）：

下面是封装好的 transport上报函数，直接拿去用：

const REPORT_URL = 'https://log.your-domain.com/collect'; 

const MAX_URL_LENGTH = 2048;

const MAX_BEACON_BYTES = 64 * 1024;



function byteLen(s) {

  try {

    return new TextEncoder().encode(s).length;

  } catch (e) {

    return s.length;

  }

}



/**

 * 通用上报函数

 * @param {Object|Array} data - 上报数据

 * @returns {Promise<void>} - 成功 resolve，失败 reject

 */

function transport(data) {

  const isArray = Array.isArray(data);

  const json = JSON.stringify(data);



  return new Promise((resolve, reject) => {

    // 1. 优先尝试 sendBeacon

    // 注意：sendBeacon 是同步入队，返回 true 仅代表入队成功，不一定是发送成功

    if (navigator.sendBeacon && byteLen(json) <= MAX_BEACON_BYTES) {

      const blob = new Blob([json], { type: 'text/plain' });

      // 如果入队成功，直接 resolve（乐观策略）

      if (navigator.sendBeacon(REPORT_URL, blob)) {

        resolve();

        return;

      }

      // 如果入队失败（如队列已满），不 reject，而是继续往下走降级方案

      console.warn('[Beacon] 入队失败，尝试降级...');

    }



    // 2. 单条小数据尝试 Image (GET)

    if (!isArray) {

      const params = new URLSearchParams(data);

      params.append('_ts', String(Date.now()));

      const qs = params.toString();

      const sep = REPORT_URL.includes('?') ? '&' : '?';

      

      if (REPORT_URL.length + sep.length + qs.length < MAX_URL_LENGTH) {

        const img = new Image();

        img.onload = () => resolve(); // 成功

        img.onerror = () => reject(new Error('Image 上报失败')); // 失败

        img.src = REPORT_URL + sep + qs;

        return;

      }

    }



    // 3. 兜底方案：Fetch > XHR

    if (window.fetch) {

      fetch(REPORT_URL, {

        method: 'POST',

        headers: { 'Content-Type': 'text/plain' },

        body: json,

        keepalive: true, // 关键：允许页面关闭后继续发送

      })

        .then((res) => {

          if (res.ok) resolve();

          else reject(new Error(`Fetch 失败: ${res.status}`));

        })

        .catch(reject);

    } else {

      // IE 兼容

      const xhr = new XMLHttpRequest();

      xhr.open('POST', REPORT_URL, true);

      xhr.setRequestHeader('Content-Type', 'text/plain');

      xhr.onload = () => {

        if (xhr.status >= 200 && xhr.status < 300) resolve();

        else reject(new Error(`XHR 失败: ${xhr.status}`));

      };

      xhr.onerror = () => reject(new Error('XHR 网络错误'));

      xhr.send(json);

    }

  });

}

二、上报时机：不阻塞主线程干扰业务，断网了也不丢数据

1. 调度层：区分优先级，关键时刻不等待

不是所有数据都适合“攒着发”。我们需要根据重要程度将日志分为两类：

• 即时上报（Immediate）：收集到立即上报。
  
  
  
  
  • 场景：JS 报错阻断了流程、用户点击了“支付”按钮、接口返回 500 等。
  
  
  • 原因：这些数据对实时性要求极高，或者关系到监控系统的报警（比如线上白屏了，你得马上知道），不能因为攒着发而耽误了。
  
  
  
  


• 批量上报（Batch）：攒一波再发。
  
  
  
  
  • 场景：用户点击、滚动、性能指标、API 成功日志。这类数据量大但实时性要求低
  
  
  • 策略：“量”与“时”双重触发（竞态关系）。比如：攒够 10 条立马发（防止堆积太多），或者每隔 5 秒发一次（防止数量不够一直不发）。
  
  
  
  

代码怎么写？其实就是一个简单的双保险调度器：

let queue = [];

let timer = null;

const QUEUE_MAX = 10;

const QUEUE_WAIT = 5000;



function flush() {

  if (!queue.length) return;

  

  // 1. 把当前队列的数据复制出来

  const batch = queue.slice();

  

  // 2. 清空队列与定时器

  queue.length = 0;

  clearTimeout(timer);

  timer = null;



  // 3. 利用空闲时间发送（性能优化点）

  if ('requestIdleCallback' in window) {

    requestIdleCallback(() => transport(batch), { timeout: 2000 });

  } else {

     // 降级兼容

    setTimeout(() => transport(batch), 0);

  }

}



function report(log, immediate = false) {

  // 1. 紧急情况：绕过队列，直接发

  if (immediate) {

    transport(log);

    return;

  }



  // 2. 普通情况：进入队列（如 点击、PV）

  queue.push({ ...log, ts: Date.now() });

  

  // 3. 检查触发条件（双重保险）

  if (queue.length >= QUEUE_MAX) {

    flush();

  } else if (!timer) {

    timer = setTimeout(flush, QUEUE_WAIT);

  }

}



// 4. 临终兜底：页面关闭/隐藏时，强制把剩下的都发走

document.addEventListener('visibilitychange', function () {

  if (document.visibilityState === 'hidden') flush();

});

window.addEventListener('pagehide', flush);

整体思路：队列暂存 + 多重触发

我们用一个数组（queue）来暂存日志，然后通过 “量够了”、“时间到了”或“页面要关了” 这三个时机来触发发送，确保既不积压也不频繁打扰服务器。

性能优化：闲时优先

发送时，我们首选 requestIdleCallback。告诉浏览器你先忙你的（渲染、响应点击），等你有空了再帮我发监控数据

• 这样能最大限度减少对业务主线程的阻塞，让用户感觉不到监控的存在。


• 当然，如果浏览器不支持这个 API，我们再降级用 setTimeout 兜底。

2. 容灾层：断网了，日志怎么办？

如果在电梯里断网了或者弱网环境下，请求发不出去怎么办？日志丢了怎么办。
我们的策略是 “先记在本子上，等有网了再补交作业”：

具体怎么判断有没有网呢？

通常我们用 navigator.onLine 来看。如果返回值是 false ，那肯定是没网，直接存本地。

但坑就坑在，这玩意儿有时候会 “撒谎” —— 比如连上了酒店 WiFi 但没登录，或者宽带欠费了。这时候它虽然显示 true （在线），但其实根本上不了网。

所以咱们得留一手：
哪怕它说“在线”，我们也先试着上报一下。 要是报错了发不出去，别管三七二十一，先把这条日志存本地保底（千万别丢数据），然后再去 Ping 一下看看到底是不是真断网了 ，顺便更新一下网络状态。这样最稳。

1. 网络状态的检测

NetworkManager这个模块专门负责盯着网络，它很聪明，只有在发送日志失败的时候才会去复核网络真伪。

const NetworkManager = {

  online: navigator.onLine,

  

  // 初始化：盯着系统的 online/offline 事件

  init(onBackOnline) {

    window.addEventListener('online', async () => {

      // 别高兴太早，先看看是不是真的能上网

      const realWait = await this.verify();

      if (realWait) {

        this.online = true;

        onBackOnline(); // 真的回网了，赶紧补传！

      }

    });

    window.addEventListener('offline', () => this.online = false);

  },



  // “测谎仪”：发个 HEAD 请求看看

  async verify() {

    try {

      // 请求个 favicon 或者 1x1 图片，只要响应了说明网通了

      await fetch('/favicon.ico', { method: 'HEAD', cache: 'no-store' });

      return true;

    } catch {

      return false;

    }

  }

};

2. 核心上报：能发就发，不行就存本地

上报函数现在变得非常有弹性。

export async function reportData(data) {

  // 1. 如果明确知道没网，直接存本地 (省一次请求)

  if (!NetworkManager.online) {

    saveToLocal(data);

    return;

  }



  // 2. 尝试发送

  try {

    await transport(data);

  } catch (err) {

    console.error('上报请求失败:', err);

    

    // 3. 不管是因为断网、超时、还是服务器挂了

    // 只要没成功，第一件事就是存本地！保证这条日志不丢！

    saveToLocal(data);



    // 4. 然后再来诊断网络，决定后续策略

    // 只有当是网络层面的错误（如 fetch throw Error）才去怀疑网络

    // 如果是 500 错误，其实网是通的，不用 forceOffline

    if (isNetworkError(err)) {

       // 5. Ping 确认

        NetworkManager.verify().then(res => NetworkManager.online = res);

    }

  }

}



/**

 * 判断是否为网络层面的错误

 */

function isNetworkError(err) {

  // 原生 fetch 的网络错误通常是 TypeError: Failed to fetch

  // 如果是使用 Axios，则可以通过 !err.response 来判断

  return err instanceof TypeError || (err.request && !err.response);

}



const RETRY_KEY = 'RETRY_LOGS';

const RETRY_MAX_ITEMS = 1000;

function saveToLocal(data) {

  const raws = localStorage.getItem(RETRY_KEY);

  const logs = raws ? JSON.parse(raws) : [];

  logs.push(data);

  if (logs.length > RETRY_MAX_ITEMS) {

    logs.splice(0, logs.length - RETRY_MAX_ITEMS);

  }

  localStorage.setItem(RETRY_KEY, JSON.stringify(logs));

}

3. 补传逻辑：别把服务器干崩了

等到网络恢复，本地攒了一堆“欠账”，千万别一股脑儿全发过去（万一本地存了 500 条，一次全发会把服务器打爆的）。

我们要有节奏地补传：

async function flushLogs() {

  let logs = JSON.parse(localStorage.getItem('RETRY_LOGS') || '[]');

  if (!logs.length) return;



  console.log(`[回血] 发现 ${logs.length} 条欠账，开始补传...`);



  while (logs.length > 0) {

    // 1. 每次只取 5 条，小碎步走

    const batch = logs.slice(0, 5);

    

    try {

      // 2. 调用上报中心

      await transport(batch); 

      

      // 3. 只有成功了，才把这 5 条从 logs 里剔除

      logs.splice(0, 5);

      localStorage.setItem(RETRY_LOGS, JSON.stringify(logs));

    } catch (err) {

      // 4. 如果失败了（断网或服务器挂了）

      // 此时 logs 里面还保留着那 5 条数据，所以不用担心丢失

      // 记录一下状态，直接跳出循环，等下次 NetworkManager 唤醒

      console.error('补传中途失败，保留剩余欠账');

      break; 

    }

    

    // 2. 歇半秒钟，给正常业务请求让个道

    await new Promise(r => setTimeout(r, 500));

  }

}

三、总结与实战建议

监控上报这事儿看着不难，其实门道不少。要在数据不丢和不打扰用户之间找平衡，咱们得来一套“组合拳”：

最后，给开发者的 3 个避坑小贴士：

• 不要迷信 navigator.onLine：它只能判断有没有连接到局域网，不能判断是否真的能上网。一定要配合实际的请求探测。


• 控制补传节奏：网络恢复后，千万别一次性把积压的几百条日志全发出去，这属于“DDoS 攻击”自家服务器。要分批、甚至加随机延迟发送。


• 隐私与合规：上报数据前，务必对敏感信息（如 Token、用户手机号）进行脱敏处理，这是红线。

如果你有更好的思路，欢迎在评论区交流！

在日常的大前端需求开发中，我们常常需要同时兼顾UI还原和业务逻辑两部分工作。UI方面，就是要尽可能细致地还原设计稿上的每个细节；业务逻辑方面，则往往和需求复杂度以及项目代码规模正相关。今天，我们就来聊聊如何利用AI驱动，提升需求实现过程中的效率和体验。

UI设计稿还原

如今市面上已经有不少做得不错的AI设计稿转代码工具，比如v0、bolt.new、codefun等。对于一些个人独立项目来说，这些工具真心牛逼：只需传入设计稿，就可以快速生成模块化、精确的UI代码，而且还能通过对话式的交互来不断调整细节，直到完全符合预期。

但如果把这些工具直接应用于一个成熟项目中，就会暴露一些问题。首先，目前大部分工具主要支持vue和react，而我们的项目往往还涉及flutter、android、iOS等多端开发。其次，成熟项目中往往都有一套独特的代码规范和UI组件库，而这些工具生成的代码往往并不了解这些细节，直接将生成的代码拷贝进项目之后还得二次调整，额外的成本不可忽视。

那么有没有办法既能支持更多编程语言，又能在生成UI代码时就结合项目中已有的规范和组件库，从而减少二次调整成本呢？答案是有的！

目前，figma是市面上使用比较主流的设计稿工具。Builder.io最近发布了一款基于figma设计稿、AI驱动的前端代码生成插件——Visual Copilot。使用它，你只需要把figma切换到Dev Mode，然后选择设计稿中的任意图层，接着在Visual Copilot中直接导出代码。

Visual Copilot生成的代码不仅支持vue、react，还涵盖了其它几乎所有主流的大前端语言和框架，十分全面。你可以实时预览生成的效果，并进行细节调整，直到满意为止。

生成代码后，如何让这些代码完美融入到我们的项目规范中呢？ 这里就需要结合Visual Copilot与Cursor的配合来实现。

具体做法是：当Visual Copilot将设计稿图层转化成代码后，它会自动生成一个可远程执行的工作空间，并提供相关命令(图中红框所示)将工作空间的代码集成到我们项目中。

接下来，我们只需在Cursor的Terminal中运行指定指令，就能连接Visual Copilot的远程工作空间，实时获取生成的代码，同时通过交互指令界面明确我们后续的需求。

那么，最终生成的代码如何与项目中的各种规范结合呢？ 这就要用到Cursor的AI规则机制——CusorRules。你只需在项目根目录下配置一个.cursorrules文件，声明你的UI代码规范以及封装的组件信息。Cursor在生成代码时就会充分参照这些规则。同时，新版Cursor还支持配置一系列rule文件，你可以通过正则路径来指定规则应用于不同的模块或文件类型，整个过程非常灵活高效（具体可以参与Cursor官方文档）。

业务逻辑开发

在一些中小型规模的项目中，如果想在Cursor中高效地实现业务逻辑，我们需要关注两个关键点：

• CursorRule的应用
  
  和上文UI的规范梳理类似，我们还需要对项目各模块的架构规范等信息进行说明，这样可以让Curosr生成的代码能尽量保障和我们项目规范的一致性。


• 需求拆解：先构建框架，再处理细节
  
  对于较为复杂的需求，我们可以先把实际需求拆解成多个阶段。首先，构建大致的需求框架，并转换成一系列对Cursor友好的Prompt指令（要求简单、准确）。在Cursor的Compose Agent模式下，通过这些指令生成整体的业务逻辑框架。接下来，再利用Cursor Tab在编辑器区域快速完善那些生成时不够精准的细微逻辑。

在一些中小型项目中，通过以上两个关键点我们通常可以快速完成业务逻辑开发。但在一些大型项目中，会遇到Cursor生成的代码经常不尽如人意的问题。这主要是因为项目越大，整个代码库的复杂性增加，Cursor对项目的理解难度也随之上升，每次修改都可能会有不确定因素，提示词如果不能准确描述需要改动的部分，就容易出错。

此时，我们可以尝试另一种思路：用”软件架构师“与”开发者“角色区分需求规划与执行细节。应该怎么做呢？

我们可以将AI驱动的开发流程分为两个阶段：

这种方式的好处在于，只要“软件架构师”生成的提示词足够精准（即它能详细说明需要修改的文件、具体的改动内容和改动范围），那么“开发者”便能够依照这些提示词精确地进行代码修改，极大降低了因大范围理解产生的错误风险。所以这里的性能瓶颈就在于如何定义”软件架构师“角色以及让其接到需求后能生成精确的提示词。

在实际操作中，我们引入了一个“项目地图”的概念。所谓项目地图，就是为大型项目构建一个完整的文档体系（借助AI辅助生成也完全可行），其中包括了项目架构设计、开发流程、模块划分与用途、文件名和其功能说明等内容。这套文档体系可以独立于一个实际的Cursor项目存在，充当“软件架构师”的角色。也就是说，当遇到bug或新需求时，我们可以通过咨询这个“项目地图”，让AI回答问题并给出相对准确的修改思路。

举个例子，拿知名的fast-api项目来说，我为它生成了一个项目地图，其中包含了核心概念说明、系统设计、项目规范以及各模块和文件的用途说明等内容：

同时，在该项目的 .cursorrule 文件中，我详细规定了“软件架构师”如何根据实际需求生成精确的修改指令：

## 项目背景信息

项目名称：FastAPI

项目类型：Python Web 框架

项目地图：参考 fileNames.md

架构文档：参考 architecture/ 目录

编码规范：参考 guidelines/coding-standards.md



## 需求分析模板

1. 需求描述

[简要描述需要实现的功能或修改]



2. 涉及组件

- 核心组件：[列出受影响的核心组件]

- 依赖组件：[列出相关的依赖组件]

- 测试组件：[列出需要修改的测试]



3. 修改范围

- 主要文件：[列出需要修改的主要文件]

- 次要文件：[列出可能需要修改的次要文件]

- 文档文件：[列出需要更新的文档]



4. 技术要点

- 使用的框架特性：[列出需要使用的 FastAPI 特性]

- 数据验证：[描述数据验证要求]

- 兼容性考虑：[描述向后兼容性要求]



5. 潜在风险

[列出可能的风险点和注意事项]



## 执行指导模板



### 给大模型的执行指导



1. 修改步骤

[详细的步骤说明]



2. 验证点

[列出需要验证的关键点]



4. 测试建议

[提供测试建议和用例]





## 实际案例：添加用户电话号码字段



### 1. 需求分析



需求描述：

在用户模型中添加可选的 phone_number 字段，并在相关 API 端点中支持该字段。



涉及组件：

- 核心组件：用户模型（UserIn, UserOut, UserInDB）

- 依赖组件：无

- 测试组件：用户相关测试



修改范围：

- 主要文件：/docs_src/extra_models/tutorial001.py

- 次要文件：无

- 文档文件：API 文档可能需要更新



技术要点：

- 使用 Pydantic BaseModel

- 字段类型：Union[str, ]

- 保持向后兼容性



潜在风险：

- 确保不破坏现有的数据验证

- 保持与现有字段风格一致





### 2. 执行指导

给大模型的具体修改指导：



1. 修改步骤：

   a. 在 UserIn 模型中添加 phone_number 字段

   b. 在 UserOut 模型中添加对应字段

   c. 在 UserInDB 模型中添加对应字段

   d. 确保字段定义与 full_name 保持一致的风格





2. 验证点：

   - 字段是可选的

   - 类型提示正确

   - 与现有代码风格一致

   - 不影响现有功能



3. 测试建议：

   - 测试不提供电话号码的情况

   - 测试提供有效电话号码的情况

   - 测试提供无效数据的情况



## 使用说明



1. **分析阶段**

   - 使用项目背景信息了解上下文

   - 按需求分析模板进行分析

   - 生成详细的执行指导



2. **交付阶段**

   - 将执行指导传递给大模型

   - 确保指导清晰且可执行

   - 包含必要的验证点



3. **验证阶段**

   - 检查实施结果

   - 确认所有要求都已满足

   - 验证代码质量和一致性



4. **输出**

   - 输出执行指导，包括修改步骤、验证点和测试建议，新建analysis目录，在该目录下用一个独立的文件承载，文件名要求符合问题描述诉求<cursor-tools Integration>

# Instructions

基于这些配置，当提交需求时，AI生成的修改思路大致如下，它会精准指出应对哪些文件进行哪些具体改动。

# 需求分析



## 1. 需求描述

在高并发场景下，针对大量用户同时请求数据库导致的性能瓶颈，需要在应用程序中增加缓存机制，降低数据库查询次数，提升整体响应速度和系统稳定性。



## 2. 涉及组件

- 核心组件：数据查询相关业务逻辑（可能涉及CRUD操作的函数或类）

- 依赖组件：可能需要引入第三方缓存库（如 redis、in‐memory 缓存等）

- 测试组件：与数据库查询逻辑相关的测试用例



## 3. 修改范围

- 主要文件：核心业务逻辑所在模块（例如：/app/database.py 或 /app/services/xxx.py）

- 次要文件：如果需要封装缓存工具，则可能新增 /app/utils/cache.py

- 文档文件：如果提供额外的缓存配置，需要更新相关文档



## 4. 技术要点

- FastAPI 配合缓存解决方案（如 in‐memory 缓存、Redis、memcached 等）

- 选择合适的缓存失效策略（LRU、TTL、手动失效等）

- 线程安全、进程安全或分布式缓存方案

- 保证与现有数据校验和返回结构的一致性



## 5. 潜在风险

- 引入缓存后数据一致性问题（可能出现短时间的数据延迟）

- 缓存过期策略不当导致性能问题或脏数据

- 多节点部署时的缓存同步与一致性

- 第三方库的稳定性和可维护性



---



# 执行指导



## 1. 修改步骤

1. 确定缓存方案（例如：Redis 或者内存缓存），并根据业务需求配置失效策略。

2. 在核心数据库查询逻辑中添加缓存查询逻辑：

   - 查询前先在缓存中查找数据；

   - 如果未命中或缓存过期，则查询数据库并将结果写入缓存；

   - 如果命中，则直接返回缓存结果。

3. 为关键业务接口添加缓存逻辑（可封装成一个装饰器，或在查询函数内部实现）。

4. 在配置文件或环境变量中添加缓存相关配置，如主机、端口、缓存大小、过期时间等。

5. 编写或修改测试用例，确保在开启缓存后仍能正确测试业务逻辑。



## 2. 验证点

- 并发请求多时，数据库查询数量显著减少

- 当缓存命中时，响应速度显著提升

- 缓存失效策略（TTL 等）按预期生效

- 高并发情况下是否存在数据不一致或缓存击穿/雪崩问题



## 3. 测试建议

- 正常请求：依次验证在缓存未命中和命中时的响应时间与结果正确性

- 并发请求：使用压力测试工具（locust、JMeter 等）模拟大量请求并观察数据库查询次数与响应时间

- 失效测试：设置短 TTL 并观察缓存自动失效后对系统性能的影响

- 异常测试：故意使缓存服务不可用或网络异常，验证系统能否正常回退到直接查询数据库

随后，我们再将这些详细的提示应用到原项目中，通过AI进一步生成或补全代码，最终大大提高了开发效率和代码准确性。只要前期对项目地图、架构角色和开发规则进行充分准备，我们就能充分借助AI，把原本耗时、易出错的开发流程变得高效且精准。

结语

显而易见，尽管上文主要探讨了大前端领域的AI工作流，但这种思路其实完全可以迁移到其他开发领域。只要我们不断尝试和实践，总结出符合自身业务特点的AI工作模式，就能极大提升我们的工作效率。无论是前端、后端，还是其他技术领域，AI驱动的开发流程都能帮助我们更加精准、高效地解决各类需求和问题。

总之，拥抱AI技术，不断优化工作流程，是我们应对快速变化、不断增长的项目复杂度的关键所在。未来，随着技术的进一步成熟和实践经验的积累，我们必将迎来一个更智能、更高效的开发时代。

你有没有过这样的经历？
没登录淘宝逛了件卫衣，转头刷抖音、B 站，相似款式的推荐就精准找上门；
或者参与线上投票时，明明没注册账号，却提示 同一用户仅能投一次？

其实这背后藏着一个前端人绕不开的实用技术，浏览器指纹。哪怕你开着无痕模式、频繁切换网络，它依然一样精准识别你，而这门技术，不仅是日常上网的隐形推手，更是前端求职面试中的高频考点

一、浏览器指纹：到底是怎么认出你的？

核心逻辑很简单：世界上没有完全相同的浏览器环境，就像没有两片一模一样的树叶。

浏览器指纹会收集一系列设备和环境特征，再通过算法组合成唯一的 哈希值，这个哈希值就是你的专属 网络标识。这些特征包括但不限于：

• 基础信息：浏览器类型及版本 Chrome、Safari 等、操作系统Windows/macOS 等、屏幕分辨率、系统语言；


• 硬件细节：CPU 核心数、内存大小、显卡型号；


• 高级特征：Canvas 绘图差异 不同设备绘制同一图形，像素级有细微区别、WebGL 渲染信息、已安装字体列表；


• 动态信息：IP 地址 虽可变，但结合其他特征仍有识别价值。

举个直观的例子：Canvas 是 HTML5 的绘图功能，我们用一段简单代码就能提取它的指纹可直接在浏览器控制台运行：

function getCanvasFingerprint() {

  const canvas = document.createElement('canvas');

  const ctx = canvas.getContext('2d');

  const text = 'frontend-fingerprint';

  

  ctx.textBaseline = 'top';

  ctx.font = '14px Arial';

  ctx.fillStyle = '#f60';

  ctx.fillRect(0, 0, 100, 60);

  ctx.fillStyle = '#069';

  ctx.fillText(text, 2, 15);

  

  return canvas.toDataURL();

}



function hashFingerprint(str) {

  let hash = 0;

  for (let i = 0; i < str.length; i++) {

    hash = (hash << 5) - hash + str.charCodeAt(i);

    hash |= 0;

  }

  return hash;

}



const dataUrl = getCanvasFingerprint();

const fingerprint = hashFingerprint(dataUrl);

console.log('Canvas指纹结果：', fingerprint);

试着在不同浏览器、甚至不同设备上运行，你会发现每次得到的数值都不一样

这就是浏览器指纹的识别核心。

二、前端人必须掌握的应用场景

浏览器指纹不是 黑科技，而是前端开发、风控、产品设计中高频用到的技术，面试时遇到相关问题，能说清这些场景直接加分：

对于前端求职者来说，这些场景不仅是面试高频题，更是实际工作中可能遇到的开发需求。如果能在简历中体现对浏览器指纹的理解，或在面试中清晰拆解实现逻辑，很容易让面试官眼前一亮 ，但很多同学要么不懂核心原理，要么不知道怎么把技术点转化为面试优势。

四、最后说句实在的

浏览器指纹是前端领域的 实用 技术，懂它不仅能解决实际开发问题，更能成为求职路上的加分项。但求职不止是懂技术，更要会 表达技术， 简历怎么写才能脱颖而出？面试怎么说才能打动面试官？这些都需要技巧和经验。

如果你正在为前端求职发愁，想让自己的技术优势被看到，不妨试试我的「前端简历面试辅导」和「前端求职陪跑」服务。从技术亮点提炼到面试答题技巧，从简历优化到 offer 谈判，我会全程帮你针对性提升，让你在众多求职者中脱颖而出，顺利拿下心仪岗位

js 原生的数字计算是一个令人头痛的问题，最常见的就是浮点数精度丢失。

// 1. 加减运算

0.1 + 0.2 // 结果：0.30000000000000004（预期 0.3）

0.7 - 0.1 // 结果：0.6000000000000001（预期 0.6）



// 2. 乘法精度偏移

0.1 * 0.2 // 结果：0.020000000000000004（预期 0.02）

3 * 0.3   // 结果：0.8999999999999999（预期 0.9）



// 3. 除法结果异常

0.3 / 0.; // 结果：2.9999999999999996（预期 3）

1.2 / 0.2 // 结果：5.999999999999999（预期 6）

在金额计算的场景中出现这种问题是很危险的，例如「0.1 元 + 0.2 元」本应等于 0.3 元，原生计算却会得出 0.30000000000000004 元，直接导致金额显示错误或支付逻辑异常。

不少人会用toFixed四舍五入，保留 2 位小数来格式化数字，它本质上是 字符串格式化工具，而非精度修复工具，而且还会带来新的精度问题 —— toFixed的四舍五入规则是 “银行家舍入法”，无法解决底层计算的精度误差。

// 问题1. 四舍五入规则不符合预期

1.005.toFixed(2); // 结果："1.00"（预期 "1.01"）

2.005.toFixed(2); // 结果："2.00"（同样问题）

1.235.toFixed(2); // 结果："1.23"（预期 "1.24"）



// 问题2. 无法修复底层计算误差

const sum = 0.1 + 0.2; // 0.30000000000000004

sum.toFixed(2); // 结果："0.30"（表面正确，但误差仍存在，后续再运算仍然有问题）

sum.toFixed(10); // 结果："0.3000000000"（仅隐藏误差，未消除）

而 number-precision 能解决这些问题。

number-precision 的优势在哪？

• 轻量化，大小仅 1kb


• API 极简化，只有加减乘除和四舍五入


• 专注精度问题，无额外心智负担


• 兼容性好，无额外依赖

适用场景

• 中小型项目、仅需解决基础加减乘除精度问题的场景（如电商、金融类简单计算）


• 对包体积敏感的前端项目。

如何使用？

pnpm install number-precision

import NP from 'number-precision'



NP.strip(0.09999999999999998); // = 0.1

NP.plus(0.1, 0.2);             //加法计算 = 0.3, not 0.30000000000000004

NP.plus(2.3, 2.4);             //加法计算 = 4.7, not 4.699999999999999

NP.minus(1.0, 0.9);            //减法计算 = 0.1, not 0.09999999999999998

NP.times(3, 0.3);              //乘法计算 = 0.9, not 0.8999999999999999

NP.times(0.362, 100);          //乘法法计算 = 36.2, not 36.199999999999996

NP.divide(1.21, 1.1);          //除法计算 = 1.1, not 1.0999999999999999

NP.round(0.105, 2);            //四舍五入，保留2位小数 = 0.11, not 0.1

混合的计算：

import NP from 'number-precision'



// (0.8-0.5)x1000，保留2位小数

NP.round(NP.times(NP.minus(0.8, 0.5), 1000), 2)

// 计算股票收益率

NP.round(NP.times(NP.divide(NP.minus(+price, +cost), +cost), 100),2)

更复杂的计算场景用什么

number-precision有短小精悍的优势在，基本的运算都能拿捏，但那些要求更高的计算场景用什么库呢？

总结了目前社区流行的几款计算库，大家按需取用。

附上地址：

number-precision：github.com/nefe/number…

big.js：github.com/MikeMcl/big…

decimal.js：github.com/MikeMcl/dec…

math.js：github.com/josdejong/m…

作品推荐

Haotab 新标签页，一个优雅的新标签页

chrome 商店
| edge 商店
| 在线版

静待你的体验❤

在前端开发中，大屏适配一直是个让人头疼的问题。领导总是要求大屏既要不留白，又要不变形，还要没有滚动条。这看似简单的要求，实际却压根不可能。今天，我们就来聊聊大屏适配的四种常见模式，以及如何根据实际需求选择合适的方案。

一、大屏适配的困境

在大屏项目中，适配问题几乎是每个开发者都会遇到的挑战。屏幕尺寸的多样性、设计稿与实际屏幕的比例差异，都使得适配变得复杂。而领导的“既要...又要...还要...”的要求，更是让开发者们感到无奈。不过，我们可以通过合理选择适配模式来尽量满足这些需求。

二、四种适配模式

在大屏适配中，常见的适配模式有以下四种：

（以下截图中模拟视口1200px*500px和800px*600px，设计稿为1920px*1080px）

1. 拉伸填充（fill）

• 特点：内容会被拉伸变形，以完全填充视口框。这种方式可以确保视口内没有空白区域，但可能会导致内容变形。


• 适用场景：适用于对内容变形不敏感的场景，例如全屏背景图。

2. 保持比例（contain）

• 特点：内容保持原始比例，不会被拉伸变形。如果内容的宽高比与视口不一致，会在视口内出现空白区域（黑边）。这种方式可以确保内容不变形，但可能会留白。


• 适用场景：适用于需要保持内容原始比例的场景，例如视频或图片展示。

3. 滚动显示（scroll）

• 特点：内容不会被拉伸变形，当内容超出视口时会添加滚动条。这种方式可以确保内容完整显示，但用户需要滚动才能查看全部内容。


• 适用场景：适用于内容较多且需要完整显示的场景，例如长列表或长文本。

4. 隐藏超出（hidden）

• 特点：内容不会被拉伸变形，当内容超出视口时会隐藏超出部分。这种方式可以避免滚动条的出现，但可能会隐藏部分内容。


• 适用场景：适用于内容较多但不需要完整显示的场景，例如仪表盘。

三、为什么不能同时满足所有要求？

这四种适配模式各有优缺点，但它们在逻辑上是相互矛盾的。具体来说：

• 不留白：要求内容完全填充视口，没有任何空白区域。这通常需要拉伸或缩放内容以适应视口的宽高比。


• 不变形：要求内容保持其原始宽高比，不被拉伸或压缩。这通常会导致内容无法完全填充视口，从而出现空白区域（黑边）。


• 没滚动条：要求内容完全适应视口，不能超出视口范围。这通常需要隐藏超出部分或限制内容的大小。

这三个要求在逻辑上是相互矛盾的：

• 如果内容完全填充视口（不留白），则可能会变形。


• 如果内容保持原始比例（不变形），则可能会出现空白区域（留白）。


• 如果内容超出视口范围，则需要滚动条或隐藏超出部分。

四、【fitview】插件快速实现大屏适配

fitview 是一个视口自适应的 JavaScript 插件，它支持多种适配模式，能够快速实现大屏自适应效果。

github地址：github.com/pbstar/fitv…

在线预览：pbstar.github.io/fitview

以下是它的基本使用方法：

配置

• el: 需要自适应的 DOM 元素


• fit: 自适应模式，字符串，可选值为 fill、contain（默认值）、scroll、hidden


• resize: 是否监听元素尺寸变化，布尔值，默认值 true

安装引入

npm 安装

npm install fitview

esm 引入

import fitview from "fitview";

cdn 引入

<script src="https://unpkg.com/fitview@[version]/lib/fitview.umd.js"></script>

使用示例

<div id="container">

  <div style="width:1920px;height:1080px;"></div>

</div>

const container = document.getElementById("container");

new fitview({

  el: container,

});

五、总结

大屏适配是一个复杂的问题，不同的项目有不同的需求。虽然不能同时满足“不留白”“不变形”和“没滚动条”这三个要求，但可以通过合理选择适配模式来尽量满足大部分需求。在实际开发中，我们需要根据项目的具体需求和用户体验来权衡，选择最合适的适配方案。

在选择适配方案时，fitview 这个插件可以提供很大的帮助。它支持多种适配模式，能够快速实现大屏自适应效果。如果你正在寻找一个简单易用的适配工具，fitview 值得一试。你可以通过 npm 安装或直接使用 CDN 引入，快速集成到你的项目中。

希望这篇文章能帮助你更好地理解和选择大屏适配方案。如果你有更多问题或建议，欢迎在评论区留言。

如果你正在做官网开发，还在辛苦的手动实现那些动画特效，那今天推荐的这个库，至少让你提前4小时开始摸鱼!

以前，面对设计师的那些炫酷动画，实现起来是最耗头发的；产品经理还时不时的说一下，这效果不好看，我要的是五彩斑斓的黑！

还抱着 Element UI + Animate.css 在那里辛苦调试，苦苦思考好好的效果怎么到了 safari 就变形了呢 ？

现如今，时代变了！

什么是 Inspira UI

Inspira UI 是专门为 Vue3/Nuxt 开发的可复用的动画组件集合。

• 完全免费和开源


• 完美支持 vue3/Nuxt3


• 包括按钮、输入框、背景、卡片、设备模拟、光标、2D/3D效果等120+ 个特效组件


• 样式基于 TailwindCSS


• 动画使用 motion-v、gsap 实现


• 对移动设备特别优化

来欣赏一下效果：

视频文字

图库

3d文字

走马灯

spline

Inspira UI 的优势

1.兼顾视觉与功能

以**「轻量动效组件库」为定位，核心组件覆盖基础 UI（按钮、输入框等）和模块（3D 交互、动态背景等），所有组件均内置微交互**设计。动效无需额外开发完美适配企业官网、电商页面等需视觉增强的场景，实现 “拿即用” 的开发体验。

Liquid Logo

2.基于Tailwind CSS V4

底层基于 Tailwind CSS 构建组件基础样式，确保原子类叠加的灵活性；支持浅色、深色模式一键切换；支持 ypeScript，所有组件与 API 均提供完整类型定义。

浅色模式

3.深度兼容 Vue/Nuxt 生态，性能提升

无论是 Vue 单页应用还是 Nuxt 服务端渲染项目，都能无缝融入现有技术栈，降低开发者的学习与迁移成本。

同时基于 Vue 3.4+ 新增的 defineModel 与 watchEffect 语法重构，减少了至少 30% 的响应式依赖开销;

4.多端性能优化

对于 3D 组件，在支持 WebGPU 的浏览器中，渲染帧率较旧版 WebGL 提升 2-3 倍.

而对于移动端设备、低配置设备会自动调节动效帧率，性能大大提高；同时，对所有组件做了 “懒加载 + 预渲染” 优化，首屏加载速度较旧版提升 35%

如何使用？

Inspira UI 官方文档支持中文，写的也很接地气，通俗易懂 5 分钟就能上手！

• 安装依赖

    # 安装 tainlwind

    pnpm install tailwindcss @tailwindcss/vite



    # 安装 tailwindcss 库和实用工具

    pnpm install -D clsx tailwind-merge class-variance-authority tw-animate-css



    # 安装 VueUse 和其他支持库

    pnpm install @vueuse/core motion-v

• 配置 vite

    import { defineConfig } from 'vite'

    import tailwindcss from '@tailwindcss/vite'



    export default defineConfig({

      plugins: \[

        tailwindcss(),

      ],

    })

• 配置主题

可以根据需要自由配置主题色。

    @import tailwindcss;

    @import tw-animate-css;

    @custom-variant dark (&:is(.dark *));



    :root {

      --card: oklch(1 0 0);

      --card-foreground: oklch(0.141 0.005 285.823);

    }

    .dark {

      --background: oklch(0.141 0.005 285.823);

      --foreground: oklch(0.985 0 0);

    }

    @theme inline {

      --color-background: var(--background);

    }

    @layer base {

      * {

        @apply border-border outline-ring/50;

      }

      body {

        @apply bg-background text-foreground;

      }

    }

    html {

      color-scheme: light dark;

    }

    html.dark {

      color-scheme: dark;

    }

    html.light {

      color-scheme: light;

    }

最后一步，可以复制源码或者通过 Cli 来安装。

• 直接使用源码

找到想要的组件，复制粘贴到自己的项目中即可。

• 通过 Cli 安装

    pnpm dlx shadcn-vue\@latest add "https://registry.inspira-ui.com/gradient-button.json>"

然后，你就有了一个炫酷的按钮。

Gradient Button 效果

最后

Vue3/Nuxt3开发者再也不用羡慕 React生态的 Aceternity UI、Magic UI 了。

Inspira UI 直接填补了 vue3 生态中动效开发这一块的缺陷，可以将这些奇妙的设计应用在企业官网、特效开发中，大大节省开发成本。

让 Vue3 生态再一次得到加强，快去试试这个炫酷的项目把！

附上官网地址：inspira-ui.com/docs/cn

作品推荐

Haotab 新标签页，一个优雅的新标签页

chrome 商店
| edge 商店
| 在线版

静待你的体验❤

一、前端动画的"至暗时刻"：每个像素都在燃烧经费

618 前夕，我的 PM 突然发来灵魂拷问："菜鸡，这个购物车弹性动画，为什么安卓和 iOS 的抖动幅度不一样？还有这个圣诞飘雪特效，为什么 iPhone 13 Pro Max 的耗电量能煎鸡蛋？"

我默默擦掉额头的冷汗，回想起被这些需求支配的恐惧：

直到某天，隔壁组的前端突然拍案而起："用Lottie！这玩意能直接吃AE动画！" —— 那一刻，我仿佛看到了前端动画的文艺复兴曙光。

二、Lottie：动画界的 Rosetta Stone（罗塞塔石碑）

1. 打破巴别塔诅咒的技术本质

Lottie的魔法可以拆解为三个核心环节：

• 魔法卷轴（JSON文件）：
  
  设计师在AE中使用 Bodymovin插件 导出的动画配方，包含所有图层、关键帧、路径等元数据，体积通常只有GIF的1/10


• 咒语解析器（Lottie Runtime）：
  
  各平台的解析引擎（Web/iOS/Android/Flutter等），像精密的手术刀般逐帧解析JSON指令


• 元素召唤阵（Canvas/SVG/OpenGL）：
  
  根据设备性能自动选择最优渲染方案，低端机用轻量SVG，旗舰机秀Canvas魔法

2. 那些年被 Lottie 拯救的惨案现场

三、Lottie 的文艺复兴之路：从加载动画到元宇宙门票

1. 业务舞台的常青树场景

• 轻量级演出：
  
  Loading 动画、按钮微交互、表情包（微信的[呲牙]动画仅28KB）


• 重量级剧场：
  
  新手引导流程、电商促销动效、直播礼物特效（某直播平台的火箭升空动画仅182KB）


• 沉浸式演出：
  
  游戏化运营活动、元宇宙3D场景过渡（某电商 App 的虚拟试衣间加载动画）

2. 那些让程序员笑醒的代码片段

Web 端 React 全家桶套餐：

import { Player } from '@lottiefiles/react-lottie-player';



<Player

  src="/emoji.lottie.json"

  style={{ height: '300px' }}

  autoplay

  loop

  onEvent={event => {

    if (event === 'complete') console.log('老板说这个动画要播10086遍')

  }}

/>

Vue3 优雅食用姿势：

<template>

  <Lottie :animation-data="rocketJSON" @ready="startLaunch" />

</template>



<script setup>

import { Lottie } from 'lottie-web-vue';

import rocketJSON from './rocket-launch.json';



const startLaunch = (anim) => {

  anim.setSpeed(1.5);

  anim.play();

}

</script>

微信小程序性能优化版：

<lottie 

  animationData="{{lottieData}}"

  path="https://static.example.com/animations/coupon.json"

  autoPlay="{{true}}"

  css="{{'width: 100%; height: 300rpx;'}}"

  bind:ready="onAnimReady"

/>

四、打开 Lottie 的正确姿势：从青铜到王者的进阶之路

1. 设计师的防跑偏指南

• AE图层命名规范：禁止出现"最终版-真的不改了-V12"这类薛定谔命名


• 合理使用预合成：嵌套层级不要超过俄罗斯套娃的极限


• 动态属性标记：需要运行时修改的颜色/文字要提前标注

2. 工程师的性能调优包

压缩黑科技三件套：

# 使用 lottie-tools 进行瘦身

npx lottie-tools compress animation.json -o animation.min.json



# 删除无用元数据

npx lottie-tools remove-unused animation.json



# 提取公共资源

npx lottie-tools split animation.json --output-dir ./assets

按需加载策略：

const loadLottie = async () => {

  const animation = await import(

    /* webpackPrefetch: true */ 

    /* webpackChunkName: "lottie-animation" */ 

    './animation.json'

  );

  lottie.loadAnimation({

    container: document.getElementById('lottie'),

    animationData: animation.default

  });

}

五、当Lottie遇到次元壁：那些年我们填过的坑

1. 跨平台兼容性排雷手册

2. 性能优化急救包

// 帧率节流大法

animation.addEventListener('enterFrame', () => {

  if(performance.now() - lastTime < 16) return;

  lastTime = performance.now();

  // 真正执行渲染逻辑

});



// 内存泄漏防护

useEffect(() => {

  const anim = lottie.loadAnimation({...});

  return () => anim.destroy(); // 比卸载微信还干净

}, []);

六、未来展望：Lottie的元宇宙野望

当我在AR眼镜里看到Lottie渲染的3D购物动画时，突然意识到这个技术正在打开新次元：

也许不久的将来，我们能用Lottie在元宇宙里复刻《盗梦空间》的折叠城市动画——当然，得先确保产品经理不会要求实时修改地心引力参数。

总结

从被 GIF 支配的恐惧，到用 JSON 驾驭动画的自由，Lottie 让我们离"设计即代码"的理想国又近了一步。下次当设计师又甩来 500MB 的 AE 工程时，你可以优雅地打开 Bodymovin 插件："亲爱的，这次咱们换个姿势加载。"

Vue3 防重复点击指令 - clickOnce

一、问题背景

在实际的 Web 应用开发中，我们经常会遇到以下问题：

这些问题在以下场景中尤为常见：

• 表单提交（注册、登录、创建订单等）


• 数据保存操作


• 文件上传


• 支付操作


• API 调用

二、解决方案

clickOnce 指令通过以下机制解决上述问题：

1. 节流机制

使用 @vueuse/core 的 useThrottleFn，在 1.5 秒内只允许执行一次点击操作。

2. 按钮禁用

点击后立即禁用按钮，防止用户再次点击。

3. 视觉反馈

自动添加 Element Plus 的 Loading 图标，让用户明确知道操作正在进行中。

4. 智能恢复

• 如果绑定的函数返回 Promise（异步操作），则在 Promise 完成后自动恢复按钮状态


• 如果是同步操作，则立即恢复

三、核心特性

✅ 自动防重复点击：1.5秒节流时间

✅ 自动 Loading 状态：无需手动管理 loading 变量

✅ 支持异步操作：自动检测 Promise 并在完成后恢复

✅ 优雅的清理机制：组件卸载时自动清理事件监听

✅ 类型安全：完整的 TypeScript 支持

四、技术实现

关键技术点

工作流程

用户点击按钮

    ↓

节流检查（1.5秒内只执行一次）

    ↓

禁用按钮 + 添加 Loading 图标

    ↓

执行绑定的函数

    ↓

检测返回值是否为 Promise

    ↓

Promise 完成后（或同步函数执行完）

    ↓

移除 Loading + 恢复按钮状态

五、使用方法

1. 注册指令

// main.ts

import clickOnce from '@/directives/clickOnce'



app.directive('click-once', clickOnce)

2. 在组件中使用

<template>

  <!-- 异步操作示例 -->

  <el-button 

    type="primary" 

    v-click-once="handleSubmit">

    提交表单

  </el-button>



  <!-- 带参数的异步操作 -->

  <el-button 

    type="success" 

    v-click-once="() => handleSave(formData)">

    保存数据

  </el-button>

</template>



<script setup lang="ts">

const handleSubmit = async () => {

  // 模拟 API 调用

  await api.submitForm(formData)

  ElMessage.success('提交成功')

}



const handleSave = async (data: any) => {

  await api.saveData(data)

  ElMessage.success('保存成功')

}

</script>

六、优势对比

传统方式

<template>

  <el-button 

    type="primary" 

    :loading="loading"

    :disabled="loading"

    @click="handleSubmit">

    提交

  </el-button>

</template>



<script setup lang="ts">

const loading = ref(false)



const handleSubmit = async () => {

  if (loading.value) return

  

  loading.value = true

  try {

    await api.submit()

  } finally {

    loading.value = false

  }

}

</script>

问题：

• 需要手动管理 loading 状态


• 每个按钮都要写重复代码


• 容易遗漏 finally 清理逻辑

使用 clickOnce 指令

<template>

  <el-button 

    type="primary" 

    v-click-once="handleSubmit">

    提交

  </el-button>

</template>



<script setup lang="ts">

const handleSubmit = async () => {

  await api.submit()

}

</script>

优势：

• 代码简洁，无需管理状态


• 自动处理 loading 和禁用


• 统一的用户体验

七、注意事项

八、适用场景

✅ 适合使用：

• 表单提交按钮


• 数据保存按钮


• 文件上传按钮


• API 调用按钮


• 支付确认按钮

❌ 不适合使用：

• 普通导航按钮


• 切换/开关按钮


• 需要快速连续点击的场景（如计数器）

九、指令源码

import type { Directive } from 'vue'

import { createVNode, render } from 'vue'

import { useThrottleFn } from '@vueuse/core'

import { Loading } from '@element-plus/icons-vue'



const THROTTLE_TIME = 1500



const clickOnce: Directive<HTMLButtonElement, () => Promise<unknown> | void> = {

  mounted(el, binding) {

    const handleClick = useThrottleFn(

      () => {

        // 如果元素已禁用，直接返回（双重保险）

        if (el.disabled) return



        // 禁用按钮

        el.disabled = true

        // 添加 loading 状态

        el.classList.add('is-loading')



        // 创建 loading 图标容器

        const loadingIconContainer = document.createElement('i')

        loadingIconContainer.className = 'el-icon is-loading'



        // 使用 Vue 的 createVNode 和 render 来渲染 Loading 组件

        const vnode = createVNode(Loading)

        render(vnode, loadingIconContainer)



        // 将 loading 图标插入到按钮开头

        el.insertBefore(loadingIconContainer, el.firstChild)



        // 将 loading 图标存储到元素上，以便后续移除

        ;(el as any)._loadingIcon = loadingIconContainer

        ;(el as any)._loadingVNode = vnode



        // 执行绑定的函数（应返回 Promise 或普通函数）

        const result = binding.value?.()



        const removeLoading = () => {

          el.disabled = false

          // 移除 loading 状态

          el.classList.remove('is-loading')

          const icon = (el as any)._loadingIcon

          if (icon && icon.parentNode === el) {

            // 卸载 Vue 组件

            render(null, icon)

            el.removeChild(icon)

            delete (el as any)._loadingIcon

            delete (el as any)._loadingVNode

          }

        }



        // 如果返回的是 Promise，则在完成时恢复；否则立即恢复

        if (result instanceof Promise) {

          result.finally(removeLoading)

        } else {

          // 非异步操作，立即恢复（或根据需求决定是否恢复）

          // 通常建议只用于异步操作，所以这里也可以不处理，或给出警告

          removeLoading()

        }

      },

      THROTTLE_TIME,

    )



    // 将 throttled 函数存储到元素上，以便在 unmount 时移除

    ;(el as any)._throttledClick = handleClick

    el.addEventListener('click', handleClick)

  },



  beforeUnmount(el) {

    const handleClick = (el as any)._throttledClick

    if (handleClick) {

      el.removeEventListener('click', handleClick)

      // 取消可能还在等待的 throttle

      handleClick.cancel?.()

      delete (el as any)._throttledClick

    }

  },

}



export default clickOnce

十、总结

clickOnce 指令通过封装防重复点击逻辑，提供了一个开箱即用的解决方案，让开发者可以专注于业务逻辑，而不用担心重复点击的问题。它结合了节流、状态管理和视觉反馈，为用户提供了更好的交互体验。

目前Chrome浏览器依然没有放开12px的限制，但Chrome仍然是使用人数最多的浏览器。

在笔者开发某个项目时突发奇想：如果实际需要11px的字体大小怎么办？这在Chrome中是实现不了的。关于字体，一开始想到的就是rem等非px单位。但是rem只是为了响应式适配，并不能突破这一限制。

em、rem等单位只是为了不同分辨率下展示效果提出的换算单位，常见的库px2rem也只是利用了js将px转为rem。包括微信小程序提出的rpx单位也是一样！

这条路走不通，就只剩下一个方法：改变视觉大小而非实际大小。

理论基础

css中有一个属性：transform: scale();

• 值的绝对值>1，就是放大，比如2，就是放大2倍


• 值的绝对值 0<值<1，就是缩小，比如0.5，就是原来的0.5倍；


• 值的正负，负值表示图形翻转。

默认情况下，scale(x, y)：以x/y轴进行缩放；如果y没有值，默认y==x；
也可以分开写：scaleX() scaleY() scaleZ()，分开写的时候，可以对Z轴进行缩放

第二种写法：transform: scale3d(x, y, z)该写法是上面的方法的复合写法，结果和上面的一样。

但使用这个属性要注意一点：scale 缩放的时候是以“缩放元素所在空间的中心点”为基准的。
所以如果用在改变元素视觉大小的场景下，一般还需要利用另一个元素来“恢复位置”：

transform-origin: top left;

语法上说，transform-origin 拥有三个属性值：

transform-origin: x-axis y-axis z-axis;

默认为：

transform-origin:50% 50% 0;

属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。作用就是更改一个元素变形的原点。

实际应用

<div class="mmcce__info-r">

  <!-- 一些html结构 -->

  <div v-show="xxx" class="mmcce-valid-mj-period" :class="{'mmcce-mh': showStr}">

    <div class="mmcce-valid-period-child">xxx</div><!-- 父级结构，点击显示下面内容 -->

    <div class="mmcce-valid-pro" ref="mmcceW">

      <!-- 下面内容在后面有讲解 -->

      <div class="mmcce-text" 

        v-for="(item, index) in couponInfo.thresholdStr" 

        :key="index" 

        :index="index"

        :style="{height: mTextH[index] + 'px'}"

      >{{item}}</div>

    </div>

  </div>

</div>

.mmcce-valid-mj-period {

  max-height: 15px;

  transition: all .2s ease;



  &.mmcce-mh {

    max-height: 200px;

  }



  .mmcce-valid-pro {

    display: flex;

    flex-direction: column;

    padding-bottom: 12px;



    .mmcce-text {

      width: 200%; // !

      font-size: 22px;

      height: 15px;

      line-height: 30px;

      color: #737373;

      letter-spacing: 0;

      transform       : scale(.5);

      transform-origin: top left;

    }

  }

}



.mmcce-valid-period-child {

  position: relative;

  width      : 200%;

  white-space: nowrap;

  font-size  : 22px;

  color      : #979797;

  line-height: 30px;



  transform       : scale(.5);

  transform-origin: top left;



  //xxx

}

可以明确说明的是，这样的 hack 需要明确规定缩放元素的height值 ！！！

上面代码中为什么.mmcce-valid-mj-period类中要用max-height ？为什么对展开元素中的文字类.mmcce-text中使用height？
我将类.mmcce-text中的height去掉后，看下效果：

（使用min-height是一样的效果）

OK，可以看到，占高没有按我们想的“被缩放”。影响到了下面的元素位置。

本质上是“视觉大小改变了但实际(占位)大小无变化”。
这时候，宽高实际也被缩放了的。这一点通过代码中width:200%也可以看出来。或者你设置了overflow:hidden;也可以有相应的效果！

这一点需要注意，一般来说，给被缩放元素显式设置一个大于等于其font-size的height值即可。

缩放带来的其它问题

可能在很多人使用的场景中是不会考虑到这个问题的：被缩放元素限制高度以后如果元素换行那么会出现文字重叠的现象。

为此，我采用了在mounted生命周期中获取父元素宽度，然后动态计算是否需要换行以及换行的行数，最后用动态style重新渲染每一条数据的height值。
这里有三点需要注意：

关于第三点，还涉及到加载顺序的问题。比如刚进入页面时要展示弹窗，弹窗是一个组件。那你在index.vue中是获取不到这个组件的。但是你可以将比如header也拆分出来，然后在header组件的mounted中去调用弹窗组件暴露出的方法。

mounted(){

  let thresholdStr = this.info.dropDownTextList;

  let minW = false;

  if(this.$el.querySelector('.mmcce-valid-pro').clientWidth < 140) { // 以iPhone5位准，再小于其中元素宽度的的机型就要做特殊处理了

    minW = true

  }

  let mmcw = this.$el.querySelector('.mmcce-valid-pro').getBoundingClientRect().width;



  let mmch = [];



  for(let i=0;i<thresholdStr.length;i++) {

    // 11是指缩放后文字的font-size值，这是一种取巧的方式

    if(11*(thresholdStr[i].length) > mmcw) {

      if(minW) {

        mmch[i] = Math.floor((11*thresholdStr[i].length) / mmcw) * 15;

      }else {

        mmch[i] = Math.floor((11*(thresholdStr[i].length) + 40) / mmcw) * 15;

      }

    }else {

      mmch[i] = 15;

    }

  }



  this.mTextH = mmch;

},

笔者前段时间弄了一个微信公众号：前端Code新谈。里面暂时有webrtc、前端面试和用户体验系列文章，最近暂时搁置了webrtc，新开了一个系列“three.js”，欢迎关注！希望能够帮到大家，也希望能互相交流！一起学习共同进步

在数据可视化和大屏开发中，"适配"永远是绕不开的话题。不同分辨率下如何保持元素比例、位置精准，往往让开发者头疼不已。
autofit.js 作为老牌适配工具，早已在许多项目中证明了价值；而新晋的 vfit 则专为 Vue 3 量身打造。今天我们就来深入对比这两款工具，看看谁更适合你的场景。

一、核心定位：通用方案 vs Vue 专属

首先得明确两者的定位差异：

• autofit.js：无框架依赖的通用缩放工具，通过计算容器与设计稿的比例，对整个页面进行缩放处理，核心逻辑是 transform: scale(ratio) 的全局应用。


• vfit.js：专为 Vue 3 设计的轻量方案，不仅提供全局缩放，更通过组件化思想解决精细定位问题，是"缩放+定位"的一体化方案。

二、核心能力对比

1. 缩放逻辑：全局统一 vs 灵活可控

autofit.js 的缩放逻辑相对直接：

• 计算容器宽高与设计稿的比例（取宽/高比例的最小值或按配置选择）


• 对目标容器应用整体缩放，实现"一缩全缩"

vfit.js 则提供了更灵活的缩放策略：

// vfit 初始化配置

createFitScale({

  target: '#app',        // 监听缩放的容器

  designHeight: 1080,    // 设计稿高度

  designWidth: 1920,     // 设计稿宽度

  scaleMode: 'auto'      // 缩放模式：auto/height/width

})

•  auto 模式会自动对比容器宽高比与设计稿比例，智能选择按宽或按高缩放


• 支持在组件内通过 useFitScale() 获取当前缩放值，实现局部自定义缩放

2. 定位能力：粗犷适配 vs 精细控制

这是两者最核心的差异。

autofit.js 由于是全局缩放，元素定位依赖原始 CSS 布局，在复杂场景下容易出现：

• 固定像素定位的元素在缩放后偏离预期位置


• 相对定位元素在不同分辨率下比例失调

vfit.js 则通过 FitContainer 组件解决了这个痛点，支持两种定位单位：

<!-- 百分比定位：位置不受缩放影响，适合居中场景 -->

<FitContainer :top="50" :left="50" unit="%">

  <div class="card" style="transform: translate(-50%, -50%)">居中内容</div>

</FitContainer>



<!-- 像素定位：位置随缩放自动计算，适合固定布局 -->

<FitContainer :top="90" :left="90" unit="px">

  <div class="box">固定位置元素</div>

</FitContainer>

•  unit="%"：位置基于容器百分比，适合居中、靠边等相对位置


•  unit="px"：位置会自动乘以当前缩放值，保证设计稿像素与实际显示一致

更贴心的是，vfit.js 还支持通过 right/bottom 定位，并自动处理不同原点的缩放计算（比如右上角、右下角）。

3. 框架融合：独立工具 vs Vue 生态

autofit.js 作为独立库，需要手动在 Vue 项目中处理初始化时机（通常在 onMounted 中），且无法直接与 Vue 的响应式系统结合。

vfit.js 则完全融入 Vue 3 生态：

• 通过 app.use() 安装，自动处理初始化时机


• 缩放值通过 Ref 实现响应式，组件内可实时获取


• FitContainer 组件支持 props 动态更新，适配动态布局场景

三、适用场景分析

四、迁移成本与上手难度

• autofit.js：API 简单，几行代码即可初始化，学习成本低，适合快速接入简单场景。


• vfit.js：需要理解组件化定位思想，初期有一定学习成本，但对于复杂场景，后期维护成本更低。

如果你从 autofit.js 迁移到 vfit.js，只需：

总结：没有最好，只有最合适

autofit.js 胜在通用性和简单直接，适合非 Vue 项目或简单的全局缩放场景；而 vfit.js 则在 Vue 3 生态中展现了更强的针对性，通过组件化和精细定位，解决了复杂大屏的适配痛点。

如果你是 Vue 开发者，且正在为元素定位偏移烦恼，不妨试试 vfit——它可能正是你寻找的"Vue 大屏适配最优解"。

官网地址：web-vfit.netlify.app，可以直接在线体验效果～

github：github.com/v-plugin/vf…

😅 又是熟悉的对话

产品："小王，这个表格用户体验不好啊，用户要滚动到底部才能看到横向滚动条，能不能把滚动条固定在页面底部？"

我："emmm... 这个... 技术上可以实现，但是..."

产品："那就这么定了！明天上线！"

我："😭"

相信很多前端同学都遇到过类似的场景。面对超宽的 el-table，用户确实需要先滚动到表格底部才能进行左右滚动，体验确实不够友好。

💡干！

于是一个通用的水平滚动条组件 vue-horizontal-scrollbar 诞生了！

🌟 快速体验

想看看实际效果？访问 在线演示

🚀 最终的解决方案

<template>

    <el-table style="width: 100%">

    </el-table>

  

    <HorizontalScrollbar

      :target-selector="getSelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__wrap')"

      :content-selector="getSelector('.el-table__body-wrapper .el-scrollbar .el-scrollbar__view')"

    />

</template>



<script setup>

import { ref } from 'vue'

import { VueHorizontalScrollbar } from 'vue-horizontal-scrollbar'

import "vue-horizontal-scrollbar/dist/style.css"



function getSelector(selector: string) {

  const elements = document.querySelectorAll<HTMLElement>(selector) // 兼容展开行

  if (elements.length) {

    return elements[elements.length - 1] 

  }

  else {

    console.warn(`Selector "${selector}" did not match any elements.`)

    return null

  }

}

// 💡 tips: 如果是有侧边菜单的管理系统需要动态修改vue-horizontal-scrollbar-container的left

</script>

✨ 这样做的好处

🎯 用户体验升级

• 滚动条始终可见，无需滚动页面


• 位置固定，操作便捷


• 支持键盘和鼠标滚轮操作

🛠️ 开发体验友好

• 一行代码解决问题


• 不破坏原有组件结构


• 支持任意 DOM 元素

🎨 高度可定制

<template>

  <div>

    <!-- Your scrollable content -->

    <div id="scroll-container" style="overflow-x: auto; width: 100%;">

      <div id="scroll-content" style="width: 2000px; height: 200px;">

        <!-- Wide content here -->

        <p>This content is wider than the container...</p>

      </div>

    </div>

    

    <!-- Horizontal Scrollbar -->

    <VueHorizontalScrollbar

      target-selector="#scroll-container"

      content-selector="#scroll-content"

      :auto-show="true"

      @scroll="onScroll"

    />

  </div>

</template>



<script setup>

import { VueHorizontalScrollbar } from 'vue-horizontal-scrollbar'

import "vue-horizontal-scrollbar/dist/style.css"

function onScroll(info) {

  console.log('Scroll info:', info)

  // { scrollLeft: 100, maxScroll: 1000, scrollPercent: 10 }

}

</script>

✨ Features

• 🎯 Vue 3 & TypeScript - Full TypeScript support with Vue 3 Composition API


• 🎨 Customizable - Flexible styling and configuration options


• ♿ Accessible - ARIA labels and keyboard navigation support


• 📱 Touch Friendly - Mobile-friendly touch gestures


• 🚀 Performance - Optimized with throttling and efficient updates


• 🎪 Flexible - Works with any scrollable content


• 🎛️ Event Rich - Comprehensive event system for interactions


• 📦 Lightweight - Minimal dependencies

📖 API Reference

Props

🎪 更多有趣的玩法

除了解决表格滚动问题，这个组件还能用在：

• 商品展示：电商网站的商品横向滚动


• 图片画廊：摄影作品展示


• 时间轴：项目进度展示


• 标签导航：当标签太多时的横向滚动

📦 立即使用

bash

npm install vue-horizontal-scrollbar

🎉 结语

从此以后，再也不怕产品提这种"奇葩"需求了！

产品："这个滚动条能不能再加个渐变效果？"

我："没问题！改个 CSS 就行！"

产品："能不能支持触摸滑动？"

我："早就支持了！"

项目地址：GitHub

NPM 包：vue-horizontal-scrollbar

如果这个组件帮到了你，记得给项目点个 ⭐ 哦！让我们一起让前端开发变得更轻松！🎉

最近接到一个安卓App的活儿，虽然功能上不算复杂，但因为原本没怎么做过安卓端，所以也是"摸着石头过河"。简单写一下踩过的坑和淌的水吧~

uni-app实现离线地图主要用 leafletjs 实现，但是因为在安卓端运行，存在渲染问题，所以还要用上 renderjs。

实现方案一：web-view

因为uni-app引入第三方可以采用传统的 NPM 安装的方式，也可以采用引入打包完的js文件的方式。

这里采用 leafletjs 打包完的文件，将 leafletjs 放入 static 文件夹内。

在网上下载了公开的瓦片地图图片，以 {z}/{x}/{y} 的目录结构放入 tiles 文件夹中，将 tiles 放入 static 文件夹内。

在static文件夹下新建一个 offline-map.html 文件

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>离线地图</title>

		<link rel="stylesheet" href="./leaflet/leaflet.css" />

		<style>

			html,

			body {

				margin: 0;

				padding: 0;

			}



			#map {

				height: 100vh;

				width: 100vw;

				margin: 0;

				padding: 0;

			}

		</style>

	</head>

	<body>

		<div id="map"></div>

		<script src="./leaflet/leaflet.js"></script>

		<script>

			const baseUrl = './tiles/{z}/{x}/{y}.jpg';

			const map = L.map('map').setView([23.56, 113.23], 15);



			L.tileLayer(baseUrl, {

				minZoom: 15,

				maxZoom: 18,

				tms: true,

				attribution: 'Offline Tiles',

				errorTileUrl: ''

			}).addTo(map);

		</script>

	</body>

</html>

找到 pages/index/index.vue 文件，采用 web-view 引用的方式引入上述 html 文件。

// pages/index/index.vue

<template>

	<view class="content">

		<web-view src="/static/offline-map.html"></web-view>

	</view>

</template>



<style>

	.content {

		width: 100%;

		height: 100%;

		display: flex;

		flex-direction: column;

		align-items: center;

		justify-content: center;

	}

</style>

实现方案二：renderjs

仍然将 leafletjs 和 瓦片图片文件夹tiles 放入 static 文件夹中。

// pages/index/index.vue

<view class="content">

    <view id="map" class="map-container"></view>

</view>



<script module="leaflet" lang="renderjs">

    import '@/static/leaflet/leaflet.css';

	import * as L from "@/static/leaflet/leaflet.js";



    export default {

		mounted() {

			this.initMap();

		},

		methods: {

			initMap() {

				const baseUrl = 'static/tiles/{z}/{x}/{y}.jpg'

				map = L.map('map').setView([23.56, 113.23], 15);



				L.tileLayer(baseUrl, {

					minZoom: 15,

					maxZoom: 18,

					tms: true,

					attribution: 'Offline Tiles',

					errorTileUrl: ''

				}).addTo(map);

			},

        }

    }

</script>

这里需要注意的是一定要在 renderjs 中实现上述代码，如果在常规 script 中实现，在 H5端 没有任何问题，但是运行到真机上会白屏。（这个问题我反复试了好几次都不行，结果还是上传到 Trae 上解决了这个问题）。

导致这种情况的原因是在常规 sctipt 中的代码，在真机上是运行在 逻辑层 的代码，无法干扰到 视图层 的结构，这一点和Web是不同的。

而 renderjs 是运行在 视图层 的js，具备操作 DOM 的能力。

其次是引用 static 文件的路径，import static 中的文件可以使用 @/static 的方式，但是在代码中引用 static 文件需要采用 static/ 的形式。

总结

最后我做完以后让 Trae 给了一下评价，Trae 表示不建议采用这种方式实现离线地图，首先瓦片地图文件一般非常大，我用的仅仅是其中的一小部分，也超过了 60MB，打包出来的 App 包太大了。

其次无论是 web-view 还是 renderjs 本质上是一样的。在app-vue环境下，视图层由webview渲染，而renderjs就是运行在视图层的。

所以无论是渲染效率还是开发上基本没差。

从前端到爆点！抖音级 H5 如何炼成？

在万物互联的时代，H5 页面已成为产品推广的利器。当产品经理丢给你一个“像抖音一样流畅的 H5”任务时，是挑战还是机遇？别慌，今天就带你走进抖音 H5 的前端魔法世界。

一、先看清本质：抖音 H5 为何丝滑？

抖音 H5 之所以让人欲罢不能，核心在于两点：极低的卡顿率和极致的交互反馈。前者靠性能优化，后者靠精心设计的交互逻辑。比如，你刷视频时的流畅下拉、点赞时的爱心飞舞，背后都藏着前端开发的“小心机”。

二、性能优化：让页面飞起来

（一）懒加载与预加载协同作战

懒加载是 H5 性能优化的经典招式，只在用户即将看到某个元素时才加载它。但光靠懒加载还不够，聪明的抖音 H5 还会预加载下一个可能进入视野的元素。以下是一个基于 IntersectionObserver 的懒加载示例：

document.addEventListener('DOMContentLoaded', () => {

  const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));

  if ('IntersectionObserver' in window) {

    let lazyImageObserver = new IntersectionObserver((entries) => {

      entries.forEach((entry) => {

        if (entry.isIntersecting) {

          let lazyImage = entry.target;

          lazyImage.src = lazyImage.dataset.src;

          lazyImageObserver.unobserve(lazyImage);

        }

      });

    });

 lazy   Images.forEach((lazyImage) => {

      lazyImageObserver.observe(lazyImage);

    });

  }

});

（二）图片压缩技术大显神威

图片是 H5 的“体重”大户。抖音 H5 常用 WebP 格式，它在保证画质的同时，能将图片体积压缩到 JPEG 的一半。你可以用以下代码轻松实现图片格式转换：

function compressImage(inputImage, quality) {

  return new Promise((resolve) => {

    const canvas = document.createElement('canvas');

    const ctx = canvas.getContext('2d');

    canvas.width = inputImage.naturalWidth;

    canvas.height = inputImage.naturalHeight;

    ctx.drawImage(inputImage, 0, 0, canvas.width, canvas.height);

    const compressedImage = new Image();

    compressedImage.src = canvas.toDataURL('image/webp', quality);

    compressedImage.onload = () => {

      resolve(compressedImage);

    };

  });

}

三、交互设计：让用户欲罢不能

（一）微动画营造沉浸感

在点赞、评论等关键操作上，抖音 H5 会加入精巧的微动画。比如点赞时的爱心从手指位置飞出，这其实是一个 CSS 动画加 JavaScript 事件监听的组合拳。以下是一个简易版的点赞动画代码：

@keyframes flyHeart {

  0% {

    transform: scale(0) translateY(0);

    opacity: 0;

  }

  50% {

    transform: scale(1.5) translateY(-10px);

    opacity: 1;

  }

  100% {

    transform: scale(1) translateY(-20px);

    opacity: 0;

  }

}

.heart {

  position: fixed;

  width: 30px;

  height: 30px;

  background-image: url('../assets/heart.png');

  background-size: contain;

  background-repeat: no-repeat;

  animation: flyHeart 1s ease-out;

}

document.querySelector('.like-btn').addEventListener('click', function(e) {

  const heart = document.createElement('div');

  heart.className = 'heart';

  heart.style.left = e.clientX + 'px';

  heart.style.top = e.clientY + 'px';

  document.body.appendChild(heart);

  setTimeout(() => {

    heart.remove();

  }, 1000);

});

（二）触摸事件优化

在移动设备上，触摸事件的响应速度直接影响用户体验。抖音 H5 通过精准控制触摸事件的捕获和冒泡阶段，减少了延迟。以下是一个优化触摸事件的示例：

const touchStartHandler = (e) => {

  e.preventDefault(); // 防止页面滚动干扰

  // 处理触摸开始逻辑

};



const touchMoveHandler = (e) => {

  // 处理触摸移动逻辑

};



const touchEndHandler = (e) => {

  // 处理触摸结束逻辑

};



const element = document.querySelector('.scrollable-container');

element.addEventListener('touchstart', touchStartHandler, { passive: false });

element.addEventListener('touchmove', touchMoveHandler, { passive: false });

element.addEventListener('touchend', touchEndHandler);

四、音频处理：让声音为 H5 增色

抖音 H5 的音频体验也很讲究。它会根据用户的操作实时调整音量，甚至在不同视频切换时平滑过渡音频。以下是一个简单的声音控制示例：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

const audioElement = document.querySelector('audio');

const audioSource = audioContext.createMediaElementSource(audioElement);

const gainNode = audioContext.createGain();

audioSource.connect(gainNode);

gainNode.connect(audioContext.destination);



// 调节音量

function setVolume(level) {

  gainNode.gain.value = level;

}



// 音频淡入效果

function fadeInAudio() {

  gainNode.gain.setValueAtTime(0, audioContext.currentTime);

  gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 1);

}



// 音频淡出效果

function fadeOutAudio() {

  gainNode.gain.linearRampToValueAtTime(0, audioContext.currentTime + 1);

}

五、跨浏览器兼容：让 H5 无处不在

抖音 H5 能在各种浏览器上保持一致的体验，这离不开前端开发者的兼容性优化。常用的手段包括使用 Autoprefixer 自动生成浏览器前缀、为老浏览器提供 Polyfill 等。以下是一个为 CSS 动画添加前缀的示例：

const autoprefixer = require('autoprefixer');

const postcss = require('postcss');



const css = '.example { animation: slidein 2s; } @keyframes slidein { from { transform: translateX(0); } to { transform: translateX(100px); } }';



postcss([autoprefixer]).process(css).then(result => {

  console.log(result.css);

  /*

   输出：

   .example {

     animation: slidein 2s;

   }

   @keyframes slidein {

     from {

       -webkit-transform: translateX(0);

              transform: translateX(0);

     }

     to {

       -webkit-transform: translateX(100px);

              transform: translateX(100px);

     }

   }

  */

});

打造一个像抖音一样的流畅 H5，需要前端开发者在性能优化、交互设计、音频处理和跨浏览器兼容等方面全方位发力。希望这些技术点能为你的 H5 开发之旅提供助力，让你的产品在激烈的市场竞争中脱颖而出！

背景

在做项目时，总会遇到UI给出渐变色的卡片或者按钮，但在做高亮的时候，由于没有过渡，显得尤为生硬。

过去的解决方案

在过去，我们如果要实现渐变色的过渡，通常会使用如下几种方法：

但这几种方式都有各自的局限性：

@property新规则

@property规则可以定义一个自定义属性，并且可以指定该属性的语法、是否继承、初始值等。

@property --color {

  syntax: '<color>';

  inherits: false;

  initial-value: #000000;

}

我们只需要把这个自定义属性--color应用到linear-gradient中，在特定的时候改变它的值，非常轻松就可以实现渐变色的过渡了。

我们再看看@property规则中这些属性的含义。

Syntax语法描述符

Syntax用于描述自定义属性的数据类型，必填项，常见值包括：

• <number> 数字（如0，1，2.5）


• <percentage> 百分比（如0%，50%，100%）


• <length> 长度单位（如px，em，rem）


• <color> 颜色值


• <angle> 角度值（如deg，rad）


• <time> 时间值（如s，ms）


• <image> 图片


• <*> 任意类型

Inherits继承描述符

Inherits用于描述自定义属性是否从父元素继承值，必填项：

• true 从父元素继承值


• false 不继承，每个元素独立

Initial-value初始值描述符

Initial-value用于描述自定义属性的初始值，在Syntax为通用时为可选。

兼容性

@property目前仍是实验性规则，但主流浏览器较新版本都已支持。

总结与展望

@property规则的出现，标志着CSS在动态样式控制方面迈出了重要一步。它不仅解决了渐变色过渡的技术难题，更为未来的CSS动画和交互设计开辟了新的可能性。
随着浏览器支持的不断完善，我们可以期待：

• 更丰富的动画效果


• 更简洁的代码实现


• 更好的性能表现