天天看點

前端基礎入門:靜态頁面與動态頁面的差別

作者:雲端源想IT教育訓練
前端基礎入門:靜态頁面與動态頁面的差別

“這裡是雲端源想IT,幫你輕松學IT”

嗨~ 今天的你過得還好嗎?

别為了不屬于你的觀衆

去演你不擅長的人生

- 2023.06.16 -

什麼是靜态頁面?什麼是動态頁面?兩者有什麼差別?很多不了解前端技術的人可能會認為靜态頁面就是一個内容固定不變、沒有任何效果的頁面,而動态頁面則是頁面非常豐富、有各種互動效果和動态效果的頁面。其實這個了解是錯誤的。今天小編将詳細為大家分享一下靜态頁面和動态頁面到底是什麼,兩者有什麼差別。

前端基礎入門:靜态頁面與動态頁面的差別

一、什麼是靜态頁面和動态頁面?

通俗的來講,靜态頁面是随着HTML代碼的生成,頁面的内容和顯示效果就基本不會發生變化(除非修改頁面代碼),而動态頁面,雖然同樣頁面代碼不發生變化,但是其顯示的内容确實可以随着時間環境或者資料操作的結果而發生變化。

前端基礎入門:靜态頁面與動态頁面的差別

是以靜态頁面和動态頁面的認識應該定位在:是否有資料庫加工這個環節。例如去購買T-shirt,我們直接從商店購買的T-shirt就是靜态頁面,而我們根據不同人興趣定制T-shirt就是動态頁面。

為了更好地認識了解靜态頁面和動态頁面,我們重點了解一下兩者之間的差別。

二、工作原理不同

靜态頁面中,使用者通過頁面操作的過程就是通過浏覽器使用HTTP協定向伺服器發送一個請求(Request),告訴伺服器我需要展示那個頁面,伺服器收到請求後,直接根據使用者的需求直接從檔案系統中取出相應的檔案,傳回給浏覽器,浏覽器解析後為使用者展示下相應的頁面。

前端基礎入門:靜态頁面與動态頁面的差別

而動态頁面中,使用者通過浏覽器發送的請求到達伺服器之後,伺服器根據請求内容從資料庫中調取相應的内容組合成一個虛拟的檔案,然後将檔案發送給浏覽器,使用者才得以看到定制化的内容。

前端基礎入門:靜态頁面與動态頁面的差別

通過這兩個圖,我們可以非常直覺的看到動态頁面在相應使用者的請求時還需要通過資料庫擷取相應的資料,就相當于你定制了一件T-shirt,工廠需要根據你的定義給你制作個性化的T-shirt。

動态、靜态頁面效果示例:

前端基礎入門:靜态頁面與動态頁面的差別
前端基礎入門:靜态頁面與動态頁面的差別

三、靜态頁面和動态頁面的互動性差異

靜态頁面以展示為主,使用者僅僅是通過頁面擷取相應的内容,而動态頁面允許使用者主動參與到頁面之中,例如登入功能、查詢功能、定制化頁面内容等等。

前端基礎入門:靜态頁面與動态頁面的差別

是以從互動性的角度來看,使用者在動态頁面中更有參與感。目前除了一些特定的公開性展示的門戶網站以外,大部分網站都是采用動态頁面。

四、更新維護方式不同

靜态頁面内容是固定的,并且以一個完整的檔案儲存在伺服器上,如果需要修改靜态頁面的内容,則需要找到此頁面的源檔案,并修改源檔案的代碼才可以實作内容調整。當網站内容資訊非常大時,其維護成本同樣會非常的大。

前端基礎入門:靜态頁面與動态頁面的差別

而動态頁面以資料庫技術為基礎,當需要修改内容時,可以直接通過資料庫修改,而不需要調整頁面的源檔案。這樣可以大大降低網站維護的工作量,并且大幅度提高網站營運的效率。

五、響應速度不同

這個差異非常好了解,簡單來說就是靜态頁面内容是固定的,伺服器的響應時間較快,而動态頁面還需要根據需求從資料庫中調取相應的資料“組裝”成為使用者需求的頁面,是以其響應速度會比較慢。

前端基礎入門:靜态頁面與動态頁面的差別

