<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>风痕 · 術&amp;思</title>
        <link>https://fenghen.me</link>
        <description>Web 音视频、Web 前沿、工程效率、个人思考</description>
        <lastBuildDate>Sat, 28 Feb 2026 09:08:01 GMT</lastBuildDate>
        <docs>http://blogs.law.harvard.edu/tech/rss</docs>
        <generator>https://github.com/webmasterish/vuepress-plugin-feed</generator>
        <atom:link href="https://fenghen.me/feed.atom" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[cljs中普通与瞬态数据结构性能对比]]></title>
            <link>https://fenghen.me/posts/2020/07/13/cljs-transient-performance/</link>
            <guid>https://fenghen.me/posts/2020/07/13/cljs-transient-performance/</guid>
            <pubDate>Mon, 13 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[chrome 67；
CPU：2.2 GHz Intel Core i7
内存：16 GB 1600 MHz DDR3

官方的例子:

(defn vrange [n]
  (loop [i 0 v []]
    (if (< i n)
      (recur (inc i) (conj v i))
      v)))

(defn vrange2 [n]
  (loo ...]]></description>
        </item>
        <item>
            <title><![CDATA[shadow-cljs项目 在 proto repl 切换namespace]]></title>
            <link>https://fenghen.me/posts/2022/08/21/shadow-cljs-proto-repl/</link>
            <guid>https://fenghen.me/posts/2022/08/21/shadow-cljs-proto-repl/</guid>
            <pubDate>Sun, 21 Aug 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[按官方文档中的说明已经能正常连接proto-repl，但是repl中不能切换到源码所在的namespace，不能在开发期间执行业务代码

查看官方文档操作，下面列出简单步骤，加粗为注意事项
https://shadow-cljs.github.io/docs/UsersGuide.html#protorepl_atom

添加 proto-repl 依赖

watch启动，**并在 ...]]></description>
        </item>
        <item>
            <title><![CDATA[JS 多线程并发]]></title>
            <link>https://fenghen.me/posts/2023/03/27/js-concurrent/</link>
            <guid>https://fenghen.me/posts/2023/03/27/js-concurrent/</guid>
            <pubDate>Mon, 27 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[[[toc]]

为什么需要并发
我们常听说 JS 是单线程模型，即所有代码都在主线程中执行的。
如果某些任务计算量较大，将阻塞主线程，UI 界面轻则掉帧、重则卡死。

// 提示：本文所有代理均可复制到浏览器控制台中执行，验证效果

// ...]]></description>
        </item>
        <item>
            <title><![CDATA[ClojureScript + node + hotreload]]></title>
            <link>https://fenghen.me/posts/2020/07/13/cljs-node-hotreload/</link>
            <guid>https://fenghen.me/posts/2020/07/13/cljs-node-hotreload/</guid>
            <pubDate>Mon, 13 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[假设你已经创建了项目，并安装了shadow-cljs相关依赖，若未完成请参考文档创建项目：https://shadow-cljs.github.io/docs/UsersGuide.html

*本文示例采用shadow-cljs打包构建，详细资料参考[官方文档](https://shadow-cljs.github.io/docs/UsersGuide.html#target-node- ...]]></description>
        </item>
        <item>
            <title><![CDATA[JS 数据处理]]></title>
            <link>https://fenghen.me/posts/2020/07/29/js-data-process/</link>
            <guid>https://fenghen.me/posts/2020/07/29/js-data-process/</guid>
            <pubDate>Wed, 29 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[[[toc]]

分享目标

JS 数据处理技巧速成
让你感叹：JS 还可以这样写

基础

实践原则

数据处理时，尽量避免创建临时变量（特别是 let）、修改参数、改变外部引用、for、if 等
分离 数据处理 与 副作用（DOM 操作、存储、网络请求等）代码

数据处理指：数值计算和数据结构变换。

第一点：如何避免？

**1. 熟 ...]]></description>
            <enclosure url="https://fenghen.me/./pipe.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[HTTPS加密原理简介]]></title>
            <link>https://fenghen.me/posts/2020/07/13/https-brief/</link>
            <guid>https://fenghen.me/posts/2020/07/13/https-brief/</guid>
            <pubDate>Mon, 13 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[https相关的资料已经非常多，本文尽量以最简洁的图文介绍大致原理，不涉及细节。

本文开始前，读者需要先了解对称加密、非对称加密、hash算法相关知识。

HTTPS如何保证传输数据安全？
服务器将公钥（非对称加密）发送给客户端
客户端生成随机密钥（对称加密），通过公钥加密后发送给服务端，这样双方都拥有了对称加密的密钥 ...]]></description>
            <enclosure url="https://fenghen.me/./http-1.jpg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[JS语言历史及基本特性介绍]]></title>
            <link>https://fenghen.me/posts/2020/07/29/js-lang-history-and-basic/</link>
            <guid>https://fenghen.me/posts/2020/07/29/js-lang-history-and-basic/</guid>
            <pubDate>Wed, 29 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[JS历史

1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。
   网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。
   评：初始设计目标。
1995年5月，网景公司做出决策，未来的网页脚本语言必须"看上去与Java足够相似"，但是比Java简单，使得非专业的网页作者也能很快上手。
   评：划重点 “非专业也能很快上 ...]]></description>
        </item>
        <item>
            <title><![CDATA[JS 正则表达式基础]]></title>
            <link>https://fenghen.me/posts/2022/12/19/js-regex-basic/</link>
            <guid>https://fenghen.me/posts/2022/12/19/js-regex-basic/</guid>
            <pubDate>Mon, 19 Dec 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[前言

个人经验，正则是一个前期少量投入，回报超高的技能点。

其适用范围非常广泛，如批量文本处理、源码替换、程序中逻辑判断等等。
本文只介绍常用的基础知识、技巧，让初学者快速掌握大部分日常所需的正则知识。目标是 5 分钟内可逐字读完，10 分钟内可把例子都动手实践一 ...]]></description>
            <enclosure url="https://fenghen.me/./repalce-log.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[JS优缺点]]></title>
            <link>https://fenghen.me/posts/2020/09/20/js-pros-and-cons/</link>
            <guid>https://fenghen.me/posts/2020/09/20/js-pros-and-cons/</guid>
            <pubDate>Sun, 20 Sep 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[回顾上两期

优点（简单）

对象
链（原型链 & 作用域链）

一切都是对象（包括函数），构建世界的原料，越少越简单、灵活。
jimu

观察者模式，例：
class Observer {
  constructor() {
    this.subscribe ...]]></description>
            <enclosure url="https://fenghen.me/./jimu.jpg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[JS 定时器时长控制细节]]></title>
            <link>https://fenghen.me/posts/2023/06/15/timer-delay/</link>
            <guid>https://fenghen.me/posts/2023/06/15/timer-delay/</guid>
            <pubDate>Thu, 15 Jun 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[背景

JS 最常使用 setTimeout、setInterval 来延迟或定时循环执行函数，通常会传递第二个参数来控制延迟或间隔执行的时间。

但开发者必须意识到函数执行时间并非精确地符合预期，在以下场景中它会超出你的预期
CPU 繁忙（主线程被长时间占用），JS 无法按开发者设定的预期时间延迟函数
定时器过于频繁地执行（第二个参数 < 4），达到一定 ...]]></description>
        </item>
        <item>
            <title><![CDATA[一句话总结：TS 何时选择 interface 或 type]]></title>
            <link>https://fenghen.me/posts/2024/02/17/ts-choose-interface-type/</link>
            <guid>https://fenghen.me/posts/2024/02/17/ts-choose-interface-type/</guid>
            <pubDate>Sat, 17 Feb 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[用 interface 描述类型的结构，用 type 描述类型关系。

有点编程基础中数据结构与算法的味道。

结构即是类型的属性集合

// 如 Point3D 的属性集合： x, y, z。
interface Poi ...]]></description>
        </item>
        <item>
            <title><![CDATA[compilerOptions字段详解]]></title>
            <link>https://fenghen.me/posts/2023/01/03/ts-compiler/</link>
            <guid>https://fenghen.me/posts/2023/01/03/ts-compiler/</guid>
            <pubDate>Tue, 03 Jan 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[{
  "compilerOptions": {

    /* 基本选项 */
    "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": ...]]></description>
        </item>
        <item>
            <title><![CDATA[系统化学习 TS 类型系统]]></title>
            <link>https://fenghen.me/posts/2023/03/27/ts-types-system/</link>
            <guid>https://fenghen.me/posts/2023/03/27/ts-types-system/</guid>
            <pubDate>Mon, 27 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[目的：快速、系统性的入门 TS 类型系统

[[toc]]

前言
TS 是什么？
TS 是 JS 的超集，
TS = JS + 类型系统

为了描述如此复杂（由于 JS 语言的灵活性/复杂性）的类型信息，类型系统表现出非常明显的编程语言特性。
以学习编程语言的方式，来学习 TS 类型系统

关键字/符号
类型: boolean, number, stri ...]]></description>
        </item>
        <item>
            <title><![CDATA[单测（Unit Test）技巧]]></title>
            <link>https://fenghen.me/posts/2023/01/10/unit-test/</link>
            <guid>https://fenghen.me/posts/2023/01/10/unit-test/</guid>
            <pubDate>Tue, 10 Jan 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[前言
本文目的是提高编写单测的效率，适合于有一定单测编写经验，但被单测困扰的同学。
后文的示例都在 unit-test-examples 仓库中。

单测的意义与价值
单测本质：将测试行为及结果固化下来，自动检查被测试代码的运行结果是否符合期望。

单测是一 ...]]></description>
            <enclosure url="https://fenghen.me/./snapshot-error.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[跨域（Options）请求介绍及解决方法]]></title>
            <link>https://fenghen.me/posts/2023/03/22/options-request/</link>
            <guid>https://fenghen.me/posts/2023/03/22/options-request/</guid>
            <pubDate>Wed, 22 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[介绍
OPTIONS请求指method为OPTIONS的http请求。
通俗来说：它的作用是用于WEB服务器是否支持某些 header，也可以叫做预检请求(顾名思义：预先检测)。
程序员：跨域发送 http get { headers { xxx: abc } }
浏览器：等等，你这个请求有点奇怪，我去跟服务器确认下
浏览器：发送 http options ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web 端实时防挡脸弹幕（基于机器学习）]]></title>
            <link>https://fenghen.me/posts/2023/06/21/body-mask-danmaku/</link>
            <guid>https://fenghen.me/posts/2023/06/21/body-mask-danmaku/</guid>
            <pubDate>Wed, 21 Jun 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[W3C 分享视频版、与 Chrome 团队合作版

防档弹幕，即大量弹幕飘过，但不会遮挡视频画面中的人物，看起来像是从人物背后飘过去的。
]]></description>
            <enclosure url="https://fenghen.me/./mediapipe.gif">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[BUG: Safari10 Cannot declare a let variable twice: 'e'.]]></title>
            <link>https://fenghen.me/posts/2020/07/13/bug1-safari10/</link>
            <guid>https://fenghen.me/posts/2020/07/13/bug1-safari10/</guid>
            <pubDate>Mon, 13 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[上线后，吃饭、午休、会议，查看线上错误日志，吓一跳，300+个错误
SyntaxError: Cannot declare a let variable twice: 'e'.
于是拉上小伙伴（我刚接手C端业务）退出会议，着手定位问题。

解决方法
bug详情
// 修 ...]]></description>
        </item>
        <item>
            <title><![CDATA[调试鼠标悬浮（hover）元素的css技巧]]></title>
            <link>https://fenghen.me/posts/2021/05/14/debug-hover-element/</link>
            <guid>https://fenghen.me/posts/2021/05/14/debug-hover-element/</guid>
            <pubDate>Fri, 14 May 2021 00:00:00 GMT</pubDate>
            <description><![CDATA[有两种方式实现元素的鼠标悬浮交互：
css；使用伪类.foo:hover{ /* 悬浮时样式 */ }
js；通过监听元素的mouseenter、mouseleave事件，控制元素的样式

方法一
使用 chrome devtools 提供的样式调试工具

比如修改悬浮时文字的背景色， [Demo](https://www.w3school.com ...]]></description>
            <enclosure url="https://fenghen.me/./debug-hover-1.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 网页自集成 HTTP 代理方案]]></title>
            <link>https://fenghen.me/posts/2024/05/08/ff-proxy/</link>
            <guid>https://fenghen.me/posts/2024/05/08/ff-proxy/</guid>
            <pubDate>Wed, 08 May 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[前言

大部分程序员，想必都有会一个常用的抓包代理工具；
但在座的各位，可曾见过这样一款集成在 Web 应用中的代理工具？

它是明显区别于传统代理工具的，有以下特性：

零安装，零配置，Web 点击即用、APP 扫码即用；_（不 ...]]></description>
            <enclosure url="https://fenghen.me/./overview-0.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[JS 检测设备性能]]></title>
            <link>https://fenghen.me/posts/2023/04/03/js-perf-detect/</link>
            <guid>https://fenghen.me/posts/2023/04/03/js-perf-detect/</guid>
            <pubDate>Mon, 03 Apr 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[性能检测包括
检测当前运行时的性能（繁忙度）
检测设备硬件所反映的性能水平

[[toc]]

运行时性能
首先，在 JS 中并不能直接获取 CPU 占用率、内存使用信息。
但可以统计一些性能相关的数值来间接评估主线程当前的繁忙度。
注意是[主线程](https://developer.mozilla.org/zh-CN/docs/Glossa ...]]></description>
        </item>
        <item>
            <title><![CDATA[Mini Canvas Lib 核心交互实现原理]]></title>
            <link>https://fenghen.me/posts/2022/05/02/canvas-lib/</link>
            <guid>https://fenghen.me/posts/2022/05/02/canvas-lib/</guid>
            <pubDate>Mon, 02 May 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[背景
需要使用 Canvas 实现添加图片、文字、摄像头画面，并且支持拖拽、缩放、旋转等功能。
但成熟 Canvas 库（比如 Sprite.js Fabric.js ）一般都比较庞大（300kb+），所以自己实现精简版本，减少体积。

DEMO
 ...]]></description>
            <enclosure url="https://fenghen.me/./canvas-sprite.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[使用 AI + OPFS 在浏览器中实现 MacOS Finder（文件管理器）]]></title>
            <link>https://fenghen.me/posts/2025/01/07/opfs-finder/</link>
            <guid>https://fenghen.me/posts/2025/01/07/opfs-finder/</guid>
            <pubDate>Tue, 07 Jan 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[没忍住又搞了一个 OPFS 项目，我太喜欢（Web 太需要）这个文件 IO 能力了，对 OPFS “寄予厚望”！

preview img

项目链接：
立即体验：

简介

该项目基于 opf ...]]></description>
            <enclosure url="https://fenghen.me/./preview.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[前端模块化设计]]></title>
            <link>https://fenghen.me/posts/2020/10/07/modularization/</link>
            <guid>https://fenghen.me/posts/2020/10/07/modularization/</guid>
            <pubDate>Wed, 07 Oct 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[本方案是一个预研项目的产出，只做出了 DEMO，后因非技术原因，方案没有落地实践。

背景

某些页面展示逻辑复杂，比如点评 APP 首页，用户看到的页面结构是动态的，与所选城市、地理位置、APP 版本相关。
即使 web 端发版迅速，没有 Native 类似的兼容问题，如果所有逻辑代码维护成本也会越来越大。

目标

设计一套方案，使 web 页面支持根据配置 ...]]></description>
            <enclosure url="https://fenghen.me/./image1.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Google IO 分享 WebCodecs、OPFS 文字版]]></title>
            <link>https://fenghen.me/posts/2024/08/13/google-io-webcodecs-opfs/</link>
            <guid>https://fenghen.me/posts/2024/08/13/google-io-webcodecs-opfs/</guid>
            <pubDate>Tue, 13 Aug 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[背景

2024 北京 Google I/O 邀请我参加合作者开发者论坛，主题是 "Build powerful Web App"；

笔者近期在公司项目中实践 WebCodecs，对应的开源项目是 WebAV，在 Web 音视频领域算是相对前沿的探索；

本文主要分享基于 WebCodecs、OPFS 实现的视频剪辑产品，探讨这些 API 还有哪些应用场景；
W ...]]></description>
        </item>
        <item>
            <title><![CDATA[opfs-tools (文件系统 API) 项目介绍]]></title>
            <link>https://fenghen.me/posts/2024/03/06/opfs-tools-tweet/</link>
            <guid>https://fenghen.me/posts/2024/03/06/opfs-tools-tweet/</guid>
            <pubDate>Wed, 06 Mar 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[文件系统是许多领域程序的基石，所有通用编程语言都会内置完备的文件系统 API。

Web 很长一段时间没有提供完善的访问文件系统的规范，使得需要高频读写文件、大文件处理软件在 Web 端都会受到一些限制，比如音视频剪辑、游戏、数据库等等。

之前在浏览器中实现视频裁剪、截帧等相关功能时，发现缺少基本的操作文件的 API，比如读写、移动、复制文件。

而 [OPFS] ...]]></description>
            <enclosure url="https://fenghen.me/./opfs-tools-explorer.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[React Hooks 的思考]]></title>
            <link>https://fenghen.me/posts/2020/10/07/react-hooks/</link>
            <guid>https://fenghen.me/posts/2020/10/07/react-hooks/</guid>
            <pubDate>Wed, 07 Oct 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[前言
听说 Hooks 有一段时间了，一直没去看文档。最近终于想起这事儿，浏览一遍文档后，立即燃起了一种“兴奋感”。
这种“兴奋感”犹如当初看见“箭头函数”、“async/await”一样。
所以，即使在有很多分析文章的情况下，仍想再写一些个人的思考和感受。
[react hooks官方文档](https://reactjs.org/docs/hooks-intro.html ...]]></description>
            <enclosure url="https://fenghen.me/./comp.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[从 React 看前端 UI 代码范式革命]]></title>
            <link>https://fenghen.me/posts/2025/02/09/react-shaped-frontend-ui-paradigms/</link>
            <guid>https://fenghen.me/posts/2025/02/09/react-shaped-frontend-ui-paradigms/</guid>
            <pubDate>Sun, 09 Feb 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[alt text

前言

本来打算写的主题是“我为什么讨厌 React Hooks API”，展开聊聊“小甜甜”是如何变成“牛夫人”的，没想到越写越严肃：）

React 是两次前端范式革命的引领者，至今仍有繁荣的社区和旺盛的创造力；
React 多次天才又激进的创新，一些想法被借鉴改良、一些引发广泛质疑，大部分是被认同和接受的； ...]]></description>
            <enclosure url="https://fenghen.me/./2233-banner.jpg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[在Termux中运行web项目]]></title>
            <link>https://fenghen.me/posts/2020/07/13/run-web-project-in-termux/</link>
            <guid>https://fenghen.me/posts/2020/07/13/run-web-project-in-termux/</guid>
            <pubDate>Mon, 13 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[Termux是什么
官网
> Termux is an Android terminal emulator and Linux environment app that works directly with no rooting or setup required. A minimal base system is installed au ...]]></description>
        </item>
        <item>
            <title><![CDATA[同构项目 Service Worker 离线化实践]]></title>
            <link>https://fenghen.me/posts/2020/10/07/sw-ssr/</link>
            <guid>https://fenghen.me/posts/2020/10/07/sw-ssr/</guid>
            <pubDate>Wed, 07 Oct 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[阅读本文需要相关知识储备：  Service Worker 生命周期、Workbox、前端同构渲染

背景 ...]]></description>
            <enclosure url="https://fenghen.me/./ssr-design.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[小程序的思考]]></title>
            <link>https://fenghen.me/posts/2019/01/01/thinking-miniprogram/</link>
            <guid>https://fenghen.me/posts/2019/01/01/thinking-miniprogram/</guid>
            <pubDate>Tue, 01 Jan 2019 00:00:00 GMT</pubDate>
            <description><![CDATA[出现的原因

因国内移动互联网的特殊环境：用户时间被巨头APP分割，移动浏览器流量反而较少。

用户需要的服务非常多样化，而APP太重，且很多服务提供商底线太低。

厂商出于私利，推出的类web环境和私有API，期望圈住开发者和服务提供商。

用户视角

便捷，对用户来说，服务更容易获取。

清爽，平台厂商制定规范限制服务提供商，使得吃相不至于太难看（APP无脑推 ...]]></description>
        </item>
        <item>
            <title><![CDATA[个人 VSCode 高频快捷键总结]]></title>
            <link>https://fenghen.me/posts/2023/03/29/vscode-shortcut/</link>
            <guid>https://fenghen.me/posts/2023/03/29/vscode-shortcut/</guid>
            <pubDate>Wed, 29 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[vscode 默认快捷键

|按键|描述|提示|
|---|---|---|
|cmd+shift+p|命令搜索|一切命令、指令的入口，不常用或没有快捷键的指令，可以搜索名称然后触发，尝试搜索 open |
|tab控制|
|cmd+n|新建tab页|常用于记录临时信息|
|cmd+w|关闭tab页|关闭临时tab会有是否保存确认，Mac下cmd+d不保存（d ...]]></description>
        </item>
        <item>
            <title><![CDATA[基于vue directive实现声明式埋点方案]]></title>
            <link>https://fenghen.me/posts/2018/05/01/vue-directive-track/</link>
            <guid>https://fenghen.me/posts/2018/05/01/vue-directive-track/</guid>
            <pubDate>Tue, 01 May 2018 00:00:00 GMT</pubDate>
            <description><![CDATA[注：本方案依赖vue、lazysizes(曝光事件：lazybeforeunveil)

传统埋点 vs 声明式埋点

正文开始前，对比展示一下效果，方便读者判断是否有兴趣 :）

传统埋点
]]></description>
            <enclosure url="https://fenghen.me/./assets/mge1.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 终极拦截技巧（全是骚操作）]]></title>
            <link>https://fenghen.me/posts/2023/12/23/web-spy/</link>
            <guid>https://fenghen.me/posts/2023/12/23/web-spy/</guid>
            <pubDate>Sat, 23 Dec 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[拦截的价值

> 计算机科学领域的任何问题都可以通过增加一个中间层来解决。 —— Butler Lampson

如果系统的控制权、代码完全被掌控，很容易添加中间层；
现实情况我们往往无法控制系统的所有环节，所以需要使用一些 “非常规”（拦截） 手段来增加中间层。

拦截的方法

拦截/覆写 浏览器 API

最常见的场景有通过拦截 console ...]]></description>
            <enclosure url="https://fenghen.me/./server.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 文件系统（OPFS 及工具）介绍]]></title>
            <link>https://fenghen.me/posts/2024/03/14/web-storage-and-opfs/</link>
            <guid>https://fenghen.me/posts/2024/03/14/web-storage-and-opfs/</guid>
            <pubDate>Thu, 14 Mar 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[文件系统是往往是构建大型软件的基石之一，很长一段时间 Web 平台因缺失成熟的文件系统成为构建大型软件的阻碍，如今 OPFS 可弥补这一缺憾。

本文介绍 OPFS 背景和基本使用方法、使用过程中的注意事项，及如何配合笔者开源的 opfs-tools、opfs-tools-explorer 两个项目，充分发挥 OPFS 的性能与开发效率。

Web 存储 A ...]]></description>
            <enclosure url="https://fenghen.me/./vs.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[WebContainer 原理分析]]></title>
            <link>https://fenghen.me/posts/2023/03/29/webcontainer/</link>
            <guid>https://fenghen.me/posts/2023/03/29/webcontainer/</guid>
            <pubDate>Wed, 29 Mar 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[WebContainer 是一种基于浏览器的运行时，可完全在浏览器标签页内执行 Node.js 应用程序和操作系统命令。

惊艳的地方有两点：

能在浏览器中运行 Node 服务，居然还能启动 DevServer “监听端口”
离线后 IDE 开发中的页面也能正常开发

大致原理

以 ]]></description>
            <enclosure url="https://fenghen.me/./webcontainer.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[VuePress 集成第三方评论模块]]></title>
            <link>https://fenghen.me/posts/2018/05/06/vuepress-gitment/</link>
            <guid>https://fenghen.me/posts/2018/05/06/vuepress-gitment/</guid>
            <pubDate>Sun, 06 May 2018 00:00:00 GMT</pubDate>
            <description><![CDATA[VuePress 是一个 Vue 驱动的静态网站生成器，用来写文档的体验很好，本站就是基于 VuePress 的。

VuePress 官方正在开发针对博客的优化功能Blog Support roadmap，已经有人在喊建议集成 disqu ...]]></description>
        </item>
        <item>
            <title><![CDATA[WebGL Chromakey 实时绿幕抠图]]></title>
            <link>https://fenghen.me/posts/2023/07/07/webgl-chromakey/</link>
            <guid>https://fenghen.me/posts/2023/07/07/webgl-chromakey/</guid>
            <pubDate>Fri, 07 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[20 行核心（shader）代码实现实时绿幕抠图

先体验 DEMO，基于 WebAV 实现

移除图片背景
移除视频背景

背景

因为视频相关标准及浏览器的实现问题，很难在主流浏览器中顺利播放背景透明的视频。

有两种方法可以为最通用的视频格式（MP4,H264）移除背景，实现透明效果：

原视频配上绿幕，使用本文介绍方法移 ...]]></description>
            <enclosure url="https://fenghen.me/./green-dog.jpeg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[视频编辑，如何选择技术方案]]></title>
            <link>https://fenghen.me/posts/2025/07/07/choosing-the-right-technical-approach-for-video-editing/</link>
            <guid>https://fenghen.me/posts/2025/07/07/choosing-the-right-technical-approach-for-video-editing/</guid>
            <pubDate>Mon, 07 Jul 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[以下是视频文字稿，观看视频请移步 B 站、抖音

开场

大家好！

我是风痕， 开源项目 WebAV（音视频编辑 SDK ）的作者，

在我的博客有许多 Web 音视频入门的技术文章。

随着 AI 视频技 ...]]></description>
        </item>
        <item>
            <title><![CDATA[JS 解析 SRT 字幕]]></title>
            <link>https://fenghen.me/posts/2023/07/10/srt-parser/</link>
            <guid>https://fenghen.me/posts/2023/07/10/srt-parser/</guid>
            <pubDate>Mon, 10 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[SRT字幕格式介绍

copy 以下代码可在控制台测试效果
function srtTimeToSeconds (time) {
  const match = time.match(/(\d{2}):(\d{2}):(\d{2}),(\d{3})/)
 ...]]></description>
        </item>
        <item>
            <title><![CDATA[互联网“骨干协议” —— BGP]]></title>
            <link>https://fenghen.me/posts/2025/08/20/bgp/</link>
            <guid>https://fenghen.me/posts/2025/08/20/bgp/</guid>
            <pubDate>Wed, 20 Aug 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[B 站视频：
> 抖音视频：

背景

最近将站点部署在 Cloudflare Pages 上，访问速度不稳定，有时非常慢；
分析原因，发现有绕远路的现象；

_不翻墙，请求由洛杉矶的机房处理；翻墙后，请 ...]]></description>
            <enclosure url="https://fenghen.me/./image4.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[手残党的【黑神话·悟空】笔记]]></title>
            <link>https://fenghen.me/posts/2024/08/24/black-myth-wukong/</link>
            <guid>https://fenghen.me/posts/2024/08/24/black-myth-wukong/</guid>
            <pubDate>Sat, 24 Aug 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[wukong

背景

黑神话·悟空是 2024 年发行的现象级单机游戏。

笔者小时候看电视剧、动画片时就曾”梦”幻西游，四年前看了首支实机演示就很期待；
所以即便是典型的手残玩家、3D 眩晕症患者也不愿错过。

本文从一个手残玩家视角，记录一些游玩心得，随缘更新。

设备

笔者 ...]]></description>
            <enclosure url="https://fenghen.me/./wukong.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[DIY 游戏掌机]]></title>
            <link>https://fenghen.me/posts/2023/06/21/diy-handheld-game/</link>
            <guid>https://fenghen.me/posts/2023/06/21/diy-handheld-game/</guid>
            <pubDate>Wed, 21 Jun 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[前言
对比分析了市场上的掌机，发现有些缺陷在当前是无解的。
所以想通过 mini主机 串流 手机 来扬长避短。

方案总结分析

优点
性能更强
自由度、可玩性更高
  不受掌机平台限制
  win主机游戏更多，也不限于只玩游戏
屏幕观感更舒服；分辨率、帧率、色彩吊打掌机
续航6小时以上（四年旧手机
无散热压力：零噪音，不烫手
...]]></description>
        </item>
        <item>
            <title><![CDATA[商务合作（帅气博主在线接单）]]></title>
            <link>https://fenghen.me/posts/2025/04/11/business-cooperation/</link>
            <guid>https://fenghen.me/posts/2025/04/11/business-cooperation/</guid>
            <pubDate>Fri, 11 Apr 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[我已从 B 站离职，详情请看 2025 裸辞计划。

接下来尝试做自由开发者，我擅长的领域是 Web 音视频、Web 前沿、工程效率。

如果你有匹配的工作岗位，也欢迎推荐给我，我的意向是
地点：远程/上海；方向：AI + Web 音视频/工程效率

我的联系方式如下

邮箱： ...]]></description>
        </item>
        <item>
            <title><![CDATA[解决 Edge 117 浏览器视频变色]]></title>
            <link>https://fenghen.me/posts/2023/09/19/edge117-amd-hevc-bugfix/</link>
            <guid>https://fenghen.me/posts/2023/09/19/edge117-amd-hevc-bugfix/</guid>
            <pubDate>Tue, 19 Sep 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[仔细观察颜色，“变色”其实是“反色”效果

Bug 触发条件：Win10 系统 + Edge 117 浏览器 + AMD 集成显卡 + HEVC 视频流

Edge 117 如果使用 AMD 集成显卡，观看视频时可能出现视频反色现象，在 bilibili（哔哩哔哩） 直播中发现。

通过以下设置，配置 Edge 使用英伟达独立显卡，可解决反色问题。

如 ...]]></description>
            <enclosure url="https://fenghen.me/./setting.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[在终端（Terminal）中快捷使用代理的方法]]></title>
            <link>https://fenghen.me/posts/2025/01/22/proxy-switch-cli/</link>
            <guid>https://fenghen.me/posts/2025/01/22/proxy-switch-cli/</guid>
            <pubDate>Wed, 22 Jan 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[背景

每次在终端中 打开/关闭 代理都要经历以下几个步骤

在代理软件（如 Clash）中复制终端代理命令
粘贴到 终端 中，然后执行
执行需要访问外网的命令（如安装依赖、下载外网镜像）
关闭当前终端，让代理配置失效

假设你的代理工具启用的端口是2233，那么从代理工具复制的终端代理命令应该是

export https_proxy=h ...]]></description>
        </item>
        <item>
            <title><![CDATA[菩萨蛮]]></title>
            <link>https://fenghen.me/posts/2023/07/29/%E8%8F%A9%E8%90%A8%E8%9B%AE/</link>
            <guid>https://fenghen.me/posts/2023/07/29/%E8%8F%A9%E8%90%A8%E8%9B%AE/</guid>
            <pubDate>Sat, 29 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[人人尽说江南好
>作者：韦庄

人人尽说江南好 游人只合江南老

春水碧于天 画船听雨眠

垆边人似月 皓腕凝霜雪

未老莫还乡 还乡须断肠 ...]]></description>
        </item>
        <item>
            <title><![CDATA[终端开发环境搭建]]></title>
            <link>https://fenghen.me/posts/2025/09/09/terminal-dev-env/</link>
            <guid>https://fenghen.me/posts/2025/09/09/terminal-dev-env/</guid>
            <pubDate>Tue, 09 Sep 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[都进入 AI 时代了啊啊啊啊，为什么还要花时间折腾上古时代的开发工具？
因为太好玩，实在忍不住。。。

Yazi

Yazi 是一个终端文件管理工具，这是它的 logo。

平时总是不知不觉就打开了多个 Finder 窗口进行文件操作 ...]]></description>
            <enclosure url="https://fenghen.me/./yazi-preview.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[2025 年终总结]]></title>
            <link>https://fenghen.me/posts/2026/02/03/_2025-year-end-summary/</link>
            <guid>https://fenghen.me/posts/2026/02/03/_2025-year-end-summary/</guid>
            <pubDate>Tue, 03 Feb 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[大龄（末代）前端程序员，小破站裸辞一年，干了啥，赚了多少，有哪些见闻与改变？
正值新旧更替，在此回顾一番。

干了啥

年初从小破（B）站离职，激情澎湃，准备大干一场；
结果刚离职就因菊部地区手术躺了两个月，感先帝创业未半，而。。。

本来是计划维护 Web 视频剪辑 SDK(WebAV) ...]]></description>
            <enclosure url="https://fenghen.me/./me.jpg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[2025 裸辞计划]]></title>
            <link>https://fenghen.me/posts/2025/03/29/_2025-plan/</link>
            <guid>https://fenghen.me/posts/2025/03/29/_2025-plan/</guid>
            <pubDate>Sat, 29 Mar 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[大家好，我是风痕，在我的博客首页可以看到我的一些个人信息。

去年初发了一篇文章2024，做个“前端网红”吧，回顾 2024 我的博客、公众号、开源项目热度有一点提升，但显然还不够“红”，可能大概也许是被这个 “B 班”给耽误了吧 [doge]。

"今天这 B 班就上到这"

不得不说阿 B 的文化生活 ...]]></description>
            <enclosure url="https://fenghen.me/./image.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[AI 媒介将如何重塑人类社会（风痕、Claude 访谈记录）]]></title>
            <link>https://fenghen.me/posts/2025/03/12/how-ai-media-will-reshaping-human-society/</link>
            <guid>https://fenghen.me/posts/2025/03/12/how-ai-media-will-reshaping-human-society/</guid>
            <pubDate>Wed, 12 Mar 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[alt text
图片也是 Claude 生成的

前言

多年前从《娱乐至死》这本书了解到媒介理论，作者的理论如先知的预言，警示即将到来的互联网时代。
也是从此书中了解到某些技术媒介（印刷机、电视机）竟有如此巨大的能量，能改变社会结构与人们的生活方式。

最近读完《理解媒介·论人的延伸》这本媒介理论的开山之作，再看当前如火如荼的 AI 技术， ...]]></description>
            <enclosure url="https://fenghen.me/./image.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[生存空间]]></title>
            <link>https://fenghen.me/posts/2020/10/07/biosphere/</link>
            <guid>https://fenghen.me/posts/2020/10/07/biosphere/</guid>
            <pubDate>Wed, 07 Oct 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[存在即合理。 —— 黑格尔

一
我很久前曾多次纳闷：苍蝇，存在的意义是什么？
不像蚊子，咬人痛痒，它飞来飞去让人厌烦，飞得还快打不着，打着了又让人恶心。
总之，它不那么坏，整天飞来飞去惹人厌烦外，不能理解其存在的意义。

现在看来，当时的思考内容略显幼稚。
但人总是受限于自己的主观经验，难以理解很多事物存在的“理”。

二
然，大道至简。
足够“简 ...]]></description>
            <enclosure url="https://fenghen.me/./tree.jpeg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[侠客行 / 三叠]]></title>
            <link>https://fenghen.me/posts/2023/07/29/%E4%BE%A0%E5%AE%A2/</link>
            <guid>https://fenghen.me/posts/2023/07/29/%E4%BE%A0%E5%AE%A2/</guid>
            <pubDate>Sat, 29 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[侠客行
> 作者：李白

赵客缦胡缨 吴钩霜雪明

银鞍照白马 飒沓如流星

十步杀一人 千里不留行

事了拂衣去 深藏身与名

闲过信陵饮 脱剑膝前横

将炙啖朱亥 持觞劝侯嬴

三杯吐然诺 五岳倒为轻

眼花耳热后 意气素霓生

救赵挥金槌 邯郸先震惊

千秋二壮士 烜赫大梁城

纵死侠骨香 不惭世上英

谁能书阁下 白首太玄经

三叠
> 作者：天下有雪 / 沧月改
 ...]]></description>
        </item>
        <item>
            <title><![CDATA[书评笔记]]></title>
            <link>https://fenghen.me/posts/2022/08/12/book-review/</link>
            <guid>https://fenghen.me/posts/2022/08/12/book-review/</guid>
            <pubDate>Fri, 12 Aug 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[社会学

当代中国的中央地方关系
分税制改革断了地方政府的财路。

我记得96年左右我们那里的政府似乎特别困难，“人头税”涨得很快，农民都交不起了，甚至听说zf组织地痞流氓上门抢钱粮。我印象深刻是因为我家也被强行开仓放粮了，当时很小五六岁左右，比较害怕。不知道跟分税制改革有没有关系。

没想到呀，土地财政救了地方政府，也算是人口红利的一部分。这也理解了为啥中央一直喊要控制 ...]]></description>
        </item>
        <item>
            <title><![CDATA[天道]]></title>
            <link>https://fenghen.me/posts/2020/07/13/dao/</link>
            <guid>https://fenghen.me/posts/2020/07/13/dao/</guid>
            <pubDate>Mon, 13 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[一个细菌与一个人之间有什么区别？（这问题很傻，听了都不想回答）
脑海中第一个词——意识。

一个细菌与一个人体细胞有什么区别？
从生物学细节上来说，区别太多了，但本质上来说好像区别不大。
二者都是无意识的，需要或适应环境，然后复制自身。
最大区别可能是细菌只要环境允许则无限复制而；人体正常细胞则在环境控制下复制一定次数后就停止复制，自然死亡。从这方面看，人体最像细菌的细胞 ...]]></description>
        </item>
        <item>
            <title><![CDATA[笔记软件孕育数字分身]]></title>
            <link>https://fenghen.me/posts/2025/10/17/notes-and-digital-twin/</link>
            <guid>https://fenghen.me/posts/2025/10/17/notes-and-digital-twin/</guid>
            <pubDate>Fri, 17 Oct 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[我需要一款新时代的笔记软件。

一

我很讨厌记笔记：
以前是掏出纸笔、把总结内容写在笔记本上；
现在是打开笔记软件，想想应该把内容粘贴到哪里

对我来说，因为字写得又丑又慢又费劲，所以在学校从不做文字笔记；

但日常又不可避免地需要记录一些信息：一个待办项、一行命令代码、一个冷门知识，或偶然碰到有感触的一句格言、一首诗...

工作至今，尝试多款笔记软件都不遂心，又 ...]]></description>
        </item>
        <item>
            <title><![CDATA[技术面试中的“运气”指什么]]></title>
            <link>https://fenghen.me/posts/2020/07/29/interview/</link>
            <guid>https://fenghen.me/posts/2020/07/29/interview/</guid>
            <pubDate>Wed, 29 Jul 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[常说面试过程中出了真实实力，运气也很重要。我并不满意与“运气”这个含义过于模糊的词，决定深究一下，并不是面试技巧或指导。
当局者迷，以下是我对一年前面试经历的回顾。

隐含的，可控的非“运气”成分

除了相貌、性格、口音等影响结果的客观因素外，还有形象（我曾穿着拖鞋去应聘...）、精神状态等可控的，但可能被忽略的因素。
此类因素容易被面试官/应聘者忽略，但却能直接影响结果，也 ...]]></description>
        </item>
        <item>
            <title><![CDATA[为何是秦灭六国，统一天下]]></title>
            <link>https://fenghen.me/posts/2020/10/07/qin/</link>
            <guid>https://fenghen.me/posts/2020/10/07/qin/</guid>
            <pubDate>Wed, 07 Oct 2020 00:00:00 GMT</pubDate>
            <description><![CDATA[*刚刚与网友谈到这个话题。
史书总是把王朝兴衰全归因于“人”，我更愿意相信其主因是“天”。
所以，我更“青睐”把王朝更替与气候变化关联起来的相关学说。*

以下为爱好者臆测“为何是秦灭六国，一统天下”的原因（由于是爱好者，并不打算详细论证^_^）

天
春秋战国时期大降温（看图）。

[来源链接](http://w ...]]></description>
            <enclosure url="https://fenghen.me/./chronology.jpeg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[善-恶]]></title>
            <link>https://fenghen.me/posts/2022/08/22/shan-e/</link>
            <guid>https://fenghen.me/posts/2022/08/22/shan-e/</guid>
            <pubDate>Mon, 22 Aug 2022 00:00:00 GMT</pubDate>
            <description><![CDATA[春节在家走亲戚，听说有人从事的行业实为“间接诈骗”，并且也看不出周围的人对此行为有什么鄙视之情，大家更关注的似乎是能赚多少。

我没想到“恶”，离我如此之近，不由得更深入地去理解思考————“善恶”。

为什么会存在“善恶”这样的抽象概念？
其本质是什么？
“恶”是否可以消除？
消除“恶”会有什么影响呢？

-- 虽然没人直接告诉我们“善-恶”这个概念的定义，但我们很小 ...]]></description>
        </item>
        <item>
            <title><![CDATA[2024，做个“前端网红”吧]]></title>
            <link>https://fenghen.me/posts/2024/01/01/wechat-subscribe/</link>
            <guid>https://fenghen.me/posts/2024/01/01/wechat-subscribe/</guid>
            <pubDate>Mon, 01 Jan 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[​ 写博客好多年了，以前是随缘更新，无所谓有没有人看。

23 年有些意外、有些机缘，写了不少代码和文章。

github contributions

收到了一些正向反馈，github 新增 500+ star，博客站点日 PV 300 左右。

所以想博客也许可以作为一个业余项目，正经运营起来。

作为 Web 开发者，自然不喜 ...]]></description>
            <enclosure url="https://fenghen.me/./github-contributions.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 音视频（零）概览]]></title>
            <link>https://fenghen.me/posts/2023/07/16/webav-0-overview/</link>
            <guid>https://fenghen.me/posts/2023/07/16/webav-0-overview/</guid>
            <pubDate>Sun, 16 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

WebCodecs API 已经发布一段时间（chrome 94），在浏览器中处理音视频文件或实时视频流已经可行。
计划开一个系列介绍 Web 音视频基础知识，及如何在浏览器中处理视频文件（或视频流）。

作者也是音视频领域的新手，本系列文章也算是个人的学习总结，若发现错误内容可在评论区留言
_本系列适合有一定经验的前端 ...]]></description>
            <enclosure url="https://fenghen.me/./media-workflow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (0) Overview]]></title>
            <link>https://fenghen.me/posts/2023/07/16/webav-0-overview-en/</link>
            <guid>https://fenghen.me/posts/2023/07/16/webav-0-overview-en/</guid>
            <pubDate>Sun, 16 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

