|
很難想象一個(gè)半年前還在做后臺(tái)開發(fā)，對(duì)前端知之甚少的我，現(xiàn)在也可以從事前端開發(fā)了。這半年的學(xué)習(xí)過程將會(huì)是我人生一筆寶貴的財(cái)富，這讓我想到一句話“在成長的道路上，我們不要給自己設(shè)定界限，只要擁有成長的力量，就能不斷超越自己”。 下面以我自己的經(jīng)歷講講前端的學(xué)習(xí)過程。 Jquery基礎(chǔ)知識(shí)準(zhǔn)備 學(xué)習(xí)前端需要掌握的基礎(chǔ)知識(shí)有jquery,css。做移動(dòng)端開發(fā)最好掌握CSS3，CSS3的許多新特性會(huì)讓布局簡單很多。Jquery可以不用每個(gè)知識(shí)點(diǎn)都很熟練，但是最好都了解，用的時(shí)候知道有這個(gè)東西再進(jìn)行細(xì)致學(xué)習(xí)會(huì)更牢固。必須掌握的幾個(gè)點(diǎn) 1.選擇器 基礎(chǔ)的id樣式選擇器是必須掌握的，這里不多說。 2.事件綁定 不推薦的寫法
缺點(diǎn)：這樣做的結(jié)果就是html前端和js前端的工作混在了一起，原則上HTML代碼只能體現(xiàn)網(wǎng)頁的結(jié)構(gòu) 建議寫法
優(yōu)點(diǎn)：jQuery是追加綁定的，綁多少執(zhí)行多少，還解決了IE的不兼容問題。 Jquery中的事件綁定方式有很多 click,live,bind,one,on…,它們之間的區(qū)別這里就不多講了。on方法是官方推薦的綁定事件的一個(gè)方法，從性能和試用場(chǎng)景上來說都是很好的。
高級(jí)用法，場(chǎng)景（在多行的表格表格中，動(dòng)態(tài)添加了一行，如果想給新增的這行綁定點(diǎn)擊事件）
這里在頁面初始化的時(shí)候可以給表格里面帶row樣式的行綁定click事件，就算row是新增的，也會(huì)添加上該click事件，即事件委托。用C#來解釋：發(fā)布者會(huì)把click事件發(fā)布給所有繼承row這個(gè)類的訂閱者身上，即常說的發(fā)布-訂閱者模式。 3.函數(shù)閉包 推薦使用閉包的方式封裝函數(shù)，避免函數(shù)覆蓋。
掌握的jquery的幾個(gè)基礎(chǔ)知識(shí)，結(jié)合前端開任務(wù)對(duì)js會(huì)越來越熟練。 CSS學(xué)習(xí)與技巧 CSS的學(xué)習(xí)主要重點(diǎn)是多看，可以學(xué)習(xí)別人現(xiàn)成的例子?？纯词窃趺床季值?，CSS怎么寫是規(guī)范的，網(wǎng)上有很多現(xiàn)成的資源如W3CSchool 前端網(wǎng)。移動(dòng)端開發(fā)框架如Agile Ratchet Junior。 框架會(huì)提供許多功能都是可以拿來直接使用的，弄懂其中一個(gè)框架和CSS和JS會(huì)讓自己的前端學(xué)習(xí)更加迅速，當(dāng)然這是需要花時(shí)間的。 代碼優(yōu)化 掌握了基本知識(shí)，就得向更高層級(jí)代碼和性能優(yōu)化方面前進(jìn)了，網(wǎng)上有很多前端優(yōu)化的指導(dǎo)意見，以下意見引用了博客毫秒必爭，前端網(wǎng)頁性能最佳實(shí)踐。最佳實(shí)踐我引用的來自yahoo前端性能團(tuán)隊(duì)總結(jié)的35條黃金定律。原文猛擊這里。下面引用的是我了解的一些原則。 網(wǎng)頁內(nèi)容
服務(wù)器
Cookie
CSS
Javascript
網(wǎng)頁內(nèi)容 減少http請(qǐng)求次數(shù) 80%的響應(yīng)時(shí)間花在下載網(wǎng)頁內(nèi)容(images, stylesheets, javascripts, scripts, flash等)。減少請(qǐng)求次數(shù)是縮短響應(yīng)時(shí)間的關(guān)鍵！可以通過簡化頁面設(shè)計(jì)來減少請(qǐng)求次數(shù)，但頁面內(nèi)容較多可以采用以下技巧。 1.合并文件: 現(xiàn)在有很多現(xiàn)成的工具可以幫你將多個(gè)腳本文件文件合并成一個(gè)文件，將多個(gè)樣式表文件合并成一個(gè)文件，以此來減少文件的下載次數(shù)。 2.CSS Sprites: 就是把多個(gè)圖片拼成一副圖片，然后通過CSS來控制在什么地方具體顯示這整張圖片的什么位置。給大家看個(gè)熟悉的Sprites實(shí)例。 豆瓣把他的圖標(biāo)集中在一起，然后我們看他如何控制只顯示第一個(gè)圖標(biāo)的
3.BASE64編碼圖標(biāo): 通過編碼的字符串將圖片內(nèi)嵌到網(wǎng)頁文本中。例如下面的inline image的顯示效果為一個(gè)勾選的checkbox。
可以看到其中有很長的一串，那個(gè)就是base64編碼的圖片，網(wǎng)上有在線生成的工具。圖片在線轉(zhuǎn)換Base64 減少DOM元素?cái)?shù)量 網(wǎng)頁中元素過多對(duì)網(wǎng)頁的加載和腳本的執(zhí)行都是沉重的負(fù)擔(dān)，500個(gè)元素和5000個(gè)元素在加載速度上會(huì)有很大差別。想知道你的網(wǎng)頁中有多少元素，通過在瀏覽器中的一條簡單命令就可以算出，
避免404 404我們都不陌生，代表服務(wù)器沒有找到資源，我們要特別要注意404的情況不要在我們提供的網(wǎng)頁資源上，客戶端發(fā)送一個(gè)請(qǐng)求但是服務(wù)器卻返回一個(gè)無用的結(jié)果，時(shí)間浪費(fèi)掉了。更糟糕的是我們網(wǎng)頁中需要加載一個(gè)外部腳本，結(jié)果返回一個(gè)404，不僅阻塞了其他腳本下載，下載回來的內(nèi)容(404)客戶端還會(huì)將其當(dāng)成Javascript去解析。 服務(wù)器 Gzip壓縮傳輸文件 Gzip通?？梢詼p少70%網(wǎng)頁內(nèi)容的大小，包括腳本、樣式表、圖片等文件。Gzip比deflate更高效，主流服務(wù)器都有相應(yīng)的壓縮支持模塊。IIS中內(nèi)建了靜態(tài)壓縮和動(dòng)態(tài)壓縮模塊，如何配制可以參考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression of Dynamic Content (IIS 7)。 值得注意的是pdf文件可以從需要被壓縮的類型中剔除，因?yàn)閜df文件本身已經(jīng)壓縮，gzip對(duì)其效果不大，而且會(huì)浪費(fèi)CPU。 避免空的圖片src 空的圖片src仍然會(huì)使瀏覽器發(fā)送請(qǐng)求到服務(wù)器，這樣完全是浪費(fèi)時(shí)間，而且浪費(fèi)服務(wù)器的資源。尤其是你的網(wǎng)站每天被很多人訪問的時(shí)候，這種空請(qǐng)求造成的傷害不容忽略。瀏覽器如此實(shí)現(xiàn)也是根據(jù)RFC 3986 –?Uniform Resource Identifiers標(biāo)準(zhǔn)，空的src被定義為當(dāng)前頁面。所以注意我們的網(wǎng)頁中是否存在這樣的代碼
Cookie 減少Cookie大小 Cookie被用來做認(rèn)證或個(gè)性化設(shè)置，其信息被包含在http報(bào)文頭中，對(duì)于cookie我們要注意以下幾點(diǎn)，來提高請(qǐng)求的響應(yīng)速度， 去除沒有必要的cookie，如果網(wǎng)頁不需要cookie就完全禁掉 將cookie的大小減到最小 注意cookie設(shè)置的domain級(jí)別，沒有必要情況下不要影響到sub-domain 設(shè)置合適的過期時(shí)間，比較長的過期時(shí)間可以提高響應(yīng)速度。 CSS 將樣式表置頂 經(jīng)樣式表(css)放在網(wǎng)頁的HEAD中會(huì)讓網(wǎng)頁顯得加載速度更快，因?yàn)檫@樣做可以使瀏覽器逐步加載已將下載的網(wǎng)頁內(nèi)容。這對(duì)內(nèi)容比較多的網(wǎng)頁尤其重要，用戶不用一直等待在一個(gè)白屏上，而是可以先看已經(jīng)下載的內(nèi)容。 如果將樣式表放在底部，瀏覽器會(huì)拒絕渲染已經(jīng)下載的網(wǎng)頁，因?yàn)榇蠖鄶?shù)瀏覽器在實(shí)現(xiàn)時(shí)都努力避免重繪，樣式表中的內(nèi)容是繪制網(wǎng)頁的關(guān)鍵信息，沒有下載下來之前只好對(duì)不起觀眾了。 避免CSS表達(dá)式 CSS表達(dá)式可以動(dòng)態(tài)的設(shè)置CSS屬性，在IE5-IE8中支持，其他瀏覽器中表達(dá)式會(huì)被忽略。例如下面表達(dá)式在不同時(shí)間設(shè)置不同的背景顏色。
CSS表達(dá)式的問題在于它被重新計(jì)算的次數(shù)遠(yuǎn)比我們想象的要多，不僅在網(wǎng)頁繪制或大小改變時(shí)計(jì)算，即使我們滾動(dòng)屏幕或者移動(dòng)鼠標(biāo)的時(shí)候也在計(jì)算，因此我們還是盡量避免使用它來防止使用不當(dāng)而造成的性能損耗。如果想達(dá)到類似的效果我們可以通過簡單的腳本做到。
Javascript 將腳本置底 HTTP/1.1 specification建議瀏覽器對(duì)同一個(gè)hostname不要超過兩個(gè)并行下載連接， 所以當(dāng)你從多個(gè)domain下載圖片的時(shí)候可以提高并行下載連接數(shù)量。但是當(dāng)腳本在下載的時(shí)候，即使是來自不同的hostname瀏覽器也不會(huì)下載其他資源，因?yàn)闉g覽器要在腳本下載之后依次解析和執(zhí)行。 因此對(duì)于腳本提速，我們可以考慮以下方式， 把腳本置底，這樣可以讓網(wǎng)頁渲染所需要的內(nèi)容盡快加載顯示給用戶。 現(xiàn)在主流瀏覽器都支持defer關(guān)鍵字，可以指定腳本在文檔加載后執(zhí)行。 HTML5中新加了async關(guān)鍵字，可以讓腳本異步執(zhí)行。 使用外部Javascirpt和CSS文件 使用外部Javascript和CSS文件可以使這些文件被瀏覽器緩存，從而在不同的請(qǐng)求內(nèi)容之間重用。同時(shí)將Javascript和CSS從inline變?yōu)閑xternal也減小了網(wǎng)頁內(nèi)容的大小。使用外部Javascript和CSS文件的決定因素在于這些外部文件的重用率，如果用戶在瀏覽我們的頁面時(shí)會(huì)訪問多次相同頁面或者可以重用腳本的不同頁面，那么外部文件形式可以為你帶來很大的好處。但對(duì)于用戶通常只會(huì)訪問一次的頁面，例如microsoft.com首頁，那inline的javascript和css相對(duì)來說可以提供更高的效率。 精簡Javascript和CSS 精簡就是將Javascript或CSS中的空格和注釋全去掉，用來幫助我們做精簡的工具很多，主要可以參考如下， JS compressors:
CSS compressors:
與VS集成比較好的工具如下.
去除重復(fù)腳本 重復(fù)的腳本不僅浪費(fèi)瀏覽器的下載時(shí)間，而且浪費(fèi)解析和執(zhí)行時(shí)間。一般用來避免引入重復(fù)腳本的做法是使用統(tǒng)一的腳本管理模塊，這樣不僅可以避免重復(fù)腳本引入，還可以兼顧腳本依賴管理和版本管理。 減少DOM訪問 通過Javascript訪問DOM元素沒有我們想象中快，元素多的網(wǎng)頁尤其慢，對(duì)于Javascript對(duì)DOM的訪問我們要注意
總結(jié) 經(jīng)過這段時(shí)間的前端學(xué)習(xí)，深深體會(huì)到前端其實(shí)和后端差不多的。學(xué)習(xí)過程中可以進(jìn)行類比，學(xué)習(xí)之初都是完成功能，當(dāng)代碼熟練之后就要知道代碼優(yōu)化的內(nèi)容，明白什么代碼才是好的代碼，為什么這么寫是好的代碼。這樣的求知過程才能讓自己進(jìn)步更快，而不僅僅是為了實(shí)現(xiàn)功能。 另外一點(diǎn)就是分享，只有自己將學(xué)的知識(shí)掌握牢固了，才有能力將知識(shí)分享出去，這也是幫助自己提升的過程。 或許你會(huì)覺得我是做后端的不需要深入掌握前端，但說不定什么時(shí)候需要你從事前端呢！提前做好知識(shí)儲(chǔ)備，保持一顆孜孜不倦求知的心，以不變應(yīng)萬變豈不是更好，你說呢？ |
|
|
