前端开发基础知识结构
个人博客已上线,欢迎前去访问评论!
无媛无故 - wangchloe的个人博客WangChloe - 简书
最近都在整理电脑上乱放的前端周边,可惜原文链接比较难找,特此说明是转载的。
Frontend Knowledge Structure
项目起源
还记得@jayli 的这幅前端知识结构图么。
图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。
可视化效果
前端开发知识结构
前端工程师
- 浏览器
- IE6/7/8/9/10/11 (Trident)
- Firefox (Gecko)
- Chrome/Chromium (Blink)
- Safari (WebKit)
- Opera (Blink)
- 编程语言
- JavaScript/Node.js
- CoffeeScript
- TypeScript
- 切页面
- HTML/HTML5
- CSS/CSS3
- Sass/LESS/Stylus/postCSS
- PhotoShop/Paint.net/Fireworks/GIMP/Sketch
- 开发工具
- 编辑器和IDE
- VIM/Sublime Text2
- Notepad++/EditPlus
- WebStorm
- Emacs EmacsWiki
- Brackets
- Atom
- Lime Text
- Light Table
- Codebox
- TextMate
- Neovim
- Komodo IDE / Edit
- Eclipse
- Visual Studio/Visual Studio Code
- NetBeans
- Cloud9 IDE
- HBuilder
- Nuclide
- 调试工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- Chrome Dev Tools
- Dragonfly
- DebugBar
- Venkman
- 版本管理
- Git/SVN/Mercurial
- Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
- 编辑器和IDE
- 代码质量
- Coding style
- JSLint/JSHint/jscs/ESLint
- CSSLint
- Markup Validation Service
- HTML Validators
- 单元测试
- QUnit/Jasmine
- Mocha/Should/Chai/Expect
- Unit JS
- 自动化测试
- WebDriver/Protractor/Karma Runner/Sahi
- phantomjs
- SourceLabs/BrowserStack
- Coding style
- 前端库/框架
- jQuery/Underscore/Mootools/Prototype.js
- YUI3/Dojo/ExtJS/KISSY
- Backbone/KnockoutJS/Emberjs
- AngularJS
- Batarang
- Bootstrap
- Semantic UI
- Juice UI
- Web Atoms
- Polymer
- Dhtmlx
- qooxdoo
- React
- Brick
- vue.js
- 前端标准/规范
- HTTP/1.1: RFCs 7230-7235
- HTTP/2
- ECMAScript3/5
- ECMAScript6
- W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…
- CommonJS Modules/AMD
- HTML5/CSS3
- Semantic Web
- MicroData
- RDFa
- Web Accessibility
- WCAG
- Role Attribute
- WAI-ARIA
- 性能
- JSPerf
- YSlow 35 rules
- PageSpeed
- HTTPWatch
- DynaTrace’s Ajax
- 高性能JavaScript
- SEO
- 编程知识储备
- 数据结构
- OOP/AOP
- 原型链/作用域链
- 闭包
- 编程范型
- 设计模式
- Javascript Tips
- 部署流程
- 压缩合并
- YUI Compressor
- Google Clousure Complier
- UglifyJS
- CleanCSS
- 文档输出
- JSDoc
- Dox/Doxmate/Grunt-Doxmate
- 项目构建工具
- make/Ant
- GYP
- Grunt
- Gulp
- Yeoman
- FIS
- Mod
- 压缩合并
- 代码组织
- 类库模块化
- CommonJS/AMD
- YUI3模块
- webpack
- 业务逻辑模块化
- bower/component
- 文件加载
- LABjs
- SeaJS/Require.js
- 模块化预处理器
- Browserify
- 类库模块化
- 安全
- CSRF/XSS
- CSP
- Same-origin policy
- ADsafe/Caja/Sandbox
- 移动Web
- HTML5/CSS3
- 响应式网页设计
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap
- jQuery Mobile
- W3C Mobile Web Initiative
- W3C mobileOK Checker
- Open Mobile Alliance
- React Native
- 前沿技术社区/会议
- D2/WebRebuild
- NodeParty/W3CTech/HTML5梦工厂
- JSConf/沪JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- CSSConf
- YDN/YUIConf
- HybridApp
- WHATWG
- MDN
- codepen
- w3cplus
- CNode
- 计算机知识储备
- 编译原理
- 计算机网络
- 操作系统
- 算法原理
- 软件工程/软件测试原理
- Unicode
- 软技能
- 知识管理/总结分享
- 沟通技巧/团队协作
- 需求管理/PM
- 交互设计/可用性/可访问性知识
- 可视化
- SVG/Canvas/VML
- SVG: D3/Raphaël/Snap.svg/DataV
- Canvas: CreateJS/KineticJS
- WebGL/Three.JS
- 浏览器
后端工程师
- 编程语言
- C/C++/Java/PHP/Ruby/Python/…
- 网页服务器
- Nginx
- Apache
- Lighttpd
- 数据库
- SQL
- MySQL/PostgreSQL/Oracle/DB2
- MongoDB/CouchDB
- 数据缓存
- Redis
- Memcached
- 文件缓存/代理
- Varnish
- Squid
- 操作系统
- Unix/Linux/OS X/Windows
- 数据结构
- 编程语言
前端书籍推荐
★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.
CSS
- Eric Meyer 谈 CSS(卷二)★★★
- CSS权威指南 (第3版)★★
- 精通CSS★★★
- HTML & CSS设计与构建网站★
JavaScript
- JavaScript & jQuery交互式Web前端开发★
- JavaScript DOM编程艺术 (第2版)★
- JavaScript高级程序设计(第3版)★★
- 锋利的jQuery★★
- 高性能JavaScript★★★
- JavaScript语言精粹★★★
- JavaScript权威指南★★★
- 编写可维护的JavaScript★★★
- JAVASCRIPT语言精髓与编程实践★★★
- Effective Javascript★★★
- Secrets of the JavaScript Ninja★★★
- JavaScript模式★★★
- JavaScript设计模式★★★★
- 基于MVC的JavaScript Web富应用开发★★★
性能实践
- Web性能实践日志★★★
- Web性能权威指南★★★
版本控制工具
- 版本控制之道 (git)★★
- Pro Git★★★
- Git权威指南★★★★
后端书籍推荐
Linux管理
- Linux 系统管理技术手册
- 鸟哥的 Linux 私房菜
- Linux 101 Hacks
- UNIX Shell Scripting
- The Linux Command Line
- Linux Network Administrator’s Guide
Linux编程
- Linux程序设计
- Linux系统编程
- Unix环境高级编程
- Unix编程艺术
- The Linux Programming Interface
- 程序员的自我修养
- 深入理解Linux内核
- Unix网络编程
- TCP/IP高级编程
C/C++
- Linux C编程一站式学习
- C和指针
- C陷阱与缺陷
- C专家编程
- C语言核心技术
- 彻底搞定C指针
- 征服C指针
- C++编程思想
- 高质量程序设计指南—C/C++语言
- Inside the C++ Object Model
- A Tour of C++
- The C++ Programming Language
- The C++ Standard Library - A Tutorial and Reference
- The C++ Standard (INCITS/ISO/IEC 14882-2011)
- Overview of the New C++
前端工作面试
- 前端工作面试问题
- 前端开发面试题(中文)
内容贡献者
除了感谢Jayli提供了知识结构图的原本来,还感谢以下的内容贡献者们,结果由git-summary
生成于2014-01-03:
project : fksrepo age : 1 year, 3 monthsactive : 53 dayscommits : 108files : 4authors :56 Jackson Tian 51.9%9 吴晓兰 8.3%5 liyinkan 4.6%3 chriscai 2.8%3 fengxiaolong 2.8%3 XiNGRZ 2.8%2 monkadd 1.9%2 Johnny 1.9%2 weiwenqing 1.9%2 Yinkan Li 1.9%2 Copypeng 1.9%2 左岸 1.9%2 Jakukyo Friel 1.9%2 Glowin 1.9%1 李亚川 0.9%1 Evan You 0.9%1 Mickey 0.9%1 Mickey- 0.9%1 Qi Junyuan 0.9%1 browsnet 0.9%1 doabit 0.9%1 guoxiangyang 0.9%1 linkgod 0.9%1 popomore 0.9%1 vipzhicheng 0.9%1 zhaqiang 0.9%1 Colin Luo 0.9%
前端开发基础知识结构相关推荐
- 移动前端开发基础与优化
移动前端开发基础与优化 http://qywx.gitcafe.io/2014/11/22/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91 ...
- JavaWeb:前端开发基础
JavaWeb:前端开发基础 内联元素和块级元素 说明: 联元素和块级元素都是html中的范畴,块元素和内联元素的主要差异是块元素是从新的一行开始.而内联元素一般显示在一行上.但是可以通过css的di ...
- Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
- 网站前端开发基础知识学什么?必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
- 前端开发基础(HTML基础)
前端开发基础 目的:开发一个平台(网站)- 前端开发:HTML.CSS.JavaScript- Web框架:接收请求并处理- MySQL数据库:存储数据的地方快速上手:基于Flask Web框架让你快 ...
- web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格 文章目录 web前端开发基础--在网页中使用表格 前言 一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码 前言 本篇主要 ...
- 顾川的前端学习笔记--前端开发基础
阶段一前端开发基础 初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器 盒模型 CSS三大特性 浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图 案 ...
- 黑马程序员之Web前端全栈 · 阶段一 前端开发基础 (3)
Web前端全栈 · 阶段一 前端开发基础 (3) 说明 三.HTML 标签 1. HTML 语法规范 1.1 基础语法概述 1.2 标签的关系 2. 基本结构标签 2.1 第一个 HTML 2.2 基 ...
- 前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
最新文章
- ORA-16038: log 3 sequence# 103 cannot be archived
- gcc选项 和 gdb 使用
- 自己写的一个报表,研究SAP CRM ibase保存问题
- 【吐槽】博客园新的原创文章在搜索引擎的排名不及转载的站点
- oracle 查询表空间路径
- “错题集”帮你期末考试冲向满分
- Android事件分发机制(一)
- go中分析工具:pprof
- Android Studio|简单记事本开发
- 甘肃省事业单位公考招聘考试权威复习资料---GIS专业综合复习题(一)
- 射频下变频器在航空航天和国防领域的应用 ——扩展传统RF监控解决方案的实用方法
- php 队列取并集,php多个数组并集、交集和差集操作函数总结
- 【jupyter notebook 设置黑色背景,字体大小】
- unity碰撞检测的几种函数
- 为什么需要API接口开发?
- 有关三次握手,四次挥手的超详细总结!!!
- H3C对接外部Portal+Radius认证计费系统实现mac-trigger快速认证Mac无感知认证并结合L2TP实现阿里云部署对接配置
- 制作启动盘(带数据,不用格式化)
- adb在小米电视上安装QQ 并使用遥控器操控部分功能
- 解决Deprecated: Methods with the same name as their class will not be constructors in报错方案