The WebCodecs API has been released for some time (since Chrome 94), making it feasible to process audio and video files or real-ti ...]]></description>
            <enclosure url="https://fenghen.me/./media-workflow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 音视频（一）基础知识]]></title>
            <link>https://fenghen.me/posts/2023/07/19/webav-1-basic/</link>
            <guid>https://fenghen.me/posts/2023/07/19/webav-1-basic/</guid>
            <pubDate>Wed, 19 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

阅读后续文章或开始使用 WebAV 处理音视频数据之前，需要一点点背景知识。

本篇主要简单介绍音视频最基础的知识，以及 WebCodecs 的核心 API。

视频结构

视频文件可以理解为容器包含了元数据和编码数据（压缩的音频或视频）；
不同的容器格式有各种区别，比如用不同方式组织管理元数据和编码数据。
![视频结 ...]]></description>
            <enclosure url="https://fenghen.me/./video-struct.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[【转】我在 20 年的软件工程师生涯中学到的事情]]></title>
            <link>https://fenghen.me/posts/2023/08/18/twenty-things-software-engineer/</link>
            <guid>https://fenghen.me/posts/2023/08/18/twenty-things-software-engineer/</guid>
            <pubDate>Fri, 18 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[原文
阮一峰翻译

*我一般不太喜欢看这种经验之谈，在阮一峰周刊中看到， ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (1) Fundamentals]]></title>
            <link>https://fenghen.me/posts/2023/07/19/webav-1-basic-en/</link>
            <guid>https://fenghen.me/posts/2023/07/19/webav-1-basic-en/</guid>
            <pubDate>Wed, 19 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

