前端優化雜談（一）

如何組織前端開發中的css以及js代碼，相信在開發的過程當中是一個比較讓人頭疼的問題。

咱們的目標是：

1. 讓代碼擁有較好的可維護性，提升代碼的重複利用率。
2. 儘量少的減小引入的css以及js的文件數量，由於過多的http請求會必定程度影響頁面加載的效率。
3. 儘可能少的引入與頁面無關的代碼，即減小代碼冗餘。

 

但要同時知足以上三個條件不容易，在後續的優化中，咱們只能儘量的平衡這種關係。

說到底就是如何處理代碼的可維護性以及代碼的性能，但無論怎麼樣，代碼的可維護性應該是咱們更應該重視的。如今的計算機都比較快，將來還會更快，在保證擁有較好的用戶體驗下，咱們儘量的提升咱們的代碼質量，這樣就夠了。

目前的開發中，咱們用requireJs來實現模塊化開發，一個大模塊就是一個js文件，大模塊中還有小模塊，模塊與模塊之間經過接口互相調用，模塊之間擁有較低的耦合度能夠方便咱們對代碼的管理，提升代碼利用率。

對模塊的加載方式也是咱們應該考慮的問題之一，這裏參考AMD和CMD的規範。簡單的說就是加載模塊時採用預加載仍是延時加載。具體問題具體分析，不一樣場景使用不一樣的方式。requireJs一開始是基於AMD的規範開發出來的，現版本的requireJs一樣支持CMD的使用模式。

 

接着說說怎麼組織css代碼。

 

css文件大概分爲三大類：

1. 全局通用模塊
2. 局部通用模塊
3. 私有模塊

 

1、全局通用樣式：這類css每一個頁面都會引用，須要在頁面頭部引用，前期開發可分紅多個文件方便管理，後期生產環境可壓縮合併成一個文件（common.css）。

1. 重置樣式（reset.css），這類樣式主要是統一各大瀏覽器的默認樣式。
2. 圖標樣式（icon.css），使用css sprites管理的圖標樣式。
3. 自定義通用樣式（custom.css），自定義一些頁面經常使用樣式以及對經常使用插件樣式的重寫，好比：

 1 /* 清除浮動 */
 2 .clear-fixed:after {
 3     content: '';
 4     display: block;
 5     clear: both;
 6 }
 7 /* 文字超過部分變成... */
 8 .nowrap {
 9     overflow: hidden;
10     white-space: nowrap;
11     text-overflow: ellipsis;
12 }
13 /* 頁面導航欄 */
14 .nav {
15     overflow: hidden;
16     white-space: nowrap;
17     text-overflow: ellipsis;
18 }
19 /* 重置彈框插件的默認樣式 */
20 .dialog {
21     border: 0;
22     box-shadow: 1px 2px 5px #ccc;
23 }

 

 

 

2、局部通用樣式：這類樣式僅在部分頁面引用，通常根據某些特徵來爲他們劃分，好比：

1. 表單樣式（form.css），常出如今編輯頁面
2. 插件樣式（dialog.css），這類樣式通常不會去修改它，可是能夠重寫覆蓋樣式。

 

假如一個頁面涉及的模塊較多，這類樣式的文件數量可能不少，但仍是有優化的空間。建議對不一樣樣式遵循如下規則：一開始加載便影響到頁面外觀的樣式，建議css文件頭部引入。而對於其餘可延遲類樣式（如彈窗插件的樣式），可對其延遲加載，通常是跟隨插件異步的引入時引入（依賴引入）。

 

 

3、私有樣式：這類樣式每每只有一個頁面有，很奇葩，並且代碼量不會不少，每每連1K都不到，若是把這些樣式單獨寫進一個css文件顯得有點浪費，對於這類樣式，能夠幾個頁面的樣式寫在一塊兒。