「直出」到底是個什么鬼？

大家好，果果又來掃盲了。今天要科普的這個技術，叫「直出」。聽起來一愣一愣的是吧？這東西，跟「技術」八竿子打不著啊，反而像是某數字網站上的異國語言呢。程序員，你們確定是在上班時間討論技術問題嗎？

哈哈，是的?！钢背觥蛊鋵嵤恰钢苯虞敵觥沟囊馑?，講的是在瀏覽器打開某個網頁的時候，拿到的數據是服務器「直接輸出」的，顯示速度特別快，你看到很多「秒開」的網頁，八成是用了「直出」的技術。

開玩笑吧，難道還有不是服務器「直接輸出」的網頁嗎？我們先從你點開某個網頁的那一刻發生了什么說起。舉個例子，假如你點開了手機騰訊網，瀏覽器首先會通過DNS查到這個網站的真是ip地址，然后向該ip地址發起http協議的請求，請求拉取手機騰訊網的html頁面。這時候你的手機和騰訊網的服務器悄悄的進行了數次握手，最終達成一致，服務器開始向你的手機傳回html網頁。

呼哧呼哧，經過無數個路由器和網關，html網頁終于拉取到了。但是別高興的太早，這個時候瀏覽器還不能顯示出這個網頁，原因是網頁上還有很多CSS資源（用來美化網頁的，控制字體啊、顏色之類的，沒有CSS的手機騰訊網長下面這個樣子）需要拉取。于是瀏覽器找到寫在html網頁里的CSS資源地址，再次向服務器發起http協議。

呼哧呼哧，CSS資源拉回來了。但是瀏覽器一看，咦，還有javascript代碼落下了呢，于是又去網站上拉取javascript代碼。老套路，握手、協商、傳數據。為什么必須要拉取javascript代碼呢？原來，現在有很多網站，數據都是異步加載的，就像很多APP那樣，先顯示一個架子（由html描述），然后后臺請求數據（由javascript發起），數據拿到了再貼上去，渲染出來。美其名曰用戶體驗，其實用戶該等還是得等。

于是瀏覽器又呼哧呼哧跑去拉去真正的數據了。

于是當用戶真正看到完整的網頁的時候，時間已經過去好幾秒了。等的時間越長，用戶越容易流失。后來程序員想了個辦法，那就是「直出」。

如果瀏覽器第一次請求html網頁的時候，拿到的就是帶有「經過javascript渲染好的數據」的html，那豈不是省去了拉取javascript、拉取數據的過程？雖然需要傳輸的數據量并沒有減少（實際上省去了每次http請求的額外信息），但是最關鍵的是減少了http請求的次數，減少了瀏覽器與服務器之間握手、協商的次數，成了一錘子買賣。

沒錯，這就是「瀏覽器直接輸出渲染好數據的html頁面」，簡稱「直出」。直出沒什么神秘的，只不過需要node.js的支持。我們之前講過node.js，就是服務器和前端一樣，也用javascript編寫，相當于在服務器上也跑一個瀏覽器，服務器上的瀏覽器渲染好的東西，直接輸出給客戶端的瀏覽器，那速度肯定快。

簡單來說，就好比你從某東上買電腦，先買了個主板，然后買了個CPU，然后買了個顯示器，等把東西買全準備自己組裝，發現運費花了好幾百。后來你終于想通了，一拍腦袋，直接把配件都選好，讓店家幫忙組裝起，一次性發過來，多省事啊?！钢背觥咕褪沁@個道理。

#專欄作家#

給產品經理講技術，微信公眾號（pm_teacher），人人都是產品經理專欄作家。資深程序猿，專注客戶端開發若干年，對前端、后臺技術略懂，熱衷于對新的科技領域的探索。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議