Before diving into the subsequent articles or starting to use WebAV for audio and video processing, it's essential to understand so ...]]></description>
            <enclosure url="https://fenghen.me/./video-struct.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 音视频（二）在浏览器中解析视频]]></title>
            <link>https://fenghen.me/posts/2023/07/23/webav-2-parse-video/</link>
            <guid>https://fenghen.me/posts/2023/07/23/webav-2-parse-video/</guid>
            <pubDate>Sun, 23 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

浏览器中已经能直接播放视频，为什么还需要手动写代码解析？
因为，某些场景需要对视频进行更细致的处理，比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。

总之，除了最单纯的视频播放外，对视频数据的一切处理都需要从解析开始。

_你可以跳过原理介绍，直接查看 [WebAV 解析 MP4 示例](#webav-视频解 ...]]></description>
            <enclosure url="https://fenghen.me/./mp4-overview.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 音视频（三）在浏览器中创建视频]]></title>
            <link>https://fenghen.me/posts/2023/07/31/webav-3-create-video/</link>
            <guid>https://fenghen.me/posts/2023/07/31/webav-3-create-video/</guid>
            <pubDate>Mon, 31 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

音视频工作流程

在 WebCodecs 之前，由于编解码能力的缺失，几乎无法在纯浏览器中编辑、创建视频。
WebCodecs 补齐了编解码能力，相当于在浏览器中提供了视频创作能力。

预计 WebCodecs 将会像 HTML5 技术（Video、Audio、MSE...）一样 ...]]></description>
            <enclosure url="https://fenghen.me/./media-workflow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 音视频（四）在浏览器中处理音频]]></title>
            <link>https://fenghen.me/posts/2023/08/05/webav-4-process-audio/</link>
            <guid>https://fenghen.me/posts/2023/08/05/webav-4-process-audio/</guid>
            <pubDate>Sat, 05 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

