色综合网亚洲精品久久-精品国产国语对白久久免费-噼里啪啦国语电影大全-日本高清在线一区欧美-精品AV一区二区三区不卡-国产精品免费一区二区区-日本高清一区免费中文视频

【20年品牌建站】找北京網站建設公司就選新鴻儒/提供北京網站建設報價/北京網站制作/北京網站設計/網站開發、北京網站建設公司電話【400-024-1998】有優惠哦!
簡體
繁體 簡體
我們的服務遍布中國

我們的服務遍布中國
乃至世界

新鴻儒所服務的品牌地域與城市
北京 天津 上海 廣州 深圳 香港 廈門 江蘇 浙江 山東
重慶 長沙 武漢 成都 西安 寧夏 麗江 青海 云南 烏魯木齊
黑龍江 內蒙古 河北 ...
新鴻儒服務與合作的全球各地
美國 加拿大 德國 法國 英國 瑞士 意大利 荷蘭
印度 日本 韓國 ...

不論你的品牌在何處
我們都可以提供完善的服務與幫助

致電

400-024-1998

《高性能網站建設指南》閱讀筆記_規則8- 使用外部javascript和css

發布時間:2013-11-22 瀏覽:332打印字號:


純粹而言,內聯CSS和JS要快一些。這主要是因為外部的示例需要承擔多個http請求帶來的開銷。盡管外部示例可以從樣式表和腳本的并行下載中獲益,但是明顯第一個因素影響的更大一些。這也就是它放在第一位的原因。但外部CSS和JS文件有機會被瀏覽器緩存起來。當一個頁面被重復訪問時,就不需要重復下載外部CSS和JS了。既減小了需要下載文檔的大小,又不會產生多余的http請求數量。

 

所以,使用內嵌式的還是外聯式的,需要通過一定的手段衡量。

1、 頁面查看。每個用戶產生的頁面查看越少,內聯的越占優勢。(比如,一個月只訪問你的網站一次,即使有緩存,下次訪問的時候也很有可能被移除了)相反,訪問頁面的次數越多,外聯的越有優勢。

2、 緩存,如果沒有設置緩存,肯定的是內聯的有優勢

3、 組建重用,簡單的說就是組件重用度低采用內聯的好,高則外聯的好。這一條是建立在用戶屬否在一次回話中訪問網站的多個頁面。只有訪問多個頁面才有意義。有兩種極端情況:一個是每個頁面使用都使用各自單獨的組件,沒有公用部分。這樣做會產生過多的http請求數量,只對用戶只訪問一個頁面時有意義。另一種極端是創建一個單獨的js文件,包含所有的頁面使用的js,再創建一個css包含所有頁面使用的css。用戶在訪問一個頁面以后所有的js和css都將會被緩存。在訪問多個頁面并且訪問非常頻繁的時候有意義。

事實上頁面之間的js和css不可能100%不重合,也不可能100%重合。所以要使用中間情形。對于我們的網站,訪問量比較大,如果訪問了一般情況下就不會只訪問一個頁面。所以我們使用外聯的。既有公用的common.js,header.js還有每個頁面特有的js。符合這一點。我們的網站使用這種外聯的最為合適。

那么是不是所有的頁面都適合使用外聯的最好?有一個例外,就是主頁。

這里的主頁是指作為瀏覽器默認頁的URL,比如http://hao.360.cn/360導航頁。

分析:1、頁面查看,雖然訪問量非常高,但是通常每個回話只訪問一個頁面。

2、緩存。完整緩存的比例要比其他的網站更低,處于安全原因,很多用戶選擇每次關閉瀏覽器的時候自動清空緩存,所以下一次訪問的時候依舊是空緩存狀態。

3、組件重用,一般情況下都是跳轉到其他的網站去,所以無所謂組件重用。

 

兩全其美:

本書中還介紹了兩種技術,使頁面既可以獲得內聯的優勢,同時又能緩存外部文件。

加載后下載

上面提到的360導航適合使用內聯,但是并不是說有的主頁都是只訪問一個頁面,比如我們淘車的網站。我們既希望使用內聯快速的加載出頁面,又希望通過緩存外部組件的形式為后面其他頁面的瀏覽做準備。所以就會用到下載后加載的技術。

 

示例:


加載后下載是將doOnload函數內聯到文檔的onload事件。在1秒的延遲之后(確保頁面呈現完畢),就會下載所需要的js和css文件,通過創建對應的DOM元素(script和link)并賦予制定的URL實現。在這種頁面中。Js和css會被加載到頁面中兩次(先是內聯的,然后是外部的)要使其能夠工作,必須處理雙重定義。例如腳本可以定義但不能執行任何函數(至少不能讓用戶發覺)。使用了相對單位(百分比)的css也會產生問題。解決辦法:將這些組件放在一個不可見的Ifeame中。


動態內聯:

配合加載后下載使用,下載組件后設置cookie。然后重新加載頁面后判斷有沒有cookie,有的話使用外部的,沒有的話使用內聯的。這樣就能在內聯和外部之間做出只能選擇,從而改善響應時間。

現在就與新鴻儒客服交流

400-024-1998

您也可進行在線咨詢或預約項目顧問
我要預約
在線咨詢