整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          提高網站建設性能的十個原則
          
        
           
          
	
	
          
		提高網站建設性能的十個原則
          
                        
          　我對于Web網站開發開有很多年的實踐經驗，提供網站相應速度一直是網站開發人員孜孜不倦的追求，無論后端程序的優化，數據庫的優化，還是前端的優化，最終目的只有一個，讓網站更快的打開，給用戶提供更好的瀏覽體驗，這里只介紹從前端人員的角度來，在網站建設中要注意的一些原則。
          　　1、減少網站的HTTP請求數
          　　構造請求、等待響應需要時間，因此請求數量越少越好，減少請求的總體思路就是合并資源，減少顯示一個頁面需要的文件數，常規的方法有：
          　　1.1ImageMap
          　　通過設置<img>標簽的usemap屬性與使用<map>標簽可以在一幅圖片上切分出多個區域，指向不同的鏈接。比起使用多幅圖片分別構造鏈接減少了請求數。更多網站建設和SEO案例【www.tpsem.com】
          　　1.2.CSSSprite（CSS貼圖整合/貼圖拼合/貼圖定位）
          　　通過設置元素的background-position樣式做到。一般用于界面圖標。典型的可以參考TinyMCE編輯器上方的那些小按鈕。多個小圖實質是從一個統一的大圖通過不同的偏移量裁剪而來，這樣加載界面上的眾多按鈕實際上只要請求一次（請求大圖一次），從而減少HTTP請求數。
          　　2、將css樣式表文件置于頁面前部
          　　先加載樣式表，這樣頁面渲染得以較早開始，給用戶頁面加載較快的感覺，所以css最好放在<head></head>之間。
          　　3、使用Gzip壓縮
          　　使用Gzip壓縮HTTP報文，減小體積，減少傳輸時間。
          　　4、將Js腳本放在頁面底部
          　　原因同3，先處理頁面顯示，頁面渲染較早完成，而腳本邏輯稍后執行，這樣給用戶頁面加載較快的感覺。
          　　5、將JavaScript與CSS作為外聯資源
          　　這似乎與原則1中的合并思想相悖，但其實不然：考慮每個頁面都引入了一個公共的JavaScript資源（例如jQuery或是ExtJS這樣的JavaScript庫），單就一個頁面的表現來看，內聯（即將JavaScript嵌入HTML）頁面將比外聯（使用<script>標簽引入）頁面加載更快（因為其較少的HTTP請求數）。但如果有很多頁面都引入了這個公共JavaScript資源，那么內聯方案會造成重復傳輸（因為這個資源內嵌在每個頁面中了，所以每次打開一個頁面都要將這部分資源傳輸一遍，從而造成網絡傳輸資源的浪費）。而將這種資源獨立出來外聯引用可以解決這個問題。
          6、避免使用CSS表達式
          過于復雜的JavaScript腳本邏輯、DOM查找、選擇操作將會降低頁面處理效率。
          　　7、壓縮你的JavaScript
          　　使用JS壓縮工具壓縮你的JavaScript吧，很有效哦?？纯磈Query的兩個不同的發行版本就知道區別了：
          　　8、減少域名
          　　每次請求新域名都需要進行通過DNS查找不同的域名，且DNS緩存無法發揮作用。因此應該盡量將站點組織在一個統一域名下，避免使用過多子域名，網站保留一個主域名即可。
          　　9、盡量http避免重定向
          　　一次重定向意味著在你真正訪問到想要看到的頁面前加入了一輪額外的HTTP請求（客戶端發起HTTP請求→HTTP服務器返回重定向響應→客戶端對新URL發起請求→HTTP服務器返回內容，下劃線部分為額外的請求），因此消耗更多的時間（也就給人反應更慢的感覺）。因此除非必要，不要隨意使用重定向，如果有下面的需求，可以采用重定向。
          　　9.1.避免URL失效
          　　舊站點遷移后，為了避免舊的URL失效，通常將對舊URL的請求重定向至新系統的對應地址。
          　　9.2.URL美化/偽靜態
          　　在可讀性好的URL與實際資源URL之間轉換
          　　10、移除重復的腳本
          　　不要在一個頁面中重復引入相同的腳本。例如腳本B和C都依賴于A，那么在使用了B和C的頁面中就有可能存在對A的重復引用。解決方法，對于簡單的站點手動檢查依賴性，消去重復引入；對于復雜的站點則需要構建自己的依賴管理/版本控制機制。
          　　總結：在網站制作時候把握上面9個原則，可以讓我們前端頁面速度和響應速度更快，網站建設中是一門比較精細的技術，希望從事前端開發的網頁設計師可以知道更多的基礎知識。

          里妹導讀：今年的雙11已經是阿里資深前端技術專家舒文來阿里的第11年，從應屆生到雙11前端PM，他一路升級打怪，實現了崗位上從P4到P9的晉升。這第11屆雙11順利結束之際，他把在阿里這些年的成長經歷做一個總結和分享，希望你能在他的故事中得到些許啟發。
          作者簡介：舒文，來自淘系技術部前端團隊。目前負責淘系(淘寶+天貓)的營銷活動、互動的業務，也在阿里巴巴前端委員會主導搭建體系的技術方向。
          P4：懵懂學生入行記 (2008.10-2009.12)
          2008年10月，入職阿里巴巴日文站，以前端崗加入UED團隊。日文站的業務源于阿里巴巴國際站 - 提供在線的平臺化服務，專注撮合中日貿易。
          在那個前端的鴻蒙年代，頁面重構工程師和Javascript程序員還是兩個細分職位： 在阿里，前端、交互、視覺共同劃屬用戶體驗部門。
          而在部份公司，有專門的重構工程師。
          在日文站亦如是：現實情況是杭州和東京的團隊，具備寫JS能力的工程師均不多。不少同事專注在HTML/CSS領域，且專研極深。舉個例子：在日文站，所有的HTML/CSS代碼必須通過兩個Lint工具：HTML文書の文法をチェックし、採點します、[The W3C Markup Validation - 這讓代碼的規范性更好外，也能獲得更好的搜索引擎分析&索引權重。
          隨著業務發展，需求場景多且復雜起來，對Javascript開發能力要求就越高。同時，也激發了我的技術熱情。除了看書，我迫切想參與其他事業部的前端交流會。感謝時任主管的支持，我開始主動跨部門溝通，將他山之玉和學習所得有了更多結合。慢慢地，在團隊內部提出一些技術方案并逐漸應用到杭州/東京兩個團隊 (特別感謝最早時代的D2)。
          在那個階段，我幾乎參與了所有較為復雜的項目。結合當年的熱門大作《高性能網站建設指南》、Yahoo網站性能優化黃金法則，負責了主站的性能優化，取得了一些不錯結果。
          2009年10月獲得了日文站優秀員工，年底順利晉升到新的層級(P5)。
          P5：從熱血到成長(2010.01-2011.06)
          2010年開始，業務略微調整，參與“日本買家獲得”(Buyer Growth)。這個業務本質是通過平臺技術優化(SEO、SEM等)獲得更高的搜索引擎權重、提高Landing到轉化。
          在這期間，隨著被認可度提升、持續的項目歷練，我的自信心也得到了鍛煉。除了參與更復雜的項目外，我開始主動對業務和技術體系做出一些提案(Proposal) - 包括參考Google Webmaster Guidelines進行技術優化、參與了各種SEO項目，提出了現在回想起來各種或靠譜或不靠譜的提案。非常感謝歷任主管的支持和包容，讓一個楞頭青能夠沒有后顧之憂地敢想敢做。
          日文站初版克隆自Alibaba.com，加之外包參與、跨東京和杭州多團隊開發等原因，全站前端框架混雜，包括不限于YUI/Mootools/PrototypeJS/ExtJS/TBra等前端框架&類庫混雜在同一業務甚至頁面。新人上手、多人協作、性能優化的成本很高，但歷史原因積重難返，大家苦不堪言。
          結束一個大項目后，時值“憤青”的我對全站的代碼做了個調研和分析，說服了主管們，決定啟動一個重構項目——旨在將全站混雜的代碼統一到 jQuery。并大體確定了執行方案：隨業務迭代上線、項目成員1人，我兼任PM、開發/自測。
          在之后，一個如同打了雞血般的前端程序員，白天黑夜的翻歷史PRD、熟悉代碼邏輯、閱讀各種類庫的手冊，陸續將各業務線的腳本重寫了一遍，邊做業務項目邊重構，整個項目持續了半年多，直到11年Q1完成。
          現在回想起來，有些事情真需要一股沖動，正如買房、結婚。如果主管讓我再多考慮半天，我興許就慫了。當然，人生也可能走入另外一條主線。
          2011年日文站業務合入B2B，我也參加并通過新事業部的年中晉升(至P6 ) 。

          2011年阿里巴巴日文站誓師大會
          P6：內部創業 + 前端的無線爆發 (2011.07-2014.06)
          兩段非常寶貴又特別的經歷。
          2011年下半年主動選擇加入阿里內部的創業項目：打造一款面向個人消費者的云產品。 團隊不大，20多人，各路專家云集，各負責人級別都很高。很享受這段工作旅程，我第一次參與桌面Hybrid端項目，第一次開發SPA Web應用，第一次參與跨桌面軟件/PC Web/H5的項目，第一次領略敏捷管理的魅力。在來自美國的技術Leader帶領下，我接觸到很多新領域，極大地開闊了技術視野。
          “創業失敗是要承擔風險的，沒有加薪，沒有晉升，而且還是996，直到項目成功”。第一次面試這個項目前，業務負責人，阿里工號16的虛竹告訴我。
          不算幸運的是，最終這個項目沒有取得如預期的成功，業務有了變化和調整。
          但幸運的是：這段經歷讓我親身體驗了一把“創業”，也感受了技術以外的方方面面艱難。這個過程中形成的產品和業務思維，對我日后帶來了深刻影響。當然，也在我之后幾百次想離職創業時，這段經歷讓我能夠靜下心來思考創業的內核 - “為什么要創業？我有什么資源、能做什么事情、創造什么價值？”
          忘了說，這段經歷之所有特別，還因為辦公地點在湖畔花園——馬老師家。

          湖畔花園辦公場地
          2012年7月，加入到天貓的前端團隊。 主管給予了充分的信任，讓我負責天貓H5首頁的研發，開始接觸淘寶前端—— 一個更成熟完整的技術體系。
          2012年底，@三七 加入天貓帶領前端團隊，作為國內前端領域最早的拓荒者之一，他在隨后的兩年時間給天貓的前端技術帶來體系化的變革——從模塊化到工程化再到生產環境的NodeJS，并引入了Mobile First理念。在他的支持下，我帶領了一支前端小組陸續參與多條業務線的開發工作。我自己也加入集團級技術建設，主導跨端Web的項目，推進了前端體系的移動化建設。
          除專業技術外，花了比原來更多的功夫在團隊工作上，包括不限于團隊氛圍、風格和文化的打造，學會在內網分享中學習借鑒前輩大拿的的管理方法論。在阿里的文化中，非常強調傳承。一個人牛不算什么，讓一群人厲害才算厲害，最好是讓下屬比自己還強。
          時間花在哪兒，結果就會在哪兒。團隊內一些業務尖兵逐漸冒出頭來，在后來幾年成為天貓甚至大淘系的中堅力量。
          這個過程既痛苦又快樂。痛苦在于要做越來越多的超過自己能力層級、遠離舒適區的工作，快樂的則是能明顯感知到自己在這個過程中的快速成長。
          很幸運，在14年年中，順利通過晉升(P7)。
          P7：從雙十一中打將出來 (2014.08 - 2016.01)
          2014年注定是難忘的一年。在這一年，我開始負責營銷活動的業務，并擔任2014年雙十一前端技術PM工作。
          營銷活動是一個頂有趣、富有故事的業務：
          從技術上：它可以極致簡潔到切一個頁面上線就行，也可以復雜到如雙11一般 ——它是阿里技術的年度大考。
          從業務上：它既可以簡單到直接把現實生活的促銷活動進行虛擬世界的進行流程投射，也能如互聯網史上的春運般整合零售生態和供應鏈。
          我和多個團隊在天貓制定了各個維度的技術規范，如內控標準、外包規范，有驚無險地渡過了14年雙十一。
          在PC時代，營銷活動的研發模式，對于前端來說，實在過于“簡樸”：“5到6位正式前端常年帶著數十個外包，根據運營需求開發成百數千的頁面，通過一個叫做TMS的運營系統預留坑位給運營同學填數據，交由后端應用推上線（CDN）。” 這類業務活動頻次高、頁面量大、協同成本高。某種意義上講，對前端技術挑戰并不高，為了更高效的研發，我們能做的是不斷提高組件和模塊復用率。
          感謝TMS，它幫助前端們快速迭代出一個又一個頁面，支持了集團的業務，即使在今天，它的設計思路都能稱得上精巧犀利。
          發生變化來自2014年雙十一前，線上發生了一次令我終生難忘的離奇故障（涉及敏感信息，略過細節）：當時因臨時未排查出原因，VP現場觀摩面，我和CDN運維團隊的同學們能做的只是不斷重啟集群應用緩解問題。
          我作為時任前端PM，也因技術方案選擇失誤受到批評責罰。（時隔多年，大家也偶爾調侃，責罰不冤，幸而那天的問題提前暴露而未發生在11.11號當天，否則后果難料 ）。
          那年雙11最終還是完美謝幕，GMV 571億，移動端成交42.6% ，很多人敏銳的感覺到：移動化時代到來了。
          之后技術復盤，我們針對問題做了多輪討論和推演，決定啟動一個代號“斑馬”的產品項目：基于我們對營銷的理解，運營的實際需求、過往的技術痛點，設計一個高效的頁面系統來支持運營快速發布活動上線，更重要的是它是完全的基于Mobile First設計的系統。
          正所謂 “一飲一啄，莫非前定” ，因為過去一年的打磨錘煉、痛過后的反思，我們很快把方案框架敲定，并和多個業務搭檔共同推進項目實施。
          項目于15年初立項，我代表團隊“激進”的將階段目標定為“支撐2015年3月的春季大促” 。這種既要支撐日常高頻的大促業務，又要同時從0到1做平臺研發，不啻于“飛行中升級引擎”，困難很大。但我背后的思考是：“這就如同創業，沒有一往無前的決心和一鼓作氣的氣勢，等想多了細了，多半就慫了怕了”。
          我負責整個系統及PM工作，團隊培養出來的中堅力量們承擔各個功能模塊研發。為實現我們心中所定計劃，整個項目組如同創業般激情，為了一個共同的目標奮進。春節假期不少同學還在主動提交代碼，節后迅速返回公司繼續項目。
          很幸運，克服了重重困難，“斑馬”項目順利上線，并成功支持了2015年第一個S級大促?；谛碌南到y，我們共同把營銷活動送上新的軌道：因模塊化帶來的效率提升讓我們完全解除了外包依賴、因具備跨端能力運營們可以單次同時進行PC和無線活動、我們設計并推動了CDN構架，單在15年雙11就節省了數千萬預算。
          隨著技術迭代，“斑馬”這個技術產品，在后面幾年成為阿里的基礎運營平臺之一。
          2015年5月，我參與了P8的晉升提名，結果未通過。Leader和我溝通：“成長很快，能力和規劃出色，業務成果需要時間驗證”。我很坦然接收了建議，晉升答辯中的技術評委的建議中肯不失公正，讓我受益很大。
          “但行好事，莫問前程”——在隨后的時間，“斑馬”的能力更為完備。我再次擔任了2015年雙11的前端PM工作，業務也順利上線。那一年，雙11當天GMV 912億，移動端成交68%。
          16年1月，新主管告訴我，綠色通道通過，晉升至P8。

          雙十一令牌/虎符
          P8：立足業務，敢想敢造 (2016.02 - 2019.07)
          一次偶然的機會，看到一張圖：如遵循民意蘋果手機會變成什么樣？給我帶來一些對業務和技術的思考：“頁面發布系統本質上是一個通用的工具平臺：前端/運營/設計師都是它的用戶，每個角色都有對它的功能需求。但每個新增功能在解決一類用戶需求的同時又增加了平臺復雜度，降低的客戶的易用性，丟失掉另一類用戶的民心?！?/p>
          “這興許是一個產品的輪回宿命”，我內心有些敬畏地想。帶著這個敬畏，時間到了2017年，隨著斑馬的功能日趨復雜，我決定將運營操作平臺和底層技術能力進行剝離：
          • 將斑馬定義為運營系統，專為運營打造極致的頁面搭建。
          • 將底層能力抽象成服務平臺（代號“天馬”），提供開放的研發標準、搭建方案、頁面渲染能力。
          隨著時間推移，“天馬”的開放能力不斷完善，越來越多的事業部基于它構建面向業務的平臺系統，帶來的技術回報是：技術復用減少從0到1的研發&硬件成本、標準統一使跨業務協同變為可行。
          而在技術的另外一邊，業務發生著悄無聲息的變化：16年雙11GMV 1207億、17年雙11則是1682億。每年雙十一在如此巨大的基數下還能持續業務高增長，個性化算法、推薦技術的大規模應用起到了非常重要的作用。在全局效率上，大數據優于人工干預逐漸得到了共識。在我看來，這些變化意味著時下大家認可的大促會場模式，也將帶來新的變化。
          2018年2月，我在內部做了個分享，描述了對營銷活動未來的預判：
          • 業務化：面向“活動”組織，而非頁面。
          • 產品化：構建常態化、心智化的大促產品矩陣，而非單純是模塊級的抽象。
          • 智能化：投放算法化和規則化，而非運營的動態化。
          基于以上預判，我和團隊的小伙伴，計劃聯同業務、上下游技術團隊共同構建一個面向營銷活動的平臺產品（項目代號：方舟）。
          很感謝歷任主管實仙/四虎的信任，愿意幫我頂住重重壓力，經過多輪溝通，我們達成了一致共識。
          和過去幾年稍有不同的是，我逐漸把包括不限于方舟的一些重要產品放手給團隊中的骨干/TL，讓他們去規劃、去驅動、去變革。我更多做了輔導性、資源性、業務判斷的全局性工作。
          隨著時間的推移，越來越多的結果開始凸現：
          1. 斑馬逐漸成為集團級的通用平臺，數萬小二同學用它發布管理業務。
          2. 方舟作為業務平臺交付成為大促體系的核心部分，并成功應用到雙11期間，在效率、效果和交付質量上取得矚目的結果。
          3. 天馬通過“開放共建、出海上云”，為集團多個BU提供基礎的技術搭建服務。
          4. 在業務中，團隊中沉淀出一個個技術產品：渲染引擎、API聚合網關等，也把曾經僅服務于內部的產品開放到商家、ISV。
          在2018年中，提名參加晉升面試，結果未通過，技術委員會的評委們建議更多參與“集團級的技術建設、更高格局的視野”。
          我很快走出了沮喪，畢竟在阿里，常勝不常有失敗倒常伴。更重要是，主管 @四虎 的開導讓我開始思考更全局的未來。
          隨后的時間，我繼續投入了2018的雙11前端整體工作，推進了多個端技術方案落地天貓。感謝阿里前端技術委員會主席圓心的舉薦，我加入前端委員會，擔任搭建技術方向的Sponsor - 旨在站在集團視角，定制標準、融合并打通搭建技術體系，在更大范圍內賦能業務。
          在集團內各個前端Leader的支持下，我們很快跨多個事業群達成了共識，制定完善了技術標準，基于一體化方案啟動了多個層面的項目。
          2019年5月，參加了年度晉升，順利通過P9晉升。感恩。
          P9：不止于前端
          現在，仍然有太多的事情值得去深入：
          1. 以雙11為代表的大促前端體系仍然是業內最具技術挑戰的業務場景之一，包括不限于客戶端容器技術、服務端渲染(Node)、框架與組件體系、跨終端技術等綜合應用。
          2. 阿里有數以億計的消費者，如何為我們的消費者構建一個好玩有趣的互動購物體驗，是我們這個團隊一直需要探索和改進的。
          3. 在未來，源自于前端的搭建技術，不僅能支持小二還能服務生態角色，不僅能支持國內還要服務全球。
          除以上，我也深度參與阿里前端技術委員會的工作：
          在阿里的前端體系，除了搭建方向以外，有相當數量的跨事業群共同建設的技術方向&項目，包括不限于Serverless、IDE、智能化、中后臺、數據可視化、工程化、Node技術等。這些技術方向或者始于前端，但又不止于前端，共同為打造行業領先的技術生態服務。
          有期待有更多的優秀的同學加入阿里，讓我們的智力和努力觸碰到數以十億計的用戶。歡迎加入聯系我：wenliang.shuwl [at]alibaba-inc.com
          最后分享一些過往些年的的心得：
          關于工作：
          1.想做好一件事情前，獲得上級的認可非常非常重要，這是把一件事情做成、做好的催化劑。
          2.很多時候，源自“事”的困難都可以用態度解決，來自“人”的困難可以用換位思考解決。
          3.對于剛參加工作的同學，如果家中無礦，啥也別說，努力就對了！畢業五年內的表現，可以決定人生很多事情。
          4.如果你和領導發生分歧：拿出你的數據/理由/態度盡最大的努力去說服他，如果充分溝通還形不成共識，那就先聽他的 。這不是媚上，而是“在必須達成一致的前提下，相信更有概率做出正確決定的人。”
          5.在工作中，如果某個時間突然發現和往常不一樣，陡然壓力變大/身心疲憊，別害怕 ，因為，這有可能是你在成長、突破瓶頸前的黑暗期。
          6.專業技能是立身之本。從長期來看，它是性價比最高的投資標的之一。
          7.結合資源，盡最大的努力、用最好的態度，做好手上的工作，也是一種創業。
          8.不要因為背靠大樹久了，就誤認為自己是顆大樹。對客戶&用戶的尊重和價值創造是我們很大的護城河。
          關于生活：
          1.技術人讀書工作掙錢養家，一步步成長同時也會一歲歲變老。相比不少行業，互聯網行業自身有賽道上的優勢，但如果單純以同比其他行業略高的溢價按年/月出售自己的時間和技能，這不應該是我們做的。堅持不斷的思考、通過技術優勢帶來疊加價值，在過程中不斷成長 ， 這興許會更好。
          2.學會獎勵自己。如果經受了辛勞、痛苦和壓力走了過來，再不好好的、肉痛地獎勵自己一把，哪對得起過去和未來的自己。
          3.除了在工作中，人生處處皆可學習：學理財、學打球、學拍照、學游泳、學健身、學拍短視頻、學習怎么把生活過得更好。
          4.最后，咱們技術人可能很忙，有可能沒法“work-life balance”，這是一種取舍。但健康的身體一定是最寶貴的一筆財富，沒有之一，不能舍。謝謝大家。
          作者：舒文
          本文為云棲社區原創內容，未經允許不得轉載。
          人整理來之不易請珍惜，如有錯誤請諒解，謝謝。。。
          資源教程:
          1. 綜合類
          - [前端知識體系](http://www.cnblogs.com/sb19871023/p/3894452.html)
          - [前端知識結構](https://github.com/JacksonTian/fks)
          - [Web前端開發大系概覽](https://github.com/unruledboy/WebFrontEndStack)
          - [Web前端開發大系概覽-中文版](http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html)
          - [Web Front-end Stack v2.2](https://raw.githubusercontent.com/unruledboy/WebFrontEndStack/master/Web%20Front%20End%20Stack.png)
          - [免費的編程中文書籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
          - [前端書籍](https://github.com/dypsilon/frontend-dev-bookmarks)
          - [前端免費書籍大全](https://github.com/vhf/free-programming-books)
          - [前端知識體系](http://www.cnblogs.com/sb19871023/p/3894452.html)
          - [免費的編程中文書籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
          - [智能社 - 精通JavaScript開發](http://study.163.com/course/introduction/224014.htm)
          - [重新介紹 JavaScript（JS 教程）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
          - [麻省理工學院公開課：計算機科學及編程導論](http://v.163.com/special/opencourse/bianchengdaolun.html)
          - [JavaScript中的this陷阱的最全收集--沒有之一](http://segmentfault.com/a/1190000002640298)
          - [JS函數式編程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)
          - [JavaScript Promise迷你書（中文版）](http://liubin.github.io/promises-book/)
          - [騰訊移動Web前端知識庫](https://github.com/AlloyTeam/Mars)
          - [Front-End-Develop-Guide 前端開發指南](https://github.com/Front-End-Developers-Hunan/Front-End-Develop-Guide)
          - [前端開發筆記本](https://li-xinyang.gitbooks.io/frontend-notebook/content/)
          - [大前端工具集 - 聶微東](https://github.com/nieweidong/fetool)
          - [前端開發者手冊](https://dwqs.gitbooks.io/frontenddevhandbook/content/)
          1. 入門類
          - [前端入門教程](http://www.cnblogs.com/jikey/p/3613082.html)
- [瘳雪峰的Javascript教程](http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000)
- [jQuery基礎教程](http://www.imooc.com/view/11)
- [前端工程師必備的PS技能——切圖篇](http://www.imooc.com/view/506)
- [結合個人經歷總結的前端入門方法](https://github.com/qiu-deqing/FE-learning)

          1. 效果類
          • 彈出層
          • 焦點圖輪播特效
          1. 工具類
          • css sprite 雪碧圖制作
          • 版本控制入門 – 搬進 Github
          • Grunt-beginner前端自動化工具
          1. 慕課專題
          • 張鑫旭 - 慕課系列
          • lyn - 慕課系列
          • 艾倫 - 慕課系列
          • 碧仔 - Hello，移動WEB
          1. 周報類
          • 平安科技移動開發二隊技術周報
          六. API:
          1. 總目錄
          1. 開發中心
          - [mozilla js參考](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)
- [chrome開發中心（chrome的內核已轉向blink）](https://developer.chrome.com/extensions/api_index.html)
- [safari開發中心](https://developer.apple.com/library/safari/navigation)
- [microsoft js參考](https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx)
- [js秘密花園](http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html)
- [js秘密花園](http://bonsaiden.github.io/JavaScript-Garden/zh/)
- [w3help](http://www.w3help.org/) 綜合Bug集合網站

          1. 綜合搜索
          • javascripting
          • 各種流行庫搜索
          1. 綜合API
          • runoob.com-包含各種API集合
          • 開源中國在線API文檔合集
          • devdocs 英文綜合API網站
          2. jQuery
          • jQuery API 中文文檔
          • hemin 在線版
          • css88 jq api
          • css88 jqui api
          • 學習jquery
          • jquery 源碼查找
          3. Ecmascript
          • Understanding ECMAScript 6 - Nicholas C. Zakas
          • exploring-es6
          • exploring-es6翻譯
          • exploring-es6翻譯后預覽
          • 阮一峰 es6
          • 阮一峰 Javascript
          • ECMA-262，第 5 版
          • es5
          4. Js template
          • template-chooser
          • artTemplate
          • tomdjs
          • 淘寶模板juicer模板
          • Fxtpl v1.0 繁星前端模板引擎
          • laytpl
          • mozilla - nunjucks
          • Juicer
          • dustjs
          • etpl
          5. 彈出層
          • artDialog 最新版
          • artDialog 文檔
          • google code 下載地址
          • 賢心彈出層
          • 響應式用戶交互組件庫
          • sweetalert-有css3動畫彈出層
          6. CSS
          • CSS 語法參考
          • CSS3動畫手冊
          • 騰訊css3動畫制作工具
          • 志爺css小工具集合
          • [url=http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb]cs
          • bouncejs 觸摸庫
          • css3 按鈕動畫
          • animate.css
          • 全局CSS的終結(狗帶) [譯]
          7. Angularjs
          • Angular.js 的一些學習資源
          • angularjs中文社區
          • Angularjs源碼學習
          • Angularjs源碼學習
          • angular對bootstrap的封裝
          • angularjs + nodejs
          • 呂大豹 Angularjs
          • AngularJS 最佳實踐
          • Angular的一些擴展指令
          • Angular數據綁定原理
          • 一些擴展Angular UI組件
          • Ember和AngularJS的性能測試
          • 帶你走近AngularJS - 基本
          • Angularjs開發指南
          • Angularjs學習
          • 不要帶著jQuery的思維去學習AngularJS
          • angularjs 學習筆記
          • angularjs 開發指南
          • angularjs 英文資料
          • angular bootstrap
          • angular jq mobile
          • angular ui
          • 整合jQuery Mobile+AngularJS經驗談
          • 有jQuery背景，該如何用AngularJS編程思想
          • AngularJS在線教程
          • angular學習筆記
          8. React
          • react.js 中文論壇
          • react.js 官方網址
          • react.js 官方文檔
          • react.js material UI
          • react.js TouchstoneJS UI
          • react.js amazeui UI
          • React 入門實例教程 - 阮一峰
          • React Native 中文版
          • Webpack 和 React 小書 - 前端亂燉
          • Webpack 和 React 小書 - gitbook
          • webpack
          • Webpack，101入門體驗
          • webpack入門教程
          • 基于webpack搭建前端工程解決方案探索
          • React原創實戰視頻教程
          9. 移動端API
          1. API
          • 99移動端知識集合
          • 移動端前端開發知識庫
          • 移動前端的一些坑和解決方法（外觀表現）
          • 【原】移動web資源整理
          • zepto 1.0 中文手冊
          • zepto 1.0 中文手冊
          • zepto 1.1.2
          • zepto 中文注釋
          • jqmobile 手冊
          • 移動瀏覽器開發集合
          • 移動開發大雜燴
          • 微信webview中的一些問題
          1. 框架
          • 特色的HTML框架可以創建精美的iOS應用
          • 淘寶SUI
          10. avalon
          • avalonjs
          • Avalon新一代UI庫： OniUI
          • avalon.oniui-基于avalon的組件庫
          11. Requriejs
          • Javascript模塊化編程（一）：模塊的寫法
          • Javascript模塊化編程（二）：AMD規范
          • Javascript模塊化編程（三）：require.js的用法
          • RequireJS入門（一）
          • RequireJS入門（二）
          • RequireJS進階（三）
          • requrie源碼學習
          • requrie 入門指南
          • requrieJS 學習筆記
          • requriejs 其一
          • require backbone結合
          12. Seajs
          • seajs
          • seajs 中文手冊
          13. Less,sass
          • sass
          • sass教程-sass中國
          • Sass 中文文檔
          • less
          14. Markdown
          • Markdown 語法說明 (簡體中文版)
          • markdown入門參考
          • gitbook 國外的在線markdown可編輯成書
          • mdeditor 一款國內的在線markdown編輯器
          • stackedit 國外的在線markdown編輯器，功能強大，同步云盤
          • mditor 一款輕量級的markdown編輯器
          • lepture-editor
          • markdown-editor
          15. D3
          • d3 Tutorials
          • Gallery
          • lofter
          • iteye
          • ruanyifeng
          16. 兼容性
          • esma 兼容列表
          • W3C CSS驗證服務
          • caniuse
          • csscreator
          • microsoft
          • 在線測兼容-移動端
          • emulators
          17. UI相關
          • bootcss
          • MetroUICSS
          • semantic
          • Buttons
          • kitecss
          • pintuer
          • amazeui
          • worldhello
          • linuxtoy
          • gitmagic
          • rogerdudler
          • gitref
          • book
          • gogojimmy
          18. HTTP
          • HTTP API 設計指南
          19. 其它API
          • javascript流行庫匯總
          • 驗證api
          • underscore 中文手冊
          • underscore源碼分析
          • underscore源碼分析-亞里士朱德的博客
          • underscrejs en api
          • lodash - underscore的代替品
          • ext4api
          • backbone 中文手冊
          • qwrap手冊
          • 緩動函數
          • svg 中文參考
          • svg mdn參考
          • svg 導出 canvas
          • svg 導出 png
          • ai-to-svg
          • localStorage 庫
          20. 圖表類
          • Highcharts 中文API
          • Highcharts 英文API
          • ECharts 百度的圖表軟件
          • 高德地圖
          • 開源的矢量圖腳本框架
          • svg 地圖
          21. vue
          • Vue
          • Vue 論壇
          • Vue 入門指南
          • Vue 的一些資源索引
          21. 正則
          • JS正則表達式元字符
          • 正則表達式30分鐘入門教程
          • MDN-正則表達式
          • ruanyifeng - RegExp對象
          • 小胡子哥 - 進階正則表達式
          • is.js
          • 正則在線測試
          22. ionic
          • ionic
          23. 其它
          • Mock.js 是一款模擬數據生成器
          七. 開發規范
          1. 前端
          • 通過分析github代碼庫總結出來的工程師代碼書寫習慣
          • HTML&CSS編碼規范 by @mdo
          • 團隊合作的css命名規范-騰訊AlloyTeam前端團隊
          • 前端編碼規范之js - by yuwenhui
          • 前端編碼規范之js - by 李靖
          • 前端開發規范手冊
          • Airbnb JavaScript 編碼規范（簡體中文版）
          • AMD與CMD規范的區別
          • AMD與CMD規范的區別
          • KISSY 源碼規范
          • bt編碼規范
          • 規范加強版
          • 前端代碼規范 及 最佳實踐
          • 百度前端規范
          • 百度前端規范
          • 百度前端規范
          • ECMAScript6 編碼規范--廣發證券前端團隊
          • JavaScript 風格指南/編碼規范（Airbnb公司版）
          • 網易前端開發規范
          • css模塊
          • 前端規范資源列表
          1. PHP
          • 最流行的PHP 代碼規范
          • 最流行的PHP 代碼規范
          1. Android
          • 【敏捷開發】Android團隊開發規范
          • Android 開發規范與應用
          八. 其它收集
          1. 各大公司開源項目
          • Facebook Projects
          • 百度web前端研發部
          • 百度EFE
          • 百度github
          • alloyteam
          • alloyteam-github
          • alloyteam-AlloyGameEngine
          • AlloyDesigner 即時修改，即時保存，設計稿較正，其它開發輔助工具
          • H5交互頁編輯器AEditor介紹 H5動畫交互頁開發的工具介紹
          • AEditor H5動畫交互頁開發的工具
          • maka
          • 值得訂閱的weekly
          • 騰訊html5
          • 奇舞團開源項目
          • Qunar UED
          2. Javascript
          1. 常用
          • ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性
          • 模擬鍵盤
          • 拼音
          • 中國個人身份證號驗證
          1. 算法
          • 數據結構與算法 JavaScript 描述. 章節練習
          • 常見排序算法（JS版）
          • 經典排序
          • 常見排序算法-js版本
          • JavaScript 算法與數據結構 精華集
          • 面試?？妓惴}精講
          1. 移動端
          • fastclick
          • no-click-delay
          1. JSON
          • 模擬生成JSON數據
          • 返回跨域JSONAPI
          3. Html5
          • HTML5 有哪些讓你驚艷的 demo？
          4. CSS
          • browserhacks
          5. jQuery
          1. 焦點圖
          • myfocus
          • myfocus-官方演示站
          • SuperSlidev2.1 -- 大話主席
          • soChange
          6. Ext, EasyUI, J-UI 及其它各種UI方案
          1. Ext
          • extjs
          • ext4英文api
          • ext4中文api
          1. EasyUI
          • jquery easyui 未壓縮源代碼
          1. J-UI
          • J-UI
          1. Other
          • MUI-最接近原生APP體驗的高性能前端框架
          • Amaze UI | 中國首個開源 HTML5 跨屏前端框架
          • 淘寶 HTML5 前端框架
          • KISSY - 阿里前端JavaScript庫
          • 網易Nej - Nice Easy Javascript
          • Kendo UI MVVM Demo
          • Bootstrap
          • Smart UI
          • 雅虎UI - CSS UI
          7. 頁面 社會化 分享功能
          • 百度分享 pc端
          • JiaThis pc端
          • 社會化分享組件 移動端
          • ShareSDK 輕松實現社會化功能 移動端
          • 友盟分享 移動端
          8. 富文本編輯器
          • 百度 ueditor
          • 經典的ckeditor
          • 經典的kindeditor
          • wysiwyg
          • 一個有情懷的編輯器。Bach's Editor
          • tower用的編輯器
          • summernote 編輯器
          • html5編輯器
          • XEditor
          • wangEditor
          9. 日歷
          1. PC
          • 經典my97
          • 強大的獨立日期選擇器
          • fullcalendar
          • fullcalendar日歷控件知識點集合
          • 中文api
          • 農歷日歷
          • 超酷的仿百度帶節日日歷老黃歷控件
          • 日期格式化
          • 大牛日歷控件
          • 我群某管理作品
          • input按位替換-官網
          • input按位替換-github
          • bootstrap-daterangepicker
          • 國外30個插件集合
          • JavaScript datepicker
          • Datepair.js
          • 一個風格多樣的日歷
          • 彈出層式的全日歷
          • jquery雙日歷
          1. 移動
          • 大氣實用jQuery手機移動端日歷日期選擇插件
          • jQuery Mobile 移動開發中的日期插件Mobiscroll
          1. Date library
          • Datejs
          • sugarjs
          10. 綜合效果搜索平臺
          • 效果網
          • 17素材
          • 常用的JavaScript代碼片段
          11. 前端工程化
          1. 概述
          • 前端工具大全
          • 什么是前端工程化
          1. Gulp
          • Gulp官網
          • Gulp中文網
          • gulp資料收集
          • Gulp：任務自動管理工具 - ruanyifeng
          • Gulp插件
          • Gulp不完全入門教程
          • 為什么使用gulp?
          • Gulp安裝及配合組件構建前端開發一體化
          • Gulp 入門指南
          • Gulp 入門指南 - nimojs
          • Gulp入門教程
          • Gulp in Action
          • Gulp開發教程（翻譯）
          • 前端構建工具gulpjs的使用介紹及技巧
          1. Grunt
          • gruntjs
          • Grunt中文網
          1. Fis
          • fis 官網
          • fis
          12. 輪播圖
          1. pc圖輪
          • 單屏輪播sochange
          • 左右按鈕多圖切換
          • fullpage全屏輪播
          1. 移動端
          - [無縫切換](http://www.swipejs.com/)
- [滑屏效果](http://www.idangero.us/swiper/)
- [全屏fullpage](https://github.com/peunzhang/fullpage)
- [單個圖片切換](https://github.com/qiqiboy/touchslider)
- [單個全屏切換](https://github.com/peunzhang/slip.js)
- [百度的切換庫](http://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group)
- [單個全屏切換](https://github.com/peunzhang/iSlider)
- [滑屏效果](https://github.com/saw/touch-interfaces)
- [旋轉拖動設置](http://baijs.com/tinycircleslider/)
- [類似于swipe切換](http://touchslider.com/)
- [支持多種形式的觸摸滑動](http://www.swiper.com.cn/demo/index.html)
- [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html)
- [大話主席pc移動圖片輪換](http://www.superslide2.com/)
- [滑屏效果](https://github.com/hahnzhu/parallax.js)
- [基于zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage)
- [ - 定寬網頁設計下，固定寬度布局開發WebApp并實現多終端下WebApp布局自適應](http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html][WebApp)
- [判斷微信客戶端的那些坑](http://loo2k.com/blog/detecting-wechat-client/)
- [可以通過javascript直接調用原生分享的工具](https://github.com/JefferyWang/nativeShare.js)
- [JiaThis 分享到微信代碼](http://www.jiathis.com/help/html/weixin-share-code)
- [聊聊移動端跨平臺開發的各種技術](http://fex.baidu.com/blog/2015/05/cross-mobile/)
- [前端自動化測試](http://www.zhihu.com/question/29922082)
- [多種輪換圖片](http://ajccom.github.io/niceslider/)
- [滑動側邊欄](https://mango.github.io/slideout/)

          13. 文件上傳
          • 百度上傳組件
          • 上傳
          • flash 頭像上傳
          • 圖片上傳預覽
          • 圖片裁剪
          • 圖片裁剪-shearphoto
          • jQuery圖片處理
          14. 模擬select
          • 糖餅 select
          • flexselect
          • 雙select
          • select2
          15. 取色插件
          • 類似 Photoshop 的界面取色插件
          • jquery color
          • 取色插件集合
          • farbtastic 圓環＋正方形
          16. 城市聯動
          • jquery.cityselect.js基于jQuery+JSON的省市或自定義聯動效果
          17. 剪貼板
          • 剪貼板
          • clipboard 最新的剪切方案
          • 不是Flash的剪貼板
          18. 簡繁轉換
          • 簡繁轉換
          19. 表格 Grid
          • facebook表格
          • 類似于Excel編輯表格-handsontable
          • bootstrap-table插件
          • datatables
          20. 在線演示
          • js 在線編輯 - runjs
          • js 在線編輯 - jsbin
          • js 在線編輯 - codepen
          • js 在線編輯 - jsfiddle
          • java 在線編輯 - runjs
          • js 在線編輯 - hcharts
          • js 在線編輯 - jsdm
          • sql 在線編輯 - sqlfiddle
          • mozilla 在線編輯器
          21. 播放器
          • Html5 VideoPlayer
          22. 粒子動畫
          • Proton 煙花
          九. Nodejs
          • nodejs 篇幅比較巨大
          • Node.js 包教不包會
          • 篇幅比較少
          • node express 入門教程
          • nodejs定時任務
          • 一個nodejs博客
          • 【NodeJS 學習筆記04】新聞發布系統
          • 過年7天樂，學nodejs 也快樂
          • 七天學會NodeJS
          • Nodejs學習筆記（二）--- 事件模塊
          • nodejs入門
          • angularjs nodejs
          • 從零開始nodejs系列文章
          • 理解nodejs
          • nodejs事件輪詢
          • node入門
          • nodejs cms
          • Node初學者入門，一本全面的NodeJS教程
          • NodeJS的代碼調試和性能調優
          十. 性能優化
          1. 常規優化
          - [Javascript高性能動畫與頁面渲染](http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)
- [移動H5前端性能優化指南](http://isux.tencent.com/h5-performance.html)
- [5173首頁前端性能優化實踐](http://ued.5173.com/?p=1731)
- [給網頁設計師和前端開發者看的前端性能優化](http://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)
- [復雜應用的 CSS 性能分析和優化建議](http://www.orzpoint.com/profiling-css-and-optimization-notes/)
- [張鑫旭——前端性能](http://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)
- [前端性能監控總結](http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)
- [ 網站性能優化之CSS無圖片技術](http://udc.weibo.com/2013/05/%E7%BD%91%E7%AB%99%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8Bcss%E6%97%A0%E5%9B%BE%E7%89%87%E6%8A%80%E6%9C%AF/)
- [web前端性能優化進階路](http://www.aliued.cn/2013/01/20/web%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E8%BF%9B%E9%98%B6%E8%B7%AF.html)
- [前端技術：網站性能優化之CSS無圖片技術](http://my.eoe.cn/tuwandou/archive/4544.html)
- [瀏覽器的加載與頁面性能優化](http://www.baiduux.com/blog/2011/02/15/browser-loading/)
- [頁面加載中的圖片性能優化](http://www.w3ctech.com/p/1503)
- [Hey——前端性能](http://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)
- [html優化](http://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)
- [99css——性能](http://www.99css.com/tag/%e6%80%a7%e8%83%bd)
- [Yslow——性能優化](http://www.yslow.net/category.php?cid=20)
- [YSLOW中文介紹](http://www.cnblogs.com/yslow/)
- [轉一篇Yahoo關于網站性能優化的文章，兼談本站要做的優化](http://www.360ito.com/article/40.html)
- [Yahoo!團隊實踐分享：網站性能](http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)
- [網站性能優化指南：什么使我們的網站變慢？](http://blog.jiasule.com/i/153)
- [網站性能優化實踐，減少加載時間，提高用戶體驗](http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)
- [淺談網站性能優化 前端篇](http://www.umtry.com/archives/747.html)
- [前端重構實踐之如何對網站性能優化？](http://www.adinnet.cn/blog/designview/2012-7-12/678.html)
- [前端性能優化：使用媒體查詢加載指定大小的背景圖片](http://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)
- [網站性能系列博文](http://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)
- [加載，不只是少一點點](http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)
- [前端性能的測試與優化](http://mzhou.me/article/95310/)
- [分享網頁加載速度優化的一些技巧？](http://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)
- [頁面加載中的圖片性能優化](http://www.f2es.com/images-bytes-opt/)
- [web前端優化(基于Yslow)](http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)
- [網站性能優化工具大全](https://www.qianduan.net/website-performance-optimization-tool.html)
- [【高性能前端1】高性能HTML](http://www.alloyteam.com/2012/10/high-performance-html/)
- [【高性能前端2】高性能CSS](http://www.alloyteam.com/2012/10/high-performance-css/)
- [由12306談談網站前端性能和后端性能優化](http://coolshell.cn/articles/6470.html)
- [AlloyTeam——前端優化](http://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)
- [毫秒必爭，前端網頁性能最佳實踐](http://www.cnblogs.com/developersupport/p/3248695.html)
- [網站性能工具Yslow的使用方法](http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)
- [前端工程與性能優化（上）：靜態資源版本更新與緩存](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)
- [前端工程與性能優化（下）：靜態資源管理與模板框架](http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)
- [HTTPS連接的前幾毫秒發生了什么](http://blog.jobbole.com/48369/)
- [Yslow](http://uicss.cn/yslow/#more-12319)
- [Essential Web Performance Metrics — A Primer, Part 1](http://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)
- [Essential Web Performance Metrics — Part 2](http://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)
- [YUISlide,針對移動設備的動畫性能優化](http://jayli.github.io/blog/data/2011/12/23/yuislide.html)
- [Improving Site Performance](http://joelglovier.com/improving-site-performance/)
- [讓網站提速的最佳前端實踐](http://segmentfault.com/a/1190000000367899)
- [Why Website Speed is Important](http://sixrevisions.com/web-development/why-website-speed-is-important/)
- [Need for Speed – How to Improve your Website Performance](https://www.devbridge.com/articles/need-for-speed-how-to-improve-your-website-performance/)
- [阿里無線前端性能優化指南 (Pt.1 加載期優化)](https://github.com/amfe/article/issues/1)

          1. 優化工具
          • JavaScript 性能分析新工具 OneProfile
          • JavaScript 堆內存分析新工具 OneHeap
          1. 在線工具
          • google在線工具
          • 阿里測
          • 阿里-免費測試服務
          • 阿里-F2etest多瀏覽器兼容性測試解決方案
          • js性能測試
          十一. 前端架構
          • 技術架構
          • 前端架構
          • 如何成為前端架構師
          • 關于前端架構-張克軍
          • 百度騰訊offer比較（騰訊游戲VS百度基礎架構）
          十二. 個人作品
          1. 推薦作品
          • winter代碼片段需要翻墻
          • fgm
          • 岑安作品集
          • 當耐特demo集合
          • 米空格 js作品
          • myFocus
          • SeaJS組件庫
          • 顏海鏡作品
          • 腳兒網作品
          • javascript個人作品
          • 妙味的雷東升游戲作品
          • javascript作品集
          • 云五筆，灰度產生生成工具
          • 項目主頁
          • 個性的作品主頁
          • 播放器
          • ucren js demos 集
          • 智能社
          • 實例陳列架
          • zoye demo
          • 王員外
          • 平凡
          • jyg 游戲案例
          • 很多jquery插件
          • 不羈蟲 - soJs 作品系列
          • frozenui
          • 黑白棋
          • fromone
          2. 群員作品
          • MDialog - [合肥-M.J]
          • 輪播圖 - [上海－冷靜]
          • [廣州—堅殼]
          • [成都 - 無痕]　感恩節專題
          • [球霸天]
          • [北京-小數]
          • [ptf] Magix 工具
          • [杭州-Pft] Magix 基于 MVC 結構和 Hash 驅動的 OPOA（One Page One Application）應用
          • [上海-劇中人]-實驗室
          • [上海-豪情 ] 作品集合
          • [成都-feeling]
          • [上海-angela]
          • [海南-hank]作品
          • [上海-張力]博客
          • [上海-zenki]作品
          • 移動端圖案解鎖
          • [合肥-M.J] - MPreview 移動端圖片預覽組
          • [合肥-M.J] - Mexam 移動端在線做題組
          • [北京-蘇瑞] - dancer小人
          • [上海-玄沐]- 個人網站
          • [廈門-二哲]- 個人博客
          3. 國外大牛精品
          • pazguille
          十三. 簡歷模板
          • 不錯的個人簡歷
          • 簡歷
          • 張倫
          • 簡歷
          • 翁天信
          • 動畫方式的簡歷
          • 組件豐富簡歷
          • 簡歷池
          • haorooms博客
          • Justin Young
          十四. 面試題
          • 那幾個月在找工作（百度，網易游戲）
          • 2014最新面試題
          • 阿里前端面試題
          • 2016校招內推 -- 阿里巴巴前端 -- 三面面試經歷
          • 騰訊面試題
          • 年后跳槽那點事：樂視+金山+360面試之行
          • 阿里前端面試題上線
          • 拉勾網js面試題
          • 前端面試
          • Web開發筆試面試題 大全
          • 前端開發面試題
          • 2014最新前端面試題
          • 百度面試
          • 面試題
          • 前端工作面試問題
          • 前端開發面試題
          • 5個經典的前端面試問題
          • 最全前端面試問題及答案總結
          • 如何面試一名前端開發工程師？
          • 史上最全 前端開發面試問題及答案整理
          • 前端實習生面試總結
          • 史上最全 前端開發面試問題及答案整理
          • BAT及各大互聯網公司2014前端筆試面試題：JavaScript篇
          • 前端開發面試題大收集
          • 收集的前端面試題和答案
          • 如何面試前端工程師
          • 前端開發面試題
          • 牛客網-筆試面經
          十五. iconfont
          • 中文字體
          • 淘寶字庫
          • 字體
          • 制作教程
          • zhangxinxu-icommon
          • icommon
          • 用字體在網頁中畫ICON圖標(推薦教程)
          • 字體壓縮工具 感謝初級群　[深圳-小魚] 的推薦
          十六. 開發工具類
          1. 前端開發工具
          • IntelliJ IDEA 簡體中文專題教程
          • Webstorm,InterllIdea,Phpstorm
          • SublimeText
          • Atom
          • visual studio code
          1. Chrome, Firebug, Filddle 調試
          2. Fiddler
          • Fiddler調式使用知多少(一)深入研究
          • 微信fiddle
          • 微信fiddle
          1. Chrome
          • Google Chrome 官方
          • Chrome - 基礎
          • Chrome - 進階
          • Chrome - 性能
          • Chrome - 性能進階
          • Chrome - 移動
          • Chrome - 使用技巧
          • Chrome - Console控制臺不完全指南
          • Chrome - Workspace使瀏覽器變成IDE
          • network面板
          • chrome開發工具快捷鍵
          • chrome調試工具常用功能整理
          • Chrome 開發工具 Workspace 使用
          • Chrome神器Vimium快捷鍵學習記錄
          • sass調試-w3cplus
          • 如何更專業的使用Chrome開發者工具-w3cplus
          • chrome調試canvas
          • chrome profiles1
          • chrome profiles2
          • chrome profiles3
          • chrome移動版調試
          • chrome調試
          • chrome的調試
          • chrome console 命令詳解
          • 查看事件綁定1
          • 查看事件綁定2
          • 神器——Chrome開發者工具(一)
          • 奇趣百科性能優化(Chrome DevTools 中的 Timeline Profils 等工具使用介紹)
          • chrome 開發者工具的 15 個小技巧
          • Chrome開發者工具不完全指南
          • Chrome 開發者工具使用技巧
          1. Firebug
          • firebug視頻教程
          • firefox 模擬器
          • console.log 命令詳解
          • Firebug入門指南
          • Firebug控制臺詳解
          1. 移動,微信調試
          • 瀏覽器端調試安卓
          • 移動端前端開發調試
          • 使用 Chrome 遠程調試 Android 設備
          • mac移動端調試
          • mac移動端調試
          • 無線調試攻略
          • 無線調試攻略
          • 屌爆了,完美調試 微信webview(x5)
          • 微信調試的那些事
          • 遠程console
          • 微信調試工具
          • 各種真機遠程調試方法匯總
          1. iOS Simulator
          • Simulator
          • Xcode中的iOS模擬器(iOS Simulator)的介紹和使用心得
          1. img
          • loading img
          • 智圖-圖片優化平臺
          • 在線png優化
          1. 生成二維碼
          • 生成二維碼
          1. 瀏覽器同步
          • puer
          • liveReload
          • f5
          • File Watchers
          1. 在線PPT制作
          • nodePPT
          • PPT
          • reveal
          • slippy
          十七. 前端導航網站
          • 界面清爽的前端導航
          • 前端導航
          • 前端網址導航
          • 前端名錄
          • 前端導航
          • 前端開發資源
          • 網址導航
          • 前端開發倉庫 - 眾多效果的收集地
          • 前端資源導航
          • F2E 前端導航
          十八. 常用CDN
          • 新浪CDN
          • 百度靜態資源公共庫
          • 360網站衛士常用前端公共庫CDN服務
          • Bootstrap中文網開源項目免費 CDN 服務
          • 開放靜態文件 CDN - 七牛
          • CDN加速 - jq22
          • jQuery CDN
          • Google jQuery CDN
          • 微軟CDN
          十九. Git,SVN,Github
          1. Git
          • git-scm
          • 廖雪峰-Git教程
          • git-for-windows
          • GitHub 添加 SSH keys
          • gogithub
          • git常規命令練習
          • git的資料整理
          • 我所記錄的git命令（非常實用）
          • 企業開發git工作流模式探索部分休整
          • GitHub 漫游指南
          • GitHub秘籍
          • 使用git和github進行協同開發流程
          • 動畫方式練習git
          需要資源私信回復前端，希望大家多多關注，多多評論
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
亚洲欧洲无码一区二区三区|
视频一区二区三区在线观看|
激情亚洲一区国产精品|
午夜视频久久久久一区|
日本大香伊一区二区三区|
亚洲一区二区在线视频|
91国偷自产一区二区三区|
精品一区二区三区视频在线观看|
真实国产乱子伦精品一区二区三区|
中文字幕一区二区三区有限公司|
亚洲一区二区三区日本久久九
|
国模无码一区二区三区不卡|
一区二区在线视频|
成人免费视频一区|
中文字幕一区二区人妻性色|
欧美一区内射最近更新|
夜夜添无码试看一区二区三区|
国产手机精品一区二区|
99精品国产高清一区二区三区|
亚洲AV无码一区二区三区性色|
精品国产亚洲一区二区在线观看
|
亚洲大尺度无码无码专线一区|
福利片免费一区二区三区|
国产激情无码一区二区|
精品无码国产一区二区三区麻豆|
中文字幕无码一区二区免费|
91福利一区二区|
国产一区二区三区小向美奈子|
看电影来5566一区.二区|
精品久久久久久中文字幕一区|
无码毛片视频一区二区本码|
精品一区二区三区中文|
亚洲中文字幕乱码一区|
无码精品一区二区三区免费视频|
色综合视频一区二区三区|
亚洲高清一区二区三区|
色窝窝无码一区二区三区|
亚洲成av人片一区二区三区|
成人免费视频一区二区三区|
中文字幕精品一区二区日本|
久久99热狠狠色精品一区|