为什么单独介绍音频处理?

网络上缺乏音频处理的资料，绝大多数示例都是针对视频而略过音频，很多人在网上寻找音频处理的示例
对前端开发者来说，音频处理相对视频略微复杂一些

所以，本文专门针对音频数据，汇总讲解采集-处理-编码-封装全过程，帮助初学者入门。

![audio-data-flow](./audio ...]]></description>
            <enclosure url="https://fenghen.me/./audio-data-flow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (3) Creating Videos in the Browser]]></title>
            <link>https://fenghen.me/posts/2023/07/31/webav-3-create-video-en/</link>
            <guid>https://fenghen.me/posts/2023/07/31/webav-3-create-video-en/</guid>
            <pubDate>Mon, 31 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

Audio & Video Workflow

Before WebCodecs, the lack of encoding and decoding capabilities made it nearly im ...]]></description>
            <enclosure url="https://fenghen.me/./media-workflow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (4) Processing Audio in the Browser]]></title>
            <link>https://fenghen.me/posts/2023/08/05/webav-4-process-audio-en/</link>
            <guid>https://fenghen.me/posts/2023/08/05/webav-4-process-audio-en/</guid>
            <pubDate>Sat, 05 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

Why dedicate a chapter to audio processing?

There's a scarcity of audio processing resources online, with most examples focus ...]]></description>
            <enclosure url="https://fenghen.me/./audio-data-flow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web 音视频（五）在浏览器中合成视频]]></title>
            <link>https://fenghen.me/posts/2023/08/12/webav-5-combine/</link>
            <guid>https://fenghen.me/posts/2023/08/12/webav-5-combine/</guid>
            <pubDate>Sat, 12 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

