如何快速判斷頁面是服務端渲染還是客戶端渲染


 什么是服務器端渲染和客戶端渲染?

互聯網早期,用戶使用瀏覽器瀏覽的都是一些沒有復雜邏輯的、簡單的頁面,這些頁面都是在后端將html拼接好的然后將之返回給前端完整的html文件,瀏覽器拿到這個html文件之后就可以直接解析展示了,而這也就是所謂的服務器端渲染了。而隨着前端頁面的復雜性提高,前端就不僅僅是普通的頁面展示了,而可能添加了更多功能性的組件,復雜性更大,另外,彼時ajax的興起,使得業界就開始推崇前后端分離的開發模式,即后端不提供完整的html頁面,而是提供一些api使得前端可以獲取到json數據,然后前端拿到json數據之后再在前端進行html頁面的拼接,然后展示在瀏覽器上,這就是所謂的客戶端渲染了,這樣前端就可以專注UI的開發,后端專注於邏輯的開發。 

兩者本質的區別是什么?

客戶端渲染和服務器端渲染的最重要的區別就是究竟是誰來完成html文件的完整拼接,如果是在服務器端完成的,然后返回給客戶端,就是服務器端渲染,而如果是前端做了更多的工作完成了html的拼接,則就是客戶端渲染。

 如何在頁面中快速的判斷出來?

1、鼠標右鍵查看源代碼,在頁面中看到的內容在源代碼中也可以查看到,則是服務端渲染得到的

2、鼠標右鍵查看源代碼,頁面中看到的內容在源代碼中不可以查看到,則是客戶端渲染得到的

服務端渲染示例:

在京東上打開一個商品列表頁面:

https://search.jd.com/Search?keyword=javascript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1&enc=utf-8&suggest=1.def.0.V07&wq=javascript&pvid=720f2c53fe014e7d903ae1245a728bfa

 

客戶端渲染示例:

剛才打開的頁面中,點擊一個列表進入詳情頁面:

https://item.jd.com/10951037.html

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM