閱讀231 返回首頁    go 阿裏雲 go 技術社區[雲棲]

前端知識圖譜，你值得收藏

  1. 綜合類
- [前端知識體係](https://www.cnblogs.com/sb19871023/p/3894452.html)
- [前端知識結構](https://github.com/JacksonTian/fks)
- [Web前端開發大係概覽](https://github.com/unruledboy/WebFrontEndStack)
- [Web前端開發大係概覽-中文版](https://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)
- [前端知識體係](https://www.cnblogs.com/sb19871023/p/3894452.html)
- [免費的編程中文書籍索引](https://github.com/justjavac/free-programming-books-zh_CN)
- [智能社 - 精通JavaScript開發](https://study.163.com/course/introduction/224014.htm)
- [重新介紹 JavaScript（JS 教程）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
- [麻省理工學院公開課：計算機科學及編程導論](https://v.163.com/special/opencourse/bianchengdaolun.html)
- [JavaScript中的this陷阱的最全收集--沒有之一](https://segmentfault.com/a/1190000002640298)
- [JS函數式編程指南](https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch1.html)
- [JavaScript Promise迷你書（中文版）](https://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. 入門類
- [前端入門教程](https://www.cnblogs.com/jikey/p/3613082.html)
- [瘳雪峰的Javascript教程](https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000)
- [jQuery基礎教程](https://www.imooc.com/view/11)
- [前端工程師必備的PS技能——切圖篇](https://www.imooc.com/view/506)
- [結合個人經曆總結的前端入門方法](https://github.com/qiu-deqing/FE-learning)
  1. 效果類
- [彈出層](https://www.imooc.com/learn/58)
- [焦點圖輪播特效](https://www.imooc.com/learn/18)
  1. 工具類
- [css sprite 雪碧圖製作](https://www.imooc.com/learn/93)
- [版本控製入門 – 搬進 Github](https://www.imooc.com/learn/390)
- [Grunt-beginner前端自動化工具](https://www.imooc.com/learn/30)
  1. 慕課專題
- [張鑫旭 - 慕課係列](https://www.imooc.com/space/teacher/id/197450)
- [lyn - 慕課係列](https://www.imooc.com/space/teacher/id/104593)
- [艾倫 - 慕課係列](https://www.imooc.com/space/teacher/id/290139)
- [碧仔 - Hello，移動WEB](https://www.imooc.com/view/494)
  1. 周報類
- [平安科技移動開發二隊技術周報](https://github.com/PaicHyperionDev/MobileDevWeekly)

六. 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秘密花園](https://sanshi.me/articles/JavaScript-Garden-CN/html/index.html)
- [js秘密花園](https://bonsaiden.github.io/JavaScript-Garden/zh/)
- [w3help](https://www.w3help.org/) 綜合Bug集合網站
  1. 綜合搜索
- [javascripting](https://www.javascripting.com/)
- [各種流行庫搜索](https://microjs.com/)
  1. 綜合API
- [runoob.com-包含各種API集合](https://www.runoob.com/)
- [開源中國在線API文檔合集](https://tool.oschina.net/apidocs)
- [devdocs](https://devdocs.io/) 英文綜合API網站

2. jQuery

3. Ecmascript

4. Js template

5. 彈出層

6. CSS

7. Angularjs

8. React

9. 移動端API

  1. API
  2. 框架

10. avalon

11. Requriejs

12. Seajs

13. Less,sass

14. Markdown

15. D3

16. 兼容性

17. UI相關

18. HTTP

19. 其它API

20. 圖表類

21. vue

21. 正則

22. ionic

23. 其它

七. 開發規範

  1. 前端

  2. PHP

- [最流行的PHP 代碼規範](https://segmentfault.com/a/1190000000443795)
- [最流行的PHP 代碼規範](https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md)
  1. Android
- [【敏捷開發】Android團隊開發規範](https://www.cnblogs.com/lcw/p/3619181.html)
- [Android 開發規範與應用](https://www.jianshu.com/p/4390f4fe19b3)

八. 其它收集

1. 各大公司開源項目

2. Javascript

  1. 常用
- [ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性](https://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome/)
- [模擬鍵盤](https://mottie.github.io/Keyboard/)
- [拚音](https://github.com/hotoo/pinyin)
- [中國個人身份證號驗證](https://github.com/mc-zone/IDValidator)
  1. 算法
- [數據結構與算法 JavaScript 描述. 章節練習](https://github.com/Ralph-Wang/algorithm.in.js)
- [常見排序算法（JS版）](https://github.com/twobin/twobinSort)
- [經典排序](https://github.com/luofei2011/jsAgm/blob/master/js/sort.js)
- [常見排序算法-js版本](https://github.com/hechangmin/jssort)
- [JavaScript 算法與數據結構 精華集](https://github.com/lightningtgc/JavaScript-Algorithms)
- [麵試常考算法題精講](https://www.nowcoder.com/live/courses)
- []()
  1. 移動端
- [fastclick](https://github.com/ftlabs/fastclick)
- [no-click-delay](https://github.com/mmastrac/jquery-noclickdelay)
  1. JSON
- [模擬生成JSON數據](https://beta.json-generator.com/)
- [返回跨域JSONAPI](https://jsonp.afeld.me/)

3. Html5

4. CSS

5. jQuery

  1. 焦點圖
- [myfocus](https://github.com/koen301/myfocus)
- [myfocus-官方演示站](https://www.chhua.com/myfocus/)
- [SuperSlidev2.1 -- 大話主席](https://www.superslide2.com/)
- [soChange](https://www.bujichong.com/sojs/soChange/index.html)

6. Ext, EasyUI, J-UI 及其它各種UI方案

  1. Ext
- [extjs](https://www.sencha.com/products/extjs/)
- [ext4英文api](https://docs.sencha.com/extjs/4.0.7/)
- [ext4中文api](https://extjs-doc-cn.github.io/ext4api/)
- []()
  1. EasyUI
- [jquery easyui 未壓縮源代碼](https://jquery-easyui.googlecode.com/svn/trunk/src/)
  1. J-UI
- [J-UI](https://jui.org/)
  1. Other
- [MUI-最接近原生APP體驗的高性能前端框架](https://dcloudio.github.io/mui/)
- [Amaze UI | 中國首個開源 HTML5 跨屏前端框架](https://amazeui.org/)
- [淘寶 HTML5 前端框架](https://m.sui.taobao.org/)
- [KISSY - 阿裏前端JavaScript庫](https://docs.kissyui.com/)
- [網易Nej - Nice Easy Javascript](https://nej.netease.com/)
- [Kendo UI MVVM Demo](https://demos.telerik.com/kendo-ui/mvvm/index)
- [Bootstrap](https://www.bootcss.com/)
- [Smart UI](https://smartui.chinamzz.com/)
- [雅虎UI - CSS UI](https://developer.yahoo.com/yui/grids/)

7. 頁麵 社會化 分享功能

8. 富文本編輯器

9. 日曆

  1. PC
- [經典my97](https://www.my97.net/dp/demo/index.htm)
- [強大的獨立日期選擇器](https://www.cnblogs.com/gbin1/archive/2012/04/16/2452105.html)
- [fullcalendar](https://fullcalendar.io/)
- [fullcalendar日曆控件知識點集合 ](https://blog.csdn.net/francislaw/article/details/7740630)
- [中文api](https://blog.sina.com.cn/s/blog_9475b1c101012c5f.html)
- [農曆日曆](https://github.com/zzyss86/LunarCalendar)
- [超酷的仿百度帶節日日曆老黃曆控件](https://www.sucaisj.com/jiaoben/date/201509/16856.html)
- [日期格式化](https://momentjs.com/)
- [大牛日曆控件](https://github.com/Johnqing/QPAYCalendar/)
- [我群某管理作品](https://github.com/Iamlars/dateMarker)
- [input按位替換-官網](https://digitalbush.com/projects/masked-input-plugin/)
- [input按位替換-github](https://github.com/digitalBush/jquery.maskedinput/tree/1.2.2)
- [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker)
- [國外30個插件集合](https://www.vandelaydesign.com/30-best-free-jquery-plugins/)
- [JavaScript datepicker](https://dbushell.com/2012/10/09/pikaday-javascript-datepicker/)
- [Datepair.js](https://jonthornton.github.io/Datepair.js/)
- [一個風格多樣的日曆](https://github.com/glad/glDatePicker)
- [彈出層式的全日曆](https://amsul.ca/pickadate.js/date/)
- [jquery雙日曆](https://www.daterangepicker.com/)
  1. 移動
- [大氣實用jQuery手機移動端日曆日期選擇插件](https://www.frankdemo.cn/index.php?c=content&a=show&id=115)
- [jQuery Mobile 移動開發中的日期插件Mobiscroll ](https://mobiscroll.com/)
  1. Date library
- [Datejs](https://github.com/datejs/Datejs)
- [sugarjs](https://sugarjs.com/api/Date)

10. 綜合效果搜索平台

11. 前端工程化

  1. 概述
- [前端工具大全](https://www.awesomes.cn/)
- [什麼是前端工程化](https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0#)
  1. Gulp 
- [Gulp官網](https://gulpjs.com/)
- [Gulp中文網](https://www.gulpjs.com.cn/)
- [gulp資料收集](https://github.com/Platform-CUF/use-gulp)
- [Gulp：任務自動管理工具 - ruanyifeng](https://javascript.ruanyifeng.com/tool/gulp.html)
- [Gulp插件](https://gulpjs.com/plugins/)
- [Gulp不完全入門教程](https://www.ido321.com/1622.html)
- [為什麼使用gulp?](https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33)
- [Gulp安裝及配合組件構建前端開發一體化](https://www.dbpoo.com/getting-started-with-gulp/)
- [Gulp 入門指南](https://github.com/nimojs/gulp-book)
- [Gulp 入門指南 - nimojs](https://github.com/nimojs/blog/issues/19)
- [Gulp入門教程](https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/)
- [Gulp in Action](https://www.imooc.com/video/5692)
- [Gulp開發教程（翻譯）](https://www.w3ctech.com/topic/134)
- [前端構建工具gulpjs的使用介紹及技巧](https://www.cnblogs.com/2050/p/4198792.html)
  1. Grunt
- [gruntjs](https://gruntjs.com/)
- [Grunt中文網](https://www.gruntjs.net/)
  1. Fis
- [fis 官網](https://fex-team.github.io/fis-site/index.html)
- [fis](https://fis.baidu.com/)

12. 輪播圖

  1. pc圖輪
- [單屏輪播sochange](https://www.jsfoot.com/jquery/demo/2011-09-20/192.html)
- [左右按鈕多圖切換](https://bxslider.com/examples/carousel-demystified)
- [fullpage全屏輪播](https://github.com/alvarotrigo/fullPage.js/)
  1. 移動端
- [無縫切換](https://www.swipejs.com/)
- [滑屏效果](https://www.idangero.us/swiper/)
- [全屏fullpage](https://github.com/peunzhang/fullpage)
- [單個圖片切換](https://github.com/qiqiboy/touchslider)
- [單個全屏切換](https://github.com/peunzhang/slip.js)
- [百度的切換庫](https://touch.code.baidu.com/examples.html?qq-pf-to=pcqq.group)
- [單個全屏切換](https://github.com/peunzhang/iSlider)
- [滑屏效果](https://github.com/saw/touch-interfaces)
- [旋轉拖動設置](https://baijs.com/tinycircleslider/)
- [類似於swipe切換](https://touchslider.com/)
- [支持多種形式的觸摸滑動](https://www.swiper.com.cn/demo/index.html)
- [滑屏效果](https://github.com/joker-ye/main/blob/master/wap/index.html)
- [大話主席pc移動圖片輪換](https://www.superslide2.com/)
- [滑屏效果](https://github.com/hahnzhu/parallax.js)
- [基於zepto的fullpage](https://github.com/yanhaijing/zepto.fullpage)
- [[WebApp]定寬網頁設計下，固定寬度布局開發WebApp並實現多終端下WebApp布局自適應](https://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html)
- [判斷微信客戶端的那些坑](https://loo2k.com/blog/detecting-wechat-client/)
- [可以通過javascript直接調用原生分享的工具](https://github.com/JefferyWang/nativeShare.js)
- [JiaThis 分享到微信代碼](https://www.jiathis.com/help/html/weixin-share-code)
- [聊聊移動端跨平台開發的各種技術](https://fex.baidu.com/blog/2015/05/cross-mobile/)
- [前端自動化測試](https://www.zhihu.com/question/29922082)
- [多種輪換圖片](https://ajccom.github.io/niceslider/)
- [滑動側邊欄](https://mango.github.io/slideout/)

13. 文件上傳

14. 模擬select

15. 取色插件

16. 城市聯動

17. 剪貼板

18. 簡繁轉換

19. 表格 Grid

20. 在線演示

21. 播放器

22. 粒子動畫

九. Nodejs

十. 性能優化

  1. 常規優化
- [Javascript高性能動畫與頁麵渲染](https://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering)
- [移動H5前端性能優化指南](https://isux.tencent.com/h5-performance.html)
- [5173首頁前端性能優化實踐](https://ued.5173.com/?p=1731)
- [給網頁設計師和前端開發者看的前端性能優化](https://www.uisdc.com/front-end-performance-for-web-designers-and-front-end-developers)
- [複雜應用的 CSS 性能分析和優化建議](https://www.orzpoint.com/profiling-css-and-optimization-notes/)
- [張鑫旭——前端性能](https://www.zhangxinxu.com/wordpress/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD/)
- [前端性能監控總結](https://www.xiaoqiang.org/javascript/font-end-performance-monitor.html)
- [網站性能優化之CSS無圖片技術](https://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前端性能優化進階路](https://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無圖片技術](https://my.eoe.cn/tuwandou/archive/4544.html)
- [瀏覽器的加載與頁麵性能優化](https://www.baiduux.com/blog/2011/02/15/browser-loading/)
- [頁麵加載中的圖片性能優化](https://www.w3ctech.com/p/1503)
- [Hey——前端性能](https://www.feelcss.com/tag/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD)
- [html優化](https://www.baiduux.com/blog/2010/03/15/html%E4%BC%98%E5%8C%96-2/)
- [99css——性能](https://www.99css.com/tag/%e6%80%a7%e8%83%bd)
- [Yslow——性能優化](https://www.yslow.net/category.php?cid=20)
- [YSLOW中文介紹](https://www.cnblogs.com/yslow/)
- [轉一篇Yahoo關於網站性能優化的文章，兼談本站要做的優化](https://www.360ito.com/article/40.html)
- [Yahoo!團隊實踐分享：網站性能](https://www.360doc.com/content/10/0928/09/2588264_56971287.shtml)
- [網站性能優化指南：什麼使我們的網站變慢？](https://blog.jiasule.com/i/153)
- [網站性能優化實踐，減少加載時間，提高用戶體驗](https://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html)
- [淺談網站性能優化 前端篇](https://www.umtry.com/archives/747.html)
- [前端重構實踐之如何對網站性能優化？](https://www.adinnet.cn/blog/designview/2012-7-12/678.html)
- [前端性能優化：使用媒體查詢加載指定大小的背景圖片](https://www.gbin1.com/technology/javascript/20130708-front-end-performance-optimization-9/)
- [網站性能係列博文](https://www.mykuer.com/post/factors-that-affect-the-speed-of-web-site-open.html)
- [加載，不隻是少一點點](https://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201109/41355.shtml)
- [前端性能的測試與優化](https://mzhou.me/article/95310/)
- [分享網頁加載速度優化的一些技巧？](https://www.gbin1.com/technology/html/20130217-tips-for-speed-up-page-loading/)
- [頁麵加載中的圖片性能優化](https://www.f2es.com/images-bytes-opt/)
- [web前端優化(基於Yslow)](https://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html)
- [網站性能優化工具大全](https://www.qianduan.net/website-performance-optimization-tool.html)
- [【高性能前端1】高性能HTML](https://www.alloyteam.com/2012/10/high-performance-html/)
- [【高性能前端2】高性能CSS](https://www.alloyteam.com/2012/10/high-performance-css/)
- [由12306談談網站前端性能和後端性能優化](https://coolshell.cn/articles/6470.html)
- [AlloyTeam——前端優化](https://www.alloyteam.com/webfrontend/%E5%89%8D%E7%AB%AF%E4%BC%98%E5%8C%96/)
- [毫秒必爭，前端網頁性能最佳實踐](https://www.cnblogs.com/developersupport/p/3248695.html)
- [網站性能工具Yslow的使用方法](https://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html)
- [前端工程與性能優化（上）：靜態資源版本更新與緩存](https://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1)
- [前端工程與性能優化（下）：靜態資源管理與模板框架](https://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2)
- [HTTPS連接的前幾毫秒發生了什麼](https://blog.jobbole.com/48369/)
- [Yslow](https://uicss.cn/yslow/#more-12319)
- [Essential Web Performance Metrics — A Primer, Part 1](https://blog.smartbear.com/web-performance/essential-web-performance-metrics-a-primer-part-1/)
- [Essential Web Performance Metrics — Part 2](https://blog.smartbear.com/performance/essential-web-performance-metrics-part-2/)
- [YUISlide,針對移動設備的動畫性能優化](https://jayli.github.io/blog/data/2011/12/23/yuislide.html)
- [Improving Site Performance](https://joelglovier.com/improving-site-performance/)
- [讓網站提速的最佳前端實踐](https://segmentfault.com/a/1190000000367899)
- [Why Website Speed is Important](https://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](https://www.html-js.com/article/3083)
- [JavaScript 堆內存分析新工具 OneHeap](https://www.html-js.com/article/3091)
  1. 在線工具
- [google在線工具](https://developers.google.com/speed/pagespeed/insights/)
- [阿裏測](https://www.alibench.com/)
- [阿裏-免費測試服務](https://itest.aliyun.com/)
- [阿裏-F2etest多瀏覽器兼容性測試解決方案](https://github.com/alibaba/f2etest)
- [js性能測試](https://jsperf.com/)
- []()

十一. 前端架構

十二. 個人作品

1. 推薦作品

2. 群員作品

3. 國外大牛精品

十三. 簡曆模板

十四. 麵試題

十五. iconfont

十六. 開發工具類

  1. 前端開發工具
- [IntelliJ IDEA 簡體中文專題教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial)
- [Webstorm,InterllIdea,Phpstorm](https://t.cn/8kZZ1Uy)
- [SublimeText](https://github.com/jikeytang/sublime-text)
- [Atom](https://atom.io/)
- [visual studio code](https://code.visualstudio.com/)

  1. Chrome, Firebug, Filddle 調試

    1. Fiddler
    2. Chrome