如上图,FrontEndMap 会从前端开发经过的 源码环境 -> 构建过程 -> 服务器环境/node -> http -> 浏览器/webview 过程入手,对每个步骤做详细拆解,总结出其中用到的标准(如W3C)、规范(如nodejs API)、工具(如webpack React)等,做到尽量全面。

当然,FrontEndMap 希望能通过开源的力量,逐步完善成国内权威的 web 前端基础知识体系指南,欢迎大家 star、fork 并 PR ,也欢迎大家提交 issue。

代码作为一个个物理文件该如何管理

• 版本管理 git
• 第三方依赖管理 npm
• javascript 模块化:AMD CMD commonJS ES6规范
• css module

前端开发需要掌握的设计知识,逻辑、抽象的能力

• 基本功,算法、数据结构等
• 设计模式
• MVVM Vue.js Angular
• 组件化 React

用构建工具搭建前端代码框架,构建过程中常用的工具

• 模板引擎,如jade
• 语法糖,如less、sass
• 自动化测试、单元测试
• lint 语法检查
• 打包,webpack gulp等

代码发布到服务器上之后,需要掌握的知识

• linux 命令
• vim
• nodejs

服务器和客户端的交互基于 http 协议,会用到 socket ajax 等技术,以及一些常见的性能优化

• http
• socket
• ajax/fetch
• 性能优化

浏览器下载到代码之后会渲染页面,还会遵守 W3C ECMA 的标准

• 渲染与性能优化

• 安全

• 开发者工具 & 调试

• ECMA262 标准

W3C 标准中规定了日常开发中使用最多的 html、css、DOM API 等语法和规范。

• html
• css
• javascript WEB-API
• 2D/3D

其他内容,其他一些不错的文章。这些只是不好明确归类,不代表文章质量不高。