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

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

哈哈，是的。「直出」其實是「直接輸出」的意思，講的是在瀏覽器打開某個網(wǎng)頁的時候，拿到的數(shù)據(jù)是服務(wù)器「直接輸出」的，顯示速度特別快，你看到很多「秒開」的網(wǎng)頁，八成是用了「直出」的技術(shù)。

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

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

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

于是瀏覽器又呼哧呼哧跑去拉去真正的數(shù)據(jù)了。

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

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

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

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

#專欄作家#

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

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議