经过前序章节的介绍，读者能大致了解如何在播放器中解析、创建视频；
本章介绍何在浏览器中合成视频，这是视频编辑中最基础的功能。

你可以跳过原理介绍，直接查看 WebAV 合成视频示例

在视频上叠加素材

常见的素材有：视频、音频、图片、文字

[在浏览器中创建视频](/posts/2 ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web 音视频（六）图像素材处理]]></title>
            <link>https://fenghen.me/posts/2023/08/19/webav-6-process-image/</link>
            <guid>https://fenghen.me/posts/2023/08/19/webav-6-process-image/</guid>
            <pubDate>Sat, 19 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

前序章节介绍了如何在浏览器中解析、创建视频，以及给视频添加一些自定义素材（图片、音频、文字...）；
本章介绍如何给图像素材加特效、加动画，实现转场、移动水印、图像滤镜美化等功能。

你可以跳过原理介绍，直接查看 WebAV 示例

素材动画

在视频制作中实现动画跟其他场景略有不同，因为视频 ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (2) Parsing Video in the Browser]]></title>
            <link>https://fenghen.me/posts/2023/07/23/webav-2-parse-video-en/</link>
            <guid>https://fenghen.me/posts/2023/07/23/webav-2-parse-video-en/</guid>
            <pubDate>Sun, 23 Jul 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

