原文链接：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)做了些对比，结果远超预期：
image
Mount的时间减少了将近10倍，而重新渲染的时间减少了将近20倍！
注意，这样的比较是基于压力测试，不一定适用于真实应用。可能你的应用渲染速度不一定能提升10倍，但是在我们的一个应用中，首次渲染时间减少了好几百毫秒。
下图是styled-components与其它一些主流的React CSS-in-JS框架的比较（淡红色是3.0.2版本，深红色是3.1.0版本）:
image
尽管目前styled-components还不是最快的，但比最快的也慢不了多少，至少之前的瓶颈也已经不复存在了。这样的结果实在是鼓舞人心，我们也非常希望得到各位用户的反馈。
流式服务器端渲染
流式服务器端渲染的概念实在React V16中引进的。它允许React还在渲染的时候，服务端仍然能发送HTML，这使得首字节时间更快，并且Node服务器能更容易的处理背压(Back-pressure)。
这与 CSS-in-JS 不太搭:
通常，我们在React完成渲染后，将所有组件的样式放在<style>标签中，然后插入到<head>里面。而在流式情况下，在任何组件都没被渲染的时候，<head>已经发送给用户了，这时候我们就无法插入任何东西了。
解决方案就是在渲染组件的时候，把HTML和样式混在一起，而不是等到最后，一次性的插入所有的组件。但是这样会使HTML和style标签都糅杂在一起，所以我们最后还是要在重注入(rehydration)之前把所有的style都合并到head里面。
我们已经实现了这一点，你现在可以同时使用流式服务器端渲染和styled-components。就像这样：
import { renderToNodeStream } from 'react-dom/server'
import styled, { ServerStyleSheet } from 'styled-components'
res.write('<!DOCTYPE html><html><head><title>My Title</title></head><body><div id="root">')
const sheet = new ServerStyleSheet()
const jsx = sheet.collectStyles(<App />)
// Interleave the HTML stream with <style> tags
const stream = sheet.interleaveWithNodeStream(
renderToNodeStream(jsx)
)
stream.pipe(res, { end: false })
stream.on('end', () => res.end('</div></body></html>'))
然后在客户端，我们必须调用consolidateStreamedStyles()API来为React的重注入(rehydration)做准备：
import ReactDOM from 'react-dom'
import { consolidateStreamedStyles } from 'styled-components'
/* Make sure you call this before ReactDOM.hydrate! */
consolidateStreamedStyles()
ReactDOM.hydrate(<App />, rootElem)
好消息！
如果你使用的是v2或者甚至v1，不用担心，新版本完全是向后兼容的。并且你也可以无缝的升级至新版本。新版本中有很多的更新，希望你和你的用户能够喜欢。
网友评论