客户那边说，发现了我们项目中有一个高危漏洞，需要修复下。我过去一看，好像不是我们的代码，是三方依赖的pdf.js 突然爆了高危，心想，这怎么可能，这东西都发布好多年了，用的好好的也没说高危啊。老板说，这他不管，客户那边的高危项一定要给解决。好吧，那我先去看看这个高危是个什么。

一番检索，发现真是 pdf.js 的高危漏洞，而且是今年24年4月26日内部报的，编号是 CVE-2024-4367，并且在今年24年4月30日的 4.2.67 版本上已经修复并发布了。

背景

不管如何，先看这个高危项，它允许攻击者在打开恶意 PDF 文件时立即执行任意 JavaScript 代码。主要是利用了pdf.js 中的字体渲染技术上的特性，当识别到当前浏览器支持 new Function("")并且在加载 pdf 资源时配置了 isEvalSupported 为 true（该值默认为true），此时如果我们在 pdf 资源中输入一些内容，用来控制字体渲染的参数，那么就可以在加载pdf 资源时，执行自己想要的任意的 JavaScript 代码，实现对应用系统的攻击。

解决方案

常规方案有三种

• 完全杜绝的话可以直接将依赖的 pdf.js-dist 版本升级到 4.2.67+


• 在使用 pdf.js-dist 的上层代码中将加载 pdf 的参数 isEvalSupported 设置为false


• 禁用使用 eval 和 Function 构造函数

一般如果对兼容性要求不高的话就可以选择第一种，4.2.67 版本的兼容性legacy版本最低能兼容到以下版本的浏览器

但是如果像一些运行比较久远的至少要兼容到5年以上的设备的话，比如说我司产品，要兼容到 ios10.3（也不知道现在除了我司测试，到底还有谁在用 ios10.3），这种情况下，方案1就完全不可行了，那么就可以考虑使用方案2。

方案3与方案2有相似之处，通过重写 eval 和 Function 来控制内部的 isEvalSupported 的值，也可以避免 pdf文件在被渲染时使用 Function 加载 pdf 内容。

// 重写eval和Function

window.eval = function() {

    throw new Error("eval() is disabled");

};



window.Function = function() {

    throw new Error("Function constructor is disabled");

};

// pdf.js 中的Function 检测

function isEvalSupported() {

  try {

    new Function("");

    return true;

  } catch (e) {

    return false;

  }

}



const IsEvalSupportedCached = {

  get value() {

    return shadow(this, "value", isEvalSupported());

  }

};

上述的重写会影响全局的 eval 和 Function，若项目中不使用上述功能，可以考虑。若一些内部使用模块使用了以上两个功能，则不建议如此修改。

但是，我们的客户不认，只认依赖版本，我们的 pdf.js-dist 版本低于 4.2.67，这件事在他们的安全报告中，属于完全不能容忍的高危漏洞，一定要解决的，解释也没用，那现在咋办？总不能不用吧？也不能抛弃大部分的低版本客户吧？

那么这个时候，上述三种方案都不能解决问题了，就要考虑其他的方式了。

那么回归我们程序员的本质，只能 fork-modify-push-publish 了。因为只有内部产品使用，也不需要 publish 了，将本来作为第三方的依赖，转成项目内置模块来使用，这个时候想怎么改就能怎么改了。

模块内置后，客户找的安全检测机构也不知道还能不能检测出来，以防万一，还是得把 pdf.js 关于这条安全漏洞的修复给同步到我们的低版本上来。

修复内容

根据官方发布，这条漏洞主要在 pr[18015] 中修复了，那我们把这条 pr 中有关上述漏洞的部分迁移过来即可。不用把这条内容都迁，比如其中对于cmds的重写部分，我们只需要将和isEvalSupported 相关的部分迁移即可，毕竟此漏洞也是由 isEvalSupported 引起的。

主要修复内容：

• 去除 font_loader.FontFaceObject 中的入参 isEvalSupported 及相关使用该参数的内容


• 如果使用的版本中isEvalSupported 只用来做字体渲染，可以去除整个 pdf.js 中使用了 isEvalSupported 逻辑的相关内容

通过上述修复方式，客户那边应该也能安心了吧？检索不到低于4.2.67版本的 pdf.js 引用，也不会在解析渲染pdf 资源时，出现外部的 pdf文件对系统造成攻击

关于漏洞

总所周知，pdf.js 里不仅对pdf 文件进行了资源解析，也做了资源的渲染，其中就包含了很多字体字形的绘制，而该漏洞就来源于字体绘制时使用了 new Function("")，导致可以在 pdf 文件中写一些能够被解析的内容，在应用系统中使用 pdf.js 去解析 pdf 文件并在绘制时执行任意的 JavaScript 内容，造成对系统的攻击。

// pdf.js font_loader 字体绘制中能够执行任意js内容的部分

if (this.isEvalSupported && FeatureTest.isEvalSupported) {

  const jsBuf = [];

  for (const current of cmds) {

    const args = current.args !== undefined ? current.args.join(",") : "";

    jsBuf.push("c.", current.cmd, "(", args, ");\n");

  }

  // eslint-disable-next-line no-new-func

  console.log(jsBuf.join(""));

  return (this.compiledGlyphs[character] = new Function(

    "c",

    "size",

    jsBuf.join("")

  ));

}

具体的绘制可以在在 PDF.js 中执行任意 JavaScript 中查看，以下为在 pdf 文件中输入任意代码的示例，

通过首先关闭c.transform(...)函数，并利用结尾括号来触发 alert：

/FontMatrix [1 2 3 4 5 (0); alert('foobar')]

将上述内容输入到 pdf 文件中，然后在火狐浏览器（未更新最新版本的 pdf 预览插件版本）中加载该 pdf 文件时的效果如下：

也可以使用 旧版本的 pdf.js 开源的 viewer 打开该文件，有一样的效果。

附录：

可用于攻击的 pdf 文件地址：codeanlabs.com/wp-content/…

CVE-2024-4367 漏洞详细攻击介绍：codeanlabs.com/blog/resear…

CVE-2024-4367 漏洞详情及相关修改 pr：github.com/mozilla/pdf…

pdf.js 相关文档推荐

前端接入 pdfjs-dist 渲染 pdf 文件踩坑

PDF.js 与 WebComponent：打造轻量级 PDF 预览器

前言

前端时间有一个 OCR 的需求，原本考虑调用现成的 OCR 接口，但由于只是做一个我个人使用的工具，花钱购买 OCR 接口显得有些奢侈。于是就想着找找是否有现成的库可以自己部署或直接使用，结果发现了一个可以在纯前端实现 OCR 的库——Tesseract.js。

Tesseract.js

Tesseract.js 是一个基于 Google Tesseract OCR 引擎的 JavaScript 库，利用 WebAssembly 技术将的 OCR 引擎带到了浏览器中。它完全运行在客户端，无需依赖服务器，适合处理中小型图片的文字识别。

主要特点

• 多语言支持：支持多种语言文字识别，包括中文、英文、日文等。


• 跨平台：支持浏览器和 Node.js 环境，灵活应用于不同场景。


• 开箱即用：无需额外依赖后端服务，直接在前端实现 OCR 功能。


• 自定义训练数据：支持加载自定义训练数据，提升特定场景下的识别准确率。

安装

通过 npm 安装

npm install tesseract.js

通过 CDN 引入

<script src="https://unpkg.com/tesseract.js@latest/dist/tesseract.min.js"></script>

基本使用

以下示例展示了如何使用 Tesseract.js 从图片中提取文字：

import Tesseract from 'tesseract.js';



Tesseract.recognize(

  'image.png', // 图片路径

  'chi_sim',   // 识别语言（简体中文）

  {

    logger: info => console.log(info), // 实时输出进度日志

  }

).then(({ data: { text } }) => {

  console.log('识别结果:', text);

});

示例图片

运行结果

可以看到，虽然识别结果不完全准确，但整体准确率较高，能够满足大部分需求。

更多用法

1. 多语言识别

Tesseract.js 支持多语言识别，可以通过字符串或数组指定语言代码：

// 通过字符串的方式指定多语言

Tesseract.recognize('image.png', 'eng+chi_sim').then(({ data: { text } }) => {

  console.log('识别结果:', text);

});



// 通过数组的方式指定多语言

Tesseract.recognize('image.png', ['eng','chi_sim']).then(({ data: { text } }) => {

  console.log('识别结果:', text);

});

eng+chi_sim 表示同时识别英文和简体中文。Tesseract.js 内部会将字符串通过 split 方法分割成数组：

const currentLangs = typeof langs === 'string' ? langs.split('+') : langs;

2. 处理进度日志

可以通过 logger 回调函数查看任务进度：

Tesseract.recognize('image.png', 'eng', {

  logger: info => console.log(info.status, info.progress),

});

输出示例：

3. 自定义训练数据

如果需要识别特殊字符，可以加载自定义训练数据：

const worker = await createWorker('语言文件名', OEM.DEFAULT, {

  logger: info => console.log(info.status, info.progress),

  gzip: false, // 是否对来自远程的训练数据进行 gzip 压缩

  langPath: '/path/to/lang-data' // 自定义训练数据路径

});

[!warning] 注意：

1. 第一个参数为加载自定义训练数据的文件名，不带后缀。


2. 加载自定义训练数据的文件后缀名必须为 .traineddata。


3. 如果文件名不是 .traineddata.gzip，则需要设置 gzip 为 false。

举例：

const worker = await createWorker('my-data', OEM.DEFAULT, {

  logger: info => console.log(info.status, info.progress),

  gzip: false,

  langPath: 'http://localhost:5173/lang',

});

加载效果：

4. 通过前端上传图片

通常，图片是通过前端让用户上传后进行解析的。以下是一个简单的 Vue 3 示例：

<script setup>

import { createWorker } from 'tesseract.js';



async function handleUpload(evt) {

  const files = evt.target.files;

  const worker = await createWorker("chi_sim");

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

    const ret = await worker.recognize(files[i]);

    console.log(ret.data.text);

  } 

}

</script>



<template>

  <input type="file" @change="handleUpload" />

</template>

完整示例

下面提供一个简单的 OCR 示例，展示了如何在前端实现图片上传、文字识别以及图像处理。

代码

<!--

 * @Author: zi.yang

 * @Date: 2024-12-10 09:15:22

 * @LastEditors: zi.yang

 * @LastEditTime: 2025-01-14 08:06:25

 * @Description: 使用 tesseract.js 实现 OCR

 * @FilePath: /vue-app/src/components/HelloWorld.vue

-->

<script setup lang="ts">

import { ref } from 'vue';

import { createWorker, OEM } from 'tesseract.js';



const uploadFileName = ref<string>("");

const imgText = ref<string>("");



const imgInput = ref<string>("");

const imgOriginal = ref<string>("");

const imgGrey = ref<string>("");

const imgBinary = ref<string>("");



async function handleUpload(evt: any) {

  const file = evt.target.files?.[0];

  if (!file) return;

  uploadFileName.value = file.name;

  imgInput.value = URL.createObjectURL(file);

  const worker = await createWorker("chi_sim", OEM.DEFAULT, {

    logger: info => console.log(info.status, info.progress),

  });

  const ret = await worker.recognize(file, { rotateAuto: true }, { imageColor: true, imageGrey: true, imageBinary: true });

  imgText.value = ret.data.text || '';

  imgOriginal.value = ret.data.imageColor || '';

  imgGrey.value = ret.data.imageGrey || '';

  imgBinary.value = ret.data.imageBinary || '';

}



// 占位符 svg

const svgIcon = encodeURIComponent('<svg t="1736901745913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4323" width="140" height="140"><path d="M804.9 243.4c8.1 0 17.1 10.5 17.1 24.5v390.9c0 14-9.1 24.5-17.3 24.5H219.3c-8 0-17.3-10.7-17.3-24.5V267.9c0-14 9.1-24.5 17.3-24.5h585.6m0-80H219.3c-53.5 0-97.3 47-97.3 104.5v390.9c0 57.3 43.8 104.5 97.3 104.5h585.4c53.5 0 97.3-47 97.3-104.5V267.9c0-57.5-43.7-104.5-97.1-104.5z" fill="#5E9EFC" p-id="4324"></path><path d="M678.9 294.5c28 0 50.6 22.7 50.6 50.6 0 28-22.7 50.6-50.6 50.6s-50.6-22.7-50.6-50.6c0-28 22.7-50.6 50.6-50.6z m-376 317.6l101.4-215.7c6-12.8 24.2-12.8 30.2 0l101.4 215.7c5.2 11-2.8 23.8-15.1 23.8H318c-12.2 0-20.3-12.7-15.1-23.8z" fill="#5E9EFC" p-id="4325"></path><path d="M492.4 617L573 445.7c4.8-10.1 19.2-10.1 24 0L677.6 617c4.1 8.8-2.3 18.9-12 18.9H504.4c-9.7 0-16.1-10.1-12-18.9z" fill="#5E9EFC" opacity=".5" p-id="4326"></path></svg>');

