我的前端學習歷程

本文轉載自查看原文 2015-05-17 17:25 13665 前端學習

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

閱讀目錄

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

<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關鍵字，可以讓腳本異步執行。

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