blog
blog copied to clipboard
shaozj
blog
近些年来，web 浏览器对多媒体处理的支持不断增强。chrome 94 开始支持了 [Webcodecs API](https://w3c.github.io/webcodecs/)，这使得我们能深入到视频帧这一层对视频进行处理。在这之前，如果想要处理这种基础的视频元素，我们需要借助 WebAssembly 将视频编解码器引入到浏览器中。然而，实际上浏览器的底层早就集成了大量的编解码器，使用 wasm 方案一方面多引入了不必要的资源，另一方面在性能上也很难达到实际需求。[MMPlayer](https://web.npm.alibaba-inc.com/package/@ali/mmplayer) 是阿里妈妈前端技术部创意团队开发的用于播放创意中心剧本数据结构的播放器。在创意中心剧本数据结构中，可以包含视频、图片、lottie 数据以及音频等等。MMPlayer 在播放视频元素时，基于 video 标签，根据计算出的播放时间控制 video 标签中视频的播放，将对应时刻的视频帧渲染到 canvas 中，并和其他需要同时渲染的元素一起渲染到最终页面展示的 canvas 中。通过设置 video 标签的 currentTime 来 seek 某一时刻的视频帧。基于 MMPlayer 和创意剧本数据结构，我们开发了[混剪工具](https://ata.alibaba-inc.com/articles/230900?spm=ata.25287382.0.0.2a94146d9No9gP)，可以实现智能剪辑视频的功能。然而在 web...
# 利用 flex 实现宽度自适应布局 ## flex-direction 为 row 时的宽度自适应布局 ### 容器宽度一定，内容宽度超出容器宽度后出现滚动条 代码： ```html one two three four five six seven eight nine ``` ```css .wrap { display: flex; border: 2px...
## 前言 react/redux 数据流已经是一个老生常谈的问题了，似乎现在谈已经失去了新鲜感。然而，深入理解 react/redux 数据流应该是一个专业 react 前端需要完全掌握的技能，如果未能充分理解，那么很多情况下，你并不知道你开发的应用是如何工作的，这很容易带来问题，从而影响项目的持续发展和可维护性。另一方面，随着 react hooks 和 react-redux 7.x 的发布，在数据流方面又出现了一些新的知识点。react-redux 7.x 全面拥抱了 hooks，并且重新回到了基于 Subscriptions 的实现。这使得 react-redux 7.x 彻底解决了 6.x 的性能问题，甚至是所有 react-redux 版本中性能最好的。所以，是时候重新研究 react/redux 数据流，并基于其对我们应用的性能进行优化了。 ## react...
react 中遇到的奇怪的问题，基本可以从两方面去思考：state 是否 immutable，以及是否形成了闭包。在 [Hooks 陷阱](https://yuque.antfin.com/zhenjiang.szj/blog/cidabn) 中，分析了 hooks 的一些陷阱，其中已经提到了闭包的问题。而当 hooks 遇到 debounce 或者 throttle 等科里化函数的时候，外加一些 viewModel 抽象导致的变量依赖分散时，情况变得更为复杂和难以理解。本文以项目中遇到的实际案例为例子，阐述如何在 hooks 遇到 debounce 等函数时进行编程的最佳实践，避免一些出人意料的 bug。 ## 场景 1：回调函数中使用 debounce 节流 下面是一个接近真实场景的例子，用户在输入框中输入内容进行搜索，我们需要对搜索进行节流，防止太频繁的网络请求。 ```javascript import...
前端性能量化标准
# 前端性能量化标准 我们经常能看到大量介绍前端如何进行性能优化的文章。然而很多文章只介绍了如何优化性能，却未能给出一个可计算，可采集的性能量化标准。甚至看到一些文章，在介绍自己做了优化后的性能时，提到页面加载速度提升了多少多少，但是当你去问他你怎么测量性能的时，却不能给出一个科学的、通用的方法。 其实，在进行性能优化前，首先需要确定性能衡量标准。前端性能大致分为两块，页面加载性能和页面渲染性能。页面加载性能指的是我们通常所说的首屏加载性能。页面渲染性能指的是用户在操作页面时页面是否能流畅运行。滚动应与手指的滑动一样快，并且动画和交互应如丝般顺滑。这两种页面性能，都需要有可量化的衡量标准。 本文参考了谷歌提出的性能衡量方式。首先确定以用户体验为中心的性能衡量标准。然后，针对这些性能标准，制定采集性能数据的方法，以及性能数据分析方法。最后，结合性能量化标准，提出优化性能的方法。 ## 页面加载性能 - 工具：[Lighthouse](https://developers.google.com/web/tools/lighthouse/) - 以用户为中心的性能度量： ### 性能度量标准 下表是与页面加载性能相关的用户体验。 用户体验 | 描述 ------------- | ------------- 它在发生吗？ | 网页浏览顺利开始了吗？服务端有响应吗？ 它是否有用？ | 用户是否能看到足够的内容？ 它是否可用？ | 用户是否可以和页面交互，还是页面仍在忙于加载？ 它是否令人愉快的？...
# 前端组件库开发展示平台对比bisheng-vs-storybook 组件开发的流程一般是需求确定、开发、测试、编译、发布。如果我们只是逐个地开发组件，每个组件独立发布，这样不利于沉淀出一个完整的组件库，形成一个完整的组件系统，以支撑某个领域的业务。开发组件库，除了需要在工程上完成开发、测试、编译和发布的支持，还需要有一个组件展示平台，能以网站的形式将所有组件的介绍、使用方式、使用示例、API 等展现出来。可以说，一个好的组件展示平台，对组件的使用和推广能起到很大的作用。 当前有两个组件开发展示平台是较为常见的，即 storybook 和 bisheng。storybook 自身定位为 ui 组件的开发环境，它提供了丰富的插件功能，可以交互式地开发和测试组件。bisheng 是蚂蚁金服前端开发的基于 markdown 和 react 生成静态网站的工具。虽然其定位是生成静态网站，不过主要用处还是用于生成组件展示平台。 下文将对这两个工具作为组件库开发展示平台进行技术上的对比和分析。 ## bisheng ### 路由生成 #### bisheng 入口文件 `src/index.js` 是 bisheng 程序的实际入口文件。start、build 等操作都是执行该文件中的函数。这个程序主要的功能是，读取 bisheng...
Eslint 解决了代码格式检查的问题，同时，一些有用的提示能让我们发现 bug 和无用代码（如 `no-unused-vars, no-extra-bind, no-implicit-globals`）。但是，eslint 并不能自动帮我们美化代码，自动让代码风格统一，格式优美。EditorConfig 部分解决了这个问题，它解决了代码缩进，行末不出现空格符等问题，但是对于统一整个代码的风格，这些做得还是太少了。Prettier 很好地解决了剩下的问题，通过配置，我们可以制定想要的代码风格，然后通过脚本或编辑器插件来一键格式化／美化代码。 ### 安装使用 #### 安装 ```bash # 全局或本地安装二选一，都能生效 npm install --save-dev prettier # 本地 npm install --g prettier # 全局 ```...
本文从实际示例出发，分析 hooks 在使用时容易遇到的陷阱，以及提出如何避免掉进 hooks 陷阱的方法。 ### 问题一 下方的代码存在什么问题？ ```javascript import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState(); useEffect(async () => { const...
# 基于 Typescript 和 Decorator 实现依赖注入 依赖注入在软件工程中有大量的实践应用，常见的服务端框架如 Spring 等都是基于依赖注入的方式来管理对象之间的依赖关系。对于 java 开发同学来说，依赖注入是再熟悉不过的技术了。[nestjs](https://docs.nestjs.com/) 是基于依赖注入的 nodejs web 框架。类似 java 的 spring。大量使用 decorator，在写法上和 spring 十分类似。本文将探讨如何基于 Typescript 和 Decorator 实现依赖注入。 ## 什么是依赖注入 依赖注入是将一个对象所依赖的其他对象直接提供给这个对象，而不是在当前对象中直接构建这些依赖的对象。 ## 为什么要使用依赖注入...
# ES6 iterator 和 generator ES6 引入了新的遍历数据的机制 Iterator 迭代器。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。基于 iterator 机制，es6 提供了很多新的操作符，例如 `for of` 以及解构、展开操作符等。 Generator 是 ES6 提供的一种异步编程解决方案，类似于其他语言中的协程。它是的一个函数可以在执行过程中中止，之后重新回来继续执行，而不是一次性执行完。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。 本文将基于例子阐述 iterator 和 generator...