const placeholder = 'data:image/svg+xml,' + svgIcon;

</script>



<template>

  <div class="custom-file-upload">

    <label for="file-upload" class="custom-label">选择文件</label>

    <span id="file-name" class="file-name">{{ uploadFileName || '未选择文件' }}</span>

    <input id="file-upload" type="file" @change="handleUpload" />

  </div>



  <div class="row">

    <div class="column">

      <p>输入图像</p>

      <img alt="原图" :src="imgInput || placeholder">

    </div>

    <div class="column">

      <p>旋转，原色</p>

      <img alt="原色" :src="imgOriginal || placeholder">

    </div>

    <div class="column">

      <p>旋转，灰度化</p>

      <img alt="灰度化" :src="imgGrey || placeholder">

    </div>

    <div class="column">

      <p>旋转，二值化</p>

      <img alt="二进制" :src="imgBinary || placeholder">

    </div>

  </div>



  <div class="result">

    <h2>识别结果</h2>

    <p>{{ imgText || '暂无结果' }}</p>

  </div>

</template>



<style scoped>

/* 隐藏原生文件上传按钮 */

input[type="file"] {

  display: none;

}



/* 自定义样式 */

.custom-file-upload {

  display: inline-block;

  cursor: pointer;

  margin-bottom: 30px;

}



.custom-label {

  padding: 10px 20px;

  color: #fff;

  background-color: #007bff;

  border-radius: 5px;

  display: inline-block;

  font-size: 14px;

  cursor: pointer;

}



.custom-label:hover {

  background-color: #0056b3;

}



.file-name {

  margin-left: 10px;

  font-size: 14px;

  color: #555;

}



.row {

  display: flex;

  width: 100%;

  justify-content: space-around;

}



.column {

  width: 24%;

  padding: 5px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f9f9f9;

  text-align: center;

  min-height: 100px;

}



.column > p {

  margin: 0 0 10px 0;

  padding: 5px;

  border-bottom: 1px solid #ccc;

  font-weight: 600;

}



.column > img {

  width: 100%;

}



.result {

  margin-top: 20px;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f9f9f9;

}



.result > h2 {

  margin: 0;

}



.result > p {

  white-space: pre-wrap;

  word-wrap: break-word;

  word-break: break-all;

  font-size: 16px;

  line-height: 1.5;

  color: #333;

  margin: 10px 0;

}

</style>

实现效果

资源加载失败

Tesseract.js 在运行时需要动态加载三个关键文件：Web Worker、wasm 和 训练数据。由于默认使用的是 jsDelivr CDN，国内用户可能会遇到网络加载问题。为了解决这个问题，可以通过指定 unpkg CDN 来加速资源加载：

const worker = await createWorker('chi_sim', OEM.DEFAULT, {

  langPath: 'https://unpkg.com/@tesseract.js-data/chi_sim/4.0.0_best_int',

  workerPath: 'https://unpkg.com/tesseract.js/dist/worker.min.js',

  corePath: 'https://unpkg.com/tesseract.js-core/tesseract-core-simd-lstm.wasm.js',

});

如果需要离线使用，可以将这些资源下载到本地，并将路径指向本地文件即可。

结语

Tesseract.js 是目前前端领域较为成熟的 OCR 库，适合在无需后端支持的场景下快速实现文字识别功能。通过合理的图片预处理和优化，可以满足大部分中小型应用的需求。

相关链接

• Tesseract.js 文档： tesseract-ocr.github.io/


• Tesseract.js Demo： tesseract.projectnaptha.com/

在前端开发中遇到高并发场景时，若不加控制容易出现重复请求，这可能导致接口压力增加、数据异常、用户体验变差等问题。以下是前端防止/解决重复请求的常见方法，按不同场景归类总结：

🌟 一、常见重复请求场景

🚀 二、常用解决方案

✅ 1. 禁用按钮防止多次点击

const [loading, setLoading] = useState(false);



const handleClick = async () => {

  if (loading) return;

  setLoading(true);

  try {

    await fetchData();

  } finally {

    setLoading(false);

  }

};

<Button loading={loading} onClick={handleClick}>提交</Button>

✅ 2. 使用请求缓存 + Map 记录请求状态

原理：在请求发出前先检查是否已有相同请求在进行。

const requestCache = new Map();



const requestWithDeduplication = (url: string, options: any = {}) => {

  if (requestCache.has(url)) {

    return requestCache.get(url); // 复用已有请求

  }



  const req = fetch(url, options).finally(() => {

    requestCache.delete(url); // 请求结束后清除缓存

  });



  requestCache.set(url, req);

  return req;

};

适合统一封装 fetch、axios 请求，避免相同参数的并发请求。

✅ 3. 使用 Axios 的 CancelToken 取消上一次请求

let controller: AbortController | null = null;



const request = async (url: string) => {

  if (controller) {

    controller.abort(); // 取消上一个请求

  }

  controller = new AbortController();



  try {

    const res = await fetch(url, { signal: controller.signal });

    return await res.json();

  } catch (e) {

    if (e.name === 'AbortError') {

      console.log('Request canceled');

    }

  }

};

适合搜索联想、快速切换 tab 等需要 只保留最后一次请求 的场景。

✅ 4. 使用 debounce/throttle 防抖节流

import { debounce } from 'lodash';



const fetchData = debounce((params) => {

  // 实际请求

}, 300);



<input onChange={(e) => fetchData(e.target.value)} />

控制高频输入类请求频率，减少并发请求量。

✅ 5. 后端幂等 + 前端唯一请求 ID（可选高级方案）

• 给每次请求生成唯一 ID（如 UUID），发送给后端。


• 后端对相同 ID 请求只处理一次。


• 前端避免再做复杂状态判断，适合交易、支付类场景。

🧠 小结对照表

如果你告诉我你遇到的具体是哪个页面或场景（例如点击下载、搜索联想、多 tab 切换等），我可以给出更加定制化的解决方案。

欢迎关注微信公众号：FSA全栈行动 👋

BiliBili: http://www.bilibili.com/video/BV1yT…

一、概述

距离 chat_bottom_container 首个可用版本 (0.0.2) 的发布已经过去了 1 个多月，在这期间根据大家的使用反馈，我们也做了一些优化调整，今天就来盘点一下到底做了哪些优化，新增了什么功能，以及一些常见操作。

请注意

• 本篇仅介绍更新的优化及功能，基础使用请查看: Flutter - 实现聊天键盘与功能面板的丝滑切换 🍻


• 截至本篇发布时，最新版本为 0.2.0，可以关注我们的微信公众号 FSA全栈行动 获取最新的资讯

开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

github.com/LinXunFeng/…

二、使用

调整键盘高度监听管理逻辑

0.1.0 版本前，只考虑了页面栈这种常规情况，当键盘高度变化时只处理栈顶的监听。

但其实还有一种常见打破该规则的场景，就是悬浮聊天页，它会一直在页面上，可能为了能快速从悬浮小球展开聊天页面，收起时只是做了隐藏，而不会销毁页面，在这种情况下，它依旧在监听管理里的栈顶，所以在收起后，上一个聊天页的键盘高度监听就会失效。

这个在 0.1.0 版本中得到修复，内部会倒序遍历调用所有的监听回调。

不过你不用担心这一改动会导致其它聊天页面出现多余的视图刷新，因为在键盘高度监听回调里会先判断输入框是否有焦点，若无则直接返回了。

兼容外接键盘

当连接外接键盘时，软键盘会消失，高度会降为 0，这里可以用 iOS 模拟器结合 Toggle Software Keyboard (快捷键: cmd + k) 来模拟连接与断开外接键盘的效果。

隐藏面板

有小伙伴提出，不知道如何程序式的隐藏面板，其实很简单，就两步

hidePanel() {

  // 0.2.0 前

  inputFocusNode.unfocus();

  if (ChatBottomPanelType.none == controller.currentPanelType) return;

  controller.updatePanelType(ChatBottomPanelType.none);

  

  // 0.2.0 后，可以这么写

  controller.updatePanelType(

    ChatBottomPanelType.none,

    forceHandleFocus: ChatBottomHandleFocus.unfocus,

  );

}

自定义底部安全区高度

在默认情况下，chat_bottom_container 在收起模式 (.none) 下会自动帮你添加底部安全区高度，但在一些场景下你可能不希望如此。比如：

• 安卓的底部安全区的高度，很多小伙伴都是简单粗暴的设置个高度了事


• App 首页有底部 BottomNavigationBar，不需要安全区高度

在此，你可以通过将 safeAreaBottom 参数来自定义这个高度，如下设置为 0。

return ChatBottomPanelContainer<PanelType>(

  ...

  safeAreaBottom: 0,

  ...

);

调整键盘面板高度

如示例中位于首页的聊天页面

在键盘弹出时，如下图所示

实际	期望

很明显，我们希望键盘容器高度能够减去外层底部固定的 BottomNavigationBar 高度。

ChatBottomPanelContainer 提供了 changeKeyboardPanelHeight 回调，在回调中可以拿到当前的键盘高度，经过计算后，将合适的键盘容器高度返回即可。

return ChatBottomPanelContainer<PanelType>(

  ...

  changeKeyboardPanelHeight: (keyboardHeight) {

    final renderObj = bottomNavigationBarKey.currentContext?.findRenderObject();

    if (renderObj is! RenderBox) return keyboardHeight;

    return keyboardHeight - renderObj.size.height;

  },

  ...

);

缓存键盘高度

先来看未做键盘高度缓存处理之前，会发生什么？

上图一共进入了三次聊天页

• 第一次是先点击键盘，再切到表情面板，体验起来还是挺不错的。


• 为了避免一闪而过，没有注意到，所以第二次和第三次的操作是一样的，先唤起表情面板，再切到键盘，可以看到在切到键盘时会抖动。

这是因为每次进入聊天页，键盘的高度为初始值 0，在 0.2.0 版本中对此进行了优化，加入了键盘高度缓存逻辑，从而尽量避免该抖动问题的出现。

❗️ 但需要注意的是，假如你卸载重装 App，该缓存会丢失，即你还是有可能会看到最多一次的抖动。

除此之外，你还可以使用这个缓存的键盘高度来实现表情面板与键盘高度保持一致的效果，这样在切换的时候体验上会更好些。😉

Widget _buildEmojiPickerPanel() {

  // 如果键盘高度还没有缓存过，则使用默认高度 300

  double height = 300;

  final keyboardHeight = controller.keyboardHeight;

  if (keyboardHeight != 0) {

    height = keyboardHeight;

  }



  return Container(

    padding: EdgeInsets.zero,

    height: height,

    color: Colors.blue[50],

    child: const Center(

      child: Text('Emoji Panel'),

    ),

  );

}

效果如下

支持表情面板与输入框焦点共存

这也是提升用户体验的重要一点，效果见上图。

先按如下设置你的输入框

bool readOnly = false;

TextEditingController textEditingController = TextEditingController();



...

TextField(

  controller: textEditingController,

  focusNode: inputFocusNode,

  // 为 true 时不显示键盘，默认为 false

  readOnly: readOnly,

  // 获取焦点后显示光标，设置为 true 才不受 readOnly 的影响

  showCursor: true,

),

...

接下来就是切换表情面板的操作

switchToEmojiPanel() {

  readOnly = true;

  // 这里你可以只刷新输入框

  setState(() {});



  // 等待下一帧

  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {

    controller.updatePanelType(

      // 内部切至 other 状态

      ChatBottomPanelType.other,

      // 关联外部的面板类型为表情面板

      data: PanelType.emoji,

      // 输入框获取焦点

      forceHandleFocus: ChatBottomHandleFocus.requestFocus,

    );

  });

}

