知識星球
很難想象一個半年前還在做後臺開發，對前端知之甚少的我，現在也可以從事前端開發了。這半年的學習過程將會是我人生一筆寶貴的財富，這讓我想到一句話“在成長的道路上，我們不要給自己設定界限，只要擁有成長的力量，就能不斷超越自己”。 下麵以我自己的經歷講講前端的學習過程。
Jquery基礎知識準備
學習前端需要掌握的基礎知識有jquery,css。做移動端開發最好掌握CSS3，CSS3的許多新特性會讓佈局簡單很多。Jquery可以不用每個知識點都很熟練，但是最好都瞭解，用的時候知道有這個東西再進行細緻學習會更牢固。必須掌握的幾個點
1.選擇器
基礎的id樣式選擇器是必須掌握的，這裡不多說。
2.事件系結
不推薦的寫法
缺點：這樣做的結果就是html前端和js前端的工作混在了一起，原則上HTML程式碼只能體現網頁的結構
建議寫法
$(“#foo”).click(function(){});
優點：jQuery是追加系結的，綁多少執行多少，還解決了IE的不相容問題。
Jquery中的事件系結方式有很多 click,live,bind,one,on…,它們之間的區別這裡就不多講了。on方法是官方推薦的系結事件的一個方法，從效能和試用場景上來說都是很好的。
$(“#foo”).on(“click”,function(){});
高階用法，場景（在多行的表格表格中，動態添加了一行，如果想給新增的這行系結點選事件）
$(“#table”).on(“click”,”.row”,function(){});
這裡在頁面初始化的時候可以給表格裡面帶row樣式的行系結click事件，就算row是新增的，也會新增上該click事件，即事件委託。用C#來解釋：釋出者會把click事件釋出給所有繼承row這個類的訂閱者身上，即常說的釋出-訂閱者樣式。
3.函式閉包
推薦使用閉包的方式封裝函式，避免函式改寫。
var PublicHandle=(function(){
/*私有變數和函式*/
var _privateVar;
var _getName=function(){
};
/*對外提供的介面*/
return{
verifyName:function(){
},
getName:function(){
}
}
});
掌握的jquery的幾個基礎知識，結合前端開任務對js會越來越熟練。
CSS學習與技巧
CSS的學習主要重點是多看，可以學習別人現成的例子。看看是怎麼佈局的，CSS怎麼寫是規範的，網上有很多現成的資源如W3CSchool 前端網。移動端開發框架如Agile Ratchet Junior。
框架會提供許多功能都是可以拿來直接使用的，弄懂其中一個框架和CSS和JS會讓自己的前端學習更加迅速，當然這是需要花時間的。
程式碼最佳化
掌握了基本知識，就得向更高層級程式碼和效能最佳化方面前進了，網上有很多前端最佳化的指導意見，以下意見取用了部落格毫秒必爭，前端網頁效能最佳實踐。最佳實踐我取用的來自yahoo前端效能團隊總結的35條黃金定律。原文猛擊這裡。下麵取用的是我瞭解的一些原則。
網頁內容
- 減少http請求次數
- 避免頁面跳轉
- 減少DOM元素數量
- 避免404
伺服器
- Gzip壓縮傳輸檔案
- 避免空的圖片src
Cookie
- 減少Cookie大小
CSS
- 將樣式表置頂
- 避免CSS運算式
Javascript
- 將指令碼置底
- 使用外部Javascirpt和CSS檔案
- 精簡Javascript和CSS
- 去除重覆指令碼
- 減少DOM訪問
網頁內容
減少http請求次數
80%的響應時間花在下載網頁內容(images, stylesheets, javascripts, scripts, flash等)。減少請求次數是縮短響應時間的關鍵！可以透過簡化頁面設計來減少請求次數，但頁面內容較多可以採用以下技巧。
1.合併檔案: 現在有很多現成的工具可以幫你將多個指令碼檔案檔案合併成一個檔案，將多個樣式表檔案合併成一個檔案，以此來減少檔案的下載次數。
2.CSS Sprites: 就是把多個圖片拼成一副圖片，然後透過CSS來控制在什麼地方具體顯示這整張圖片的什麼位置。給大家看個熟悉的Sprites實體。
豆瓣把他的圖示集中在一起，然後我們看他如何控制只顯示第一個圖示的
.app-icon-read {
background-position: 0 0;
}
.app-icon {
background: url(“/pics/app/app_icons_50_5.jpg”) no-repeat scroll 0 0 transparent;
border-radius: 10px 10px 10px 10px;
box-shadow: 1px 1px 2px #999999;
display: inline-block;
height: 50px;
width: 50px;
}
3.BASE64編碼圖示: 透過編碼的字串將圖片內嵌到網頁文字中。例如下麵的inline image的顯示效果為一個勾選的checkbox。
.sample-inline-png {
padding-left: 20px;
background: white url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC’) no-repeat scroll left top;
}
可以看到其中有很長的一串，那個就是base64編碼的圖片，網上有線上生成的工具。圖片線上轉換Base64
減少DOM元素數量
網頁中元素過多對網頁的載入和指令碼的執行都是沉重的負擔，500個元素和5000個元素在載入速度上會有很大差別。想知道你的網頁中有多少元素，透過在瀏覽器中的一條簡單命令就可以算出，
document.getElementsByTagName(‘*’).length
避免404
404我們都不陌生，代表伺服器沒有找到資源，我們要特別要註意404的情況不要在我們提供的網頁資源上，客戶端傳送一個請求但是伺服器卻傳回一個無用的結果，時間浪費掉了。更糟糕的是我們網頁中需要載入一個外部指令碼，結果傳回一個404，不僅阻塞了其他指令碼下載，下載回來的內容(404)客戶端還會將其當成Javascript去解析。
伺服器
Gzip壓縮傳輸檔案
Gzip通常可以減少70%網頁內容的大小，包括指令碼、樣式表、圖片等檔案。Gzip比deflate更高效，主流伺服器都有相應的壓縮支援模組。IIS中內建了靜態壓縮和動態壓縮模組，如何配製可以參考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression of Dynamic Content (IIS 7)。
值得註意的是pdf檔案可以從需要被壓縮的型別中剔除，因為pdf檔案本身已經壓縮，gzip對其效果不大，而且會浪費CPU。
避免空的圖片src
空的圖片src仍然會使瀏覽器傳送請求到伺服器，這樣完全是浪費時間，而且浪費伺服器的資源。尤其是你的網站每天被很多人訪問的時候，這種空請求造成的傷害不容忽略。瀏覽器如此實現也是根據RFC 3986 –?Uniform Resource Identifiers標準，空的src被定義為當前頁面。所以註意我們的網頁中是否存在這樣的程式碼
straight HTML
< img src=””>
JavaScript
var img = new Image();
img.src = “”;
Cookie
減少Cookie大小
Cookie被用來做認證或個性化設定，其資訊被包含在http報文頭中，對於cookie我們要註意以下幾點，來提高請求的響應速度，
去除沒有必要的cookie，如果網頁不需要cookie就完全禁掉
將cookie的大小減到最小
註意cookie設定的domain級別，沒有必要情況下不要影響到sub-domain
設定合適的過期時間，比較長的過期時間可以提高響應速度。
CSS
將樣式表置頂
經樣式表(css)放在網頁的HEAD中會讓網頁顯得載入速度更快，因為這樣做可以使瀏覽器逐步載入已將下載的網頁內容。這對內容比較多的網頁尤其重要，使用者不用一直等待在一個白屏上，而是可以先看已經下載的內容。
如果將樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁，因為大多數瀏覽器在實現時都努力避免重繪，樣式表中的內容是繪製網頁的關鍵資訊，沒有下載下來之前只好對不起觀眾了。
避免CSS運算式
CSS運算式可以動態的設定CSS屬性，在IE5-IE8中支援，其他瀏覽器中運算式會被忽略。例如下麵運算式在不同時間設定不同的背景顏色。
background-color: expression( (new Date()).getHours()%2 “#B8D4FF” : “#F08A00” );
CSS運算式的問題在於它被重新計算的次數遠比我們想象的要多，不僅在網頁繪製或大小改變時計算，即使我們滾動螢幕或者移動滑鼠的時候也在計算，因此我們還是儘量避免使用它來防止使用不當而造成的效能損耗。如果想達到類似的效果我們可以透過簡單的指令碼做到。