如何讓頁面加載感覺更快？

Question

我想減少我的頁面加載和顯示所花費的時間，假設我從一個空的瀏覽器緩存開始，並且頁面在 html 文件中可能有也可能沒有內聯 css 和 javascript。 更改文件發送到瀏覽器的順序會減少顯示時間，從而使頁面加載速度看起來更快嗎？

例如，如果一個頁面有一些 .css、.js、.png 文件等，是否會先加載 css，顯示速度更快？

是否有標准/特定順序來加載文件類型？

Answer 1

以下幾個步驟可以優化 web 頁面的性能。

• 將 css 放在頂部。

• 將 javascript 放在底部。

• 緩存一切。

• 設置遠期到期 header。

• 適當時返回 304。

• 將唯一的 url 用於 css 並使用 js 傳播更改。

• 除此之外，在需要時使用ajax 。

Answer 2

當心太多的 HTTP 連接。 建立 HTTP 連接需要時間，如果您的 HTML 文件中鏈接了很多元素，它很容易耗盡加載時間。

如果你有很多小圖標、字形等，將它們組合成一個精靈，這樣只加載一個圖像。 例如，Facebook 使用了 sprite 技術 - 如果您檢查它加載的圖像，您會發現這一點。

您還可以將 CSS 個文件合並為一個文件 - 與 Javascript 個文件相同。

此外，如果您有 JavaScript 在加載時影響頁面內容，請確保使用在 DOM 准備就緒時通知您的事件，而不是等待直到所有資源都不會觸發的主體load事件，例如作為圖像，加載了 CSS 個文件、JavaScript 等。

Answer 3

js 文件會阻止頁面加載，直到它們被執行。 如果可能，包括那些在關閉正文之前的內容

Answer 4

雅虎對此有很好的文章。

http://developer.yahoo.com/performance/rules.html

Answer 5

首先確保您的虛擬主機商沒有慢速服務器。 這可能發生在非常便宜的共享網站虛擬主機上。 你應該檢查你是否從你的 html output 中刪除了所有不必要的東西。你可以檢查你的內容是動態的還是 static。如果它是動態的，嘗試將它轉換為 static 內容。

在某些情況下，您可以簡單地激活 CMS 的緩存功能，這也有助於更快地發送網站內容。 只是在慢速連接上，最好使用 gzip 壓縮 output stream。但這會花費時間。 服務器和客戶端都必須壓縮/解壓縮。 你也必須檢查一下。

如果您使用 javascript 並且執行被延遲，您也可以使用ready事件在加載 html 文檔（而不是所有圖像等）后執行 javascript，就像使用 document.onload 事件一樣。

Answer 6

您可以使用一些技巧來節省頁面加載時間：- CSS圖像精靈而不是為每個目的調用每個圖像這將最大限度地減少您網站的 HTTP 請求，從您的HTML 標記和CSS中刪除不必要的 div 標簽或不必要的代碼

我們可以通過CSS獲得良好結果的地方，因此我們不應該在那里使用Jscripts 。 應該始終保持干凈的 HTML 標記，沒有任何不敬的代碼。

合並文件是一種減少 HTTP 請求數量的方法，方法是將所有腳本合並到一個腳本中，同樣將所有 CSS 合並到一個樣式表中。 當腳本和樣式表因頁面而異時，合並文件更具挑戰性，但將這部分作為發布過程可以縮短響應時間。

Answer 7

解決方案原來很簡單，將所有不同的文件組合成一個大文件並使用 zip 壓縮該文件。不幸的是，如果您手動執行此操作，您將遇到維護問題。 該單個壓縮文件不再可編輯。 因此，在編輯了其中一個原始源文件后，您必須將其與其他文件重新組合並重新壓縮。