在 updatePanelType 方法中，如果是切至 .other 状态，是会帮你执行失去焦点操作的，所以这里提供了一个 forceHandleFocus 参数，如果你对方法内部对焦点的处理不满意，你可以使用它来强制指定焦点的处理方式。

三、最后

好了，上述便是该库的更新内容, 惯例附上 GitHub 地址: github.com/LinXunFeng/… ，如果接入上有什么问题，可以在链接中查看 demo 演示代码。

开源不易，如果你也觉得这个库好用，请不吝给个 Star 👍 ，并多多支持！

本篇到此结束，感谢大家的支持，我们下次再见！ 👋

如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号：FSA全栈行动, 这将是对我最大的激励. 公众号不仅有 iOS 技术，还有 Android，Flutter，Python 等文章, 可能有你想要了解的技能知识点哦~

前言

随着技术的发展，人工智能正逐渐渗透到我们生活的方方面面，从前端开发到后端服务，从数据分析到用户体验设计。特别是在前端领域，AI 的应用正成为一个不可忽视的趋势。本文将探讨 AI 在前端领域的应用，并重点介绍一个在浏览器端即可运行的神经网络库——Brain.js。

Brain.js：浏览器端的神经网络库

Brain.js 是一个专为前端开发者设计的 JavaScript 库，它允许开发者在浏览器或 Node.js 环境中轻松创建和训练神经网络。以下是 Brain.js 的几个核心能力：

1. 投喂数据训练

• Brain.js 支持以 JSON 数组的形式投喂数据，这使得准备训练数据变得非常简单。例如，可以准备一个包含输入和期望输出的数据集，用于训练神经网络。

const trainingData = [

  { input: [0, 0], output: { zero: 1 } },

  { input: [0, 1], output: { one: 1 } },

  { input: [1, 0], output: { one: 1 } },

  { input: [1, 1], output: { zero: 1 } }

];

2. 实例化神经网络

• Brain.js 提供了多种类型的神经网络，包括前馈神经网络（Feedforward Neural Networks）和循环神经网络（Recurrent Neural Networks）。对于文本处理和序列数据，推荐使用 brain.recurrent.LSTM()，这是一种长短期记忆网络，特别适合处理时间序列数据。

3. 训练模型

• 训练神经网络非常简单，只需调用 train 方法并传入训练数据即可。Brain.js 会自动调整网络参数，使模型逐步学会从输入数据中提取特征并作出准确的预测。

4. 推理能力

• 训练完成后，可以使用 run 方法对新的输入数据进行推理。例如，在 NLP 场景中，可以使用训练好的模型对用户输入的文本进行情感分析或分类。

5. 结果分类

• Brain.js 支持多分类任务，可以将输入数据归类到多个预定义的类别中。这对于内容推荐、垃圾邮件过滤等应用场景非常有用。

开始使用 Brain.js：

要开始使用 Brain.js，首先需要安装它。如果你是在 Node.js 环境下工作，可以通过 npm 安装：

npm install brain.js

如果你在浏览器中使用，可以直接通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/brain.js">script>

然后可以按照官方文档提供的示例代码来构建你的第一个神经网络模型。

示例1：

// 创建一个神经网络

const network = new brain.NeuralNetwork();



// 用 4 个输入对象训练网络

network.train([

  { input: [0, 0], output: { zero: 1 } },

  { input: [0, 1], output: { one: 1 } },

  { input: [1, 0], output: { one: 1 } },

  { input: [1, 1], output: { zero: 1 } }

]);



// [1, 0] 的预期输出是什么？

const result = network.run([1, 0]);



// 显示 "zero" 和 "one" 的概率

console.log(result["one"] + " " + result["zero"]);

• 使用 new brain.NeuralNetwork() 创建一个神经网络。
• 使用 network.train([examples]) 训练网络。
• examples 表示 4 个输入值及其对应的输出值。
• 使用 network.run([1, 0]) 询问 "[1, 0] 的可能输出是什么？"

网络的输出是：

• one: 93%（接近 1）
• zero: 6%（接近 0）

使用 CSS，颜色可以通过 RGB 设置：

示例2：

颜色	RGB
黑色	RGB(0,0,0)
黄色	RGB(255,255,0)
红色	RGB(255,0,0)
白色	RGB(255,255,255)
浅灰色	RGB(192,192,192)
深灰色	RGB(65,65,65)

下面的代码展示了如何预测颜色的深浅：

// 创建一个神经网络

const net = new brain.NeuralNetwork();



// 用 4 个输入对象训练网络

net.train([

  // 白色 RGB(255, 255, 255)

  { input: [255 / 255, 255 / 255, 255 / 255], output: { light: 1 } },

  // 浅灰色 (192, 192, 192)

  { input: [192 / 255, 192 / 255, 192 / 255], output: { light: 1 } },

  // 深灰色 (64, 64, 64)

  { input: [65 / 255, 65 / 255, 65 / 255], output: { dark: 1 } },

  // 黑色 (0, 0, 0)

  { input: [0, 0, 0], output: { dark: 1 } }

]);



// 深蓝色 (0, 0, 128) 的预期输出是什么？

let result = net.run([0, 0, 128 / 255]);



// 显示 "dark" 和 "light" 的概率

console.log(result["dark"] + " " + result["light"]);

• 使用 new brain.NeuralNetwork() 创建一个神经网络。
• 使用 network.train([examples]) 训练网络。
• examples 表示 4 个输入值及其对应的输出值。
• 使用 network.run([0, 0, 128 / 255]) 询问 "深蓝色的可能输出是什么？"

网络的输出是：

• Dark: 95%
• Light: 4%

示例3：

下面这个例子演示如何使用 Brain.js 创建并训练一个基本的神经网络，该网络学习从摄氏度转换为华氏度：

const brain = require('brain.js');



// 创建一个 LSTM 神经网络实例

const net = new brain.recurrent.LSTM();



// 准备训练数据

const trainingData = [

  { input: '0', output: '32' }, // 0°C -> 32°F

  { input: '100', output: '212' } // 100°C -> 212°F

];



// 训练神经网络

net.train(trainingData, {

  iterations: 20000, // 训练迭代次数

  log: (stats) => console.log(`Training progress: ${stats.iterations}/${stats.error}`) // 训练日志

});



// 使用训练好的模型进行推理

const output = net.run('50'); // 预测 50°C 对应的华氏温度

console.log(output); // 输出结果接近 "122"

其他用于创建神经网络的js库

TensorFlow.js、Synaptic.js、ConvNetJS、Keras.js、Deeplearn.js (现更名为 TensorFlow.js)、 ML.js等。 这些js库作为在浏览器端即可运行的神经网络库，为前端开发者提供了强大的工具，使得我们能够在不深入数学和机器学习理论的前提下，快速实现和应用机器学习功能。无论是简单的分类任务、预测建模，还是更复杂的自然语言处理和图像识别，它们都能帮助你轻松应对。

结语

你发现了吗，通过brain.js，你也可以轻松地将机器学习功能集成到你的项目中。未来，随着模型的小型化、边缘计算的发展以及多模态融合的推进，AI + 前端将更加普及和成熟。

点个赞再走吧~

作者：PW
来源：juejin.cn/post/7438876948762066980

随着互联网的发展，图片作为最直观的内容展示方式逐渐在系统中占用越来越多的版面，但是随之而来的就是系统性能的大幅度下滑。传统的JPEG、PNG、GIF各有优点，也各有弊端，“大一统”的图片格式被需要，于是WebP诞生了。

需求

WebP格式文件产生的原因主要是源于对网络图像传输效率的需求以及现有图像格式在某些方面的局限性。

在现代互联网网页中图片和视频占据了很大比例。为了提供更吸引人的用户体验，网站需要加载大量的高质量图像。

同时智能手机和平板电脑的普及推动了移动互联网的快速发展。在移动设备上，网络速度通常比桌面端慢，且用户的流量是有限的。

而JPEG、PNG和GIF等传统图像格式各有其优点，但也存在不足之处。

例如，JPEG虽然非常适合照片，但仅支持有损压缩且不支持透明度；PNG支持透明度但文件大小通常较大；GIF支持动画但色彩范围有限，且文件体积相对较大。

产生

WebP是一种由Google开发的图像文件格式，旨在提供更高效的图片压缩，适用于网络图像传输和展示。

局限

使用

在线格式转换

程序格式转换

Python：可以使用Pillow库（PIL的一个分支）结合webp的支持来进行转换。

// 安装 pip install Pillow



from PIL import Image

im = Image.open("input.png")

im.save("output.webp", "WEBP")

也可以使用Node.js来转换。

这里使用egg.js作为服务端框架

前端

<template>

    <div class="wrap">

        <a-upload

            v-model:file-list="fileList"

            name="file"

            action="/api/uploadImg"

            :accept="['.jpeg','.png','.jpg','.gif']"

            @change="handleChange"

        >

            <a-button>

                上传文件

            </a-button>

        </a-upload>



        <div class="diff-wrap">

            <div class="old-img">

                <img style="max-width: 400px;max-height: 500px;" :src="oldImg" alt=""/>

            </div>

            <div class="new-img">

                <img style="max-width: 400px;max-height: 500px;" :src="newImg" alt=""/>

            </div>

        </div>

    </div>

</template>



<script setup>

import { ref } from 'vue';

const oldImg = ref('');

const newImg = ref('');



const handleChange = info => {

    const file = info.file;



    // 使用 FileReader 进行本地文件预览（无论上传是否成功）

    const reader = new FileReader();

    reader.onload = () => {

        oldImg.value = reader.result; // 将本地文件的 Base64 赋值给 oldImg

    };

    reader.readAsDataURL(file.originFileObj); // 读取原始文件对象



    // 原有上传完成逻辑可保留用于处理服务器返回结果

    if (file.status === 'done' && file.response) {

        console.log(file)

        newImg.value = file.response.url; // 如果上传成功，使用服务器返回的 URL

    }

};



const fileList = ref([]);

</script>



<style scoped>

.diff-wrap {

    width: 800px;

    margin: 20px auto;

    border: 1px solid #ddd;

    display: flex;

}



.old-img {

    flex: 1;

    height: 500px;

    border-right: 1px solid #ddd;

}



.new-img {

    flex: 1;

    height: 500px;

}

</style>

服务端

使用 Node.js 的图像处理库 sharp 进行格式转换，安装 sharp。

npm install sharp

示例代码

const { Service } = require('egg');

const fs = require('fs');

const path = require('path');

const sharp = require('sharp');



class HomeService extends Service {

    async index() {

        return 'hello world';

    }



    async uploadImg() {

        const { ctx } = this;



        try {

            // 1. 获取上传的文件流

            const stream = await ctx.getFileStream();



            // 2. 检查是否为支持的图片格式（可选）

            const allowedMimes = [ 'image/jpeg', 'image/png', 'image/gif', 'image/webp' ];

            if (!allowedMimes.includes(stream.mime)) {

                throw new Error('Unsupported image format');

            }



            // 3. 定义路径

            const tempInputPath = path.join(this.config.baseDir, 'app/public', `temp_${Date.now()}.tmp`);

            const outputFilename = `converted_${Date.now()}.webp`;

            const outputFilePath = path.join(this.config.baseDir, 'app/public', outputFilename);



            // 4. 写入临时原始文件

            const writeStream = fs.createWriteStream(tempInputPath);

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

                stream.pipe(writeStream);

                stream.on('end', resolve);

                stream.on('error', reject);

            });



            // 5. 使用 sharp 转换为 webp

            await sharp(tempInputPath)

                .webp({ quality: 80 }) // 可设置压缩质量

                .toFile(outputFilePath);



            // 6. 清理临时文件

            fs.unlinkSync(tempInputPath);



            // 7. 返回 WebP 图片地址

            return {

                url: `/public/${outputFilename}`,

                filename: outputFilename,

            };

        } catch (err) {

            ctx.logger.error('Image upload or conversion failed:', err);

            throw new Error('Image processing failed: ' + err.message);

        }

    }

}



module.exports = HomeService;

作者：前端开发爱好者

对于多数前端开发者而言，用 ThreeJS 打造炫酷的数字孪生场景并非易事，需掌握大量专业知识。

