訪問一個網頁,瀏覽器至少發起幾次http請求

有次面試被問到打開一個url瀏覽器至少發起幾次http請求,剛開始有點懵,心想瀏覽器至少發生一次http請求啊這個有什麼好問的?get不到面試官的care點!回頭去網上查了一下資料才恍然大悟原來是要考察服務端渲染和客戶端渲染的認識。那到底什麼是客戶端渲染什麼是服務端渲染呢?下面讓我細細道來。

服務端渲染

說白了就是服務端接收到客戶端發來的html字符串時,然後使用模板引擎(ejs、jade等)將數據傳到模板,最後返回一個數據+html的字符串給瀏覽器,瀏覽器自動解析成一個完成的html頁面,很明顯瀏覽器渲染過程只發生了一次網絡請求服務端渲染過程下面掛上張李鵬周老師的圖:


客戶端渲染

客戶端向服務端發起請求,服務端不做任何處理,直接以原文件的形式返回給客戶端,然後渲染html頁面,當遇到ajax請求,有發起一次網絡請求根據接口返回相應的數據,客戶端結合模板引擎(art-template)和數據拼裝最後以dom形式插入html頁面,當然這種方式是比較老套的方式了,如當下用得火熱的 spa 框架,Angular、React、Vue等。很明顯瀏覽器渲染過程發生了兩次網絡請求,客戶端渲染過程再次掛上張李鵬周老師的圖:

 

 

服務端渲染和客戶端渲染的優缺點

服務端渲染和客戶端渲染抉擇

那麼我們到底什麼時候用服務端渲染什麼時候用客戶端渲染呢?一般網站既不是純異步也不是純服務端渲染出來的例如京東的商品列表就採用的是服務端渲染,目的了爲了 SEO 搜索引擎優化,而它的商品評論列表爲了用戶體驗,而且也不需要 SEO 優化,所以採用是客戶端渲染。

總結
若網站是純服務端渲染,那麼瀏覽該網站至少發起一次請求,否則瀏覽該網站至少發起兩次請求

原文參考:https://jkchao.cn/article/5a11155fb520d115154c8fa1

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章