旭霸
旭霸

[译] styled-components v3.1.0

原文链接：https://medium.com/styled-components/v3-1-0-such-perf-wow-many-streams-c45c434dbd03

image

V3.1.0: 带来巨大的性能提升和流式服务器端渲染支持

一种新的 CSS 注入机制意味着在生产环境中更快的客户端渲染，同时流式服务器端渲染使得首字节时间(TTFB)更快。

在生产环境中更快捷的CSS注入

CSS注入早就不是什么新鲜事了。早在一年半以前，Sunil Pai就发现了一个鲜为人知的DOM API: insertRule。它使我们能用JS的方式把CSS快速注入到DOM当中。唯一的缺点是这些样式不能在浏览器的开发者工具中编辑。

当 Glen 和 Max 第一次写出styled-components的时候，他们完全是从开发者的体验出发的。对于小型应用来说性能问题还不明显，所以他们决定不再使用insertRule。但是当越来越多的人开始使用，并且使用在大型应用程序中时，样式注入就成了瓶颈，特别对于一些高度动态的案例来说。

多亏了 Reddit 的前端工程师 Ryan Schwers，styled-components 3.1.0版本在生产环境中默认使用insertRule。

我们将该版本与之前的版本(3.0.2)做了些对比，结果远超预期：

[译] styled-components v3.1.0_第1张图片
image

Mount的时间减少了将近10倍，而重新渲染的时间减少了将近20倍！

注意，这样的比较是基于压力测试，不一定适用于真实应用。可能你的应用渲染速度不一定能提升10倍，但是在我们的一个应用中，首次渲染时间减少了好几百毫秒。

下图是styled-components与其它一些主流的React CSS-in-JS框架的比较（淡红色是3.0.2版本，深红色是3.1.0版本）:

[译] styled-components v3.1.0_第2张图片
image

尽管目前styled-components还不是最快的，但比最快的也慢不了多少，至少之前的瓶颈也已经不复存在了。这样的结果实在是鼓舞人心，我们也非常希望得到各位用户的反馈。

流式服务器端渲染

流式服务器端渲染的概念实在React V16中引进的。它允许React还在渲染的时候，服务端仍然能发送HTML，这使得首字节时间更快，并且Node服务器能更容易的处理背压(Back-pressure)。

这与 CSS-in-JS 不太搭:
通常，我们在React完成渲染后，将所有组件的样式放在