如今，一款基于 Vue3、ThreeJS 和 Naive UI 的数字孪生开发框架 ——Astral 3D Editor 正式开源，为 Web3D 开发带来新转机。

Astral 3D Editor 是什么？

Astral 3D Editor 是一款免费开源的三维可视化孪生场景编辑器，主要服务于 Web3D 开发，支持多种常见 3D 模型格式

还具备轻量化 BIM 模型解析及 CAD 图纸预览功能。

Astral 3D Editor 的优势

• 功能丰富 ：支持多种 3D 模型格式，可导入导出多类型模型，方便资源整合。它还提供插件系统，可扩展更多功能。同时，支持在线预览 BIM 模型和 CAD 图纸，为建筑、工程等领域提供便利。粒子系统、动画编辑器等功能一应俱全，满足多样化创作需求。


• 技术先进 ：以 ThreeJS 为底层 3D 渲染库，结合 Vue3 响应式编程和组件化开发，以及 Naive UI 的丰富组件，构建高效稳定的编辑器框架。其场景数据无损压缩和网络分包渐进存取技术，优化了大规模场景的加载效率。


• 开发门槛低 ：作为 3D 低代码创作工具，降低了 Web3D 开发难度，前端开发者无需深入掌握 3D 图形学知识，也能快速创建高质量 3D 场景，提高开发效率。


• 开源友好 ：采用 Apache-2.0 License 开源协议，吸引众多开发者参与，形成活跃开源社区，便于交流分享和共同推动项目发展。

Astral 3D Editor 快速上手

环境准备

在开始使用 Astral 3D Editor 之前，确保已经安装了以下软件和工具：

• Node.js ：建议安装 Node.js ≥ 18.x，可以通过官方链接下载安装。


• Yarn ：一个高效的包管理工具，可以通过官方链接进行安装。

项目克隆与安装

通过 Git 将 Astral 3D Editor 的项目代码克隆到本地：

git clone https://github.com/mlt131220/Astral3DEditor.git

进入项目目录：

cd Astral3DEditor

使用 Yarn 安装项目依赖：

yarn install

项目运行与构建

在开发环境中启动项目：

yarn run dev

这将启动本地开发服务器，通常会自动在浏览器中打开 Astral 3D Editor 的界面，若未自动打开，可在浏览器中访问 http://localhost:3000。

基础操作指南

Astral 3D Editor 的界面简洁直观，主要包含以下几个关键区域：

• 工具栏 ：提供了各种工具按钮，可进行模型导入、视图切换、对象选择和变换等操作。

• 视图区域 ：用于显示和编辑 3D 场景，支持多种视图模式，如透视图、正交图，以及前置、后置、左置、右置等不同视角的切换。

• 属性面板 ：用于查看和编辑当前选中对象的属性，可根据不同对象类型进行相应属性的调整。

Astral 3D Editor 在线编辑器

Astral 3D Editor 的在线编辑器是其一大亮点，提供了便捷的在线 3D 场景创作体验。

在线编辑器无需安装额外软件，只要有浏览器和网络连接，用户就能直接在浏览器中打开: https://editor.astraljs.com/#/，随时随地进行 3D 场景的创作和编辑。

界面设计简洁直观，操作流程简单易懂，降低了学习成本，初学者也能快速上手，轻松进行模型导入、场景编辑、动画添加等操作，迅速构建出想要的 3D 场景。

此外，在线编辑器还具有出色的跨平台兼容性，支持在 Windows、macOS 以及 Linux 等多种操作系统上运行，兼容各大主流浏览器，包括 Chrome、Firefox、Safari 等，用户可自由选择浏览器进行创作。

值得一提的是，在线编辑器支持通过拖拉拽形式创建场景，操作简单直观，大大降低了 3D 场景创作的门槛。

同时，官方还提供了大量可视化案例展示，这些案例不仅丰富多样，而且具有很高的学习价值，可供用户参考学习，帮助用户更好地掌握 3D 场景创作的技巧和方法。

Astral 3D Editor 的开源，为 Web3D 领域注入新活力。

其功能、技术、开发难度、应用场景和开源优势，使其有望在数字孪生领域发挥重要作用，推动 Web3D 技术持续进步。

• Astral 3D Editor Github 地址：https://github.com/mlt131220/Astral3DEditor


• Astral 3D Editor 在线编辑器：https://editor.astraljs.com/#/


• Astral 3D Editor 官方文档：http://editor-doc.astraljs.com/

为啥要写

最能唬人的前端工种是啥？最能出活的前端模块是啥？跟大家讲，真的是搞动画那一块，搞特效那一块，搞3d、webgl那一块。出活，真的出活。

吭哧吭哧一些高深的框架或者死磕一个难啃的技术硬骨头老半天，给不懂技术的人看，他未必能懂，可能他还会心想：”做老半天，啊？就这...要我来我也会（翻白眼🙄）“。真是这样的。

所以说，唬得住人的，绝b有视觉滚动这一块。

搜一些外国佬的一些产品官网，十个有八个是类似这样的。我们熟悉的苹果官网也是这样的。

再多的，我不举例了。

那身为前端的，切图仔的，小卡拉米的，千千万万个我，绝不能说不会。一般人会看到一个官网有这种视差效果，就会打开给你看，问：”你说你是前端，那你会做这个效果吗“。

这个时候，咱一定得把这个ac中间那个字母给支棱起来。不能丢了面。去搜库搜包，借助工具给它搞出来。

不要说不行

要做这种视觉滚动效果，给jym推荐一个库，啥库呢？gsap

这个玩意，能通过最少的代码实现令人惊叹的滚动动画。

外国佬很多网站，甚至我们国内很多官网，搞这种装ac中间那个字母的官网，离不开这个库。

咋用

写原生，不搞框架的：

就用cdn，引就行了：

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

引完这个gsap的库的js呢，完呢，再引入一个插件，叫ScrollTrigger，两者一结合，啥滚动动画能做不出来你说，官网都说了:GSAP的ScrollTrigger插件通过最少的代码实现令人惊叹的滚动动画。

<html lang="en">

  // 每个section都有个背景，和一个h1的文字

  <section>

    <h1>111</h1>

  </section>

  <section>

    <h1>222</h1>

  </section>

  <section>

    <h1>333</h1>

  </section>

  

  <body>

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

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>

  </body>

</html>

上面就把html那一块写完了，接着写js：

const sections = document.querySelectorAll('section'); // 获取页面中所有的<section>元素



sections.forEach(se => {

  // 从初始到目标的动画

  gsap.fromTo(se, {

    backgroundPositionY: `-${window.innerHeight / 2}px`, // 向上偏移（初始背景垂直位置为视口高度一般的负值）

  }, {

    backgroundPositionY: `${window.innerHeight / 2}px`, // 向下偏移（视口高度的一般的正值）

    duration: 3, // 动画持续3s

    ease: 'none', // 线性曲线

  })

})

接下来用到ScrollTrigger插件:

const sections = document.querySelectorAll('section'); // 获取页面中所有的<section>元素



gsap.registerPlugin(ScrollTrigger); // gsap注册插件ScrollTrigger



sections.forEach(se => {

  // 从初始到目标的动画

  gsap.fromTo(se, {

    backgroundPositionY: `-${window.innerHeight / 2}px`, // 向上偏移（初始背景垂直位置为视口高度一般的负值）

  }, {

    backgroundPositionY: `${window.innerHeight / 2}px`, // 向下偏移（视口高度的一般的正值）

    duration: 3, // 动画持续3s

    ease: 'none', // 线性曲线

    scrollTrigger: {

      trigger: se, // 触发的是当前的section

      scrub: true, // 按滚动条去做这个视觉效果

    }

  })

})

总结

好了，如果你觉得神奇，停止往下看，自个儿去官网瞅一眼，别听我在这瞎叨叨，自己去瞅一眼，它啊，不单单是我说的这种视差滚动效果可以做，还有很多动画可以搞，它是一个动画库，我只是说的其一。

动画滴本质实质上就是数字的变动。动来动去就有了动画。这个库帮我们做了很多活，我们拿来用，我们就关注应该怎么变动数字，哪些数字，就完事。前人栽树，后人乘凉，有时候有效地聪明地灵活地有思路地去运用一些库一些包会让事情事半功倍，让效率提升，让时间缩减，让效果更美妙。

特效

往往，玩这些特效的，💰会报得高：

• 视差滚动（Parallax Scrolling）：通过背景层与内容层滚动速度差异营造空间感，适用于官网、营销页等场景，开发成本低但感知价值高。
  
  
  
  • 3D交互（Three.js/WebGL）：如产品展示、虚拟展厅等，结合Canvas或WebGL实现，技术门槛较高但报价可达数万元。
  
  
  • 粒子动画（Particles.js/GSAP）：用于登录页、Loading动画等，开发周期短但视觉效果突出，适合按模块打包报价。
  
  
  • SVG路径动画：适用于图标、数据可视化等场景，通过GreenSock等工具实现，复杂度可控且客户感知专业性强。
  
  
  
  

推荐大家工具，或许对你当前比较恼火的无法着手的特效，可能有思路：GSAP（动画库）、Three.js（3D渲染）、Pixi.js（2D渲染）。

报价策略：优先选择视觉效果显著、开发效率高的特效类型（如视差滚动、3D交互），报价可以溢出点，客户会觉得干了很多活才出这么牛的效果，交付的时候，特别是官网，也不会说太干巴巴，就只是图垒字，字垒图这种。有动画的官网，会使得更多的阅览量，触动更多的购买欲。

最近投稿了阮一峰周刊 to-unocss 的网站。

这个网站可以直接将 style 转换成 UnoCss 语法, 他内部使用了 transform-to-unocss 的库，可以直接将 SFC 页面转换成 UnoCss SFC，这个特性，它能带来的收益就是，可以将你原本 sass、less、class、inline-style 转换成 UnoCss 然后原子化这样 class 能够最大限度被复用，对于 inline-style 被转换后还能带来性能收益，其他转换后能极大程度上减少打包后 css 体积, 当然 transform-to-unocss 底层还有一个 ]transform-to-unocss-core 的支持，能够将一长串的 style 输入，编译成 UnoCss 语法的输出，他已经用在用户量不错的 figma 插件的 fubukicss-tool 之中，当然处理 UnoCss，我同样做了 Tailwind 的一套，如果你是 UnoCss 新手，你一定要试试这个网站 to-unocss ,如果你是 vscode 用户可以按住 Unot 这个插件，他提供了 vscode hover inline-style 提示转换和整个 SFC page 转换的强大能力

视频演示： http://www.bilibili.com/video/BV1HY…

2025 年可以说又是一个跨平台的元年，其中不妨有「鸿蒙 Next」 平台刺激的原因，也有大厂技术积累“达到瓶颈”的可能，又或者“开猿截流、降本增笑”的趋势的影响，2025 年上半年确实让跨平台框架又成为最活跃的时刻，例如：

• Flutter Platform 和 UI 线程合并和Android Impeller 稳定


• React Native 优化 Skia 和发布全新 WebGPU 支持


• Compose Multiplatform iOS 稳定版发布，客户端全平台稳定


• 腾讯 Kotlin 跨平台框架 Kuikly 正式开源


• 字节跨平台框架 Lynx 正式开源


• uni-app x 跨平台框架正式支持鸿蒙


• ····

而本篇也是基于上面的内容，对比当前它们的情况和未来可能，帮助你在选择框架时更好理解它们的特点和差异。

就算你不用，也许面试的时候就糊弄上了？

Flutter

首先 Flutter 大家应该已经很熟悉了，作为在「自绘领域」坚持了这么多年的跨平台框架，相信也不需要再过多的介绍，因为是「自绘」和 「AOT 模式」，让 Flutter 在「平台统一性」和「性能」上都有不错的表现。

开发过程过程中的 hotload 的支持程度也很不错。

而自 2025 以来的一些更新也给 Flutter 带来了新的可能，比如 Flutter Platform 和 UI 线程合并 ，简单来说就是以前 Dart main Thread 和 Platform UI Thread 是分别跑在独立线程，它们的就交互和数据都需要经过 Channel 。

而合并之后，Dart main 和 Platform UI 在 Engine 启动完成后会合并到一个线程，此时 Dart 和平台原生语言就支持通过同步的方式去进行调用，也为 Dart 和 Kotlin/Java，Swift/OC 直接同步互操作在 Framework 提供了进一步基础支持。

