《高性能網站建設指南》規則七、8—避免CSS表達式、使用外部JavaScript和CSS

避免CSS表達式

使用CSS表達式將背景色設置爲每小時變化一次：

backgroud-color: expression( (new Date()).getHours() % 2 ? "#FFF" : "#000" );

對於低版本IE不支持min-width,能夠識別表達式，而其餘瀏覽器識別靜態配置：

width: expression( document.body.clientWidth < 600 ? "600px" : "auto" );
min-width: 600px;

更新表達式

表達式的問題在於對其進行的求值的頻率比人們指望的要高。它們不僅是頁面呈現和大小改變時求值，當頁面滾動、甚至用戶鼠標在頁面上移過期都要求值。

圍繞問題展開工做

用兩種技術能夠避免css表達式產生這一問題——建立一次性表達式和使用事件處理器取代css表達式。

一次性表達式

<style>
p {
    background-color: expression( altBgcolor(this) );
}
</style>
<script type="text/javascript">
function altBgcolor(elem) {
    elem.style.backgroundColor = (new Date()).getHours() % 2 ? "#F08A00" : "#B8D4FF";
}
</script>

css表達式調用了altBgcolor()函數，而該函數將樣式的backgroud-color屬性設置爲一個明確的值，並移除了CSS表達式。

事件處理器

當瀏覽器的大小改變時，這個例子使用setMinWidth()函數來修改全部段落元素的大小

function setMinWidth() {
    var aElements = document.getElementsByTagName("p");
    for (var i = 0; i < aElements.length; i ++) {
        aElements[i].runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" );
    }
}
if (1 != navigator.userAgent.indexOf("MSIE")) {
    window.onresize = setMinWidth;
}

但這在第一次呈現時並不能恰當的設置段落的大小，因此須要使用」一次性表達式「介紹得方法設置初始寬度。

規則8——使用外部JavaScript和CSS

內聯vs外置

純粹而言，內聯快一些，這主要是由於外部示例須要承擔多個HTTP請求帶來的開銷。

可是JavaScript和css文件外置有機會被瀏覽器緩存起來。

若是你的網站的本質上可以爲用戶帶來高完整緩存率，使用外部文件的收益就更大。若是不太可能產生完整緩存，則內聯是更好的選擇。

組件重用

若是你的網站中每一個頁面都使用了相同的javascript和css,使用外部文件能夠提升這些組件的重用率。在這種狀況下使用外部文件更加具備優點，由於當用戶在頁面間導航時，javascript和css組件已經位於瀏覽器的緩存中了。

在典型狀況下，頁面之間javascript和css的重用既不可能100%重疊，也不可能100%無關。

最好的答案就是折中，將你的頁面劃分紅幾種頁面類型，而後爲每種類型建立單獨的腳本和樣式表。這比維護一個單獨的文件要複雜，但一般比爲每一個頁面維護不一樣的腳本和樣式表要容易，而且對於給定的任意頁面都只須要下載不多的多餘的javascript和css。

主頁

我所見過的使用內聯方式反而更好的一個例外是主頁。

頁面查看

主頁擁有沒有很高的頁面查看數量，然而，一般每一個會話只有一個頁面查看。

空緩存vs完整緩存

完整緩存的百分比要比其餘網站更低。出於安全的緣由，不少用戶選擇在每次關閉瀏覽器時清空緩存。下一次用戶打開瀏覽器時，產生的是一個主頁的空緩存頁面查看。

組件重用

重用率很低，不少主頁是用戶來到網站後訪問的惟一一個頁面，所以它們談不上重用。

分析了這些基準，咱們更加傾向於適用內聯，固然，沒有適用於全部主頁的惟一答案。

一箭雙鵰

這裏介紹得兩項技術使你既能夠得到內聯的優點，同時也能緩存外部文件。

加載後下載

對於做爲屢次頁面查看中的第一次的主頁，咱們但願爲主頁內聯javascript和css，但又能爲全部後續頁面查看提供外部文件。這能夠經過在主頁加載完成後動態下載外部組件來實現（經過onload事件）。這可以將外部文件放到瀏覽器的緩存中以便用戶接下來訪問其餘頁面。

這些頁面中javascript和css被加載到頁面中兩次（先是內聯的，而後是外部的）。要使其可以工做，必須處理雙重定義。例如腳本，能夠定義但不能執行函數（至少不能讓用戶察覺）。使用了相對單位（百分比或em）的css若是指定兩次可能會產生問題。將這些組件放到一個不可見的IFrame中是一種更好的方式。

動態內聯

這能夠經過使用前一個例子中的加載後下載技術來完成。當用戶第一次訪問頁面時，服務器發現沒有cookie,因而生成一個內聯了組件的頁面。而後服務器添加javascript來在頁面加載後動態下載外部文件(並設置cookie)。下一次訪問頁面時，服務器看到了cookie，就會生成一個使用外部文件的頁面。

這種方式的美好之處在於它的寬容。即使cookie的狀態和緩存的狀態不匹配，頁面也可以工做，只是沒有本應該的那麼優化而已。