程序員常講的「直出」是個什么鬼?
「直出」到底是個什么鬼?
大家好,果果又來掃盲了。今天要科普的這個技術,叫「直出」。聽起來一愣一愣的是吧?這東西,跟「技術」八竿子打不著啊,反而像是某數字網站上的異國語言呢。程序員,你們確定是在上班時間討論技術問題嗎?
哈哈,是的?!钢背觥蛊鋵嵤恰钢苯虞敵觥沟囊馑迹v的是在瀏覽器打開某個網頁的時候,拿到的數據是服務器「直接輸出」的,顯示速度特別快,你看到很多「秒開」的網頁,八成是用了「直出」的技術。
開玩笑吧,難道還有不是服務器「直接輸出」的網頁嗎?我們先從你點開某個網頁的那一刻發生了什么說起。舉個例子,假如你點開了手機騰訊網,瀏覽器首先會通過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協議
那現在經常說的云電腦用戶電腦顯示畫面的延遲是不是可以用直出技術解決?
非直出的是不是叫中出?
你這么優秀你的領導知道嘛?
就服你
呼哧呼哧 ~
通俗易懂,贊一個
這話兒說的,沒sei了~~
通俗易懂,贊
解釋的很通俗呀