当然也带来一些新的问题，具体可见线程合并的相关文章。

另外在当下，其实 Flutter 的核心竞争力是 Impeller ，因为跨平台框架不是系统“亲儿子”，又是自绘方案，那么在性能优化上，特别 iOS 平台，就不得不提到着色器预热或者提前编译。

传统 Skia 需要把「绘制命令」编译成可在 GPU 执行代码的过程，一般叫做着色器编译， Skia 需要「动态编译」着色器，但是 Skia 的着色器「生成/编译」与「帧工作」是按顺序处理，如果这时候着色器编译速度不够快，就可能会出现掉帧（Jank）的情况，这个我们也常叫做「着色器卡顿」

而 Impeller 正是这个背景的产物，简单说，App 所需的所有着色器都在 Flutter 引擎构建时进行离线编译，而不是在应用运行时编译。

这其实才是目前是 Flutter 的核心竞争力，不同于 Skia 需要考虑多场景和平台通用性，需要支持各种灵活的额着色器场景，Impeller 专注于 Flutter ，所以它可以提供更好的专注支持和问题修复，更多可见：着色器预热？为什么 Flutter 需要？

当然 Skia 也是 Google 项目，对于着色器场景也有 Graphite 后端在推进支持，它也在内部也是基于 Impeller 为原型去做的改进，所以未来 Skia 也可以支持部分场景的提前编译。

而在鸿蒙平台，华为针对 Flutter 在鸿蒙的适配，在华为官方过去的分享里，也支持了 Flutter引擎Impeller鸿蒙化，详细可见：b23.tv/KKNDAQB

甚至，Flutter 在类游戏场景支持也挺不错，如果配合 rive 的状态机和自适应，甚至可以开发出很多出乎意料的效果，而官方也有 Flutter 的游戏 SDK 或者 Flame 第三方游戏包支持：

最后，那么 Flutter 的局限性是什么呢？其实也挺多的，例如：

• 文字排版能力不如原生


• PC平台推进交给了 Canonical 团队负责，虽然有多窗口雏形，但是推进慢


• 不支持官方热更新，shorebird 国内稳定性一般


• 内存占用基本最高


• Web 只支持 wasm 路线


• 鸿蒙版本落后主版本太多


• 不支持小程序，虽然有第三方实现，但是力度不大


• ····

所以，Flutter 适合你的场景吗？

React Native

如果你很久没了解过 RN ，那么 2025 年的 RN 会超乎你的想象，可以说 Skia 和 WebGPU 给了它更多的可能。

RN 的核心之一就是对齐 Web 开发体验，其中最重要的就是 0.76 之后 New Architecture 成了默认框架，例如 Fabric, TurboModules, JSI 等能力解决了各种历史遗留的性能瓶颈，比如：

• JSI 让 RN 可以切换 JS 引擎，比如 Chakra、v8、Hermes ，同时允许 JS 和 Native 线程之间的同步相互执行


• 全新的 Fabric 取代了原本的 UI Manager，支持 React 的并发渲染能力，特别是现在的新架构支持 React 18 及更高版本中提供的并发渲染功能，对齐 React 最新版本，比如 Suspense & Transitions：


• Hermes JS 引擎预编译的优化字节码，优化 GC 实现等


• TurboModules 按需加载插件


• ····

另外现在新版 RN 也支持热重载，同时可以更快对齐新 React 特性，例如 React 19 的 Actions、改进的异步处理等 。

而另一个支持就是 RN 在 Skia 和 WebGPU 的探索和支持，使用 Skia 和 WebGPU 不是说 RN 想要变成自绘，而是在比如「动画」和「图像处理」等场景增加了强力补充，比如：

React Native Skia Video 模块，实现了原生纹理（iOS Metal, Android OpenGL）到 React Native Skia 的直接传输，优化了内存和渲染速度，可以被用于视频帧提取、集成和导出等，生态中还有 React Native Vision Camera 和 React Native Video (v7) 等支持 Skia 的模块：

还有是 React Native 开始引入 WebGPU 支持，其效果将确保与 Web 端的 WebGPU API 完全一致，允许开发者直接复制代码示例的同时，实现与 Web Canvas API 对称的 RN Canvas API：

最后，WebGPU 的引入还可以让 React Native 开发者能够利用 ThreeJS 生态，直接引入已有的 3D 库，这让 React Native 的能力进一步对齐了 Web ：

最后，RN 也是有华为推进的鸿蒙适配，会采用 XComponent 对接到 ArkUI 的后端接口进行渲染，详细可见：鸿蒙版 React Native 正式开源 。

而在 PC 领域 RN 也有一定支持，比如微软提供的 windows 和 macOS 支持，社区提供的 web 和 Linux 支持，只是占有并不高，一般忽略。

而在小程序领域，有京东的 Taro 这样的大厂开源支持，整体在平台兼容上还算不错。

当然，RN 最大的优势还在于成熟的 code-push 热更新支持。

那么使用 RN 有什么局限性呢？最直观的肯定是平台 UI 的一致性和样式约束，这个是 OEM 框架的场景局限，而对于其他的，目前存在：

• 第三方库在新旧框架支持上的风险


• RN 版本升级风险，这个相信大家深有体会


• 平台 API 兼容复杂度较高


• 0.77 之后才支持 Google Play 的 16 KB 要求


• 可用性集中在 Android 和 iOS ，鸿蒙适配和维度成本更高


• 小程序能力支持和客户端存在一定割裂


• ····

事实上， RN 是 Cordova 之后我接触的第一个真正意义上的跨平台框架，从我知道它到现在应该有十年了，那么你会因为它的新架构和 WebGPU 能力而选择 RN 么？

更多可见：

• React Native 前瞻式重大更新 Skia & WebGPU


• React Native 0.76，New Architecture 将成为默认模式

Compose Multiplatform

Compose Multiplatform（CMP） 近期的热度应该来自 Compose Multiplatform iOS 稳定版发布 ，作为第二个使用 Skia 的自绘框架，除了 Web 还在推进之外， CMP 基本完成了它的跨平台稳定之路。

Compose Multiplatform（CMP） 是 UI，Kotlin Multiplatform (KMP) 是语言基础。

CMP 使用 Skia 绘制 UI ，甚至在 Android 上它和传统 View 体系的 UI 也不在一个渲染树，并且 CMP 通过 Skiko (Skia for Kotlin) 这套 Kotlin 绑定库，进而抹平了不同架构（Kotlin Native，Kotlin JVM ，Kotlin JS，Kotlin wasm）调用 skia 的差异。

所以 CMP 的优势也来自于此，它可以通过 skia 做到不同平台的 UI 一致性，并且在 Android 依赖于系统 skia ，所以它的 apk 体积也相对较小，而在 PC 平台得益于 JVM 的成熟度，CMP 目前也做到了一定的可用程度。

其中和 Android JVM 模式不同的是，Kotlin 在 iOS 平台使用的是 Kotlin/Native ，Kotlin/Native 是 KMP 在 iOS 支持的关键能力，它负责将 Kotlin 代码直接编译为目标平台的机器码或 LLVM 中间表示 (IR)，最终为 iOS 生成一个标准 .framework ，这也是为什么 Compose iOS 能实现接近原生的性能。

实现鸿蒙支持目前主流方式也是 Kotlin/Native ，不得不说 Kotlin 最强大的核心价值不是它的语法糖，而是它的编译器，当然也有使用 Kotlin/JS 适配鸿蒙的方案。

所以 CMP 最大的优势其实是 Kotlin ，Kotlin 的编译器很强大，支持各种编译过程和产物，可以让 KMP 能够灵活适配到各种平台，并且 Kotlin 语法的优势也让使用它的开发者忠诚度很高。

不过遗憾的是，目前 CMP 鸿蒙平台的适配上都不是 Jetbrains 提供的方案，华为暂时也没有 CMP 的适配计划，目前已知的 CMP/KMP 适配基本是大厂自己倒腾的方案，有基于 KN 的 llvm 方案，也有基于 Kotlin/JS 的低成本方案，只是大家的路线也各不相同。

在小程序领域同样如此。

另外现在 CMP 开发模式下的 hot reload 已经可以使用 ，不过暂时只支持 desktop，原理大概是只支持 jvm 模式。

而在社区上，klibs.io 的发布也补全了 Compose Multiplatform 在跨平台最后一步，这也是 Compose iOS 能正式发布的另外一个原因：

那么聊到这里，CMP 面临的局限性也很明显：

• 鸿蒙适配成本略高，没有官方支持，低成本可能会选择 Kotlin/JS，为了性能的高成本可能会考虑 KN，但是 KN 在 iOS 和鸿蒙的 llvm 版本同步适配也是一个需要衡量的成本


• 小程序领域需要第三方支持


• iOS 平台可能面临的着色器等问题暂无方案，也许未来等待 Skia 的 Graphite 后端


• 在 Android JVM 模式和 iOS 的 KN 模式下，第三方包适配的难度略高


• hotload 暂时只支持 PC


• 桌面内存占用问题-


• 没有官方热更新条件


• kjs、kn、kjvm、kwasm 之间的第三方包兼容支持问题


• ····

相信 2025 年开始，CMP 会是 Android 原生开发者在跨平台的首选之一，毕竟 Kotlin 生态不需要额外学习 Dart 或者 JS 体系，那么你会选择 CMP 吗？

Kuikly

Kuikly 其实也算是 KMP 体系的跨平台框架，只是腾讯在做它的时候还没 CMP ，所以一开始 Kuikly 是通过 KMM 进行实现，而后在 UI 层通过自己的方案完成跨平台。

这其实就是 Kuikly 和 CMP 最大的不同，底层都是 KMP 方案，但是在绘制上 Kuikly 采用的是类 RN 的方式，目前 Kuikly 主要是在 KMP 的基础上实现的自研 DSL 来构建 UI ，比如 iOS 平台的 UI 能力就是 UIkit ，而大家更熟悉的 Compose 支持，目前还处于开发过程中：

SwiftUI 和 Compose 无法直接和 Kuikly 一起使用，但是 Kuikly 可以在 DSL 语法和 UI 组件属性对齐两者的写法，变成一个类 Compose 和 SwiftUI 的 UI 框架，也就是 Compose DSL 大概就是让 Kuikly 更像 Compose ，而不是直接适配 Compose 。

那么，Kuikly 和 RN 之间又什么区别?

第一，Kuikly 支持 Kotlin/JS 和 Kotlin/Native 两种模式，也就是它可以支持性能很高的 Native 模式

第二，Kuikly 实现了自己的一套「薄原生层」，Kuikly 使用“非常薄”的原生层，该原生层只暴露最基本和无逻辑的 UI 组件（原子组件），也就是 Kuikly 在 UI 上只用了最基本的原生层 UI ，真正的 UI 逻辑主要在共享的 Kotlin 代码来实现：

通过将 UI 逻辑抽象到共享的 Kotlin 层，减少平台特定 UI 差异或行为差异的可能性，「薄原生层」充当一致的渲染目标，确保 Kotlin 定义的 UI 元素在所有平台上都以类似的方式显示。

也就是说，Kuikly 虽然会依赖原生平台的控件，但是大部分控件的实现都已经被「提升」到 Kuikly 自己的 Kotlin 共享层，目前 Kuikly 实现了 60% UI 组件的纯 Kotlin 组合封装实现，不需要 Native 提供原子控件 。

另外 Kuikly 表示后续会支持全平台小程序，这也是优势之一。

最后，Kuikly 还在动态化热更新场景， 可以和自己腾讯的热更新管理平台无缝集成，这也是优势之一。

那么 Kuikly 存在什么局限性？首先就是动态化场景只支持 Kotlin/JS，而可动态化类型部分：

• 不可直接依赖平台能力


• 不可使用多线程和协程


• 不可依赖内置部分

其他的还有：

• UI 不是 CMP ，使用的是类 RN 方式，所谓需要稍微额外理解成本


• 不支持 PC 平台


• 基于原生 OEM，虽然有原子控件，但是还是存在部分不一致情况


• 在原有 App 集成 Kuikly ，只能把它简单当作如系统 webview 的概念来使用

另外，腾讯还有另外一个基于 CMP 切适配鸿蒙的跨平台框架，只是何时开源还尚不明确

