我的前端學習曆程，學習曆程

我的前端學習曆程，學習曆程

　　很難想象一個半年前還在做後台開發，對前端知之甚少的我，現在也可以從事前端開發了。這半年的學習過程將會是我人生一筆寶貴的財富，這讓我想到一句話“在成長的道路上，我們不要給自己設定界限，只要擁有成長的力量，就能不斷超越自己”。 下面以我自己的經曆講講前端的學習過程。

閱讀目錄

• Jquery基礎知識準備
• CSS學習與技巧
• 代碼最佳化
• 總結

回到頂部Jquery基礎知識準備

　　學習前端需要掌握的基礎知識有jquery,css。做移動端開發最好掌握CSS3，CSS3的許多新特性會讓布局簡單很多。Jquery可以不用每個知識點都很熟練，但是最好都瞭解，用的時候知道有這個東西再進行細緻學習會更牢固。必須掌握的幾個點

 1.選取器

　　基礎的id樣式選取器是必須掌握的，這裡不多說。

 2.事件綁定

     不推薦的寫法　

<button id="foo" onclick="dosomething()">Bar</button>

     缺點：這樣做的結果就是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=”">JavaScriptvar 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運算式的問題在於它被重新計算的次數遠比我們想象的要多，不僅在網頁繪製或大小改變時計算，即使我們滾動螢幕或者移動滑鼠的時候也在計算，因此我們還是盡量避免使用它來防止使用不當而造成的效能損耗。如果想達到類似的效果我們可以通過簡單的指令碼做到。　

<html><head></head><body><script type="text/javascript">var currentTime = new Date().getHours();if (currentTime%2) {    if (document.body) {        document.body.style.background = "#B8D4FF";    }}else {    if (document.body) {        document.body.style.background = "#F08A00";    }}</script></body></html>

Javascript將指令碼置底

　　HTTP/1.1 specification建議瀏覽器對同一個hostname不要超過兩個並行下載串連， 所以當你從多個domain下載圖片的時候可以提高並行下載串連數量。但是當指令碼在下載的時候，即使是來自不同的hostname瀏覽器也不會下載其他資源，因為瀏覽器要在指令碼下載之後依次解析和執行。

因此對於指令碼提速，我們可以考慮以下方式，

• 把指令碼置底，這樣可以讓網頁渲染所需要的內容儘快載入顯示給使用者。
• 現在主流瀏覽器都支援defer關鍵字，可以指定指令碼在文檔載入後執行。

HTML5中新加了async關鍵字，可以讓指令碼非同步執行。

使用外部Javascirpt和CSS檔案

　　使用外部Javascript和CSS檔案可以使這些檔案被瀏覽器緩衝，從而在不同的請求內容之間重用。同時將Javascript和CSS從inline變為external也減小了網頁內容的大小。使用外部Javascript和CSS檔案的決定因素在於這些外部檔案的重用率，如果使用者在瀏覽我們的頁面時會訪問多次相同頁面或者可以重用指令碼的不同頁面，那麼外部檔案形式可以為你帶來很大的好處。但對於使用者通常只會訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對來說可以提供更高的效率。

精簡Javascript和CSS

　　精簡就是將Javascript或CSS中的空格和注釋全去掉，用來協助我們做精簡的工具很多，主要可以參考如下，

　　JS compressors:

• Packer
• JSMin
• Closure compiler
• YUICompressor(also      does CSS)
• AjaxMin(also does CSS)

　　CSS compressors:

• CSSTidy
• Minify
• YUICompressor(also      does JS)
• AjaxMin(also does JS)
• CSSCompressor

　　與VS整合比較好的工具如下.

• YUICompressor- 編譯整合，包含在NuGet.
• AjaxMin – 編譯整合

去除重複指令碼

　　重複的指令碼不僅浪費瀏覽器的下載時間，而且浪費解析和執行時間。一般用來避免引入重複指令碼的做法是使用統一的指令碼管理模組，這樣不僅可以避免重複指令碼引入，還可以兼顧指令碼依賴管理和版本管理。

減少DOM訪問

　　通過Javascript訪問DOM元素沒有我們想象中快，元素多的網頁尤其慢，對於Javascript對DOM的訪問我們要注意

• 緩衝已經訪問過的元素
• Offline更新節點然後再加回DOM Tree
• 避免通過Javascript修複layout

回到頂部總結

　　經過這段時間的前端學習，深深體會到前端其實和後端差不多的。學習過程中可以進行類比，學習之初都是完成功能，當代碼熟練之後就要知道代碼最佳化的內容，明白什麼代碼才是好的代碼，為什麼這麼寫是好的代碼。這樣的求知過程才能讓自己進步更快，而不僅僅是為了實現功能。

　　另外一點就是分享，只有自己將學的知識掌握牢固了，才有能力將知識分享出去，這也是協助自己提升的過程。

　　或許你會覺得我是做後端的不需要深入掌握前端，但說不定什麼時候需要你從事前端呢！提前做好知識儲備，保持一顆孜孜不倦求知的心，以不變應萬變豈不是更好，你說呢？

　　

如果，您認為閱讀這篇部落格讓您有些收穫，不妨點擊一下右下角的【推薦】按鈕。
如果，您希望更容易地發現我的新部落格，不妨點擊一下綠色通道的【關注我】。
因為，我的寫作熱情也離不開您的肯定支援。

感謝您的閱讀，如果您對我的部落格所講述的內容有興趣，請繼續關注我的後續部落格，我是焰尾迭 。