著作權(quán)歸作者所有俺榆。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處装哆。
先來回答你問題的后半句罐脊，然后再為你傾囊奉上一本“Web 前端學(xué)習(xí)指南”（內(nèi)附詳細(xì)資料）……希望對(duì)你有所幫助。
其實(shí)吧蜕琴，現(xiàn)在的培訓(xùn)爹殊，除非是去現(xiàn)場(chǎng)聽課，很多時(shí)候都是線上的視頻學(xué)習(xí)奸绷、資料學(xué)習(xí)等。所以层玲，某種程度上來講号醉，培訓(xùn)也是自學(xué)，至于靠不靠譜的問題辛块，你只要選擇讓你通過此學(xué)習(xí)途徑畔派，能最大程度達(dá)成預(yù)期學(xué)習(xí)效果的一種即可。還有更重要的润绵，就是自我學(xué)習(xí)的計(jì)劃性與持續(xù)性线椰。
下面就是你們灰常關(guān)心的，web前端開發(fā)指南+資料了
我從事前端開發(fā)已經(jīng)一年零六個(gè)月尘盼。從2015年末至今憨愉，前端開發(fā)有很多變化，這其中有我正在經(jīng)歷的卿捎，也有我尚未感受到的配紫。而前端開發(fā)中的我所知道的各類知識(shí)，我想以自己綿薄之力午阵，結(jié)合自身開發(fā)實(shí)踐稍作梳理躺孝，讓別人看看我踩過的坑。
這篇文章的閱讀者是前端學(xué)習(xí)者底桂，尤其是入門和中級(jí)前端開發(fā)植袍。我寫出了我自己所看到的前端開發(fā)世界里的色彩繽紛，也整理出了各個(gè)階段能夠參考學(xué)習(xí)的網(wǎng)站和資料籽懦。
三駕馬車：HTML5 + CSS3 + JavaScript
HTML5 + CSS3 + JavaScript
HTML5是 HTML 和 XHTML 的新版本于个。 在 HTML5 草案 的規(guī)范中定義了可以用 HTML 和 XML編寫的單一的語言，意在解決在之前 HTML 的迭代中發(fā)現(xiàn)的一些問題并滿足 web 應(yīng)用的需求猫十，這是以前HTML沒有充分覆蓋到的領(lǐng)域览濒。
這意味著 HTML5 的很多新特性是為了適應(yīng)現(xiàn)代瀏覽器而增加的呆盖，這其中包括更加語義化的標(biāo)簽，視音頻播放的 API贷笛，本地存儲(chǔ)功能的 API 等应又。詳情參看W3school。
CSS3 是 CSS 技術(shù)的升級(jí)版乏苦，目前最新版本是 CSS2.1株扛，為 W3C 推薦標(biāo)準(zhǔn)，建議閱讀該規(guī)范的中文版汇荐，這篇翻譯來自@黯羽輕揚(yáng)洞就。當(dāng)然，目前 CSS3 已被大部分現(xiàn)代瀏覽器支持掀淘，而下一代 CSS4 還在開發(fā)中（有關(guān) CSS3 開發(fā)相關(guān)請(qǐng)參考https://www.w3.org/Style/CSS/）旬蟋。
ECMAScript 6 (簡稱 ES6)是 JavaScript 語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布革娄。伴隨著 Node.js 的火熱倾贰，JavaScript 已經(jīng)不僅僅是瀏覽器里面的腳本。同時(shí)拦惋，越來越多的庫和框架：React(a javascript library for building user interfaces)匆浙、Flux(application architecture for buiding user interfaces)、Angular(Superheroic JavaScript MVW Framework)厕妖、Babel首尼、Mocha……讓前端開發(fā)更加簡單。
入門（html+css+js）
HTML5
我仍然是從前端開發(fā)的三駕馬車開始講入門的知識(shí)言秸。毫無疑問软能，前端入門最快的路是打開電腦上的文本編輯工具，寫下：
<!DOCTYPE html><html><head>
? ? <title>Hello world!</title></head><body>
? ? <p>Hello World!</p></body></html>
然后命名為 'name.html'井仰，接著在瀏覽器中打開這個(gè)文件埋嵌。當(dāng)看到瀏覽器中顯示出“Hello World!”時(shí)，一切 OK俱恶！這個(gè)橋段實(shí)在是俗了點(diǎn)雹嗦，不過我就是從這里開始踏上前端之路的。
接下來合是，我要選擇一個(gè)編輯器或者 IDE 了罪，透露最終答案：我目前使用 Win10 系統(tǒng)，編輯器使用 sublime text3 和 Atom聪全。對(duì)的泊藕，我使用兩個(gè)編輯器，并且最終沒有選擇任何 IDE难礼。但在此娃圆，我建議剛?cè)腴T的開發(fā)者去嘗試 WebStrom 這樣功能齊全的 IDE玫锋，可以感受到代碼高亮，代碼自動(dòng)補(bǔ)全讼呢，集成本地服務(wù)器測(cè)試等功能撩鹿。然后，開始嘗試在 sublime text3 和 Atom 中自己安裝能實(shí)現(xiàn) IDE 里一切所需功能的插件悦屏，以及 IDE 不具備的功能节沦。沒錯(cuò)，這兩個(gè)編輯器完全可以定制為一個(gè) IDE础爬，并且更專注于編程這一件事甫贯，而不管是 web 開發(fā)者，還是 java 開發(fā)者……看蚜。當(dāng)然叫搁，前提是作為一個(gè)喜歡自己折騰的開發(fā)者。
選擇好一個(gè)編輯工具供炎，如同選擇一把趁手的兵器常熙。接下來是開始學(xué)習(xí)html5，css3碱茁，js 的時(shí)候了。這里仍然是一個(gè)很俗的橋段仿贬，打開這個(gè)網(wǎng)站：W3school纽竣。開始把這個(gè)網(wǎng)站里的所有代碼（html5,css3,js按照這個(gè)順序）抄寫到自己的編輯器里，并且保存茧泪，然后在瀏覽里查看效果蜓氨。如果感覺這樣太枯燥了，那么可以到下面這個(gè)視頻網(wǎng)站去學(xué)習(xí)：慕課網(wǎng)队伟。下面是我推薦的一個(gè)系列的免費(fèi)視頻學(xué)習(xí)課程：
《前端開發(fā)》這里的知識(shí)也同樣超過了入門階段所需知識(shí)穴吹。但我仍然建議入門者去看看，但不要急于動(dòng)手去寫其中的代碼嗜侮，這里的內(nèi)容可以讓你看到前端開發(fā)是多么有趣港令，以至于忘記照著 W3school 里的枯燥代碼寫下 'hello,world' 這類的東西是多么無趣。然而锈颗， 在能夠理解視頻里那些酷炫好玩的東西之前顷霹，必須忍受 W3school 里呆板的代碼。所以击吱，現(xiàn)在先收藏這個(gè)網(wǎng)站淋淀，并且隨時(shí)學(xué)習(xí)自己力所能及的內(nèi)容。
CSS3
上一部分覆醇，已經(jīng)涵蓋了入門 html5 + css3 + javascript 所需要的工具和參考朵纷。但是炭臭，這里依然單獨(dú)用一章節(jié)來講 CSS3。因?yàn)榕鄞牵绻皇菍W(xué)完上面提及的內(nèi)容鞋仍，也許你會(huì)認(rèn)為 css3 能做的事情僅此而已。但是革屠，我可以鄭重的提醒你凿试，css3 可以實(shí)現(xiàn)所有你能夠想象的樣式。當(dāng)結(jié)合 js似芝，幾乎所有的動(dòng)畫那婉，交互都可以實(shí)現(xiàn)。
沒錯(cuò)党瓮，這很夸張详炬，但是我現(xiàn)在卻深信不疑。無論是否看完 W3school 里 CSS3 的內(nèi)容寞奸，下面這個(gè)視頻集合的內(nèi)容都有可能讓你重新認(rèn)識(shí) CSS3 ——《重拾 CSS 的樂趣》呛谜。請(qǐng)務(wù)必記住這個(gè)視頻的作者，@CSS魔法枪萄。因?yàn)樗g的《css sprites》也是我重點(diǎn)推薦的參考書籍隐岛。
JavaScript
當(dāng)然，在看完 W3school 上 JS 的知識(shí)后瓷翻，就應(yīng)該看 jQuery 的知識(shí)了聚凹，仍然是在 W3school上，同時(shí)也應(yīng)該多查看 jQuery 官網(wǎng)齐帚。如果精力充足的話妒牙，可以去看看Bootstrap。因?yàn)閱螒{ jQuery对妄，Bootstrap 這兩個(gè)東西已足夠?qū)崿F(xiàn)一個(gè)界面優(yōu)美湘今，功能完善的網(wǎng)站。
— 本節(jié)的擴(kuò)展 —
（1）三個(gè)有趣的前端新應(yīng)用：Hybrid app剪菱，微信內(nèi)應(yīng)用摩瞎，H5
從邁入移動(dòng)端時(shí)代，前端技術(shù)也有了新的應(yīng)用孝常。這里主要擴(kuò)展三個(gè)我認(rèn)為有趣的前端的應(yīng)用愉豺。
Hybrid app：
一種兼顧Web和Native的一種開發(fā)模式。簡單的理解就是在 app 里嵌入一個(gè)瀏覽器茫因，然后訪問前端開發(fā)的適配了移動(dòng)端的網(wǎng)頁蚪拦。Hybrid app 要實(shí)現(xiàn)的是 app 與網(wǎng)頁的數(shù)據(jù)交互。這種開發(fā)模式很好玩，讓前端也能插手 app 開發(fā)驰贷。同時(shí)也讓 app 開發(fā)者有興趣接觸前端技術(shù)盛嘿。彼此間可以愉快的相愛相殺了……
微信內(nèi)應(yīng)用：
這個(gè)目前應(yīng)該是屬于國內(nèi)專屬的應(yīng)用了。相當(dāng)于 Hybrid app 模式里面已經(jīng)實(shí)現(xiàn)了 app 的瀏覽器括袒，定義好了使用微信功能的各類接口次兆，只要開發(fā)適配微信的網(wǎng)頁應(yīng)用即可。只要掌握前端開發(fā)的基礎(chǔ)知識(shí)锹锰，熟悉移動(dòng)端開發(fā)適配的細(xì)節(jié)芥炭，然后根據(jù)微信提供的開發(fā)文檔，就可以在微信 app 的開發(fā)中游刃而若有余地了恃慧。
H5:
這個(gè)不是 HTML5园蝠，不是！下面我會(huì)叫它 H5 專題頁痢士。首先看看它應(yīng)該是什么一種形式（微信掃描二維碼）：
H5應(yīng)用二維碼
H5 專題頁也是伴隨微信火起來的彪薛。H5專題頁，可以簡單的認(rèn)為就是在微信或移動(dòng)端的 PPT怠蹂。在國內(nèi)善延，做前端開發(fā)的不會(huì)做 H5 專題頁是不行的！所以城侧，在入門知識(shí)都學(xué)完以后易遣，務(wù)必嘗試開發(fā)一個(gè)或多個(gè) H5 專題頁來豐富簡歷。
最后再補(bǔ)充一個(gè)好玩的東西：Electron嫌佑。Electron 可以讓你使用純 JavaScript 調(diào)用豐富的原生 API 來創(chuàng)造桌面應(yīng)用训挡。
（2）ES6，Node.js歧强，MongoDB，PHP为肮，SQL……
ES6 : 接下來介紹的這些可都是很厲害的東西摊册，作為入門者而言，沒有必要馬上去懂這些知識(shí)颊艳。但是茅特，在前端進(jìn)階的路上，這里面的某些或全部都可能是要熟練掌握使用的棋枕。ES6自不必說白修，JavaScript 語言的下一代標(biāo)準(zhǔn)，但我認(rèn)為你沒有必要一開始就去糾結(jié)了解 ES6 與 JavaScript 的區(qū)別重斑，甚至于你完全不知道 ES6 是怎么回事兵睛，也完全不影響你作為一個(gè)合格的前端開發(fā)人員。但是，我們是有目標(biāo)祖很，有理想的笛丙。對(duì)于 JavaScript 這個(gè)開始在服務(wù)器，移動(dòng) app 端都展露頭角的核武器假颇，怎么能不去了解它的核心知識(shí) ECMAScript胚鸯？至于學(xué)習(xí)的時(shí)機(jī)，我認(rèn)為是當(dāng)你不再滿足在瀏覽器上做東西笨鸡，不再滿足使用別人開發(fā)的庫姜钳，框架的，當(dāng)你不再滿足只做一個(gè)前端形耗，企圖成為一名全棧工程師的時(shí)候哥桥，那么學(xué)習(xí) ECMAScript 會(huì)是實(shí)現(xiàn)這一切的開始。
Node.js : "Node.js is a JavaScript runtime built on Chrome's V8 JavaScript Engine."——這句話來自Node.js 官網(wǎng)趟脂。意思是 Node.js 是構(gòu)建于 Chrome 的 V8 JavaScript 引擎（）基礎(chǔ)上的 JavaScript 運(yùn)行環(huán)境泰讽。也就是說，它使得 JavaScript 這門程序語言可以脫離瀏覽器昔期，而在服務(wù)器環(huán)境下運(yùn)行已卸。它的學(xué)習(xí)時(shí)機(jī)或許比 ES6 更早，因?yàn)槲乙呀?jīng)嘗試用它在云主機(jī)上搭建 web 服務(wù)器硼一。前后端使用同一種編程語言累澡，這的確是一件另人興奮的事情。
MongoDB : MongoDB,NoSQL 數(shù)據(jù)庫的一種般贼，由于我使用的不多愧哟，接觸的也不是很深，這方面暫時(shí)不能提供很有價(jià)值的信息與資料哼蛆。容我以后再來補(bǔ)上這一塊的內(nèi)容……
PHP,SQL : 我想在入門甚至于入門以后很長一段時(shí)間蕊梧，憑借在 W3school 上了解到的關(guān)于它們的知識(shí)，已經(jīng)足夠應(yīng)付開發(fā)任務(wù)腮介。但我依然希望能夠深入的學(xué)習(xí)它們肥矢，共勉之……
單就入門階段的擴(kuò)展而言，我想這些知識(shí)已經(jīng)現(xiàn)在已經(jīng)足夠了叠洗。但是甘改，前端的發(fā)展很多并不是我能夠想象得到的，所有關(guān)注一些公眾號(hào)灭抑，微博十艾，github，以及各種前端技術(shù)的官方網(wǎng)站腾节，時(shí)刻把握動(dòng)向忘嫉，是非常有必要的荤牍。雖然，經(jīng)驗(yàn)豐富的開發(fā)人員會(huì)認(rèn)為新的東西往往帶有風(fēng)險(xiǎn)榄融，只有成熟参淫，穩(wěn)定的技術(shù)才能實(shí)現(xiàn)價(jià)值。但是愧杯，現(xiàn)在前端的發(fā)展太過迅猛涎才，每一個(gè)技術(shù)都在爭奪開發(fā)者。前端開發(fā)框架中火熱的有 Angular力九、React耍铜、Vue（國內(nèi)阿里團(tuán)隊(duì)推出的一個(gè)框架），前端構(gòu)建工具中有 Grunt,Gulp,browserify,webpack跌前，前端測(cè)試工具有 mocha,jasmine棕兼，簡直如同海賊王里的大航海時(shí)代。所以抵乓，對(duì)于火熱的前端伴挚，我的態(tài)度是積極投身其中，研究各種技術(shù)灾炭，進(jìn)而領(lǐng)悟它們所展示的思路和想象茎芋，而不是等到一切塵埃落定再來選擇剩下來的技術(shù)。
流程和規(guī)范
網(wǎng)站開發(fā)不是一個(gè)人的戰(zhàn)斗蜈出，即使是全棧工程師田弥，也不應(yīng)該一個(gè)人承擔(dān)所有的任務(wù)。作為前端工程師铡原，既要與視覺設(shè)計(jì)師偷厦、交互設(shè)計(jì)師對(duì)接設(shè)計(jì)稿、交互稿燕刻，又要與后端工程師對(duì)接數(shù)據(jù)模型只泼。
“圖難于易，為大于細(xì)”——就細(xì)節(jié)而論卵洗，與每一個(gè)角色的交流溝通過程都可以細(xì)致的整理出文章來單獨(dú)講解请唱。因此，這里只擴(kuò)展前端需要了解的知識(shí)忌怎。
— 本節(jié)的擴(kuò)展 —
PS 和 AI 的熟練使用，切圖的規(guī)范酪夷，字體榴啸、svg 和 iconfont 的應(yīng)用
PS 和 AI 自不必說。 MAC 上的專屬設(shè)計(jì)神器 Sketch晚岭，如果有 MAC 設(shè)備建議也了解下鸥印。這里我只能提供一套不錯(cuò)的 PS 學(xué)習(xí)視頻：PS入門教程。
至于 AI，由于最近我覺得網(wǎng)站矢量化是一個(gè)不錯(cuò)的方向库说，所以會(huì)更深入的學(xué)習(xí) AI狂鞋，之后單獨(dú)整理一篇講網(wǎng)站矢量化的文章，里面再詳細(xì)講解 PS 和 AI 制作矢量圖潜的。
切圖的規(guī)范骚揍，是需要設(shè)計(jì)師與前端一起商議出來。前端最好不要等到設(shè)計(jì)師自顧自的導(dǎo)出切圖和標(biāo)注圖啰挪，畢竟大多數(shù)設(shè)計(jì)師不懂前端開發(fā)的邏輯信不。很多情況下，前端開發(fā)需要寫相對(duì)距離亡呵，然而標(biāo)注圖上只有絕對(duì)距離抽活，又或者相對(duì)距離的對(duì)象又完全不對(duì)，等等锰什∠滤叮總之，作為前端要清楚明白自己需要什么樣的標(biāo)注圖汁胆，需要什么樣的切圖梭姓。我認(rèn)為明白這兩點(diǎn)最好的方式是自己多嘗試標(biāo)注、切圖沦泌，找到符合自己開發(fā)邏輯的那套規(guī)范糊昙。當(dāng)然，后續(xù)我也會(huì)把自己用的那一套規(guī)范整理出一篇文章谢谦。
字體的使用上释牺，不可避免設(shè)計(jì)師會(huì)使用一些具有設(shè)計(jì)感的字體。對(duì)此回挽，我的建議是兩點(diǎn)：
如果用到的特殊字體只有少部分没咙，不是全站都要使用的，我建議是做成 SVG 圖導(dǎo)入網(wǎng)站千劈。單獨(dú)提一點(diǎn)小 tip祭刚，在高分辨率設(shè)備逐漸普及的現(xiàn)在，能夠做成 SVG 的圖墙牌，千萬不要用像素圖涡驮。（這點(diǎn)我會(huì)在網(wǎng)站矢量化的研究在單獨(dú)講解）
如果是全站都要用到某些字體，比如媒體網(wǎng)站或者新聞閱讀類網(wǎng)站喜滨，那么建議使字蛛字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符捉捅，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式虽风。
這里又提到 iconfont 的應(yīng)用了解棒口，但是我也發(fā)現(xiàn) iconfont 存在用戶體驗(yàn)的問題寄月，在一些大型網(wǎng)站上如 github 已經(jīng)直接使用 SVG 替換 iconfont。當(dāng)然作為了解 iconfont 的使用无牵，我會(huì)在那篇網(wǎng)站矢量化的文章中介紹漾肮。
BAE,PHP 和 SQL的學(xué)習(xí)使用
百度應(yīng)用引擎（Baidu App Engine，簡稱BAE）是 PaaS 平臺(tái)茎毁，提供彈性克懊、便捷、一站式的應(yīng)用部署服務(wù)充岛，支持 PHP/Java/Node.js/Python 等各種應(yīng)用保檐。只需上傳應(yīng)用代碼，BAE 自動(dòng)完成運(yùn)行環(huán)境配置崔梗、應(yīng)用部署夜只、資源監(jiān)控、日志收集等工作蒜魄。簡單的說就是把網(wǎng)站代碼傳到 BAE 分配的空間扔亥，就可以訪問網(wǎng)站了，完全不需要自己搭建后端服務(wù)器環(huán)境谈为，不需要自己手動(dòng)配置旅挤。這是前端開發(fā)者搭建自己的網(wǎng)站或博客所需要的。因?yàn)槲乙郧俺Ｓ玫氖?BAE, 其實(shí)新浪有 SAE伞鲫，阿里粘茄，騰訊也有相同的 Paas 平臺(tái)。現(xiàn)在秕脓，我是自己在 VPS 主機(jī)上搭建服務(wù)器來運(yùn)行自己的網(wǎng)站柒瓣。至于博客，可以上一篇文章里看到介紹了 Github Page + Hexo 組合搭建博客的詳細(xì)過程吠架。
PHP 和 SQL 的學(xué)習(xí)芙贫，我還是認(rèn)為學(xué)完 W3school 里的內(nèi)容就夠用了，但是能夠越熟練越深入越好傍药，這里再提供一些學(xué)習(xí)視頻磺平，仍然來自慕課網(wǎng)：《后端開發(fā)》。
實(shí)際上拐辽，按照現(xiàn)在前后端分離的開發(fā)模式來看拣挪，前端與后端最重要的溝通交流的是數(shù)據(jù)模型。一般俱诸，使用的數(shù)據(jù)格式是 XML 或 JSON 菠劝，作為前端最好根據(jù)后端設(shè)計(jì)的數(shù)據(jù)模型來設(shè)計(jì)自己的代碼。因?yàn)槲沂亲詫W(xué)的前端技術(shù)乙埃，在軟件開發(fā)層面的知識(shí)相對(duì)薄弱闸英，對(duì)于數(shù)據(jù)結(jié)構(gòu)了解更是淺薄，所以介袜，只要合作的后端不是很弱的那種甫何，我一般是按照他們給出的數(shù)據(jù)模型來開發(fā)。
編碼規(guī)范
記住這句話“當(dāng)你開始工作時(shí)遇伞，你不是在給你自己寫代碼辙喂，而是為后來人寫代碼”。大多數(shù)時(shí)候鸠珠，我們面對(duì)的都是寫好的代碼巍耗。當(dāng)以一種可維護(hù)的方式來寫代碼，可以讓你和協(xié)作者很容易知道上段代碼寫到什么地方什么程度渐排。同時(shí)炬太，當(dāng)發(fā)現(xiàn)以同一種方式來編寫代碼時(shí)，即使過很長一段時(shí)間再回頭 review驯耻，也將會(huì)是一件愉快的事情亲族。“Java 語言編碼規(guī)范”是當(dāng)前很流行的關(guān)于編碼規(guī)范的文檔之一可缚，它指出了編碼規(guī)范如此重要的幾個(gè)原因：
軟件生命周期中 80% 的成本消耗在了維護(hù)上
幾乎所有的軟件維護(hù)都不是它的最初作者
編碼規(guī)范提高了軟件的可讀性霎迫，它讓工程師能夠快速且充分地理解新的代碼
如果你將源碼作為產(chǎn)品來發(fā)布，你需要確保它是可完整打包的帘靡，且像你創(chuàng)建的其他產(chǎn)品一樣整潔知给。
那么，當(dāng)你意識(shí)到整潔描姚、統(tǒng)一的編碼規(guī)范的重要性的時(shí)候涩赢，應(yīng)該如果形成自己的編碼規(guī)范了。在這個(gè)問題上轰胁，我已經(jīng)不再建議自己去實(shí)踐嘗試來得出答案谒主。雖然實(shí)踐大多數(shù)時(shí)候是得出答案的好辦法，但是赃阀，對(duì)于編碼規(guī)范還是直接拿來主義霎肯，把優(yōu)秀的規(guī)范拿來就用：
前端代碼規(guī)范及實(shí)踐——出自 isobar 公司的創(chuàng)意技術(shù)部（前端工程）
編碼規(guī)范@bymod——出自 Bootstrap
Google HTML\CSS Style Guid——出自 Google
Google JavaScript Style Guide——出自 Google
最佳編碼實(shí)踐-KISSY v1.4 Documentation—— 出自 阿里 KISSY
網(wǎng)站的優(yōu)化打包發(fā)布
當(dāng)我們網(wǎng)站開發(fā)完成，本地測(cè)試 OK 以后榛斯，還要合并壓縮靜態(tài)文件观游、使用前端鏡像庫、使用 CDN 進(jìn)行加速驮俗、用 YSlow 或 Google Page Speed 這類的網(wǎng)站質(zhì)量檢測(cè)工具來檢測(cè)線上測(cè)試站點(diǎn)懂缕。
合并壓縮靜態(tài)文件：一般為了快捷有節(jié)奏的開發(fā)網(wǎng)站，對(duì)于靜態(tài)文件 CSS王凑，JS搪柑，圖片靜態(tài)資源是盡可能模塊化管理聋丝，而到了上線階段，則必須合并壓縮 CSS工碾，JS弱睦、制作 sprites 圖、使用 iconfont渊额。這樣處理既減少文件體積况木，又減少 http 請(qǐng)求。具體壓縮和合并方法旬迹，使用 Grunt火惊，Gulp，Webpack 等前端自動(dòng)化工具都有官方的插件來自動(dòng)完成這項(xiàng)工作奔垦。但在前期沒有接觸到前端自動(dòng)化構(gòu)建工具前屹耐，可以使用最近微信團(tuán)隊(duì)推出的一個(gè)前端自動(dòng)化桌面工具WeFlow 。
使用前端鏡像庫：對(duì)于 jQuery椿猎，Bootstrap张症，這些大多數(shù)網(wǎng)站都有可能用到的前端工具資源，不妨使用公共的 CDN 庫文件加速鸵贬，這其中百度俗他，360這些大的互聯(lián)網(wǎng)公司都提供的公共庫。因?yàn)榇蟛糠殖Ｓ镁W(wǎng)站會(huì)緩存這些常用的文件阔逼，所以當(dāng)自己的網(wǎng)站也使用這些公共庫文件時(shí)兆衅，實(shí)際是不需要重新請(qǐng)求獲取，而是直接從用戶的瀏覽器讀取緩存文件嗜浮。
使用 CDN 加速：CDN 是內(nèi)容分發(fā)網(wǎng)絡(luò)羡亩，其基本思路是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母煳Ｈ凇⒏€(wěn)定畏铆。簡單的理解就是把網(wǎng)站的靜態(tài)資源傳到提供 CDN 服務(wù)的云端，然后在網(wǎng)站中調(diào)用這些資源吉殃。
使用 Gzip 或 dfate 加速辞居，這個(gè)是在服務(wù)器設(shè)置，暫時(shí)按下不表蛋勺，等我仔細(xì)研究過后端知識(shí)再來補(bǔ)充瓦灶。
作者：holdtom
來源：慕課網(wǎng)
本文首次發(fā)布于慕課網(wǎng) ，轉(zhuǎn)載請(qǐng)注明出處抱完，謝謝合作