還是買衣服的案例,買已經做好的衣服,可以直接買了就走,而定制衣服則需要經過工廠的加工才能得到。當然在網頁的通路中,雖然動态頁面相對較慢,但是其差别也僅僅是以微秒甚至更小的計時機關衡量,對于人的反映時間0.1面來說,幾乎可以忽略不計。

六、靜态頁面和動态頁面的通路位址

靜态頁面的每個網頁都有一個固定的URL,并且頁面以.htm/.html/.shtml/.xml常見形式作為字尾,而且不包含“?”,這樣的連結更有利于搜尋引擎抓取并且收錄。而動态頁面的URL包含“?”,并且一般以.asp/.php/.jsp等擴充名結尾。

當然我們并不能夠直接通過一個網頁的URL來判斷這個頁面是靜态頁面還是動态頁面。這是由于搜尋引擎一般不會從一個網站的資料庫中方位全部網頁,是以動态頁面中“?”對搜尋引擎檢索存在一定的問題。很多企業為了讓自己網站有更多的收錄,就會将動态頁面的URL進行僞靜态化。

前端基礎入門:靜态頁面與動态頁面的差別

靜态頁面是網站建設的基礎,靜态頁面和動态頁面之間也并不沖突,為了網站适應搜尋引擎檢索的需求,即使選用動态網站技能,也可以将頁面内容轉化為靜态頁面釋出。

以上我們從工作原理、互動性差異、更新維護方式、響應速度和通路位址等五個方面分析了靜态頁面和動态頁面的不同之處,下面再簡單歸納一下它們的特點都有哪些。

七、靜态頁面的特點

1)靜态頁面每個頁面都有一個固定的URL,且頁面URL以.htm、.html、.shtml等常見方式為字尾,而不含有“?”;

2)頁面内容一經釋出到網站伺服器上,無論是否有使用者通路,每個靜态頁面的内容都是儲存在網站伺服器上的,也就是說,靜态頁面是實實在在儲存在伺服器上的檔案,每個頁面都是一個獨立的檔案;

前端基礎入門:靜态頁面與動态頁面的差別

3)靜态頁面的内容相對穩定,是以容易被搜尋引擎檢索;

4)靜态頁面沒有資料庫的支援,在網站制作和維護方面工作量較大,是以當網站資訊量很大時完全依靠靜态頁面制作方法比較困難;

5)靜态頁面的互動性穿插,在功能方面有較大的限制

靜态頁面相對更新起來比較費事,适用于通常更新較少的展示型網站。另外,如果擴充名為.asp但卻沒有連資料庫,完全是靜态的頁面,那也是靜态網站.僅僅.asp擴充名。

前端基礎入門:靜态頁面與動态頁面的差別

八、動态頁面的特點

1)動态頁面以資料庫技能為基礎,可以大大下降網站維護的工作量;

2)選用動态頁面技能的網站可以完成更多的功能,如使用者注冊、使用者登入、線上調查、使用者管理、訂單管理等等;

3)動态頁面實際上并不是獨立存在于伺服器上的頁面檔案,隻有當使用者請求時伺服器才傳回一個完整的頁面;

4)動态頁面中的“?”對搜尋引擎檢索存在一定的問題,搜尋引擎通常不行能從一個網站的資料庫中通路全部頁面,或者出于技能方面的考慮,搜尋蜘蛛不去抓取網址中“?”後面的内容,是以選用動态頁面的網站在進行搜尋引擎推廣時需求做一定的技能處理才能适應搜尋引擎的要求。

前端基礎入門:靜态頁面與動态頁面的差別

總之,靜态頁面和動态頁面各有特點,網站選用動态頁面還是靜态頁面主要取決于網站的功能需求和網站内容的多少,如果網站功能比較簡單,内容更新量不是很大,選用純靜态頁面的方法會更簡單,反之通常要選用動态頁面技能來完成。

今天就先講到這裡了,更多Java基礎知識持續更新中,歡迎一起學Java!

前端基礎入門:靜态頁面與動态頁面的差別

我們下期再見!

END

文案編輯|雲端學長

文案配圖|雲端學長

内容由:雲端源想分享

前端基礎入門:靜态頁面與動态頁面的差別

繼續閱讀