一.比较全面的思维导图

二.相关资源

1. 布局框架:
Bootstrap: http://getbootstrap.com/
Foundation: http://foundation.zurb.com/
Uikit: http://www.getuikit.com/
Web Components:http://css-tricks.com/modular-future-web-components//

2. 构建工具及包管理器:
Grunt: http://gruntjs.com/
Yeoman: http://yeoman.io/
Bower: http://bower.io/
NPM: https://www.npmjs.org/

3. 代码优化:
Google Closure Compiler:
CSS Lint: http://csslint.net/
JSHint: http://www.jshint.com/
JSLint: http://www.jslint.com/

4. CSS预处理器
Less: http://lesscss.org/
Sass: http://sass-lang.com/

5. 调试工具:
Chrome:https://developers.google.com/chrome-developer-tools/
Firebug: https://getfirebug.com/
HTTPWatch: http://www.httpwatch.com/
Fiddler: http://www.telerik.com/fiddler
IE Developer Toolbar:
Weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

6. 文档工具:
JSDoc: https://github.com/jsdoc3/jsdoc
Jekyll: http://jekyllrb.com/

7. IDE/文本编辑器
WebStorm: http://www.jetbrains.com/webstorm/

8. 移动端 手势事件库:
GMU: http://gmu.baidu.com/
Hammer.js: http://eightmedia.github.io/hammer.js
QuoJS: http://quojs.tapquo.com/
Zepto: http://zeptojs.com/
Swipe: http://swipejs.com/
jQuery Mobile: http://jquerymobile.com/
KendoUI:http://www.telerik.com/kendo-ui
Goratchet:http://goratchet.com/

9. 思维导图
XMind:http://www.xmind.net/

10.模块加载器:
ESL: https://github.com/ecomfe/esl
RequireJS: http://requirejs.org/
SeaJS:http://seajs.org/docs/

11. 项目管理:
Github: https://github.com/
GitLab: https://about.gitlab.com/
Redmine: http://www.redmine.org/

12. 原型设计:
Axure RP: http://www.axure.com/

13. 富互联网应用框架
AngularJs: http://www.angularjs.org
Backbone: http://backbonejs.org/
AmpersandJShttp://ampersandjs.com//
Knockout: http://knockoutjs.com/
Underscore: http://underscorejs.org/

14. 模板引擎
EJS: http://www.embeddedjs.com/
Handlebars: http://handlebarsjs.com/
Jade: http://jade-lang.com/
Velocity: http://velocity.apache.org/

15. 测试框架
Jasmine: http://pivotal.github.io/jasmine/
QUnit: http://qunitjs.com/
mocha: http://visionmedia.github.io/mocha/

16. 版本控制
Git: http://git-scm.com/
Subversion: http://subversion.apache.org/
Mercurial(Hg): http://mercurial.selenic.com/

17. WEB框架/服务器
Node: http://nodejs.org/
Express: http://expressjs.com/
Apache: http://httpd.apache.org/
Nginx: http://nginx.org/

18. CommonJS
Component: http://component.io/

19. WEB安全
XSS(跨站脚本攻击):
CSRF(跨站点伪造请求攻击):
跨iframe攻击:
Clickjacking安全漏洞:

20. 代码规范
Code Guide: http://alloyteam.github.io/code-guide/
编写可维护的CSS: http://segmentfault.com/a/1190000000388784/
GJS编码规范指南: http://alloyteam.github.io/JX/doc/specification/google-javascript.xml
jQueryJS规范: http://contribute.jquery.org/style-guide/js/

21. HTML模块化
html5boilerplate: http://html5boilerplate.com/

22. CSS模块化
Normalize.css: http://necolas.github.io/normalize.css/
LESS:http://www.lesscss.net/
OOCSS:http://www.oocss.cc/ http://oocss.org/
CssReset:http://www.cssreset.com/

23. HTML5 Canvas
D3:http://d3js.org/
KINETIC:http://kineticjs.com/

三、前端开发知识点

HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、HTML5、CSS3、Flexbox

重点在于对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、document flow(文档流)、清除浮动,hasLayout 和 块格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5(离线 & 存储,多媒体,Web Sockets ,Web Workers,History API2D/3D 绘图)、CSS3、Flexbox、CSS预编译、动画、响应式布局、移动端开发等

JavaScript:
数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs

数据类型、面向对象、数组、DOM、BOM、Function、继承、闭包、内置对象、作用域、跨域、原型链、、JSON、XMLHttpRequest、 RegExp、模块化、内存泄漏、事件机制、异步装载回调、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等

其他:
移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

四、美文欣赏

参考链接

另一个视角

万维网是如何工作的

前端工作流设计方案

浏览器缓存机制

前端文档和工具

前端公开课

软件(敏捷)开发中工作量与工时评估模型

“JS相关”目录存档

综合论坛

常见问题及其解答

web 前端知识体系 网站资源分析的更多相关文章

  1. WEB前端知识体系脑图

    说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...

  2. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  3. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

  4. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. web前端知识体系大全【欢迎补充】

    大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...

  9. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

随机推荐

  1. linux python3 安装scrapy 后提示 -bash: scrapy: 未找到命令

    https://blog.csdn.net/dangsh_/article/details/79613210

  2. gdb调试问题汇总

    1. 宏调试 在GDB下,我们无法print宏定义,因为宏是预编译的.但是我们还是有办法来调试宏,这个需要GCC的配合. 在GCC编译程序的时候,加上-ggdb3参数,这样,你就可以调试宏了.另外,你 ...

  3. jtl转化成CSV格式的聚合报告

    1: 从官网下载4.0 的zip 包解压缩,下载地址: https://archive.apache.org/dist/jmeter/binaries/apache-jmeter-4.0.zip ,假 ...

  4. Codeforces 835F Roads in the Kingdom - 动态规划

    题目传送门 传送点I 传送点II 传送点III 题目大意 给定一颗基环树,要求删去其中一条边,使得剩下的图形是一棵树,并且最长路的长度最短,求最长路的最短长度. 路径可以分为两部分:跨过环 和 在树内 ...

  5. Codeforces Round #439 (Div. 2) Problem C (Codeforces 869C) - 组合数学

    — This is not playing but duty as allies of justice, Nii-chan! — Not allies but justice itself, Onii ...

  6. 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器

    一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...

  7. An error occurred (500 Error)

    Centos7 部署知乎出现上图问题 解决方法: [root@web02 ~]# vim /etc/php.ini #修改配置文件 session.auto_start = 0 #这条设置成0 [ro ...

  8. topcoder srm 714 div1

    problem1 link 倒着想.每次添加一个右括号再添加一个左括号,直到还原.那么每次的右括号的选择范围为当前左括号后面的右括号减去后面已经使用的右括号. problem2 link 令$h(x) ...

  9. 0基础学安卓--初识安卓Activity

    知识储备:windows+ Android Studio 等环境安装. 安卓中Activity代表页的意思,也就是☞我们手机上当前的整个界面显示,点击按钮等操作可以跳转到另外一个Activity中. ...

  10. Spring Boot 笔记之 MVC 分层结构

    视图层view:用于展示数据,与用户进行交互. 控制层controller:用于分发控制到来的请求,并将请求分发给相应的业务层.以及将数据返回给视图层展示. 业务层service:业务处理,调用数据访 ...