目录
-
专业技能
-
前端理论
-
浏览器
-
HTML
-
CSS
-
JavaScript
-
编程通用
-
SEO 数据统计 数据分析
-
网络基础
-
-
交叉领域理论
-
产品设计相关
-
后端基础
-
-
前端实践
-
解决实际问题
-
学习型项目
-
前端工程
-
第一阶段：框架应用
-
第二阶段：简单自动构建优化
-
第三阶段：JS/CSS模块化开发
-
第四阶段：组件化开发与资源管理
-
项目技术选型
-
造*
-
-
-
版本规划
-
致谢
-
联系方式
-
结语
-
许可
专业技能
前端理论
浏览器
-
浏览器内核渲染原理
-
HTML 解析器
-
CSS 解析器
-
JavaScript 引擎
-
渲染流程
-
加载
-
解析（确定结构、计算样式）
-
构建 DOM 树、应用样式
-
绘制
-
回流
-
重绘
-
-
-
浏览器调试
-
工具
-
F12
-
扩展插件
-
浏览器常用快捷键
-
-
调试内容
-
元素
-
结构
-
属性
-
-
样式
-
脚本
-
日志
-
断点
-
事件
-
变量监听
-
调用堆栈
-
-
性能
-
snapshot
-
耗时
-
-
网络请求
-
模拟请求
-
审查网络
-
模拟网络环境
-
-
内存
-
本地存储信息
-
cookie
-
local storage
-
cache
-
-
-
调试技巧
-
-
浏览器事件
-
常见事件
-
鼠标事件
-
表单元素事件
-
键盘事件
-
文档事件
-
CSS 事件
-
……
-
-
事件处理、添加、移除
-
-
浏览器任务调度机制
-
micro queue
-
macro queue
-
-
浏览器兼容性
-
各平台浏览器的坑（家家有个难填的坑，有的坑深，有的坑浅）
-
移动端浏览器
-
UC
-
Safari
-
微信浏览器
-
百度
-
……
-
-
PC 端浏览器
-
Chrome
-
Firefox
-
IE
-
Edge
-
……
-
-
小程序
-
-
不同浏览器内核差异
-
CSS 私有属性前缀（注：建议使用 postcss 自动化补全）
-
Polyfill
-
-
HTML、CSS、Javascript 特性支持度
-
MDN
-
Can I use ?
-
-
-
常见问题
-
请求跨域
-
iframe 跨域通信
-
各种兼容性问题
-
网页加载速度慢
-
按钮点击没反应……
-
HTML
吃土小2叉：据说 HTML 和 CSS 一起学习体验最佳哦
-
语法 & 语义
-
!DOCTYPEHTML 文档标准-
怪异模式
-
标准模式
-
-
head-
meta元数据标签 -
网页描述
-
设备描述
-
HTTP 请求描述
-
HTTP Client Hints
-
-
body-
装饰型标记（不推荐、部分已废弃）
-
功能型标记
-
无语义容器（div、span）
-
-
用户交互（交互型标记）
-
输入框
-
选择器
-
多选框
-
单选框
-
按钮
-
-
数据可视化（展示型标记）
-
列表
-
定义列表
-
无序列表
-
有序列表
-
-
表格
-
结构化数据标记、微数据
-
多媒体
-
图片
-
视频
-
音频
-
-
SVG、Canvas
-
文章（正文、摘要、段落、章节、前言、结语、引用）
-
-
-
-
规范
-
标签类型
-
HTML 代码规范
-
HTML 使用规范（标签嵌套规则）
-
-
可访问性、无障碍体验
-
常见问题
-
图片空 src 导致页面加载两次
-
iframe 空 src 导致无限循环加载本页面
-
上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图
CSS
吃土小2叉：用设计师的思维去理解 CSS，用程序员的思维去写 CSS
-
语法（CSS 从入门到放弃）
-
基本用法
-
选择器
-
基础选择器
-
组合选择器
-
伪类选择器
-
-
媒体查询
-
简写属性
-
注释
-
属性运算 calc()
-
-
规范（编写可读性良好的 CSS）
-
用例规范
-
权限控制
-
最佳实践
-
不良习惯
-
-
格式规范
-
风格
-
复用
-
BEM 规范
-
-
-
逻辑特性（在 CSS / Less 中运用 OO 思想和设计模式）
-
权重（优先级）
-
作用域
-
封装（mixins）
-
组合（mixins+）
-
扩展（:extend）
-
继承（mixins）
-
CSS 变量、Less 变量
-
模块化（import）
-
-
视觉设计（单一状态设计）
-
布局（分久必合、合久必分）
-
盒模型（高度、宽度、边框、外边距、内边距、溢出控制）
-
定位方式
-
层叠上下文（z-index）
-
display 类型（table、inline、inline-block、block、flex、grid）
-
浮动
-
伪元素：:after、:before
-
-
字体排印（厉害了 word 哥）
-
字体（字体族、网络字体）
-
文本（删除线、下划线、斜体、粗细、字号）
-
段落（行高、缩进、断句方式、换行方式）
-
对齐
-
方向
-
-
装饰（神说，要有光）
-
颜色
-
背景
-
边框（border、outline）
-
圆角
-
阴影
-
渐变
-
透明度
-
变形（旋转、缩放、矩阵变化）
-
-
-
交互设计（多状态设计）
-
hover 状态
-
结合 Javascript
-
CSS 动画
-
active、checked 状态
-
过渡效果
-
动画关键帧
-
动画（运动和静止是对立的统一）
-
反馈
-
引导
-
互动
-
-
多设备设计
-
最小固定宽度布局
-
百分比布局
-
栅格布局、弹性布局
-
js + rem 方案（rpx）
-
媒体查询
-
响应式设计（多套代码，多种设备）
-
自适应设计（一套代码，多种设备）
-
-
常见问题
-
权重控制
-
嵌套层级
-
语义性
-
transition “失效”？
-
z-index “失效”？
-
视觉还原度
-
调试技巧
-
属性“失效”问题
-
外边距合并
-
边框 1px 问题
-
垂直居中
-
大屏幕 rem 小屏幕 px
-
图片适配
-
可维护性
-
-
扩展内容
-
预处理器：Less、Sass
-
后处理器：postcss
-
小程序的 WXSS
-
Weex、RN 中的 CSS
-
JavaScript
吃土小2叉：至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。
本段内容大量参考了：《The Modern JavaScript Tutorial》http://javascript.info/ ，推荐阅读。
-
JavaScript 标准
-
严格模式
-
兼容模式
-
-
开发工具
-
IDE
-
轻量编辑器
-
-
基础语法
-
数据类型
-
基本数据类型
number、string、boolean、null、undefined、object、symbol -
数据类型检测
-
解构赋值
-
数组
-
对象
-
-
date与时间 -
JSON
-
格式说明
-
序列化
-
反序列化
-
-
数组
-
数组操作（增、删、改、遍历、复制）
-
多维数组
-
-
-
变量
-
声明
var、let、const -
声明提升
-
作用域
-
-
逻辑控制
-
循环
-
分支
-
判断
-
-
对象（基础部分）
-
对象操作（增、删、改、查、复制）
-
Symbols
-
类型转换
-
垃圾回收机制
-
对象方法中的 this
-
new
-
-
函数
-
函数默认值
-
函数声明
-
立即执行函数
-
箭头函数
-
-
运算符
-
数值运算
-
逻辑运算
-
-
事件
-
浏览器事件
-
冒泡、捕获
-
事件捕获
-
浏览器默认行为
-
-
文档
-
DOM 树
-
节点
-
节点类型
-
节点标签
-
节点内容
-
-
window 对象
-
-
DOM 操作
-
元素节点（增、删、移、换、复制）
-
元素属性（增、删、改、查）
-
文本内容（增、删、改、查）
-
-
-
网络请求
-
ajax（回调函数）
-
Promise
-
async、await
-
-
-
深入细节
-
对象、类、继承
-
属性标记与属性描述
-
原型、原型链
-
继承
-
属性定义
-
对象混合
-
类型检测
-
-
数据类型
-
基本类型
-
复杂类型
-
-
函数进阶
-
递归、调用堆栈
-
闭包
-
函数绑定、上下文
-
剩余参数、扩展语法
-
函数对象
-
任务调度：定时器
-
柯里化
-
深入箭头函数
-
函数式
-
-
错误处理
-
异常捕获
-
-
-
代码质量
-
注释
-
相关工具
-
ESLint、JSLint
-
Standard.js
-
Prettify
-
自动化测试工具：Jest、Mocha
-
-
用例规范
-
最佳实践
-
不良习惯
-
-
格式规范
-
风格
-
-
-
正则表达式
-
普通字符、转义字符
-
元字符
-
字符类
-
分支条件
-
分组
-
反义
-
贪婪与懒惰
-
后向引用
-
……
-
编程通用
软件工程的核心就是管理复杂度 —— 《代码大全 2》
推荐阅读：来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》
-
达标（语法、词法）
-
正确拼写
-
准确用词
-
注意单复数
-
不要搞错词性
-
处理缩写
-
用对时态和语态
-
-
熟练（语义、可用性）
-
单一职责
-
避免副作用
-
代码一致性
-
合理设计函数参数
-
合理运用函数重载
-
使返回值可预期
-
固话术语表
-
遵循一致的代码风格
-
-
卓越（系统性、大局观）
-
版本控制
-
确保向下兼容
-
设计扩展机制（易于扩展）
-
控制 API 的抽象级别
-
设计模式
-
注释
-
DRY
-
编码规范
-
解耦
-
复杂度控制
-
SEO & 数据统计 & 数据分析
吃土小2叉：尽人事，听天命（天者，用户也）
-
SEO
-
影响因素
-
相关性
-
title
-
关键词密度
-
-
权威性
-
外链
-
内链
-
域名年限
-
网站收录
-
安全性
-
-
用户体验
-
广告
-
加载速度
-
内容质量：内容真实性、内容原创性、内容有益性
-
用户反馈
-
-
-
不良行为
-
堆叠关键词
-
抄袭、作弊
-
大量低价值外链
-
广告、木马、病毒
-
-
-
数据统计
-
工具
-
统计、埋点工具：Google Analytics、百度统计、Piwik……
-
站长工具：Google Webmaster 、百度站长工具
-
其他工具：百度指数、SEO 各项指标助手工具……
-
-
-
数据分析
-
工具
-
同数据统计工具
-
脑子是个好东西
-
-
分析方法
-
归因、排查
-
细分
-
来源、渠道
-
用户属性
-
人口统计学
-
用户终端、型号
-
-
用户行为
-
站内搜索关键词
-
自定义事件（埋点事件）
-
浏览频率、时间、跳出页
-
访问内容
-
访问漏斗
-
-
站点属性
-
-
对比
-
时间维度
-
统计指标维度
-
-
-
目标设置
-
转化路径
-
转化目标
-
转化价值
-
-
网络基础
此处是不是又要出现，经典问题：当你在浏览器输入 URL 并回车（非单页应用的传统网站），直到你看见这个页面，此时经历了哪些过程（略去浏览器渲染环节）。
-
TCP / IP
-
HTTP
-
请求
-
请求头
-
请求正文
-
-
响应
-
HTTP 状态码（2xx、3xx、4xx、5xx）
-
响应头
-
响应正文
-
-
过程：三次握手
-
-
HTTP2
-
HTTPS
-
Web Socket
-
CORS
-
Session、Cookie
-
RESTful / RPC
-
-
DNS 、域名、IP
-
域名劫持
-
内网、公网地址段
-
-
缓存
-
服务端缓存
-
客户端缓存
-
-
常用工具
-
F12 Network Panel
-
Advanced REST client
-
EditThisCookie
-
Wireshark
-
Fiddler、Charles
-
-
常见问题
-
HTTP 迁移到 HTTPS 站点部署问题
-
HTTPS 证书部署
-
TLS 版本问题
-
证书作用域（是否包含子域名）
-
证书、秘钥配置文件
-
-
资源加载同协议
-
error 级-
外部 JavaScript 加载
-
iframe
-
-
warning 级-
img
-
CSS
-
-
-
网络请求同协议
-
error级-
ajax
-
jsonp
-
-
-
-
交叉领域理论
吃土小2叉：学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅
产品设计相关
吃土小2叉：学会优雅地质疑设计 => 给用户更好的体验
-
与设计师的沟通、协作
-
设计理念 => 用户体验
-
一致性
-
可用性
-
易用性
-
反馈
-
-
提升审美
-
单反穷三代 // 单身狗 XX：也许学好摄影就能追到女神了呢？
-
竞品分析 // 知己知彼，重视对手
-
-
常用工具
-
雪碧图生成工具（http://www.spritecow.com/）
-
图片有损压缩工具（https://tinypng.com/）
-
.psd 智能标注（http://www.fancynode.com.cn/pxcook）
-
强烈建议设计师使用 Sketch 进行设计
-
后端基础
吃土小2叉：只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 （迷之微笑）
XX 的观点：时刻谨记编程语言只是一种工具，分别有不同适用的场景罢了。理性、客观、结合实际。
-
与后端开发工程师的沟通、协作
-
明确分工
-
文档先行
-
mock 数据
-
-
简单了解一门后端语言 // XX 注：如果你已经自己搭建了个人博客站点，后端语言的语法层面足够了。
-
了解前端路由与后端路由的区别
-
简单应用数据库（MySQL）
-
增、删、改、查
-
备份、导出
-
-
了解作用与概念
-
GraphQL
-
Nginx
-
Redis
-
负载均衡
-
CDN
-
数据库主从备份
-
-
计算机相关基础知识 // 有时间多重温（预习）重温（预习）
-
数据库
-
操作系统
-
编译原理
-
离散数学
-
数字逻辑
-
前端实践
实践是检验真理的唯一标准，在此引用 Vue.js 作者尤雨溪的一段话：
技术方案都是先有问题，再有思路，同时伴随着取舍。在选择衡量技术的时候，尽量去思考这个技术背后是在解决什么问题，它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术，也为以后哪天你遇到业务中的特殊情况，需要自己做方案的时候打好基础。
解决实际问题
Learn from you mistakes.
吃土小2叉：写下这篇文章的时候恰逢今年高考，很感谢高一的英语老师当时给我们布置的一个作业：整理考试错题集。因为经历过太多次，同样类型的题目这次错，下次仍然错。而我又是一个比较较真的人，每次整理错题的时候，不单单只记录做错的问题和答案，还会去分析这里的考点，所涉及的知识点，去试着换位思考如果我是出题人，会怎么出这道题，考哪些知识点可以坑一下考生。而这一过程，又有着考试做错题的心理愧疚感，记忆会特别深刻。另一方面，在复习阶段，也可以更具有针对性地复习，为自己减压。要尽量把大脑当成 CPU 来用，或者倒排索引，而非硬盘、数据库。
Learn from your practice.
而在编程过程中，也是比较接近。我们可以记录下自己犯过的错误，不良的编码案例。同时，我们也可以像经常收集一些名人名言、固定搭配等写作套路一样，去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化，那就更好了。
Learn from your worry & adversity.
另外，抱着积极的态度、强大的内心去面对开发过程中的任何困惑、困境，都是助力快速成长的好机会。
前阵子我在 GitHub 上也开了一个项目，专门记录、收集我最近在前端开发过程中遇到的一些问题，有已经解决的，也有仍待解决的。
https://github.com/xunge0613/front-end-practice-collections
目前整理的已解决问题有：
-
解决跨域 iframe 父子页面间通信问题
-
→_→ 没有更多了……
仍待解决的问题：
-
如何优雅地监听元素高度变化？
-
移动端 banner 轮播图自适应的各种坑
当然我也简单写了一些方法论，包括：
-
如何解决问题？
-
如何提问题？
后续我也会不断完善这一块内容。重点是：形成一套属于自己的最佳实践经验库。
学习型项目
这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列
https://github.com/phodal/growth
而我给准备入门前端的新手的建议是：
拥有一个完全属于自己的博客、域名、网站、服务器，并每周固定更新博客文章、每年为博客更新一次主题。
前端工程
勿忘自己的 title：前端工程师
以下引用张云龙 dalao 的文章：前端工程 —— 基础篇
第一阶段：库/框架选型 第二阶段：简单构建优化 第三阶段：JS/CSS模块化开发 第四阶段：组件化开发与资源管理
由于先天缺陷，前端相比其他软件开发，在基础架构上更加迫切的需要组件化开发和资源管理，而解决资源管理的方法其实一点也不复杂：
一个通用的资源表生成工具 + 基于表的资源加载框架
第一阶段：框架应用
吃土小2叉：只要是一个文档友好的框架，遇到不会的问题，去翻翻文档，如果解决不了，再去认真翻一次。因此，第一阶段，亦可认为是：面向文档编程。
此处建议再回忆一下刚才提及的尤大的话。
以下是我个人的框架/库应用路线：
jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶
-
jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档
-
核心
-
对象访问
-
数据缓存
-
队列控制
-
插件机制
-
多库共存
-
-
事件
-
页面载入
-
事件处理
-
事件委托
-
事件切换
-
常用事件
-
鼠标事件（click、dbclick、hover、mouse*……）
-
键盘事件（key*……）
-
表单事件（blur、change、focus、submit、select）
-
浏览器事件（error、resize、scroll）
-
触摸事件（touch*……）
-
-
-
选择器
-
基本
-
组合
-
伪类
-
内容
-
可见性
-
属性
-
表单
-
-
筛选器
-
过滤
-
查找
-
串联
-
-
CSS
-
CSS
-
位置
-
尺寸
-
-
DOM 操作
-
元素节点（增、删、移、换、复制）
-
元素属性（增、删、改、查）
-
文本内容（增、删、改、查）
-
-
网络请求
-
Ajax
-
when
-
deferred
-
-
特效
-
基本（显示、隐藏）
-
滑动
-
淡入淡出
-
自定义动画控制
-
-
辅助工具（类似于 lodash）
-
数组、对象操作
-
函数操作
-
字符串操作
-
浏览器及特性检测
-
类型检测
-
JSON 序列化
-
-
-
artTemplate
-
模板引擎
-
-
Vue.js
-
MVVM 思想
-
声明式渲染
-
条件与循环
-
处理用户输入
-
数据绑定、响应式数据
-
组件化应用构建
-
组件间通信
-
状态管理
-
-
-
lodash.js // 提供各种 helper 方法，专注于数据处理
-
数据类型
-
数组
-
集合
-
日期
-
函数
-
数值
-
对象
-
字符串
-
-
语言特性
-
类型检测
-
类型比较
-
复制
-
-
数学运算
-
辅助工具
-
XX：
学你会用 artTemplate 以后，会发现 Vue.js 很容易上手
当你学会 Vue.js 以后，你会发现小程序真的很容易上手
第二阶段：简单自动构建优化
专注业务开发
-
工具
-
Grunt
-
Gulp
-
-
预处理
-
Less
-
Babel
-
TypeScript
-
-
后处理
-
PostCSS
-
-
校验
-
ESLint
-
-
压缩
-
代码
-
图片
-
-
合并
-
打包
-
自动化测试
-
mock 接口调试
第三阶段：JS/CSS模块化开发
张云龙：分治、分治、分治
-
AMD
-
CommonJS
-
UMD
-
ES6 Module
-
……
第四阶段：组件化开发与资源管理
核心目的：提高开发效率 & 兼顾运行性能
-
分治、解耦、*组合、就近维护
-
Vue.js 组件化开发
-
抽象业务逻辑组件
-
组合基础 UI 组件形成业务组件
-
独立编写业务相关组件
-
……
-
-
定制基础 UI 组件库
-
轮播图组件
-
弹窗组件
-
……
-
-
-
资源管理
-
推荐阅读：静态网页资源的管理和优化
-
项目技术选型
理性、客观、避免偏见
-
预计投入
-
开发资源
-
时间
-
人手
-
技术储备
-
-
项目资源
-
-
产品资源
-
用户群体
-
浏览器兼容性
-
浏览器局限性
-
SEO 问题
-
-
-
-
期望回报
-
开发人员自我成长
-
公司技术栈
-
开发效率
-
可维护性
-
性能、稳定性
-
易于测试
-
易于把控项目周期
-
-
应急预案
-
兼容方案
-
回退方案
-
A / B Test
-
渐进增强
-
Plan B
-
造*
吃土小2叉：要么站在巨人的肩膀上，要么自己成为巨人
未完待续……
-
UI 组件库
-
前端工具
-
前端微服务
-
前端框架
-
（以下内容是 XX 的 YY 内容）
-
学习优秀框架源码
-
仿写核心内容
-
掌握山寨一个框架的套路
-
发现问题
-
具备扎实的前端基础 + 运气 + 灵感
-
解决问题
-
===== 当前版本分割线 =====
v 0.0.3 内容迭代
-
更新
编程通用-
条目更新
-
-
更新
JavaScript -
更新
前端实践-
新增引导语
-
-
更新支付宝图标、微信图标……
v 0.0.2 内容迭代
-
新增
后端基础 -
新增
前端工程第一阶段jQuery、Vue.js 介绍 -
新增
常见问题 -
更新
前言 -
更新
网络基础 -
更新
学习型项目
致谢
-
前端工程 —— 基础篇 by 张云龙
-
The Modern JavaScript Tutorial by Ilya Kantor
-
jQuery 1.4 中文文档 by 张鑫旭
-
MDN Web 开发 // 这里有个小彩蛋，这个页面右上角有某 XX
结语
作为一个老菜鸟，我只是知识的搬运工
本文大多讨论的是有哪些知识点（what），至于如何学习与应用这些知识点（how & why），敬请期待我之后的一系列文章，目前已完成一些雏形，仅供试阅：
-
Growth CSS
-
Growth Vue
本人转载自 https://github.com/xunge0613