那么，你会为了小程序和鸿蒙而选择 Kuikly 吗？

更多可见：腾讯 Kuikly 正式开源

Lynx

如果说 Kuikly 是一个面向客户端的全平台框架，那么 Lynx 就是一个完全面向 Web 前端的跨平台全家桶。

目前 Lynx 开源的首个支持框架就是基于 React 的 ReactLynx，当然官方也表示Lynx 并不局限于 React，所以不排除后续还有 VueLynx 等其他框架支持，而 Lynx 作为核心引擎支持，其实并不绑定任何特定前端框架，只是当前你能用的暂时只有 ReactLynx ：

而在实现上，源代码中的标签，会在运行时被 Lynx 引擎解析，翻译成用于渲染的 Element，嵌套的 Element 会组成的一棵树，从而构建出UI界面：

所以从这里看，初步开源的 Lynx 是一个类 RN 框架，不过从官方的介绍“选择在移动和桌面端达到像素级一致的自渲染” ，可以看出来宣传中可以切换到自渲染，虽然暂时还没看到。

而对于 Lynx 主要的技术特点在于：

• 「双线程架构」，思路类似 react-native-reanimated ，JavaScript 代码会在「主线程」和「后台线程」两个线程上同时运行，并且两个线程使用了不同的 JavaScript 引擎作为其运行时：


• 另外特点就是 PrimJS ，一个基于 QuickJS 深度定制和优化的 JavaScript 引擎，主要有模板解释器（利用栈缓存和寄存器优化）、与 Lynx 对象模型高效集成的对象模型（减少数据通信开销）、垃圾回收机制（非 QuickJS 的引用计数 RC，以提升性能和内存分析能力）、完整实现了 Chrome DevTools Protocol (CDP) 以支持 Chrome 调试器等


• “Embedder API” 支持直接与原生 API 交互 ，提供多平台支持

所以从 Lynx 的宏观目标来看，它即支持类 RN 实现，又有自绘计划，同时除了 React 模式，后期还适配 Vue、Svelte 等框架，可以说是完全针对 Web 开发而存在的跨平台架构。

另外支持平台也足够，Android、iOS、鸿蒙、Web、PC、小程序都在支持列表里。

最后，Lynx 对“即时首帧渲染 (IFR)”和“丝滑流畅”交互体验有先天优势，开发双线程模型及主线程脚本 (MTS) 让 Lynx 的启动和第一帧渲染速度还挺不错，比如：

• Lynx 主线程负责处理直接处理屏幕像素渲染的任务，包括：执行主线程脚本、处理布局和渲染图形等等，比如负责渲染初始界面和应用后续的 UI 更新，让用户能尽快看到第一屏内容


• Lynx 的后台线程会运行完整的 React 运行时，处理的任务不直接影响屏幕像素的显示，包括在后台运行的脚本和任务(生命周期和其他副作用)，它们与主线程分开运行，这样可以让主线程专注于处理用户交互和渲染，从而提升整体性能

而在多平台上，Lynx 是自主开发的渲染后端支持 Windows、tvOS、MacOS 和 HarmonyOS ，但是不确实是否支持 Linux：

那 Lynx 有什么局限性？首先肯定是它非常年轻，虽然它的饼很大，但是对应社区、生态系统、第三方库等都还需要时间成长。

所以官方也建议 Lynx 最初可能更适合作为模块嵌入到现有的原生应用中，用于构建特定视图或功能，而非从零开始构建一个完整的独立应用 。

其次就是对 Web 前端开发友好，对客户端而言学习成本较高，并且按照目前的开源情况，除了 Android、iOS 和 Web 的类 RN 实现外，其他平台的支持和自绘能力尚不明确：

最后，Lynx 的开发环境最好选 macOS，关于 Windows 和 Linux 平台目前工具链兼容性还需要打磨。

那么，总结下来，Lynx 应该会是前端开发的菜，那你觉得 Lynx 是你的选择么？

更多可见：字节跨平台框架 Lynx 开源

uni-app x

说到 uni-app 大家第一印象肯定还是小程序，而虽然 uni-app 也可以打包客户端 app，甚至有基于 weex 的 nvue 支持，但是其效果只能说是“一言难尽”，而这里要聊的 uni-app x ，其实就是 DCloud 在跨平台这两年的新尝试。

具体来说，就是 uni-app 不再是运行在 jscore 的跨平台框架，它是“基于 Web 技术栈开发，运行时编译为原生代码”的模式，相信这种模式大家应该也不陌生了，简单说就是：js（uts） 代码在打包时会直接编译成原生代码：

甚至极端一点说，uni-app x 可以不需要单独写插件去调用平台 API，你可以直接在 uts 代码里引用平台原生 API ，因为你的代码本质上也是会被编译成原生代码，所以 uts ≈ native code ，只是使用时需要配置上对应的条件编译(如 APP-ANDROID、APP-IOS )支持：

import Context from "android.content.Context";

import BatteryManager from "android.os.BatteryManager";

•

import { GetBatteryInfo, GetBatteryInfoOptions, GetBatteryInfoSuccess, GetBatteryInfoResult, GetBatteryInfoSync } from '../interface.uts'

import IntentFilter from 'android.content.IntentFilter';

import Intent from 'android.content.Intent';

•

import { GetBatteryInfoFailImpl } from '../unierror';

•

/**

 * 获取电量

 */

export const getBatteryInfo : GetBatteryInfo = function (options : GetBatteryInfoOptions) {

  const context = UTSAndroid.getAppContext();

  if (context != null) {

    const manager = context.getSystemService(

      Context.BATTERY_SERVICE

    ) as BatteryManager;

    const level = manager.getIntProperty(

      BatteryManager.BATTERY_PROPERTY_CAPACITY

    );

•

    let ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);

    let batteryStatus = context.registerReceiver(null, ifilter);

    let status = batteryStatus?.getIntExtra(BatteryManager.EXTRA_STATUS, -1);

    let isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING || status == BatteryManager.BATTERY_STATUS_FULL;

•

    const res : GetBatteryInfoSuccess = {

      errMsg: 'getBatteryInfo:ok',

      level,

      isCharging: isCharging

    }

    options.success?.(res)

    options.complete?.(res)

  } else {

    let res = new GetBatteryInfoFailImpl(1001);

    options.fail?.(res)

    options.complete?.(res)

  }

}

•

​

比如上方代码，通过 import BatteryManager from "android.os.BatteryManager" 可以直接导入使用 Android 的 BatteryManager 对象。

可以看到，在 uni-app x 你是可以“代码混写”的，所以与传统的 uni-app 不同，uni-app 依赖于定制 TypeScript 的 uts 和 uvue 编译器：

• uts 和 ts 有相同的语法规范，并支持绝大部分 ES6 API ，在编译时会把内置的如Array、Date、JSON、Map、Math、String 等内置对象转为 Kotlin、Swift、ArkTS 的对象等，所以也不需要有 uts 之类的虚拟机，另外 uts 编译器在处理特定平台时，还会调用相应平台的原生编译器，例如 Kotlin 编译器和 Swift 编译器


• uvue 编译器基于 Vite 构建，并对它进行了扩展，大部分特性（如条件编译）和配置项（如环境变量）与 uni-app 的 Vue3 编译器保持一致，并且支持 less、sass、ccss 等 CSS 预处理器，例如 uvue 的核心会将开发者使用 Vue 语法和 CSS 编写的页面，编译并渲染为 ArkUI

而在 UI 上，目前除了编译为 ArkUI 之外，Android 和 iOS 其实都是编译成原生体系，目前看在 Android 应该是编译为传统 View 体系而不是 Compose ，而在 iOS 应该也是 UIKit ，按照官方的说法，就是性能和原生相当。

所以从这点看，uni-app x 是一个类 RN 的编译时框架，所以，它的局限性问题也很明显，因为它的优势在于编译器转译得到原生性能，但是它的劣势也是在于转译：

• 不同平台翻译成本较高，并不支持完整的语言，阉割是必须的，API 必然需要为了转译器而做删减，翻译后的细节对齐于优化会是最大的挑战


• iOS 平台还有一些骚操作，保留了可选 js 老模式和新 swift 模式，核心是因为插件生态，官方表示 js 模式可以大幅降低插件生态的建设难度， 插件作者只需要特殊适配 Android 版本，在iOS和Web端仍使用 ts/js 库，可以快速把 uni-app/web 的生态迁移到 uni-app x


• 生态支持割裂，uni-app 和 uni-app x 插件并不通用


• 不支持 PC


• HBuilderX IDE


• ·····

那么，你觉得 uni-app x 会是你跨平台选择之一么？

更多可见：uni-app x 正式支持鸿蒙

最后

最后，我们简单做个总结：

什么，你居然看完了？事实上我写完都懒得查错别字了，因为真的太长了。

前端何时能出个"秦始皇"一统天下？我是真学不动啦！

引言

前端开发的世界，就像历史上的战国时期一样，各种框架、库、工具层出不穷，形成了一个百花齐放但也令人眼花缭乱的局面。

而且就因为百家争鸣，导致各种鄙视链出现

比如 React 和 Vue 互喷

v：你react 这么难用，不如我vue 简单

r：你一点都不灵活，我想咋用咋用

v：你useEffect 心智负担太重，一点都好用

r：啥心智负担，那是你太笨了，我就喜欢这种什么都掌握在自己手里的感觉

v：你内部更是混乱，一个状态管理就那么多种 啥redux、mobx、recoil。。。。不像我们一个pinia 走天下

r：你管我 我想用哪个用哪个，你还说我，你内部对一个 用ref还是用reactive 都吵得不可开交！

......

1. 框架之争

• React: 由Facebook维护的一个用于构建用户界面的JavaScript库。其设计理念是通过组件化的方式简化复杂的UI开发。
  
  
  
  
  • 官网: reactjs.org/
  
  
  • GitHub: github.com/facebook/re…
  
  
  • GitHub Stars: 超过235k（截至2025年4月）
  
  
  
  


• Vue.js: 一种渐进式JavaScript框架，非常适合用来构建单页应用。Vue的核心库只关注视图层，易于上手。
  
  
  
  
  • 官网: vuejs.org/
  
  
  • GitHub: github.com/vuejs/vue
  
  
  • GitHub Stars: 约209k（截至2025年4月）
  
  
  
  


• Angular: Google支持的一个开源Web应用框架，适用于大型企业级项目。它提供了一个全面的解决方案来创建动态Web应用程序。
  
  
  
  
  • 官网: angular.io/
  
  
  • GitHub: github.com/angular/ang…
  
  
  • GitHub Stars: 大约97.5k（截至2025年4月）
  
  
  
  


• Solid.js: 一个专注于性能和简单性的声明式UI库，采用细粒度的响应式系统，提供了极高的运行效率。
  
  
  
  
  • 官网: http://www.solidjs.com/
  
  
  • GitHub: github.com/solidjs/sol…
  
  
  • GitHub Stars: 约33.3k（截至2025年4月）
  
  
  
  


• Svelte: 一种新兴的前端框架，通过在编译时将组件转换为高效的原生代码，从而避免了运行时开销。
  
  
  
  
  • 官网: svelte.dev/
  
  
  • GitHub: github.com/sveltejs/sv…
  
  
  • GitHub Stars: 约82.3k（截至2025年4月）
  
  
  
  


• Ember.js: 一个旨在帮助开发者构建可扩展的Web应用的框架，尤其适合大型团队协作。
  
  
  
  
  • 官网: emberjs.com/
  
  
  • GitHub: github.com/emberjs/emb…
  
  
  • GitHub Stars: 约22.6k（截至2025年4月）
  
  
  
  

2. 样式处理满花齐放

样式处理方面可以进一步细分，包括CSS预处理器、CSS-in-JS、Utility-First CSS框架以及CSS Modules等。

