---
title: "前端开发初阶"
date: 2018-12-29
lastmod: 2020-01-05
weight: 1
type: docs
icon: #
description: "初阶路线图"
# search related keywords
keywords: ["前端开发","初阶"]
---

## 初阶路线图

{{< embed-pdf-view url="/images/frontend.pdf" >}}



### 前端基础

- 客户端
  - 浏览器
    - Chrome
    - Safari
    - Firefox
  - APP
    - 小程序
    - WebView
- 网络
  - Domain
  - TCP/IP
  - DNS
  - HTTP
- 服务端
  - WebServer
    - Nginx
    - Apache HTTP Server
    - CDN
  - 服务端语言
    - PHP
    - Java
    - Golang
  - 数据库
  - 操作系统
- 行业标准
  - W3C/WHATWG
    - CSS标准
    - HTML、XHTML、XML、HTML5标准
    - DOM标准
    - SVG标准
    - 小程序标准
- ECMA-TC39
  - EcmaScript标准
  - JavaScript标准

### 研发工具

- 编辑器
  - Sublime Text
  - Visual Studio Code
  - WebStorm
- 调试预览
  - 浏览器调试工具
    - FireBug
    - Chrome DevTools
  - 本地服务
    - file://
    - http://、SimpleHTTPServer
  - 在线服务
    - CodePen
    - JSFiddle
  - 网络调试
    - hosts、Switchhosts
    - Debugging Proxy、Charles、wireshark
- 图片编辑器
  - Photoshop
  - Sketch
- 版本管理
  - Git
  - SVN

### HTML

- 元素
  - 根元素
    - 主根元素 html
    - 分区根元素 body
  - 元数据
    - base、head
  - 内容分区
    - header、footer
  - 内容
    - 块级内容 div、dir
    - 文字内容 a、b、strong
  - 图片和多媒体
    - audio、img
  - 内嵌内容
    - iframe、object
  - 脚本
    - canvas、script
  - 表格
    - table、tbody
  - 表单
    - button、input
  - 可交互元素
    - menu、menuitem
- 属性
  - 常用属性
    - class、id、style、title
  - 全局属性
- 事件
  - 窗口事件
  - 表单事件
  - 键盘事件
  - 鼠标事件
  - 多媒体事件
- 编码
  - URL编码
  - 语言代码
  - 字符集

### CSS

- 语法
  - @规则
  - 层叠
  - 注释
  - 解释器
  - 继承
  - 简写
  - 优先级
  - 值定义
  - 单位与取值类型
- 选择器
  - 元素选择器
  - 选择器分组
  - 类选择器
  - ID 选择器
  - 属性选择器
  - 后代选择器
  - 子元素选择器
  - 相邻选择器
  - 伪类
  - 伪元素
- 定位
  - position
  - top、left、bottom、right
  - z-index
- 布局
  - Box Model
  - FlexBox
  - Grid
  - Column
- 样式
  - 背景
  - 文本
  - 轮廓
  - 列表
- 动画
  - Animation
  - transition
- 应用
  - 响应式
    - em、vh/vw、%
  - 自适应
    - @media、rem

### JavaScript

- 语法
  - 值、变量
  - 数据类型
    - 基本类型
    - 类型判断
    - 类型转换
  - 流程控制
  - 运算（表达式、运算符）
    - 数学
    - 比较
    - 逻辑
  - 函数
    - 函数声明
    - 函数表达式
    - 回调函数
    - 箭头函数
- 数据类型深入
  - 原始类型的方法
  - 数字类型
  - 字符串
  - 数组
  - 数组方法
  - Iterable object（可迭代对象）
  - Map and Set（映射和集合）
  - WeakMap and WeakSet（弱映射和弱集合）
  - Object.keys、values、entries
  - 解构赋值
  - 日期和时间
  - JSON序列化、反序列化
- 对象
  - 属性/字面量
  - in 、for...in
  - 对象引用
  - 深拷贝、浅拷贝
  - Symbol
  - 垃圾收集机制
  - this
  - new
  - Optional chaining '?.'
  - 类型转换Symbol.toPrimitive
  - Property flags、descriptors
  - getters、setters
- 函数
  - 调用栈
  - 递归、尾递归
  - arguments、params spread
  - 作用域、闭包
  - var、变量提升
  - IIFE、匿名自执行函数
  - NFE、函数命名表达式
  - 箭头函数
  - new Function
  - setTimeout、setInterval
  - call、apply、bind
  - 部分施用、柯里化
- 原型
  - 原型链、继承
  - F.prototype
  - Object.prototype
- 类
  - extend 继承
  - 方法重载
  - 构造函数
  - Super、[[HomeObject]]
  - 静态属性、静态函数
  - 私有属性、私有函数
  - 混合、Mixins
- 异步流程控制
  - Callback
  - Promise
    - Promises/A+、Promisification、Thenable
  - async/await
  - generator
  - iterable
- 模块化
  - commonJS
  - amd、cmd、umd、es-module
- 异常捕获
  - try...catch...finally
  - throw
  - Error

### 浏览器

- DOM
  - DOM Tree
  - DOM Node
  - DOM Query
  - DOM Properties
  - DOM Modify
  - Styles
  - Coordinates、Element Scrolling
  - DOM Events
    - UI Event
    - Bubbling and Capturing
    - Event Delegate
- 浏览器API
  - location
  - history
  - navigator
  - Default Actions
    - event.preventDefault()
  - Form
    - change、focus、blur、submit
- 网络
  - XHR
  - Fetch
  - JSONP
  - WebSocket
- 权限
  - Cookie
  - Session
  - OAuth
  - SSO
  - JWT
- 安全与隐私
  - Content Security Policy (CSP)
  - CORS
  - XSS
  - CSRF
  - MITM
  - Samesite
- 兼容性
  - Can I Use
  - polyfill
  - shim
  - browserslist
  - Autoprefixer
- 开发者工具
  - 设备模式
  - 元素面板
  - 控制台面板
  - 源代码面板
  - 网络面板
  - 性能面板
  - 内存面板
  - 应用面板
  - 安全面板


## 相关学习资源

- [MDN Web 入门](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web)
- [友好的 Web 开发初学者教程](https://www.internetingishard.com/)
- [Web 技术路线图框架](https://github.com/w3c/web-roadmaps)
- [Web 开发人员的路线图](https://github.com/kamranahmedse/developer-roadmap)
- [Web 初学者开发教程](https://github.com/microsoft/Web-Dev-For-Beginners)
- [The Modern JavaScript Tutorial](https://javascript.info/)
- [JavaScript权威指南](https://book.douban.com/subject/10549733/)
- [点到面学习 flex](https://www.yuque.com/linxz/flex)
- [Chrome 开发者工具](https://developers.google.cn/web/tools/chrome-devtools/)
- [W3C官网](https://www.w3.org/)
- [WHATWG官网](https://whatwg.org/)
- [ECMA-TC39](https://github.com/tc39)
- [JavaScript: the first 20 years](https://dl.acm.org/doi/10.1145/3386327)