工作情况： 填充工艺 Polyfill 过程中的步骤

[account_disabled]

（查看大图） 在这种情况下，从产生想法到在生产中使用它之间的时间有时可能只需几天的时间。我的意思是，我已经在生产中使用了asyncawait功能，并且该功能甚至还没有在单个浏览器中实现！ 您还可以看到这两个社区的总体情绪存在巨大差异。在 JavaScript 社区中，您会读到人们抱怨事情进展太快的文章。另一方面，在 CSS 中，你会听到人们抱怨学习任何新东西都是徒劳的，因为他们需要很长时间才能真正使用它。 那么，我们为什么不编写更多 CSS POLYFILLS 呢？ 乍一看，编写更多 CSS polyfill 似乎是答案。有了好的 Polyfill，CSS 可以像 JavaScript 一样快速运行，对吗？ 可悲的是，事情并没有那么简单。对 CSS 进行 Polyfilling 非常困难，而且在大多。

数情况下，不可能以不完全破坏性能的方式实现。 JavaScript 是一种动态语言，这意味着您可以使用 JavaScript 来填充 JavaScript。而且由于它非常动态，因此具有极强的可扩展性。另一方面，CSS 很少可以用于填充 CSS。在某些情况下，您可以在构建步骤中将 CSS 转换为 CSS（PostCSS就是这样做的）；但如果您想要填充任何依赖于 DOM 结构或元素布局或位置的内容，那么您必须在客户端运行您的填充逻辑。 不幸的是，浏览器并没有让这变得容易。 下图给出了浏 Whatsapp 号码列表 览器从接收 HTML 文档到在屏幕上显示像素的过程的基本概述。蓝色步骤显示 JavaScript 有权控制结果： 渲染过程 JavaScript 访问浏览器的渲染管道。（查看大图） 画面相当黯淡。作为开发人员，您无法控制浏览器如何解析 HTML 和 CSS 并将其。



转换为DOM和CSS 对象模型(CSSOM)。您无法控制级联。您无法控制浏览器如何选择在 DOM 中布局元素或如何在屏幕上直观地绘制这些元素。而且您无法控制合成器的工作。 您可以完全访问的流程的唯一部分是 DOM。CSSOM 在某种程度上是开放的；然而，引用 Houdini 网站的话，它“未指定，跨浏览器不一致，并且缺少关键功能”。 例如，现在浏览器中的 CSSOM 不会向您显示跨源样式表的规则，它只会丢弃任何它不理解的 CSS 规则或声明，这意味着如果您想在浏览器中填充某个功能如果不支持，则无法使用 CSSOM。相反，您必须遍历 DOM，找到<style>和或<link rel="stylesheet">标签，自己获取 CSS，解析它，重写它，然后将其添加回 DOM。 当然，更新 DOM 通常意味着浏览器必须重新执行整个级联、布局。