• CSS预处理器
  
  
  
  
  • Sass: 提供变量、嵌套规则等高级功能，极大地提高了CSS代码的可维护性。
    
    
    
    • 官网: sass-lang.com/
    
    
    • GitHub: github.com/sass/sass
    
    
    • GitHub Stars: 约15.2k（截至2025年4月）
    
    
    
    
  
  
  • Less: 另一种流行的CSS预处理器，支持类似的功能但语法稍有不同。
    
    
    
    • 官网: lesscss.org/
    
    
    • GitHub: github.com/less/less.j…
    
    
    • GitHub Stars: 约17k（截至2025年4月）
    
    
    
    
  
  
  • Stylus: 一款灵活且功能强大的CSS预处理器，允许省略括号和分号等符号，使代码更加简洁。
    
    
    
    • 官网: stylus-lang.com/
    
    
    • GitHub: github.com/stylus/styl…
    
    
    • GitHub Stars: 约11.2k（截至2025年4月）
    
    
    
    
  
  
  
  


• CSS-in-JS
  
  
  
  
  • styled-components: 允许你通过JavaScript编写CSS，并将样式直接附加到组件上。
    
    
    
    • 官网: styled-components.com/
    
    
    • GitHub: github.com/styled-comp…
    
    
    • GitHub Stars: 约40.8k（截至2025年4月）
    
    
    
    
  
  
  • Emotion: 类似于styled-components，但提供了更多的灵活性和性能优化。
    
    
    
    • 官网: emotion.sh/
    
    
    • GitHub: github.com/emotion-js/…
    
    
    
    
  
  
  • GitHub Stars: 约17.7k（截至2025年4月）
  
  
  
  


• 原子化css
  
  
  
  
  • Tailwind CSS: 一种实用优先的CSS框架，让你可以通过低级实用程序类构建定制设计。
    
    
    
    
    • 官网: tailwindcss.com/
    
    
    • GitHub: github.com/tailwindlab…
    
    
    • GitHub Stars: 约87.2k（截至2025年4月）
    
    
    
    
  
  
  • UnoCSS: 新一代的原子化CSS引擎，旨在提供极致的性能和灵活性。
    
    
    
    
    • 官网: uno.antfu.me/
    
    
    • GitHub: github.com/unocss/unoc…
    
    
    • GitHub Stars: 约17.5k（截至2025年4月）
    
    
    
    
  
  
  • Windi CSS: 一个基于Tailwind CSS的即时按需CSS框架，提供了更快的开发体验。
    
    
    
    
    • 官网: windicss.org/
    
    
    • GitHub: github.com/windicss/wi…
    
    
    
    
  
  
  • GitHub Stars: 约6.5k（截至2025年4月）
  
  
  
  

3. 构建工具五花八门

构建工具是现代前端开发不可或缺的一部分，它们负责将源代码转换为生产环境可用的形式，并优化性能。

• Webpack: 一个模块打包工具，广泛用于复杂的前端项目中。它支持多种文件类型的处理，并具有强大的插件生态。
  
  
  
  
  • 官网: webpack.js.org/
  
  
  • GitHub: github.com/webpack/web…
  
  
  • GitHub Stars: 约65.2k（截至2025年4月）
  
  
  
  


• Vite: 由Vue.js作者尤雨溪开发的下一代前端构建工具，以其极快的冷启动速度和热更新闻名。
  
  
  
  
  • 官网: vitejs.dev/
  
  
  • GitHub: github.com/vitejs/vite
  
  
  • GitHub Stars: 约72.1k（截至2025年4月）
  
  
  
  


• Rollup: 一个专注于JavaScript库的打包工具，特别适合构建小型库或框架。
  
  
  
  
  • 官网: rollupjs.org/
  
  
  • GitHub: github.com/rollup/roll…
  
  
  • GitHub Stars: 约25.7k（截至2025年4月）
  
  
  
  


• Rspack: 一个基于Rust实现的高性能构建工具，兼容Webpack配置，旨在提供更快的构建速度。
  
  
  
  
  • 官网: rspack.dev/
  
  
  • GitHub: github.com/web-infra-d…
  
  
  • GitHub Stars: 约11.3k（截至2025年4月）
  
  
  
  


• esbuild: 一个用Go语言编写的极速打包工具，专为现代JavaScript项目设计。
  
  
  
  
  • 官网: esbuild.github.io/
  
  
  • GitHub: github.com/evanw/esbui…
  
  
  • GitHub Stars: 约38.8k（截至2025年4月）
  
  
  
  


• Turbopack: 由Next.js团队推出的下一代构建工具，号称比Webpack快700倍。
  
  
  
  
  • 官网: turbo.build/docs
  
  
  • GitHub: github.com/vercel/turb…
  
  
  • GitHub Stars: 约27.5k（截至2025年4月）
  
  
  
  


• Rolldown: 一个基于Rust的Rollup替代方案，旨在提供更快的构建速度和更高的性能。
  
  
  
  
  • 官网: rolldown.dev/
  
  
  • GitHub: github.com/rolldown/ro…
  
  
  • GitHub Stars: 约10.7k（截至2025年4月）
  
  
  
  

对比分析：

• Webpack 是目前最成熟的构建工具，生态系统庞大，但配置复杂度较高。


• Vite 凭借其快速的开发体验迅速崛起，尤其在中小型项目中表现优异。


• Rollup 更适合轻量级项目或库的构建，虽然社区规模较小，但在特定场景下非常高效。


• Rspack 和 esbuild 利用高性能语言（如Rust和Go）实现了极快的构建速度，适合对性能要求较高的项目。


• Turbopack 是新兴工具，主打极速构建，未来可能成为Webpack的有力竞争者。


• Rolldown 提供了另一种基于Rust的高速构建解决方案，特别针对Rollup用户群体。

4. 包管理工具逐步更新

• npm: Node.js默认的包管理器，允许开发者轻松地安装、共享和分发代码。
  
  
  
  
  • 官网: http://www.npmjs.com/
  
  
  • GitHub: github.com/npm/cli
  
  
  
  


• cnpm: npm在中国的镜像站，由于网络问题，很多中国开发者更倾向于使用cnpm。
  
  
  
  
  • GitHub: github.com/cnpm/cnpm
  
  
  
  


• Yarn: Facebook推出的一个快速、可靠、安全的依赖管理工具。
  
  
  
  
  • 官网: yarnpkg.com/
  
  
  • GitHub: github.com/yarnpkg/yar…
  
  
  
  


• pnpm: 快速且节省磁盘空间的包管理器。
  
  
  
  
  • 官网: pnpm.io/
  
  
  • GitHub: github.com/pnpm/pnpm
  
  
  
  

5. 状态管理百家争鸣

状态管理是前端开发中的重要组成部分，它帮助开发者有效地管理应用的状态变化。

• Redux: 经典的Flux实现，广泛用于React生态系统中，适合管理大型应用的状态。
  
  
  
  
  • 官网: redux.js.org/
  
  
  • GitHub: github.com/reduxjs/red…
  
  
  • GitHub Stars: 约61.1k（截至2025年4月）
  
  
  
  


• MobX: 响应式状态管理库，通过可观察对象实现自动化的状态更新。
  
  
  
  
  • 官网: mobx.js.org/
  
  
  • GitHub: github.com/mobxjs/mobx
  
  
  • GitHub Stars: 约27.8k（截至2025年4月）
  
  
  
  


• Zustand: 轻量级的状态管理解决方案，API简单且易于使用。
  
  
  
  
  • 官网: zustand-demo.pmnd.rs/
  
  
  • GitHub: github.com/pmndrs/zust…
  
  
  • GitHub Stars: 约51.7k（截至2025年4月）
  
  
  
  


• Jotai: 原子化状态管理库，专注于轻量级和灵活性。
  
  
  
  
  • 官网: jotai.org/
  
  
  • GitHub: github.com/pmndrs/jota…
  
  
  • GitHub Stars: 约19.8k（截至2025年4月）
  
  
  
  


• Recoil: Facebook推出的实验性状态管理库，专为React设计。
  
  
  
  
  • 官网: recoiljs.org/
  
  
  • GitHub: github.com/facebookexp…
  
  
  • GitHub Stars: 约19.6k（截至2025年4月）
  
  
  
  


• Pinia: Vue的下一代状态管理库，设计简洁且与Vue 3完美集成。
  
  
  
  
  • 官网: pinia.vuejs.org/
  
  
  • GitHub: github.com/vuejs/pinia
  
  
  • GitHub Stars: 约13.8k（截至2025年4月）
  
  
  
  

6. JavaScript运行时环境都有好几种

JavaScript运行时环境是现代前端和后端开发的核心部分，它决定了代码如何被解析和执行。以下是几种主流的JavaScript运行时环境：

• Node.js:
  
  
  
  
  • Node.js 是一个基于Chrome V8引擎的JavaScript运行时，广泛用于构建服务器端应用、命令行工具以及全栈开发。
  
  
  • 它拥有庞大的生态系统，npm作为其默认包管理器，已经成为全球最大的软件注册表。
  
  
  • 官网: nodejs.org/
  
  
  • GitHub: github.com/nodejs/node
  
  
  • GitHub Stars: 约111k（截至2025年4月）
  
  
  
  


• Deno:
  
  
  
  
  • Deno 是由Node.js的原作者Ryan Dahl创建的一个现代化JavaScript/TypeScript运行时，旨在解决Node.js的一些设计缺陷。
  
  
  • 它内置了对TypeScript的支持，并提供了更安全的权限模型（如文件系统访问需要显式授权）。
  
  
  • Deno还集成了标准库，无需依赖第三方模块即可完成许多常见任务。
  
  
  • 官网: deno.land/
  
  
  • GitHub: github.com/denoland/de…
  
  
  • GitHub Stars: 约103k（截至2025年4月）
  
  
  
  


• Bun:
  
  
  
  
  • Bun 是一个新兴的JavaScript运行时，旨在提供更快的性能和更高效的开发体验。
  
  
  • 它不仅可以用作运行时环境，还可以替代npm、Yarn等包管理工具，同时支持ES Modules和CommonJS。
  
  
  • Bun的目标是成为Node.js和Deno的强大竞争者，特别适合高性能需求的场景。
  
  
  • 官网: bun.sh/
  
  
  • GitHub: github.com/oven-sh/bun
  
  
  • GitHub Stars: 约77.5k（截至2025年4月）
  
  
  
  

对比分析：

• Node.js 是目前最成熟且广泛应用的JavaScript运行时，尤其在企业级项目中占据主导地位。


• Deno 提供了更现代化的设计理念，特别是在安全性、TypeScript支持和内置工具方面表现突出。


• Bun 是一个新兴的选手，凭借其极速的性能和多功能性迅速吸引了开发者关注，未来潜力巨大。

7. 跨平台开发

随着移动设备和多终端生态的普及，跨平台开发成为现代应用开发的重要方向。以下是几种主流的跨平台开发工具和技术：

• React Native:
  
  
  
  
  • React Native 是由Facebook推出的一个基于React的跨平台移动应用开发框架，允许开发者使用JavaScript和React构建原生性能的iOS和Android应用。
  
  
  • 它提供了丰富的社区支持和插件生态，适合需要快速迭代的项目。
  
  
  • 官网: reactnative.dev/
  
  
  • GitHub: github.com/facebook/re…
  
  
  • GitHub Stars: 约122k（截至2025年4月）
  
  
  
  


• Flutter:
  
  
  
  
  • Flutter 是由Google开发的一个开源UI框架，使用Dart语言构建高性能的跨平台应用。
  
  
  • 它通过自绘引擎渲染UI，提供了一致的用户体验，并支持Web、iOS、Android以及桌面端开发。
  
  
  • 官网: flutter.dev/
  
  
  • GitHub: github.com/flutter/flu…
  
  
  • GitHub Stars: 约170k（截至2025年4月）
  
  
  
  


• Electron:
  
  
  
  
  • Electron 是一个用于构建跨平台桌面应用的框架，基于Node.js和Chromium，广泛应用于桌面端应用开发。
  
  
  • 它允许开发者使用Web技术（HTML、CSS、JavaScript）构建功能强大的桌面应用，但可能会导致较大的应用体积。
  
  
  • 官网: http://www.electronjs.org/
  
  
  • GitHub: github.com/electron/el…
  
  
  • GitHub Stars: 约116k（截至2025年4月）
  
  
  
  


• Tauri:
  
  
  
  
  • Tauri 是一个轻量级的跨平台桌面应用框架，旨在替代Electron，提供更小的应用体积和更高的安全性。
  
  
  • 它利用系统的原生Webview来渲染UI，同时支持Rust作为后端语言，从而实现更高的性能。
  
  
  • 官网: tauri.app/
  
  
  • GitHub: github.com/tauri-apps/…
  
  
  • GitHub Stars: 约91.5k（截至2025年4月）
  
  
  
  


