在JS工具的所有现有CSS中，我们选择 TypeStyle 的原因如下：
- 它使用普通的JavaScript编写代码，而不是强制使用JavaScript模板等。
- 它有完整的TypeScript类型。对于支持它的编辑器，如Visual Studio Code，它可以在开发时进行完整的静态分析和未使用的代码检测。
- 它与框架无关，可以很容易地嵌入到大多数框架中，而不会从根本上改变您编写应用程序的方式。
- 它有用于媒体查询，颜色和动画的实用程序和相关软件包。
- 由于规则会附加到
通用规则和高级媒体查询
TypeStyle还允许您使用自定义选择器定义规则。这些规则会立即应用于文档，并且不会生成类名称。
假设我们想要在页面的中心显示我们的微调。我们利用 CSS Flexbox 模块，这个任务很简单。
typestyle.cssRule('html, body', {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
minHeight: percent(100),
fontSize: '10pt' // This sets 1rem = 10px
})
回到媒体查询，在与他们合作时需要考虑一些事情。虽然CSS应用于顶部，但TypeStyle规则不是。无碰撞类名通常确保这不是问题，但针对相同类的媒体查询可能会显示一些意外行为。
以这个样式表为例：
div {
color: black;
}
@media (max-width: 600px) {
div {
color: red;
}
}
@media (max-width: 400px) {
div {
color: yellow;
}
}
将其应用于文档时，媒体查询将自上而下执行，因此，当窗口大小低于400像素时，div文本颜色为黄色。
使用TypeStyle时，通常将上面的样式表转换为以下定义：
const divClassName = style(
{
color: 'black'
},
media({maxWidth: 600}, {
color: 'red'
}),
media({maxWidth: 400}, {
color: 'yellow'
})
)
TypeStyle不保证类的生成顺序（尤其是因为这依赖于JS引擎），所以我们需要调整媒体查询以避免产生歧义。
上面的代码可以这样修复：
const divClassName = style(
{
color: 'black'
},
media({maxWidth: 600, minWidth: 401}, {
color: 'red'
}),
media({maxWidth: 400}, {
color: 'yellow'
})
)
服务器端呈现和关键CSS
TypeStyle使服务器端渲染（SSR）非常简单。核心思想是，一旦您在某个变量中准备好了服务器生成的HTML，就可以调用该getStyle函数以刷新所有已使用的样式。
这也有利于确保在响应中只发送使用的CSS规则 - 这就是所谓的 关键CSS。
以下是如何在服务器上使用React和TypeStyle生成完整HTML页面的简单示例：
app.get('/', function (req, res) {
const body = ReactDOMServer.renderToStaticMarkup(
) const html = ReactDOMServer.renderToStaticMarkup(
SSR )
res.send(html);
});
老化性能的缺点和改进
在代码中嵌入TypeStyle当然有其缺点。特别是，这两个新库的增加使PWA应用代码大小增加了大约15KB。
好消息是，当这些额外的数据加载时，应用程序和用户交互根本没有被阻止。该应用程序已经在服务器上呈现，并且所有需要的CSS已经在具有HTML页面的设备上着陆; 因此浏览器拥有呈现网页所需的一切。
此外，关于增加 - 在快速网络环境中，这些额外数据几乎不可感知，在慢速或不可靠网络上，它会在第一次渲染时间上获得巨大收益。
这是使用纯CSS的原始分支上的页面加载的原始性能。
通过使用TypeStyle，我们几乎可以将慢速3G网络上的首次渲染时间缩短50％。
要概述TypeStyle如何在有限的情况下提供帮助，我们使用webpagetest使用的配置文件设置，在不同的移动网络条件下运行相同的比较 ：
![JS类型检查中的CSS]()
正如您从下面的图表中看到的，在每个网络请求非常昂贵的较慢网络中，这些好处更加明显。即使在大多数高性能网络中，在JS技术中使用CSS进行嵌入，第一次渲染时间也会缩短100ms。
![JS类型检查中的CSS]()
在所有情况下，JS中的CSS最多增加100ms第一个互动。如前所述，如果我们查看用户转换率的增长，首次呈现时间的减少使其可以接受。
![JS类型检查中的CSS]()
结论
PWA的引入彻底改变了我们开发应用程序的方式。移动设备现在能够以几年前甚至无法想象的方式离线存储信息。
PWA介绍了在无情的网络环境中提供内容服务的各种新方法。我们不能忘记，首先需要一个网络来加载缓存。每个应用程序都是不同的，引入服务工作者可以让开发人员提供可以更好地适应特定用例的自定义缓存策略。
在这篇文章中，我们概述了如何在JS中使用CSS可以帮助减少应用程序大小以及首次加载它所需的网络请求数量。虽然这种技术不是所有现代Web应用程序性能问题的灵丹妙药，但它会导致第一次渲染时间的显着缩短。
閱讀更多 愛碼農 的文章
