SDK 除了提供的完善的接口，还会提供相关的开发环境。而 API 需要在 SDK 环境下调用，大部分 SDK 都包含 API。

点击分享按钮，弹出常见的社交分享按钮，然后相互间粘滞，同时分享按钮还会抖动动画。

使用 html2canvas 库可以实现在 node 项目中对页面元素截图。而在不使用第三方库的情况下，利用 SVG 代码可以内联在 base64 字符串中的特性，通过原生的 SVG forginObject 元素也可以实现对 DOM 元素截图。

目前 SVG SMIL animation 动画相关资料还是太少，尤其对各个属性和方法的解释、示例，而且标准也在不断变动，所以 CSS 动画在功能和兼容方面还是更有优势。

Proxy 一般需要和 Reflect 联合使用，Proxy 对象拦截操作，Reflect 完成默认行为，然后就可以在 Proxy 对象中部署额外的功能。

CanvasRenderingContext2D.drawImage() 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。HTMLCanvasElement.toDataURL() 和 HTMLCanvasElement.toBlob() 方法支持导出为 base64 字符串或 Blob 对象。

CSS mask 属性通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。可以使用图像、SVG 或渐变色作为遮罩来做一些特效。

字体一般可以通过使用字体文件来实现彩色效果，但是通过 CSS 方式也是可以实现的。

将 clipPathUnits 设为 objectBoundingBox（相对于应用剪切路径的元素的边界框，坐标系的原点是对象边界框的左上角，对象边界框的宽度和高度都具有 1 个单位值的长度）模式的数值，即可以将剪裁的图标适用于任意的 HTML 元素尺寸。

媒体查询可以根据视口的大小来更改文档布局，然而很多组件并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。

无论是内联元素，还是原本就是块级元素，在应用 display:flow-root 声明后，都会变成块级元素，同时这个元素将创建一个新的 BFC，而不会产生任何其他潜在的问题副作用。

property at 规则提供了一个直接在样式表中注册自定义属性的方式，跟 CSS.registerProperty 函数使用同样的参数调用效果相同。

与 2020 年和 2021 年一样，网络上最受欢迎的类名是 active，Font Awesome 的 fa，fa-* 前缀仍然排在第二和第三。

随着 Web 平台的成熟，我们希望看到更多地直接采用它的各种 API 和功能，因为这样做是有意义的。

用户脚本是一段 JS 代码，能为网站添加新的功能。编写 JS 脚本比 crx 扩展简单得多，不必为了实现一个简单的功能加入其他的文件。

Web Components 的主要好处是原生支持，Vue 组件的插槽机制是受原生 Web Component slot 元素的启发而诞生，同时还做了一些功能拓展。

Web Animations API 可以把 CSS3 实现的 animation 动画由 JS 代码实现。它通过组合两个模型来实现：时序模型（CSS transitions）和动画模型（CSS animations）。

如果数据绑定将开发者从操作 DOM 中解放了出来，那虚拟 DOM 则为数据绑定提供了性能保证，还有分层设计、跨平台以及服务端渲染等特性。

Vue、React 等前端框架的核心特性就是数据绑定和组件复用。而现在浏览器已经实现了自己的 Web Components API，允许创建可重用的定制元素，并且在 web 应用中使用它们。

DocumentFragment（文档片段），与 document 一样，没有父节点，存储由节点（Node）组成的文档结构。但它不是主 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。