[譯] 樣式組件 v3.1.0：大幅性能提高並支持服務端流式渲染

時間 2019-11-16

原文原文鏈接

原文地址：v3.1.0: A massive performance boost and streaming server-side rendering support

原文做者：Evan Scott

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：FateZeros

校對者：ryouaki dazhi1011

v3.1.0：大幅性能提高並支持服務端流式渲染

在生產環境，一種新的 CSS 注入機制意味着更快的客戶端渲染。 🔥 服務端流式渲染能夠加快首屏渲染時間！ 🔥🔥

在生產環境更快的 CSS 注入

這個補丁出來好久了，並有很長的歷史。差很少一年半前 Sunil Pai 發現一個新的，卻普遍未知的 DOM API： insertRule。它容許人們以驚人的速度將 CSS 從 JavaScript 插入到 DOM 中；惟一的缺點就是樣式不能使用瀏覽器開發者工具進行編輯。html

當 Glen 和 Max 首次構建樣式化組件時，他們重點關注的是開發人員的體驗。性能問題對於較小的應用來講是很稀少的，因此他們決定並不使用 insertRule。隨着採用量不斷增長，人們在更大的應用程序中使用樣式組件，在變化頻率較高的組件中樣式注入成爲了性能瓶頸。前端

感謝 Reddit 的一名前端工程師 Ryan Schwers，樣式組件 v3.1.0 如今默認在生產環境使用 insertRule 。node

咱們將前一個版本 (v3.0.2) 和使用了 insertRule 的新版本的進行了一些對比測試，結果甚至比咱們的預期（已經很高的指望）還要高：react

測試應用程序的初始掛載時間較以前減小了約 10 倍，重渲染的時間減小了約 20 倍！android

請注意，測試結果是壓力測試的結果，並不表明真實的應用程序。雖然你的應用程序掛載時間（可能）不會減小 10 倍，但在咱們的一個生產環境下的應用程序中，首次交互時間會降低數百毫秒！ios

在這些基準測試中，樣式組件與其餘主流的 React CSS-in-JS 框架相比，效果如何：git

樣式組件與全部其餘主流的 React CSS-in-JS 框架相比（淺紅色是：v3.0.2；深紅色是：v3.1.0）github

在更細緻測試中，雖然它不是（還不是）最快的 CSS-in-JS 框架，但它只比那些最快的框架慢少量 —— 關鍵的是它再也不是瓶頸。現實的使用結果是最鼓舞人心的，咱們已火燒眉毛的等大家都來報告大家的發現了！後端

服務端流式渲染

在 React v16 中有介紹服務端流式渲染。在 React 還在渲染的時候，它容許應用程序服務器發送部分 HTML 做爲可用頁面，這有助於 更快的首屏渲染（TTFB），也容許你的 Node 服務器***更容易***處理後端壓力。瀏覽器

但不能和 CSS-in-JS 兼容：傳統上，在 React 完成渲染後，咱們會在全部組件樣式的 <head> 中注入一個 <style> 標籤。然而，在流式傳輸的狀況下，在全部組件渲染前，<head> 就已發送到用戶端，因此咱們不能再注入樣式。

解決方案是在組件被渲染的時候，插入帶 **<style>** 的 HTML，而不是等到再一次性注入全部組件。因爲那樣會在客戶端上形成 ReactDOM 混亂（ React 再也不對如今的 HTML 負責），因此咱們在客戶端再重構前將全部這些 style 標籤從新合併到 <head> 中。

咱們已經實現了這一點；你能夠在樣式組件中使用服務端流式渲染 如下是使用方法：

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 的再重構階段作準備：

import ReactDOM from 'react-dom'
import { consolidateStreamedStyles } from 'styled-components'
/* Make sure you call this before ReactDOM.hydrate! */
consolidateStreamedStyles()
ReactDOM.hydrate(<App />, rootElem)
複製代碼

這裏就是它的全部了！💯（查看流式文檔瞭解更多信息）