前端是龐大的，包括HTML、CSS、Javascript、Image、Flash等等各種各樣的資源。前端優化是複雜的，針對方方面面的資源都有不同的方式。那麼，前端優化的目的是什麼

1. 從使用者角度而言，優化能夠讓頁面載入得更快、對使用者的操作響應得更及時，能夠給使用者提供更為友好的體驗。

2. 從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所佔頻寬，能夠節省可觀的資源。

總之，恰當的優化不僅能夠改善站點的使用者體驗並且能夠節省相當的資源利用。

前端優化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優化，例如HTTP請求數、指令碼的無阻塞載入、內聯指令碼的位置優化等;第二類則是程式碼級別的優化，例如Javascript中的DOM操作優化、CSS選擇符優化、圖片優化以及HTML結構優化等等。另外，本著提高投入產出比的目的，後文提到的各種優化策略大致按照投入產出比從大到小的順序排列。

一、頁面級優化

1. 減少HTTP請求數

這條策略基本上所有前端人都知道，而且也是最重要最有效的。都說要減少HTTP請求，那請求多了到底會怎麼樣呢?首先，每個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都需要經過DNS定址、與伺服器建立連線、傳送資料、等待伺服器響應、接收資料這樣一個”漫長”而複雜的過程。時間成本就是使用者需要看到或者”感受”到這個資源是必須要等待這個過程結束的，資源上由於每個請求都需要攜帶資料，因此每個請求都需要佔用頻寬。另外，由於瀏覽器進行併發請求的請求數是有上限的(具體參見此處)，因此請求數多了以後，瀏覽器需要分批進行請求，因此會增加使用者的等待時間，會給使用者造成站點速度慢這樣一個印象，即使可能使用者能看到的第一屏的資源都已經請求完了，但是瀏覽器的進度條會一直存在。

減少HTTP請求數的主要途徑包括：

(1). 從設計實現層面簡化頁面

如果你的頁面像百度首頁一樣簡單，那麼接下來的規則基本上都用不著了。保持頁面簡潔、減少資源的使用時最直接的。如果不是這樣，你的頁面需要華麗的面板，則繼續閱讀下面的內容。

(2). 合理設定HTTP快取

快取的力量是強大的，恰當的快取設定可以大大的減少HTTP請求。以有啊首頁為例，當瀏覽器沒有快取的時候訪問一共會發出78個請求，共600多K資料(如圖1.1)，而當第二次訪問即瀏覽器已快取之後訪問則僅有10個請求，共20多K資料(如圖1.2)。(這裡需要說明的是，如果直接F5重新整理頁面的話效果是不一樣的，這種情況下請求數還是一樣，不過被快取資源的請求伺服器是304響應，只有Header沒有Body，可以節省頻寬)

怎樣才算合理設定?原則很簡單，能快取越多越好，能快取越久越好。例如，很少變化的圖片資源可以直接通過HTTP Header中的Expires設定一個很長的過期頭;變化不頻繁而又可能會變的資源可以使用Last-Modifed來做請求驗證。儘可能的讓資源能夠在快取中待得更久。關於HTTP快取的具體設定和原理此處就不再詳述了，有興趣的可以參考下列文章：

(3). 資源合併與壓縮

如果可以的話，儘可能的將外部的指令碼、樣式進行合併，多個合為一個。另外，CSS、Javascript、Image都可以用相應的工具進行壓縮，壓縮後往往能省下不少空間。

(4). CSS Sprites

合併CSS圖片，減少請求數的又一個好辦法。

(5). Inline Images

使用data: URL scheme的方式將圖片嵌入到頁面或CSS中，如果不考慮資源管理上的問題的話，不失為一個好辦法。如果是嵌入頁面的話換來的是增大了頁面的體積，而且無法利用瀏覽器快取。使用在CSS中的圖片則更為理想一些

(6). Lazy Load Image