While browsers can already play videos directly, why would we need to write code to parse them manually?
The answer lies in specifi ...]]></description>
            <enclosure url="https://fenghen.me/./mp4-overview.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (5) Compositing Videos in the Browser]]></title>
            <link>https://fenghen.me/posts/2023/08/12/webav-5-combine-en/</link>
            <guid>https://fenghen.me/posts/2023/08/12/webav-5-combine-en/</guid>
            <pubDate>Sat, 12 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

After reading the previous chapters, readers should have a basic understanding of how to parse and create videos in the browser.
Th ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (6) Processing Image Assets]]></title>
            <link>https://fenghen.me/posts/2023/08/19/webav-6-process-image-en/</link>
            <guid>https://fenghen.me/posts/2023/08/19/webav-6-process-image-en/</guid>
            <pubDate>Sat, 19 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

Previous chapters covered how to parse and create videos in the browser, as well as add custom assets (images, audio, text...).
T ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web 音视频（七）中期回顾]]></title>
            <link>https://fenghen.me/posts/2023/08/19/webav-7-mid-review/</link>
            <guid>https://fenghen.me/posts/2023/08/19/webav-7-mid-review/</guid>
            <pubDate>Sat, 19 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web 音视频目录

个人回顾

本系列更新至今，持续了一个月时间，内容可以总结为音频、视频数据的 解析 - 处理 - 合成，在浏览器中比较粗粒度地实现音视频编辑的主要环节，差不多是把 WebAV 项目的原理讲完了。

