今天要科普的這個技術(shù)嫁盲，叫「直出」。聽起來一愣一愣的是吧烈掠？這東西羞秤，跟「技術(shù)」八竿子打不著啊，反而像是某數(shù)字網(wǎng)站上的異國語言呢左敌。程序員瘾蛋，你們確定是在上班時間討論技術(shù)問題嗎？
哈哈矫限，是的哺哼。「直出」其實是「直接輸出」的意思叼风，講的是在瀏覽器打開某個網(wǎng)頁的時候取董，拿到的數(shù)據(jù)是服務(wù)器「直接輸出」的，顯示速度特別快无宿，你看到很多「秒開」的網(wǎng)頁茵汰，八成是用了「直出」的技術(shù)。
開玩笑吧孽鸡，難道還有不是服務(wù)器「直接輸出」的網(wǎng)頁嗎栏豺？我們先從你點開某個網(wǎng)頁的那一刻發(fā)生了什么說起豆胸。舉個例子，假如你點開了手機騰訊網(wǎng)溉卓，瀏覽器首先會通過DNS查到這個網(wǎng)站的真是ip地址搬泥，然后向該ip地址發(fā)起http協(xié)議的請求，請求拉取手機騰訊網(wǎng)的html頁面尉尾。這時候你的手機和騰訊網(wǎng)的服務(wù)器悄悄的進行了數(shù)次握手燥透，最終達(dá)成一致，服務(wù)器開始向你的手機傳回html網(wǎng)頁肢藐。
呼哧呼哧吱韭，經(jīng)過無數(shù)個路由器和網(wǎng)關(guān)，html網(wǎng)頁終于拉取到了痘煤。但是別高興的太早衷快，這個時候瀏覽器還不能顯示出這個網(wǎng)頁，原因是網(wǎng)頁上還有很多CSS資源（用來美化網(wǎng)頁的蘸拔，控制字體啊环葵、顏色之類的积担，沒有CSS的手機騰訊網(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ā)過來霉赡，多省事啊♂Ｍ校「直出」就是這個道理穴亏。