• Capacitor:
  
  
  
  
  • Capacitor 是由Ionic团队推出的一个跨平台工具，允许开发者将Web应用封装为原生应用。
  
  
  • 它支持iOS、Android和Web，并提供了丰富的插件生态，方便调用原生设备功能。
  
  
  • 官网: capacitorjs.com/
  
  
  • GitHub: github.com/ionic-team/…
  
  
  • GitHub Stars: 约13.1k（截至2025年4月）
  
  
  
  


• UniApp:
  
  
  
  
  • UniApp 是一个基于 Vue.js 的跨平台开发框架，能够将代码编译到多个平台，包括微信小程序、H5、iOS、Android以及其他小程序（如支付宝小程序、百度小程序等）。
  
  
  • 它的优势在于一次编写，多端运行，特别适合需要覆盖多个小程序平台的项目。
  
  
  • 官网: uniapp.dcloud.io/
  
  
  • GitHub: github.com/dcloudio/un…
  
  
  • GitHub Stars: 约40.6k（截至2025年4月）
  
  
  
  

对比分析：

• React Native 和 Flutter 是移动端跨平台开发的两大主流选择，分别适合熟悉JavaScript和Dart的开发者。


• Electron 是桌面端跨平台开发的经典解决方案，虽然体积较大，但易于上手。


• Tauri 提供了更轻量化的桌面端开发方案，适合对性能和安全性有更高要求的项目。


• Capacitor 则是一个灵活的工具，特别适合将现有的Web应用快速迁移到移动端。


• UniApp 非常适合需要覆盖多种小程序平台的项目，尤其在国内的小程序生态中表现出色。

结论

你看我这还是只是列举了一部分，都这么多了，学前端的是真的命苦啊，真心学不动了。

而且最近 尤雨溪宣布成立 VoidZero 说是一代JavaScript工具链，能够统一前端 开发构建工具，如果真能做到，真是一件令人振奋的事情，希望尤雨溪能做到跟 spring 一样统一java 天下 把前端的天下给统一了，大家觉得有可能么？

前言

平时在逛掘金和少数派等网站的时候，经常有跳转外链的场景，此时基本都会被中转到一个官方提供的提示页面。

掘金：

知乎：

少数派：

这种官方脱裤子放屁的行为实在令人恼火。是、是、是、我当然知道这么做有很多冠冕堂皇的理由，比如：

• 防止钓鱼攻击


• 增强用户意识


• 品牌保护


• 遵守法律法规


• 控制流量去向

（以上5点是 AI 告诉我的理由）

但是作为混迹多年的互联网用户，什么链接可以点，什么最好不要点(悄悄的点) 我还是具备判断能力的。

互联网的本质就是自由穿梭，一个 A 标签就可以让你在整个互联网翱翔，现在你每次起飞的时候都被摁住强迫你阅读一次免责声明，多少是有点恼火的。

解决方案

这些中转站的实现逻辑基本都是将目标地址挂在中转地址的target 参数后面，在中转站做免责声明，然后点击继续跳转才跳到目标网站。

掘金:

https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.apple.com%2Fcn%2Fdesign%2Fhuman-interface-guidelines%2Fapp-icons%23macOS/

少数派：
https://sspai.com/link?target=https%3A%2F%2Fgeoguess.games%2F

知乎：
https://link.zhihu.com/?target=https%3A//asciidoctor.org/

所以我们就可以写一个浏览器插件，在这些网站中，找出命中外链的 A 标签，替换掉它的 href 属性(只保留 target 后面的真实目标地址)。

核心函数：

function findByTarget() {

  if (!hostnames.includes(location.hostname)) return;

  const linkKeyword = "?target=";

  const aLinks = document.querySelectorAll(

    `a[href*="${linkKeyword}"]:not([data-redirect-skipper])`

  );

  if (!aLinks) return;

  aLinks.forEach((a) => {

    const href = a.href;

    const targetIndex = href.indexOf(linkKeyword);

    if (targetIndex !== -1) {

      const newHref = href.substring(targetIndex + linkKeyword.length);

      a.href = decodeURIComponent(newHref);

      a.setAttribute("data-redirect-skipper", "true");

    }

  });

}

为此我创建了一个项目仓库 redirect-skipper ，并且将该浏览器插件发布在谷歌商店了 安装地址 。

安装并启用这个浏览器插件之后，在这些网站中点击外链就不会看到中转页面了，而是直接跳转到目标网站。

因为我目前明确需要修改的就是这几个网站，如果大家愿意使用这个插件，且有其他网站需要添加到替换列表的，可以给 redirect-skipper 仓库 提PR。

如果需要添加的网站的转换规则是和 findByTarget 一致的，那么仅需更新 sites.json 文件即可。

如果需要添加的网站的转换规则是独立的，那么需要更新插件代码，合并之后，由我向谷歌商店发起更新。

为了后期可以灵活更新配置（谷歌商店审核太慢了）,我默认将插件应用于所有网站，然后在代码里通过 hostname 来判断是否真的需要执行。

{

    "$schema": "https://json.schemastore.org/chrome-manifest.json",

    "name": "redirect-skipper",

    "manifest_version": 3,

    "content_scripts": [

        {

            "matches": ["<all_urls>"],

            "js": ["./scripts/redirect-skipper.js"],

            "run_at": "document_end"

        }

    ],

}

在当前仓库里维护一份 sites.json 的配置表，格式如下：

{

    "description": "远程配置可以开启 Redirect-Skipper 插件的网站 （因为谷歌商店审核太慢了，否则无需通过远程配置，增加复杂性）",

    "sites": [

        {

            "hostname": "juejin.cn",

            "title": "掘金"

        },

        {

            "hostname": "sspai.com",

            "title": "少数派"

        },

        {

            "hostname": "www.zhihu.com",

            "title": "知乎"

        }

    ]

}

这样插件在拉取到这份数据的时候，就可以根据这边描述的网站配置，决定是否执行具体代码。

插件完整代码：

function replaceALinks() {

  findByTarget();

}



function observerDocument() {

  const mb = new MutationObserver((mutationsList) => {

    for (const mutation of mutationsList) {

      if (mutation.type === "childList") {

        if (mutation.addedNodes.length) {

          replaceALinks();

        }

      }

    }

  });

  mb.observe(document, { childList: true, subtree: true });

}



// 监听路由等事件

["hashchange", "popstate", "load"].forEach((event) => {

  window.addEventListener(event, async () => {

    replaceALinks();

    if (event === "load") {

      observerDocument();

      await updateHostnames();

      replaceALinks(); // 更新完数据后再执行一次

    }

  });

});



let hostnames = ["juejin.cn", "sspai.com", "www.zhihu.com"];



function updateHostnames() {

  return fetch(

    "https://raw.githubusercontent.com/dogodo-cc/redirect-skipper/master/sites.json"

  )

    .then((response) => {

      if (response.ok) {

        return response.json();

      }

      throw new Error("Network response was not ok");

    })

    .then((data) => {

      // 如果拉到了远程数据，就用远程的

      hostnames = data.sites.map((site) => {

        return site.hostname;

      });

    })

    .catch((error) => {

      console.error(error);

    });

}



// 符合 '?target=' 格式的链接

// https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.apple.com%2Fcn%2Fdesign%2Fhuman-interface-guidelines%2Fapp-icons%23macOS/

// https://sspai.com/link?target=https%3A%2F%2Fgeoguess.games%2F

// https://link.zhihu.com/?target=https%3A//asciidoctor.org/



function findByTarget() {

  if (!hostnames.includes(location.hostname)) return;

  const linkKeyword = "?target=";

  const aLinks = document.querySelectorAll(

    `a[href*="${linkKeyword}"]:not([data-redirect-skipper])`

  );

  if (!aLinks) return;

  aLinks.forEach((a) => {

    const href = a.href;

    const targetIndex = href.indexOf(linkKeyword);

    if (targetIndex !== -1) {

      const newHref = href.substring(targetIndex + linkKeyword.length);

      a.href = decodeURIComponent(newHref);

      a.setAttribute("data-redirect-skipper", "true");

    }

  });

}

更详细的流程可以查看 redirect-skipper 仓库地址

标题历史

• 浏览器插件之《跳过第三方链接的提示中转页》

Document Picture-in-Picture 介绍

    今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏

🎬 视频流媒体的画中画功能

        你可能已经在视频平台（如腾讯视频、哔哩哔哩等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合上班偷偷看电视💻

        在今天的教程中，不仅仅是视频，我将教你如何将任何 HTML 内容放入画中画模式，无论是动态内容、文本、图片，还是纯炫酷的 div，统统都能“飞”起来。✨

        一个如此有趣的功能，在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁

体验网址：Treasure-Navigation

github地址

📖 Document Picture-in-Picture 详细教程

🛠 HTML 基本代码结构

    首先，我们随便写一个简单的 HTML 页面，后续的 JS 和样式都会基于它实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document Picture-in-Picture API 示例</title>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

</head>



<body>

    <div id="container">

        <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>

        <button id="clickBtn">切换画中画</button>

    </div>

    <script>

        // 在这里写你的 JavaScript 代码

    </script>

</body>

</html>

1️. 请求 PiP 窗口

    PiP 的核心方法是 window.documentPictureInPicture.requestWindow。它是一个 异步方法，返回一个新创建的 window 对象。

    PIP 窗口可以将其看作一个新的网页，但它始终悬浮在屏幕上方。

document.getElementById("clickBtn").addEventListener("click", async function () {

    // 获取将要放入 PiP 窗口的 DOM 元素

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

    // 请求创建一个 PiP 窗口

    const pipWindow = await window.documentPictureInPicture.requestWindow({

        width: 200,  // 设置窗口的宽度

        height: 300  // 设置窗口的高度

    });



    // 将原始元素添加到 PiP 窗口中

    pipWindow.document.body.appendChild(pipContent);

});

演示：

👏 现在，我们已经成功创建了一个画中画窗口！
这段代码展示了如何将网页中的元素放入一个新的画中画窗口，并让它悬浮在最上面。非常简单吧

关闭PIP窗口

可以直接点右上角关闭PIP窗口，如果我们想在代码中实现关闭，直接调用window上的api就可以了

window.documentPictureInPicture.window.close();

2️. 检查是否支持 PiP 功能

    一切不能兼容浏览器的功能介绍都是耍流氓，我们需要检查浏览器是否支持PIIP功能。
实际就是检查documentPictureInPicture属性是否存在于window上 🔧

if ('documentPictureInPicture' in window) {

    console.log("🚀 浏览器支持 PiP 功能！");

} else {

    console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");

}

    如果是只需要将视频实现画中画功能，视频画中画 (Picture-in-Picture) 的兼容性会好一点，但是它只能将<video>元素放入画中画窗口。它与本文介绍的 文档画中画(Document Picture-in-Picture) 使用方法也是十分相似的。

3️. 设置 PiP 样式

    我们会发现刚刚创建的画中画没有样式，一点都不美观。那是因为我们只放入了dom元素，没有添加css样式。

3.1. 全局样式同步

假设网页中的所有样式如下：

<head>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

    <link rel="stylesheet" type="text/css" href="https://abc.css">

</head>

为了方便，我们可以直接把之前的网页的css样式全部赋值给画中画。

// 1. document.styleSheets获取所有的css样式信息

[...document.styleSheets].forEach((styleSheet) => {

    try {

        // 转成字符串方便赋值

        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');

        // 创建style标签

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

        // 设置为之前页面中的css信息

        style.textContent = cssRules;

        console.log('style', style);

        // 把style标签放到画中画的<head><head/>标签中

        pipWindow.document.head.appendChild(style);

    } catch (e) {

        // 通过 link 引入样式，如果有跨域，访问styleSheet.cssRules时会报错。没有跨域则不会报错

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

        /**

         * rel = stylesheet 导入样式表

         * type: 对应的格式

         * media: 媒体查询（如 screen and (max-width: 600px)）

         *  href: 外部样式表的 URL

         */

        link.rel = 'stylesheet';

        link.type = styleSheet.type;

        link.media = styleSheet.media;

        link.href = styleSheet.href ?? '';

        console.log('error: link', link);

        pipWindow.document.head.appendChild(link);

    }

});

演示：