不了解web的發展歷史很難理解為什麼現在又流行服務端渲染html了。現在的服務端渲染html和過去的渲染方式並不相同,所採用的技術、方式、方法也不相同,並不是舊瓶裝舊酒,而是舊瓶裝新酒。技術的更迭很大一部分原因在於出現了瓶頸無法滿足當下的網路資料**。
渲染一詞起源於遊戲領域、3d設計領域,渲染的意義在於並不是簡單地畫一張畫呈現在其他人面前,而以資料的形式儲存物體的位置,顏色、法線、紋理、光照等,當有人需要檢視的時候,就會重新再次準確地重現,重現的過程就是渲染。
渲染流程會接受使用定點描述3d物體的原始資料作為輸入用於處理,再計算它的片段(fragment),片段就是乙個個畫素的3d投射,片段包含了位置、顏色、法線、紋理、光照等等,渲染好的畫素輸出到顯示屏上。
頁面渲染的本質就是瀏覽器將html文字轉換成頁面的過程。頁面渲染大致需要走過下面幾個步驟:
1、使用者輸入**後瀏覽器請求伺服器端得到乙個html文字。
3、dom樹、樣式規則構建完後渲染程序就會將他們兩合併成渲染樹,然後渲染程序就會對渲染樹進行布局,生產布局樹。渲染程序對布局樹進行繪製並生成繪製記錄。
4、渲染程序對布局樹分成並柵格化每一層得到合成幀,再發給gpu程序顯示到瀏覽器的頁面中。
伺服器端渲染(ssr)會在瀏覽器請求頁面的url的時候,就會把我們需要的html文字組裝好,然後返回給瀏覽器,瀏覽器不需要再經過j**ascript執行就可以直接構建出dom樹並展示到頁面中。客戶端渲是當瀏覽器請求url時伺服器端直接返回乙個空的靜態html檔案,伺服器端不需要任何查資料庫和模板組裝的操作。瀏覽器拿到這個html檔案後就開始樣式表和指令碼,指令碼會請求伺服器端提供的api來獲取資料,獲取完資料後j**ascript指令碼就會動態地將資料渲染到頁面中,完成頁面的顯示。
web1.0時代沒有ajax,幾乎所有的應用都是伺服器端渲染,瀏覽器請求頁面url之後,伺服器端會將所有的東西準備好,包括了資料庫查詢到的資料、元件模板(php、asp、jsp等)等,返回給瀏覽器,瀏覽器不需要任何的j**ascript參與。
但隨著人們的期許值越來越大,web業務也變得越來越複雜了,再加上ajax的出現,web1.0伺服器端渲染暴露出了很多缺點,比如我們每次點選頁面的乙個小模組都需要重新請求一次頁面,重新查詢資料庫,重新組裝載入一次html。j**ascript、jsp、php、asp**混在一起更是使得web應用很難進行維護。
nodejs出現之後網頁開始被當成了spa,即獨立應用程式。前端接管了所有頁面渲染的事情,而伺服器端只負責資料查詢和處理api。
spa發展過程中也逐漸暴露出很多問題,比如不利於搜尋引擎seo,j**ascript日益臃腫導致首批渲染速度還不及web1.0時代的伺服器端渲染,於是伺服器端渲染再次被應用,當瀏覽器請求url時,前端伺服器會根據不同的url向後端伺服器請求資料,請求完前端伺服器會組裝乙個攜帶具體資料的html文字返回給瀏覽器。瀏覽器會同時渲染頁面、載入執行j**ascript指令碼。當我們請求跳轉到別的頁面的時候,瀏覽器會執行j**ascript指令碼,同時向後端伺服器請求資料,獲取完資料後再次執行j**ascript指令碼動態渲染頁面。
伺服器端渲染、客戶端渲染的進化史其實也是前、後端工程師血淚發展史。早期後端總是鄙視前端js太簡單,前端也無非是切切圖、寫寫js特效,前端工程師根本算不上乙個程式設計師。
如今前端翻身了徹底地擺脫了後端的指指點點。如今乙份**,既可以由服務端渲染,也可以由客戶端渲染。
React React應用程式流式服務端渲染
好處 react16推出了流式服務端渲染,它允許你並行地分發html片段。這樣可以讓渲染 出的首位元組有意義的內容給使用者速度更快。例子1,上面部分是一次性轉換,下面是流渲染,兩種方式 而且相對rendertostring,流是非同步的。這個可以讓你的node.js服務一次性渲染多個請求,並且保持在...
遊戲服務端為什麼需要登入服
注 這篇文章不僅會說登入服,還會說一些其它遊戲相關的事哦!我們都知道,很多遊戲在上線時,都會大肆宣傳,最近宣傳比較多的就是 激戰2 了。當然我不是 激戰2 的水軍 很多玩家都會提前坐在電腦前,等候遊戲官方給出的開服時間,搶點進入遊戲,因為這樣能佔據時間的紅利,可以在遊戲中占個好排名。當我們建立角色,...
遊戲服務端為什麼須要登入服
注 這篇文章不僅會說登入服。還會說一些其他遊戲相關的事哦!我們都知道。非常多遊戲在上線時,都會大肆宣傳,近期宣傳比較多的就是 激戰2 了。當然我不是 激戰2 的水軍 非常多玩家都會提前坐在電腦前,等候遊戲官方給出的開服時間,搶點進入遊戲,由於這樣能占領時間的紅利,能夠在遊戲中占個好排名。當我們建立角...