前端开发知识点整理

目录

• 专业技能
  • 前端理论
    • 浏览器
    • 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 一起学习体验最佳哦

• 语法 & 语义
  • !DOCTYPE HTML 文档标准
    • 怪异模式
    • 标准模式
  • 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 父子页面间通信问题
• 微信小程序开发 ide 的选择
• →_→ 没有更多了……

仍待解决的问题：

• 如何优雅地监听元素高度变化？
• 移动端 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 内容）
  • 学习优秀框架源码
  • 仿写核心内容
  • 掌握山寨一个框架的套路
  • 发现问题
  • 具备扎实的前端基础 + 运气 + 灵感
  • 解决问题

===== 当前版本分割线 =====

• 更新 编程通用
  • 条目更新
• 更新 JavaScript
• 更新 前端实践
  • 新增引导语
• 更新支付宝图标、微信图标……

v 0.0.2 内容迭代

• 新增 后端基础
• 新增 前端工程 第一阶段 jQuery、Vue.js 介绍
• 新增 常见问题
• 更新 前言
• 更新 网络基础
• 更新 学习型项目

致谢

1. 前端工程 —— 基础篇 by 张云龙
2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队
3. The Modern JavaScript Tutorial by Ilya Kantor
4. jQuery 1.4 中文文档 by 张鑫旭
5. MDN Web 开发 // 这里有个小彩蛋，这个页面右上角有某 XX

结语

作为一个老菜鸟，我只是知识的搬运工

本文大多讨论的是有哪些知识点（what），至于如何学习与应用这些知识点（how & why），敬请期待我之后的一系列文章，目前已完成一些雏形，仅供试阅：

• Growth CSS
• Growth Vue

本人转载自 https://github.com/xunge0613