這條策略實際上並不一定能減少HTTP請求數，但是卻能在某些條件下或者頁面剛載入時減少HTTP請求數。對於圖片而言，在頁面剛載入的時候可以只加載第一屏，當用戶繼續往後滾屏的時候才載入後續的圖片。這樣一來，假如使用者只對第一屏的內容感興趣時，那剩餘的圖片請求就都節省了。有啊首頁曾經的做法是在載入的時候把第一屏之後的圖片地址快取在Textarea標籤中，待使用者往下滾屏的時候才”惰性”載入。

2. 將外部指令碼置底

前文有談到，瀏覽器是可以併發請求的，這一特點使得其能夠更快的載入資源，然而外鏈指令碼在載入時卻會阻塞其他資源，例如在指令碼載入完成之前，它後面的圖片、樣式以及其他指令碼都處於阻塞狀態，直到指令碼載入完成後才會開始載入。如果將指令碼放在比較靠前的位置，則會影響整個頁面的載入速度從而影響使用者體驗。解決這一問題的方法有很多，在這裡有比較詳細的介紹(這裡是譯文和更詳細的例子)，而最簡單可依賴的方法就是將指令碼儘可能的往後挪，減少對併發下載的影響。

3. 非同步執行inline指令碼

inline指令碼對效能的影響與外部指令碼相比，是有過之而無不及。首頁，與外部指令碼一樣，inline指令碼在執行的時候一樣會阻塞併發請求，除此之外，由於瀏覽器在頁面處理方面是單執行緒的，當inline指令碼在頁面渲染之前執行時，頁面的渲染工作則會被推遲。簡而言之，inline指令碼在執行的時候，頁面處於空白狀態。鑑於以上兩點原因，建議將執行時間較長的inline指令碼非同步執行，非同步的方式有很多種，例如使用script元素的defer屬性(存在相容性問題和其他一些問題，例如不能使用document.write)、使用setTimeout，此外，在HTML5中引入了Web Workers的機制，恰恰可以解決此類問題

4. Lazy Load Javascript

隨著Javascript框架的流行，越來越多的站點也使用起了框架。不過，一個框架往往包括了很多的功能實現，這些功能並不是每一個頁面都需要的，如果下載了不需要的指令碼則算得上是一種資源浪費-既浪費了頻寬又浪費了執行花費的時間。目前的做法大概有兩種，一種是為那些流量特別大的頁面專門定製一個專用的mini版框架，另一種則是Lazy Load。YUI則使用了第二種方式，在YUI的實現中，最初只加載核心模組，其他模組可以等到需要使用的時候才載入

5. 將CSS放在HEAD中

如果將CSS放在其他地方比如BODY中，則瀏覽器有可能還未下載和解析到CSS就已經開始渲染頁面了，這就導致頁面由無CSS狀態跳轉到CSS狀態，使用者體驗比較糟糕。除此之外，有些瀏覽器會在CSS下載完成後才開始渲染頁面，如果CSS放在靠下的位置則會導致瀏覽器將渲染時間推遲。

6. 非同步請求Callback

在某些頁面中可能存在這樣一種需求，需要使用script標籤來非同步的請求資料。類似：

Javascript:

