當瀏覽器呈現沒有格式的頁面時,幕後發生了什麼事?

當瀏覽器呈現沒有格式的頁面時,幕後發生了什麼事?

例如,Facebook 時不時會載入幾乎沒有任何圖形和頁面左側一堆預設的藍色連結。

有時似乎網路連線有問題,有時好像只是網站出現問題。我很想聽到對這個問題的深入解釋。

答案1

一般來說,這意味著 HTML 主頁包含指向 CSS 樣式表的鏈接,該鏈接(無論出於何種原因)無法加載。由於樣式表不可用,瀏覽器將使用預設樣式呈現頁面(從而丟失 CSS 指定的定位資訊、背景圖形、連結顏色等)。特別是,許多現代網站使用 CSS<div>在螢幕上定位其 s,因此如果沒有 CSS,導航連結將顯示在預設位置(左對齊,沿著頁面運行)。

可能的原因:

  • 網路連線不穩定(例如,主頁載入後下載資源逾時)
  • 網路連線遺失,HTML 主頁保留在快取中
  • 您在 HTML 頁面加載之後但在資源加載之前取消了頁面加載
  • 伺服器傳回空響應(可能來自不良的本地網路連線、不良代理或臨時伺服器故障)。

    一種特殊的常見情況是 HTML 頁面託管在一個網站或網域上,而大多數連結的資源位於不同的網域上。例如,超級使用者 ( superuser.com) 指的是 上的樣式表和 UI 圖像(如投票箭頭)cdn.sstatic.net、 上的使用者頭像www.gravatar.com以及 上的內容圖像stack.imgur.com。如果在保持上升狀態sstatic.net時暫時下降superuser.com,您將得到與您所描述的類似的效果。

您提到該頁面“幾乎沒有任何圖形”。該網站可能使用 CSS 將其大部分圖形指定為背景圖像。更有可能的是,頁面連結的大多數資源(包括樣式表和圖像)未載入。這會導致您描述的兩個問題(格式遺失和影像遺失)。

載入的圖像要么不受伺服器或代理故障的影響(圖像通常託管在與主網頁不同的伺服器或網域上),要么已經在瀏覽器快取中(因此瀏覽器不會嘗試獲取它們,避免錯誤)。

相關內容