JavaScript和CSS的優(yōu)化提高網(wǎng)站性能

2024-08-30 08:33:58

字體：大中小

供稿：網(wǎng)友

在第一部分和第二部分中我們分別介紹了改善網(wǎng)站性能中頁面內(nèi)容和服務(wù)器的幾條守則，除此之外，JavaScript和CSS也是我們頁面中經(jīng)常用到的內(nèi)容，對(duì)它們的優(yōu)化也提高網(wǎng)站性能的重要方面：
CSS：

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

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

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

上一篇：新手快速學(xué)習(xí)制作網(wǎng)站ICON的步驟

下一篇：提高網(wǎng)站性能中網(wǎng)站服務(wù)器的改進(jìn)