/*Callback函式*/   function myCallback(info){   //do something here   }

HTML:

<script type=”text/javascript” src=”http://abc.com/cb”></script>

cb返回的內容:

myCallback(‘Hello world!’);

      像以上這種方式直接在頁面上寫<script>對頁面的效能也是有影響的，即增加了頁面首次載入的負擔，推遲了DOMLoaded和window.onload事件的觸發時機。如果時效性允許的話，可以考慮在DOMLoaded事件觸發的時候載入，或者使用setTimeout方式來靈活的控制載入的時機。

7. 減少不必要的HTTP跳轉

對於以目錄形式訪問的HTTP連結，很多人都會忽略連結最後是否帶’/’，假如你的伺服器對此是區別對待的話，那麼你也需要注意，這其中很可能隱藏了301跳轉，增加了多餘請求。具體參見下圖，其中第一個連結是以無’/’結尾的方式訪問的，於是伺服器有了一次跳轉。

8. 避免重複的資源請求

這種情況主要是由於疏忽或頁面由多個模組拼接而成，然後每個模組中請求了同樣的資源時，會導致資源的重複請求

二、程式碼級優化

1. Javascript

(1). DOM

DOM操作應該是指令碼中最耗效能的一類操作，例如增加、修改、刪除DOM元素或者對DOM集合進行操作。如果指令碼中包含了大量的DOM操作則需要注意以下幾點：

a. HTML Collection

在指令碼中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection型別的集合，在平時使用的時候大多將它作為陣列來使用，因為它有length屬性，也可以使用索引訪問每一個元素。不過在訪問效能上則比陣列要差很多，原因是這個集合並不是一個靜態的結果，它表示的僅僅是一個特定的查詢，每次訪問該集合時都會重新執行這個查詢從而更新查詢結果。所謂的”訪問集合”包括讀取集合的length屬性、訪問集合中的元素。

因此，當你需要遍歷HTML Collection的時候，儘量將它轉為陣列後再訪問，以提高效能。即使不轉換為陣列，也請儘可能少的訪問它，例如在遍歷的時候可以將length屬性、成員儲存到區域性變數後再使用區域性變數。

b. Reflow & Repaint

除了上面一點之外，DOM操作還需要考慮瀏覽器的Reflow和Repaint，因為這些都是需要消耗資源的，具體的可以參加以下文章：

(2). 慎用with

       with(obj){ p = 1}; 程式碼塊的行為實際上是修改了程式碼塊中的執行環境，將obj放在了其作用域鏈的最前端，在with程式碼塊中訪問非區域性變數是都是先從obj上開始查詢，如果沒有再依次按作用域鏈向上查詢，因此使用with相當於增加了作用域鏈長度。而每次查詢作用域鏈都是要消耗時間的，過長的作用域鏈會導致查詢效能下降。

因此，除非你能肯定在with程式碼中只訪問obj中的屬性，否則慎用with，替代的可以使用區域性變數快取需要訪問的屬性。

(3). 避免使用eval和Function

每次 eval 或 Function 建構函式作用於字串表示的原始碼時，指令碼引擎都需要將原始碼轉換成可執行程式碼。這是很消耗資源的操作 —— 通常比簡單的函式呼叫慢100倍以上。

eval 函式效率特別低，由於事先無法知曉傳給 eval 的字串中的內容，eval在其上下文中解釋要處理的程式碼，也就是說編譯器無法優化上下文，因此只能有瀏覽器在執行時解釋程式碼。這對效能影響很大。

Function 建構函式比eval略好，因為使用此程式碼不會影響周圍程式碼;但其速度仍很慢。

此外，使用eval和Function也不利於Javascript壓縮工具執行壓縮。

(4). 減少作用域鏈查詢

前文談到了作用域鏈查詢問題，這一點在迴圈中是尤其需要注意的問題。如果在迴圈中需要訪問非本作用域下的變數時請在遍歷之前用區域性變數快取該變數，並在遍歷結束後再重寫那個變數，這一點對全域性變數尤其重要，因為全域性變數處於作用域鏈的最頂端，訪問時的查詢次數是最多的。

低效率的寫法：

//全域性變數   var globalVar = 1;   function myCallback(info){      for( var i = 100000; i–;){         //每次訪問globalVar都需要查詢到作用域鏈最頂端，本例中需要訪問100000次         globalVar += i;      }  }

更高效的寫法：

//全域性變數   var globalVar = 1;   function myCallback(info){      //區域性變數快取全域性變數      var localVar = globalVar;      for( var i = 100000; i–;){         //訪問區域性變數是最快的         localVar += i;      }      //本例中只需要訪問2次全域性變數      globalVar = localVar;   }

此外，要減少作用域鏈查詢還應該減少閉包的使用。

(5). 資料訪問

Javascript中的資料訪問包括直接量(字串、正則表示式)、變數、物件屬性以及陣列，其中對直接量和區域性變數的訪問是最快的，對物件屬性以及陣列的訪問需要更大的開銷。當出現以下情況時，建議將資料放入區域性變數：

a. 對任何物件屬性的訪問超過1次

b. 對任何陣列成員的訪問次數超過1次

另外，還應當儘可能的減少對物件以及陣列深度查詢。

(6). 字串拼接

在Javascript中使用”+”號來拼接字串效率是比較低的，因為每次執行都會開闢新的記憶體並生成新的字串變數，然後將拼接結果賦值給新變數。與之相比更為高效的做法是使用陣列的join方法，即將需要拼接的字串放在陣列中最後呼叫其join方法得到結果。不過由於使用陣列也有一定的開銷，因此當需要拼接的字串較多的時候可以考慮用此方法。

關於Javascript優化的更詳細介紹請參考：

2. CSS選擇符

在大多數人的觀念中，都覺得瀏覽器對CSS選擇符的解析式從左往右進行的，例如

#toc A { color: #444; }

這樣一個選擇符，如果是從右往左解析則效率會很高，因為第一個ID選擇基本上就把查詢的範圍限定了，但實際上瀏覽器對選擇符的解析是從右往左進行的。如上面的選擇符，瀏覽器必須遍歷查詢每一個A標籤的祖先節點，效率並不像之前想象的那樣高。根據瀏覽器的這一行為特點，在寫選擇符的時候需要注意很多事項，有人已經一一列舉了，詳情參考此處。

3. HTML

對HTML本身的優化現如今也越來越多的受人關注了，詳情可以參見這篇總結性文章。

4. Image壓縮

圖片壓縮是個技術活，不過現如今這方面的工具也非常多，壓縮之後往往能帶來不錯的效果，具體的壓縮原理以及方法在《Even Faster Web Sites》第10章有很詳細的介紹，有興趣的可以去看看。

總結

本文從頁面級以及程式碼級兩個粒度對前端優化的各種方式做了一個總結，這些方法基本上都是前端開發人員在開發的過程中可以借鑑和實踐的，除此之外，完整的前端優化還應該包括很多其他的途徑，例如CDN、Gzip、多域名、無Cookie伺服器等等，由於對於開發人員的可操作性並不強大，在此也就不多敘述了，詳細的可以參考Yahoo和Google的這些”金科玉律”。1.Javascript簡介

HTML是純靜態的的頁面，而Javascript讓頁面有了動態的效果，比如;OA中模組的拖拉

所有的瀏覽器都會內建Javascript的直譯器

1992年 Nombas公司開發出C減減的嵌入式指令碼語言。這是最好的HTML頁面的指令碼語言。

Netscape為了擴充套件其瀏覽器的功能，開發了一套LiveScript，並與1995年與SUN公司聯合把其改名為javascript,它的主要目的是處理一些輸入的有效性驗證，而之前這個工作是留給perl之類的伺服器端語言完成，在以前使用電話線調變解調器(28.8kb/s)的時代，如此慢的與伺服器互動，這絕對是一件很痛苦的事情。Javascript的出現，解決了這個問題，因為它的驗證是基於客戶端的。

微軟公司早期版本的瀏覽器僅支援自己的vbscript，但後來不得不加入javascript

IE3中搭載Javascipt的克隆版本，命名為jscript

在一次技術會議中，sun，microsoft，netscape公司聯合制定了ECMA-Script標準

在2005前，網頁上提示框，廣告越來越多，把javascipt濫用，使javascript背上了大量的罪名。

2005年，google公司的網上產品（google地圖，gmail，google搜尋建議）等使得ajax興起，而javascript便是ajax最重要的元素之一

Javascript有三個部分組成

ECMAScript DOM BOM

WEB標準

網頁主要有三部分組成

（結構HTML,XHTML，表現CSS，行為DOM，ECMA）

2.ECMA指令碼

Javascript的語法

1. 區分大小寫
2. 弱型別變數 var age=10 var name=”dd”
3. 每行結尾的分號可有可無，但建議還是加上
4. 註釋與java相同

變數

變數是通過var關鍵字來宣告的。（Variable）

變數的命名規則與java一致

註釋有三種：// /**/ <!– –>這個只能註釋單行

2.1 javascript的Hello world

document.write()是寫在文件的最前面

2.2 slice()、substring()、subtr

Slice和substring (2,5) 指的是從第3為開始，取（5-2）=3個數，其中slice的引數可以為負

Substr（2,5）指的是從第3為開始，取5個數。但ECMAscript 沒有對該方法進行標準化，因此儘量少使用該方法

2.3 indexOf()和lastIndexOf(),isNan,typeOf

indexOf（”i”） //從前往後,i在第幾位

indexOf（”i”,3）可選引數，從第幾個字元開始往後找

lastIndexOf（”i”） //從後往前,i在第幾位

lastIndexOf(“i”,3) //從後往前,i在第幾位

如果沒找到，則返回-1

String型別的變數，在Java中，用””符號表示字串，用”表示單個字元。而在javascript中這兩種都可以

Nan（not a number）

Alert(nan ==nan)返回false,因此不推薦使用nan本身，推薦函式isNan

Alert(isNanN(“ab”));//返回false

typeof運算子

var stmp = “test”;

alert(typeof stmp); //輸出string

alert(type of 1);//輸出number

此外：還有boolean,undefined,object(如果是引用型別或者null值,null值返回object，這其實是ecmascript的一個錯誤)

當宣告的變數未初始化的時候，它的值就是undefined.當沒有這個變數的時候，typeof 變

返回的值也是undefined。但是沒宣告的變數是不能參與計算的。

當函式無明確返回值時，返回的也是undefined

Function a(){

}

Alert(a() == undefined) //返回true

Alert(null == undefined)//返回true

2.4 數值計算

var mynum1 = 23.345;

var mynum2 = 45;

var mynum3 = -34;

var mynum4 = 9e5;        //科學計數法為 9*10五次方

var fNumber = 123.456;

alert(fNumber.toExponential(1));//保留的小數點數 1.2e+2

alert(fNumber.toExponential(2));//1.23e+2

.5 布林值

var married = true;

alert(“1.” + typeof(married));//Boolean

married = “true”;

alert(“2.” + typeof(married));//String

.6 型別轉換

轉換成string型別有三種方式

var a = 3;

var b = a + “”;

var c = a.toString();

var d = “student” + a;

toString()

var a=11;

document.write(a.toString(2) + “<br>”);//轉成2進位制

document.write(a.toString(3) + “<br>”);//轉成3進位制

如果不是數值，則轉換報錯

parseInt()

document.write(parseInt(“1red6″) + “<br>”);//返回1，後面非數值的將全部忽略

document.write(parseInt(“53.5″) + “<br>”);//返回53

document.write(parseInt(“0xC”) + “<br>”);    //直接十進位制轉換12

document.write(parseInt(“[email protected]”) + “<br>”);//NAN

document.write(parseInt(“011″,8) + “<br>”);返回9

document.write(parseInt(“011″,10) + “<br>”);    //指定為十進位制返回11

parseFloat()與parseInt()類似

2.7 陣列

var aMap = new Array(“China”,”USA”,”Britain”);

aMap[20] = “Korea”;

alert(aMap.length + ” ” + aMap[10] + ” ” + aMap[20]);//aMap[10]返回undefined

document.write(aMap.join(“][") + "<br>");        //用"]["來連線

var sFruit = "apple,pear,peach,orange";

var aFruit = sFruit.split(",");

var aFruit = ["apple","pear","peach","orange"];

alert(aFruit.reverse().toString());

var aFruit = ["pear","apple","peach","orange"];

aFruit.sort();

var stack = new Array();

stack.push(“red”);

stack.push(“green”);

stack.push(“blue”);

document.write(stack.toString() + “<br>”);

var vItem = stack.pop(); // blue

document.write(vItem + “<br>”);

document.write(stack.toString()); // red green

2.8 if語句

//首先獲取使用者的一個輸入，並用Number()強制轉換為數字

相關推薦