《高性能網(wǎng)站建設指南》閱讀筆記_規(guī)則8- 使用外部javascript和css
發(fā)布時間:2013-11-22 瀏覽:332打印字號:大中小
純粹而言,內聯(lián)CSS和JS要快一些。這主要是因為外部的示例需要承擔多個http請求帶來的開銷。盡管外部示例可以從樣式表和腳本的并行下載中獲益,但是明顯第一個因素影響的更大一些。這也就是它放在第一位的原因。但外部CSS和JS文件有機會被瀏覽器緩存起來。當一個頁面被重復訪問時,就不需要重復下載外部CSS和JS了。既減小了需要下載文檔的大小,又不會產(chǎn)生多余的http請求數(shù)量。
所以,使用內嵌式的還是外聯(lián)式的,需要通過一定的手段衡量。
1、 頁面查看。每個用戶產(chǎn)生的頁面查看越少,內聯(lián)的越占優(yōu)勢。(比如,一個月只訪問你的網(wǎng)站一次,即使有緩存,下次訪問的時候也很有可能被移除了)相反,訪問頁面的次數(shù)越多,外聯(lián)的越有優(yōu)勢。
2、 緩存,如果沒有設置緩存,肯定的是內聯(lián)的有優(yōu)勢
3、 組建重用,簡單的說就是組件重用度低采用內聯(lián)的好,高則外聯(lián)的好。這一條是建立在用戶屬否在一次回話中訪問網(wǎng)站的多個頁面。只有訪問多個頁面才有意義。有兩種極端情況:一個是每個頁面使用都使用各自單獨的組件,沒有公用部分。這樣做會產(chǎn)生過多的http請求數(shù)量,只對用戶只訪問一個頁面時有意義。另一種極端是創(chuàng)建一個單獨的js文件,包含所有的頁面使用的js,再創(chuàng)建一個css包含所有頁面使用的css。用戶在訪問一個頁面以后所有的js和css都將會被緩存。在訪問多個頁面并且訪問非常頻繁的時候有意義。
事實上頁面之間的js和css不可能100%不重合,也不可能100%重合。所以要使用中間情形。對于我們的網(wǎng)站,訪問量比較大,如果訪問了一般情況下就不會只訪問一個頁面。所以我們使用外聯(lián)的。既有公用的common.js,header.js還有每個頁面特有的js。符合這一點。我們的網(wǎng)站使用這種外聯(lián)的最為合適。
那么是不是所有的頁面都適合使用外聯(lián)的最好?有一個例外,就是主頁。
這里的主頁是指作為瀏覽器默認頁的URL,比如http://hao.#/360導航頁。
分析:1、頁面查看,雖然訪問量非常高,但是通常每個回話只訪問一個頁面。
2、緩存。完整緩存的比例要比其他的網(wǎng)站更低,處于安全原因,很多用戶選擇每次關閉瀏覽器的時候自動清空緩存,所以下一次訪問的時候依舊是空緩存狀態(tài)。
3、組件重用,一般情況下都是跳轉到其他的網(wǎng)站去,所以無所謂組件重用。
兩全其美:
本書中還介紹了兩種技術,使頁面既可以獲得內聯(lián)的優(yōu)勢,同時又能緩存外部文件。
加載后下載
上面提到的360導航適合使用內聯(lián),但是并不是說有的主頁都是只訪問一個頁面,比如我們淘車的網(wǎng)站。我們既希望使用內聯(lián)快速的加載出頁面,又希望通過緩存外部組件的形式為后面其他頁面的瀏覽做準備。所以就會用到下載后加載的技術。
示例:
加載后下載是將doOnload函數(shù)內聯(lián)到文檔的onload事件。在1秒的延遲之后(確保頁面呈現(xiàn)完畢),就會下載所需要的js和css文件,通過創(chuàng)建對應的DOM元素(script和link)并賦予制定的URL實現(xiàn)。在這種頁面中。Js和css會被加載到頁面中兩次(先是內聯(lián)的,然后是外部的)要使其能夠工作,必須處理雙重定義。例如腳本可以定義但不能執(zhí)行任何函數(shù)(至少不能讓用戶發(fā)覺)。使用了相對單位(百分比)的css也會產(chǎn)生問題。解決辦法:將這些組件放在一個不可見的Ifeame中。
動態(tài)內聯(lián):
配合加載后下載使用,下載組件后設置cookie。然后重新加載頁面后判斷有沒有cookie,有的話使用外部的,沒有的話使用內聯(lián)的。這樣就能在內聯(lián)和外部之間做出只能選擇,從而改善響應時間。


