web最佳化-樣式表、指令碼

標籤：

　　為了避免白屏，應將樣式表放在文檔頂部的HEAD中。將樣式表包含在文檔中有兩種方式：使用LINK標籤和@improt規則。一個stryle塊可以包含多個@import規則，但@import規則必須放在所有其他規則之前。@import規則會導致組件下載時的無序性。

　　“如果樣式表仍在載入，構建呈現樹就是一種浪費，因為在所有樣式表載入並拆解完畢之前無需回執任何東西。否則，在其準備好之前顯示內容會遇到Flash of Unstyled Content問題。”

　　對回應時間影響最大的是頁面中組件的數量。http1.1規範，該規範建議瀏覽器從每個主機名稱並行的下載兩個組件。如果一個web頁面平均地將組件分別放在兩個主機名稱下，整體回應時間將可以減少大約一半。前端工程師與其依賴使用者來修改瀏覽器設定，不如簡單地使用CNAME來將組件分別放在多個主機名稱中。

　　並行下載組件的優點是很明顯的。然後，在下載指令碼時並行下載實際上是被禁用的（即使使用了不同的主機名稱，瀏覽器也不會啟動其他的下載。）其中一個一個原因是，指令碼可能使用document.write來修改頁面的內容，因此瀏覽器會等待，以確保頁面能夠恰當的布局。另一個原因是為了保證指令碼能夠按照正確的順序執行。因為它們之間存在著依賴關係，不按順序執行就會導致javascript錯誤。

　　混淆是可以應用在原始碼的另外一種最佳化方式。和精簡一樣，它也會溢出注釋和空白，同時它還會改寫代碼。最為改寫的一部分，函數和變數的名字將被轉換為更短的字串，這時代碼更加精鍊，也更難閱讀。精簡工具可以使用jsmin。

　　

　　

　　以上內容摘抄於《高效能網站建設指南》

web最佳化-樣式表、指令碼