JavaScript和CSS的優化提高網站性能

2024-08-30 08:33:58

字體：大中小

來源：轉載

供稿：網友

在第一部分和第二部分中我們分別介紹了改善網站性能中頁面內容和服務器的幾條守則，除此之外，JavaScript和CSS也是我們頁面中經常用到的內容，對它們的優化也提高網站性能的重要方面：
CSS：

把樣式表置于頂部避免使用CSS表達式（Expression）使用外部JavaScript和CSS 削減JavaScript和CSS 用<link>代替@import 避免使用濾鏡
JavaScript

把腳本置于頁面底部使用外部JavaScript和CSS 削減JavaScript和CSS 剔除重復腳本減少DOM訪問開發智能事件處理程序 17、把樣式表置于頂部
在研究Yahoo!的性能表現時，我們發現把樣式表放到文檔的<head />內部似乎會加快頁面的下載速度。這是因為把樣式表放到<head />內會使頁面有步驟的加載顯示。
注重性能的前端服務器往往希望頁面有秩序地加載。同時，我們也希望瀏覽器把已經接收到內容盡可能顯示出來。這對于擁有較多內容的頁面和網速較慢的用戶來說特別重要。向用戶返回可視化的反饋，比如進程指針，已經有了較好的研究并形成了正式文檔。在我們的研究中HTML頁面就是進程指針。當瀏覽器有序地加載文件頭、導航欄、頂部的logo等對于等待頁面加載的用戶來說都可以作為可視化的反饋。這從整體上改善了用戶體驗。點擊這里查看網頁制作教程頻道內容
把樣式表放在文檔底部的問題是在包括Internet Explorer在內的很多瀏覽器中這會中止內容的有序呈現。瀏覽器中止呈現是為了避免樣式改變引起的頁面元素重繪。用戶不得不面對一個空白頁面。
HTML規范清楚指出樣式表要放包含在頁面的<head />區域內：“和<a />不同，<link />只能出現在文檔的<head />區域內，盡管它可以多次使用它”。無論是引起白屏還是出現沒有樣式化的內容都不值得去嘗試。最好的方案就是按照HTML規范在文檔<head />內加載你的樣式表。 CSS表達式是動態設置CSS屬性的強大（但危險）方法。Internet Explorer從第5個版本開始支持CSS表達式。下面的例子中，使用CSS表達式可以實現隔一個小時切換一次背景顏色：18、避免使用CSS表達式（Expression）

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
如上所示，expression中使用了JavaScript表達式。CSS屬性根據JavaScript表達式的計算結果來設置。expression方法在其它瀏覽器中不起作用，因此在跨瀏覽器的設計中單獨針對Internet Explorer設置時會比較有用。
表達式的問題就在于它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動鼠標時都會要重新計算一次。給CSS表達式增加一個計數器可以跟蹤表達式的計算頻率。在頁面中隨便移動鼠標都可以輕松達到10000次以上的計算量。
一個減少CSS表達式計算次數的方法就是使用一次性的表達式，它在第一次運行時將結果賦給指定的樣式屬性，并用這個屬性來代替CSS表達式。如果樣式屬性必須在頁面周期內動態地改變，使用事件句柄來代替CSS表達式是一個可行辦法。如果必須使用CSS表達式，一定要記住它們要計算成千上萬次并且可能會對你頁面的性能產生影響。

上一篇：新手快速學習制作網站ICON的步驟

下一篇：提高網站性能中網站服務器的改進