我們都知道，網(wǎng)頁上的很多內(nèi)容之所以能那么豐富，是因為大量的css、js去渲染出這個頁面。那么他們是如何渲染的呢？那么就要說到我們本文的兩種渲染方式了，即客戶端渲染和服務(wù)端渲染。

正文

本文將分別講述兩種渲染方式的區(qū)別和他們各自的優(yōu)缺點，以及他們在真實項目中的運用。如果不想看具體過程講解的可以直接跳到最后的總結(jié)看結(jié)論.

一、客戶端渲染

圖片講解

文字講解

看了圖后，我給大家總結(jié)一下，大致過程就是 :

用戶輸入地址，客戶端向服務(wù)器發(fā)送請求

=> 服務(wù)器傳給瀏覽器相應(yīng)的網(wǎng)頁文件

=> 瀏覽器解析文件

=> 遇到ajax請求則向服務(wù)器再次請求一些數(shù)據(jù)

=> 服務(wù)器再次向瀏覽器發(fā)送相應(yīng)的數(shù)據(jù)

=> 瀏覽器拿到ajax請求返回的數(shù)據(jù)后，將數(shù)據(jù)渲染在頁面上

真實的客戶端渲染案例

在上面我們也看到了，客戶端渲染是在請求回數(shù)據(jù)后就已經(jīng)開始渲染了，只是有些數(shù)據(jù)還沒拿到，暫時沒法渲染，不過大部分的頁面內(nèi)容我們都已經(jīng)可以看到了，所以客戶端渲染可以完成頁面的局部刷新。例如JD的商品評論數(shù)據(jù)

大家看，我在點擊評論的下一頁時，整個頁面沒有刷新，瀏覽器上的網(wǎng)址也沒有變化，只有評論的內(nèi)容做了一個刷新，這就是一個典型的客戶端渲染的例子，進入這個頁面時，其他的內(nèi)容都被瀏覽器渲染好了，而評論信息是在我們點擊下一頁時，客戶端向服務(wù)器發(fā)送ajax請求，拿到了這一頁的評論信息，再在這個部分做一個局部的數(shù)據(jù)重新渲染。

優(yōu)點可以向用戶快速展示頁面的內(nèi)容，增加用戶體驗

給別人爬蟲爬取相應(yīng)的內(nèi)容增加一定的困難

缺點可能需要向服務(wù)器請求多次數(shù)據(jù)

不利于SEO 搜索引擎優(yōu)化，即百度、搜狗等搜索引擎搜索不到客戶端渲染的數(shù)據(jù)

二、服務(wù)器渲染

圖片講解

文字講解

同樣的，看完圖我給大家總結(jié)一下，服務(wù)器渲染的步驟就是：

客戶端向服務(wù)器發(fā)送一次請求

=> 服務(wù)器接收請求，并在服務(wù)端操作網(wǎng)頁文件，將對應(yīng)數(shù)據(jù)導(dǎo)入文件

=> 服務(wù)器在服務(wù)端渲染好整個網(wǎng)頁，發(fā)送給客戶端

=> 客戶端接收服務(wù)器發(fā)送過來的網(wǎng)頁文件，不需要做任何操作，直接呈現(xiàn)

真實的服務(wù)器渲染案例

大家看，我在電腦的分類購物列表中，點擊下一頁時，整個頁面做了一個刷新，瀏覽器上的網(wǎng)址也做了變化，這就是服務(wù)器渲染的一個典型案例，整個網(wǎng)頁做一個刷新，正應(yīng)對了我們上面的圖片講解，是瀏覽器向服務(wù)器請求，服務(wù)器給瀏覽器發(fā)送一整個頁面。

優(yōu)點只需要向服務(wù)器請求一次

利于SEO 搜索引擎優(yōu)化，即能被搜索引擎搜索到，能向用戶展示你網(wǎng)頁的東西

缺點如果數(shù)據(jù)量過大，在服務(wù)器渲染的時間就會過長，造成瀏覽器暫時的空白

容易被爬蟲爬取

三、如何區(qū)分客戶端渲染和服務(wù)器渲染第一種方法

若頁面做整體的刷新，即網(wǎng)址發(fā)生改變，就是服務(wù)器渲染

若頁面做了局部刷新，即網(wǎng)址沒發(fā)生改變，就是客戶端渲染

第二種方法(有g(shù)if動圖展示)

若查看網(wǎng)頁源代碼時，查找不到網(wǎng)頁中的一些內(nèi)容，那就是客戶端渲染

若查看網(wǎng)頁源代碼時，能找到網(wǎng)頁中對應(yīng)的內(nèi)容，那就是服務(wù)器渲染

大家看，這個商品的名稱在網(wǎng)頁源代碼中，能被搜索到，說明該條數(shù)據(jù)是被服務(wù)器渲染出來的。

大家看，這個商品的評論信息在網(wǎng)頁源代碼中，不能被搜索到，說明該條數(shù)據(jù)是被客戶端渲染出來的。

四、總結(jié)

客戶端渲染：頁面的渲染工作都是由瀏覽器來完成的，服務(wù)器只是負責(zé)提供數(shù)據(jù)。

客戶端渲染能盡早的把頁面展示給用戶，用戶體驗好

不容易被爬蟲爬取數(shù)據(jù)，同時也無法被搜索引擎搜索到

服務(wù)器渲染：頁面渲染的工作都是由服務(wù)端來完成的，數(shù)據(jù)也是由服務(wù)端提供的，瀏覽器只負責(zé)展示頁面內(nèi)容

容易被爬蟲爬取數(shù)據(jù)，同時能被搜索引擎搜索到，能在搜索引擎中向用戶展示數(shù)據(jù)

那是用客戶端渲染好還是服務(wù)器渲染好呢？

其實一般的頁面中，兩種渲染是相結(jié)合著使用的，因為我們會有些數(shù)據(jù)不想過早的傳過來，想要被用到時再去拿數(shù)據(jù)，同時也不想被爬蟲那么輕易的爬取，而且也不需要被搜索引擎搜索并展示，我們就可以用客戶端渲染，例如我們本文中提到的商品評論信息。

但有時，我們想讓我們網(wǎng)頁的數(shù)據(jù)被搜索引擎搜索到，能讓用戶在使用搜索引擎的時候，查找到我們的數(shù)據(jù)信息，我們就可以使用服務(wù)器渲染。例如我們本文提到的電商網(wǎng)站的商品的基本信息，商品能被用戶在搜索引擎搜索到，才能有更大的機會賣出去嘛，哈哈哈 這個解釋應(yīng)該挺貼切了吧。

結(jié)束語

好了，給大家講了那么多，也是想讓大家了解一下這兩種渲染具體是怎么做的，同時也是幫我自己鞏固一下知識點，畢竟每天學(xué)習(xí)的東西那么多，但記住的又很少。希望這篇文章對大家有所幫助~

希望這篇文章對大家能有所幫助，我是Lpyexplore，一個因python爬蟲而轉(zhuǎn)入前端的程序員，關(guān)注我，帶你爬蟲過程中學(xué)習(xí)Web。公眾號：Lpyexplore的編程小屋

總結(jié)

以上是生活随笔為你收集整理的python 服务端渲染_客户端渲染和服务器渲染的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。