讲解的知识非常浅，目标读者是准备在 Web 平台进行音视频开发的新手；
这是我第一次进行高频率技术写作，将一 ...]]></description>
        </item>
        <item>
            <title><![CDATA[WebAV SDK（Web 视频编辑）V1 发布]]></title>
            <link>https://fenghen.me/posts/2024/10/31/webav-v1-released/</link>
            <guid>https://fenghen.me/posts/2024/10/31/webav-v1-released/</guid>
            <pubDate>Thu, 31 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[前言

WebAV 是基于 WebCodecs 构建的 SDK，用于在 Web 平台上创建/编辑视频文件。

V1 对项目来说是里程碑版本，意味着 API 已经稳定，且功能的稳定性也经过了长时间的考验，可用于生产环境。

我在 20 年加入 B 站，开始接触 Web 音视频相关的知识（Web 播放器）， WebCodecs API 在 21 年发布；
我预期 WebCode ...]]></description>
        </item>
        <item>
            <title><![CDATA[WebAV SDK (Web Video Editing) V1 Release]]></title>
            <link>https://fenghen.me/posts/2024/10/31/webav-v1-released-en/</link>
            <guid>https://fenghen.me/posts/2024/10/31/webav-v1-released-en/</guid>
            <pubDate>Thu, 31 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[Introduction

WebAV is a WebCodecs-based SDK for creating and editing video files on the Web platform.

Version 1 marks a milestone for the project, signifying stable APIs and thoroughly tes ...]]></description>
        </item>
        <item>
            <title><![CDATA[Web Audio & Video (7) Mid-Series Review]]></title>
            <link>https://fenghen.me/posts/2023/08/19/webav-7-mid-review-en/</link>
            <guid>https://fenghen.me/posts/2023/08/19/webav-7-mid-review-en/</guid>
            <pubDate>Sat, 19 Aug 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Web Audio & Video Series Table of Contents

