少敘閒言
結合網上大量關於Yahoo的高性能網站構建的黃金守則,說下自己眼中的守則。
守則分為7大類34條,包括內容、服務器、cookie、CSS、Javascript、圖片、移動應用。
1、盡量減少HTTP請求
當用戶載入你的頁面時候,有80%的時間是用來下載頁面裡各個項目,包括圖片、樣式、腳本、FLash等。所以減少HTTP請求就可以提高響應速度。例如:baidu、google,就一個條條在那裡......
像大家都知道的合並文件,CSS Sprite等,我想說的是:並不是一味的追求減少請求,而是要權衡這麼做之後,對於其他因素的影響。
合並文件:耦合大,無法一眼辨別各個功能模塊。
CSS Sprite:大量整合的圖片對於改版這樣的維護,難度會幾何增長。
另外超大的整合圖片下載完之前,用到它的地方都會不顯示。
2、減少DNS查找次數
每一個獨立域名都會有一個對應的IP地址,也就是說,當你輸入www.baidu.com時候,服務器不會知道你要找的是“baidu”,而是解析成對應的IP地址,然後再訪問。類似你查找電話本一樣,這個解析的過程,浏覽器就在那傻等著,一般會花費20到120毫秒時間。
DNS查找次數也就是你下載CSS、JS、圖片等所訪問的不同域名的總數,包括子域名。和主域名不同的外域名會消耗更多的時間。
解決辦法:CSS去解決一些圖片樣式,及JS動畫(CSS3的NB地方)。
將可移植的外域資源放在子域名下。
3、避免跳轉
跳轉是使用301和302代碼實現的,例如下面的HTTP請求頭中:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
浏覽器會把用戶指向到Location中指定的URL下,其中如需緩存需要指定Expires或Cache-Control
雖然JS可以實現跳轉,但是為了保證後退按鈕好使,還是老實用3XX狀態碼這種方式。
這一部分好像對純前端沒啥關系或是接觸不太多,但是為了成長成真正NB的前端,早晚這些都得掌握。
4、可緩存AJAX
緩存對於用戶來說的意義大家都懂的,所以ajax裡必然少不了緩存的功能。
但我想說的是要根據需求來確定是否緩存。
其中IE自動添加緩存,而chrome卻不是。
下面羅列一下常用清除緩存的辦法:
在服務器端header("Cache-Control:no-cache,must-revalidate");
在ajax發送請求前加上xmlhttpObj.setRequestHeader("If-Modified-Since","0");
在ajax發送請求前加上xmlhttpObj.setRequestHeader("Cache-Control","no-cache");
再ajax的URL參數後面加上?t="Math.random()";
5、推遲加載內容
網頁的表現和行為要分開,先表現,後行為。所以,第一要務是迅速將頁面呈現出來,然後一些必要的功能交互,再然後是一些動畫或是提升體驗的花哨效果。
6、預加載
預加載的目標:利用異步或是浏覽器空閒時間,加載即將使用到的內容,達到迅速響應用戶操作的目的。
例如:
頁游中,空閒時間加載下一場景的所需圖片。
頁面中的JS,利用img對象預加載js,然後按需執行。
7、減少DOM元素個數
一個復雜的頁面意味著需要下載更多數據,同時也意味著JavaScript遍歷DOM的效率越慢。
解決辦法:深入理解各個標簽的語義,減少為了布局而大量羅列的DIV。
8、根據域名劃分頁面內容
一個頁面加載的時候會下載很多外部資源,例如CSS、JS、IMG等,然而把他們或按分類,分布在不同的子域名下會提高DNS並行的下載效率。
因為浏覽器所允許的最多連接數和每個服務器所允許的最大連接數是有一定限制的
9、避免404
HTTP的消耗是巨大,讓它來請求一個響應一個404是完全沒有必要的。
例外,對站點的SEO也不利,有些網站的rabots.txt即使沒有限制,也應該上傳一個空文件,如果沒有,會讓引擎爬蟲記錄下你站點的一個404,從而降低你站點的權重。