Web瀏覽器如何顯示Web數據？

Question

我以前從Mozilla的網站上閱讀過這篇文章，並且對於客戶端代碼的工作原理有一個疑問。

您可能還會聽到術語服務器端和客戶端代碼，特別是在Web開發環境中。客戶端代碼是在用戶計算機上運行的代碼 - 當查看網頁時，會下載頁面的客戶端代碼，然後運行並由瀏覽器顯示。在這個JavaScript模塊中，我們明確地討論了客戶端JavaScript。

當代碼被「下載」並由瀏覽器運行並顯示時，它在哪裏下載到？它是臨時下載還是存儲在用戶電腦上，還是永久性的？

Answer 1

文件被下載並存儲在緩存中並顯示。這些文件是HTML，CSS，JS，圖片等 服務器端是PHP等等這些都不是下載它們的服務器上只執行

Answer 2

所有瀏覽器都有他們Store下載腳本中的本地文件系統中的某個目錄，樣式表，圖像等。這些是暫時的，並且可以由用戶通過瀏覽器的相應功能來刪除，例如Google Chrome上的「clear browsing data」。

This page explains the location of the temporary files downloaded by Chrome on various systems。

Answer 3

在客戶端，HTML，CSS和JavaScript代碼以及資源（如圖像和視頻）將存儲在某種內存中，通常是主內存。一旦關閉選項卡或選項卡變爲非活動狀態，通常會回收該內存。

對圖像等資源進行解碼後，可能會將其複製到GPU內存中，以便渲染速度更快。 3D代碼也可以轉換爲圖形卡指令並臨時駐留在圖形卡上。

如果內存不足，操作系統可能會將其交換到磁盤。請閱讀virtual memory瞭解更多詳情。

瀏覽器確實在磁盤上有緩存。這通常不會在第一次渲染時使用（因爲在渲染頁面之前您必須等待磁盤），但會加速未來的請求。作爲程序員，您可以設置HTTP Cache-Control和other headers。由瀏覽器決定何時刪除緩存文件。通常情況下，它們在舊陳舊，達到最大高速緩存大小限制或用戶手動刪除它們時被刪除。這是瀏覽器和用戶配置它是否以及如何執行緩存。

Proxy servers也可以緩存。一些大型組織使用它們來減少和控制互聯網流量。在這種情況下，代碼從服務器下載到代理，然後從代理下載到每個客戶端。

HTML5 offline web applications通常存儲在磁盤上的時間較長。與瀏覽器緩存相比，瀏覽器不應該刪除脫機Web應用程序，但當然實際瀏覽器的行爲可能會有所不同。當用戶輸入到脫機Web應用程序的URL時，它會在發送新版本請求之前從磁盤加載。相反，使用普通瀏覽器緩存時，資源存在於磁盤上（如果HTTP標頭不正確，則爲失效）或下載。

Service workers也可以由網站安裝以攔截HTTP請求，就像脫機web應用程序一樣。他們可以在磁盤上存儲和加載代碼/資產localStorage。

---

總之，代碼的存儲取決於很多因素。根據當前計算體系結構的性質，代碼將在某個時間處於主內存中。幸運的是，您的Web應用程序很少需要關心代碼的實際位置 - 瀏覽器會自動爲您提供該代碼。儘管如此，通過配置緩存標題並使用脫機Web應用程序或服務工作者，您可能會獲得性能提升，並確保您的網站即使在互聯網不可用時也可用。

如果你想知道什麼資源在實際的網頁緩存（至少在你的設置），您可以使用網絡瀏覽器的開發者工具（在許多系統上使用可達F12 ）。例如，下面是這個非常網頁瀏覽器加載並啓用緩存：

注列大小，它說，來自哪個緩存（Chrome提供了一個內存和一個在磁盤上）如果任何一個文件即將到來。