Personal Reflection

Over the past month since this series began, we've covered the parsing, processing, and composition of ...]]></description>
        </item>
        <item>
            <title><![CDATA[纯 Web 视频剪辑]]></title>
            <link>https://fenghen.me/posts/2024/10/28/webav-video-editor/</link>
            <guid>https://fenghen.me/posts/2024/10/28/webav-video-editor/</guid>
            <pubDate>Mon, 28 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[ZingAI.video 字影是采用纯 Web 技术实现剪辑功能的产品，欢迎体验

前言

WebCodecs API 为 Web 平台提供了音视频编解码能力，使得在 Web 平台（网页、Electron）上实现高效、专业的视频剪辑成品成为可能。

读者可阅读笔者的入门系列文章获取更详细的信息，或直接使用 [W ...]]></description>
            <enclosure url="https://fenghen.me/./overview.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Pure Web Video Editing]]></title>
            <link>https://fenghen.me/posts/2024/10/28/webav-video-editor-en/</link>
            <guid>https://fenghen.me/posts/2024/10/28/webav-video-editor-en/</guid>
            <pubDate>Mon, 28 Oct 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[ZingAI.video is a product that uses pure Web technology to implement editing functions. Welcome to try it.

Introduction

The WebCodecs API provides audio a ...]]></description>
            <enclosure url="https://fenghen.me/./overview.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[WebCodecs 编码字符串（codec）介绍]]></title>
            <link>https://fenghen.me/posts/2024/05/11/webcodecs-codec-string-explain/</link>
            <guid>https://fenghen.me/posts/2024/05/11/webcodecs-codec-string-explain/</guid>
            <pubDate>Sat, 11 May 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[笔者的 Web 音视频系列文章

视频播放经常会看到这样的字符串 video/mp4; codecs="avc1.4d002a"，WebCodecs 编解码器初始化也需要配置 codec 参数，本文尝试简单介绍编码字符串含义。

视频编码分许多种类，每个种类还分多个版本，不同种类、版本对应的编解码算法、支持的能力（分辨率上限、色深等等）不同 ...]]></description>
            <enclosure url="https://fenghen.me/./4d00.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[WebCodecs 开启 Web 音视频新篇章]]></title>
            <link>https://fenghen.me/posts/2023/10/06/webcodecs-new-era-for-media-on-the-web/</link>
            <guid>https://fenghen.me/posts/2023/10/06/webcodecs-new-era-for-media-on-the-web/</guid>
            <pubDate>Fri, 06 Oct 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[你可以先略过下面的无聊文字，体验一番 WebCodecs 的实力

WebCodecs 是什么

WebCodecs 是一个 Web 规范，21 年 9 月份在 Chrome 94 中实现
WebCodecs 提供访问编解码能力的接口，可精细控制音视频数据

Web 音视频 API 存在什么问题

音视频技术在 Web 平台上的应用非常广泛，已有许多 Web ...]]></description>
            <enclosure url="https://fenghen.me/./media-workflow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[Understanding WebCodecs Codec Strings]]></title>
            <link>https://fenghen.me/posts/2024/05/11/webcodecs-codec-string-explain-en/</link>
            <guid>https://fenghen.me/posts/2024/05/11/webcodecs-codec-string-explain-en/</guid>
            <pubDate>Sat, 11 May 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[From the author's Web Audio & Video Series

When working with video playback, you'll often encounter strings like video/mp4; codecs="avc1.4d002a". WebCodecs encoders and dec ...]]></description>
            <enclosure url="https://fenghen.me/./4d00.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[WebCodecs: A New Chapter for Web Media]]></title>
            <link>https://fenghen.me/posts/2023/10/06/webcodecs-new-era-for-media-on-the-web-en/</link>
            <guid>https://fenghen.me/posts/2023/10/06/webcodecs-new-era-for-media-on-the-web-en/</guid>
            <pubDate>Fri, 06 Oct 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[Feel free to skip the text below and experience WebCodecs in action

What is WebCodecs?

WebCodecs is a Web specification implemented in Chrome 94 (September 2021)
It provides interfac ...]]></description>
            <enclosure url="https://fenghen.me/./media-workflow.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[【译】WebCodecs 说明]]></title>
            <link>https://fenghen.me/posts/2023/10/02/webcodecs-explainer/</link>
            <guid>https://fenghen.me/posts/2023/10/02/webcodecs-explainer/</guid>
            <pubDate>Mon, 02 Oct 2023 00:00:00 GMT</pubDate>
            <description><![CDATA[本文翻译至 WebCodecs Explainer

问题与动机

已有许多 Web API 在内部使用媒体编解码器来支持特定用途，比如:

HTMLMediaElement and Media Source Extensions
WebAudio (decodeAudioData)
MediaRecorder
WebRTC

但是还没有一种通用的方式来灵活 ...]]></description>
        </item>
        <item>
            <title><![CDATA[WebCodecs 性能表现及优化思路]]></title>
            <link>https://fenghen.me/posts/2024/07/27/webcodecs-performance-benchmark/</link>
            <guid>https://fenghen.me/posts/2024/07/27/webcodecs-performance-benchmark/</guid>
            <pubDate>Sat, 27 Jul 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[ZingAI.video 字影是采用 WebCodecs 构建的视频剪辑工具，可在这里体验视频导出的性能

笔者开源 WebAV 已经一年半，还写了系列文章帮助初学者入门 Web 音视频。

之前一直隐隐担心在 Web 平台处理音视频与 Native APP 会有明显性能差距，因 ...]]></description>
            <enclosure url="https://fenghen.me/./benchmark.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[WebCodecs Performance and Optimization Insights]]></title>
            <link>https://fenghen.me/posts/2024/07/27/webcodecs-performance-benchmark-en/</link>
            <guid>https://fenghen.me/posts/2024/07/27/webcodecs-performance-benchmark-en/</guid>
            <pubDate>Sat, 27 Jul 2024 00:00:00 GMT</pubDate>
            <description><![CDATA[ZingAI.video is a video editing tool built with WebCodecs. You can experience the performance of video exporting here.

It's been a year and a half since I ope ...]]></description>
            <enclosure url="https://fenghen.me/./benchmark.png">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[ZingAI.video 在线口播视频剪辑]]></title>
            <link>https://fenghen.me/posts/2025/09/01/overview/</link>
            <guid>https://fenghen.me/posts/2025/09/01/overview/</guid>
            <pubDate>Mon, 01 Sep 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[ZingAI.video 字影是采用前沿 Web 技术构建的口播视频剪辑工具，欢迎体验

背景

我发现自己消费的视频基本都是口播类视频，且 AI 生成的视频绝大多数也是这类视频。

口播类视频并不是指狭义的主播（或数字人）念稿子，它的典型特征是传达的信息以文字语音为主，图像信息为辅的视频；
 ...]]></description>
            <enclosure url="https://fenghen.me/./01.jpg">
            </enclosure>
        </item>
        <item>
            <title><![CDATA[ZingAI.video Online Talking Head Video Editing]]></title>
            <link>https://fenghen.me/posts/2025/09/01/zingai-overview-en/</link>
            <guid>https://fenghen.me/posts/2025/09/01/zingai-overview-en/</guid>
            <pubDate>Mon, 01 Sep 2025 00:00:00 GMT</pubDate>
            <description><![CDATA[ZingAI.video is a talking head video editing tool built with cutting-edge Web technology. Welcome to try it.

Background

I found that the videos I consume are b ...]]></description>
            <enclosure url="https://fenghen.me/./01.jpg">
            </enclosure>
        </item>
    </channel>
</rss>