前端学习路线

本篇文章列出我的前端学习路线，当然后面有很多其实我还没有掌握。前面的知识当入门后面的知识当进阶吧。我也计划将此路线当做一个题纲，后期会将每一块知识展开后形成单独文章。

一、前端入门

1、HTML

描述：用于定义一个网页结构的基本技术

各种标签：

• h 系列标签

• p 标签

• 换行标签
  

• 水平分割线标签

  ---

• 文本格式化标签（加粗标签 b 和 strong、下划线标签 u 和 ins、倾斜标签 i 和 em、删除线 s 和 del）

• 图片标签 img

• 音频标签 audio

• 视频标签 video

• a 链接标签

• 无序列表标签 ul 搭配 li

• 有序列表标签 ol 搭配 li

• 自定义列表标签 dl 搭配 dt 和 dd

• 表格标签 table 搭配 tr、th、td 等

• 表单标签 input 系列、button、select、textarea、label 等

标签语义化

HTML5 特性：

• 语义化标签
• 浏览器支持
• 多媒体标签
• Canvas 画布
• 本地存储
  • localStorage
  • sessionStorage
• Web Workers
• 应用缓存（Cache Manifest）
• 无障碍

2、CSS

描述：层叠样式表，用于设计风格和布局

引入方式：内嵌式、外联式、行内式

基础选择器：

• 标签选择器
• 类选择器
• id 选择器
• 通配符选择器

复合选择器：

• 后代选择器

• 子代选择器

• 并集选择器

• 交集选择器

• 伪类选择器

字体和文本样式：

• font-size
• font-weight
• font-style
• font-family
• text-indent
• text-align
• text-decoration
• line-height

背景相关样式

• background-color

• background-image

• background-repeat

• background-position

• background-size

元素显示模式：块级元素、行内元素、行内块元素

CSS 特性：继承性、层叠性、优先级

文档流

• 标准流
• 浮动流
• 定位流

伪元素

浮动：浮动和清除浮动、BFC 机制

定位：静态定位、相对定位、绝对定位、子绝父相、固定定位

其他：对齐方式问题 vertical-align、光标类型 cursor、边框圆角 border-radius、溢出部分显示效果、元素隐藏、元素透明度、边框合并、精灵图、字体图标、文字阴影 text-shadow、盒子阴影 box-shadow、过渡、图片模糊处理 filter:blur()、SEO 优化、网站 icon 图标、CSS 书写规范

平面转换（2D）：位移、旋转、缩放

渐变

空间转换（3D）：位移、透视、旋转、立体呈现、缩放

动画

移动端适配：屏幕尺寸和分辨率、百分比布局（流式布局）、Flex 布局（弹性布局）、媒体查询

3、JavaScript

描述：具有函数优先的轻量级，解释型或即时编译型的编程语言。

JavaScript 组成：

• ECMAScript：规定了 js 基础语法

• Web APIs：JavaScript 暴露的一些接口，用于操作文档和浏览器

数据类型

• 值类型
  • 字符串 String
  • 数组 Number
  • 布尔 Boolean
  • 空值 Null
  • 未定义 Undefined
  • Symbol
• 引用类型
  • 对象 Object
  • 数组 Array
  • 函数 Function

数据类型转换：显式转换、隐式转换

运算符：算术运算符、赋值运算符、一元运算符、比较运算符、逻辑运算符

流程控制语句：

• 分支语句：if 分支语句、三元运算符、switch 语句

• 循环语句：while 循环、for 循环

函数：匿名函数（函数表达式）、函数调用、函数传参

对象：内置对象

DOM 操作：DOM 树、DOM 对象、设置修改 DOM 元素内容、属性、样式、定时器-间歇函数、事件、回调函数、高阶函数、环境对象 this、事件对象 e、节点操作（查找、增加、删除）、事件委托、重绘回流、滚动事件、加载事件

BOM 操作：window 对象、定时器-延时函数、location 对象、navigator 对象、histroy 对象、本地存储、正则表达式

ES6：不再说了，阮一峰老师都讲到了。ES6 入门教程 https://es6.ruanyifeng.com/

二、AJAX

XMLHttpRequest、axios

http 基础知识：浏览器的同源策略、跨域及如何解决跨域、URL、防抖、节流、http 协议

三、git 和 github

使用版本控制软件，将代码托管到远程仓库

四、Node.js

这个我还没有系统的学过，也列出来以后学习

五、框架前置

ES6 的模块化：导入导出

Promise：回调地狱、.then、.catch、async/await

事件循环 EventLoop

六、前端工程化

Vue2 框架

Vue 的几大板块：声明式渲染、组件系统、客户端路由、大规模状态管理、构建工具

Vue 基础语法：

• 插值表达式
• MVVM 设计模式
• v-bind
• v-on
• v-model
• v-text 和 v-html
• v-show 和 v-if
• v-for
• 虚拟 dom 和 diff 算法
• 动态 class 和动态 style
• 过滤器
• 计算属性
• 侦听器 watch

Vue 组件：

• 组件通信
• Vue 生命周期与钩子函数
• $refs和$nextTick
• 动态组件与组件缓存 keep-alive
• 组件插槽（默认插槽、具名插槽、作用域插槽）

Vue 路由系统：

• 声明式导航
• 编程式导航
• 重定向与路由模式
• 路由嵌套和路由守卫

Vuex：

• state
• mutations
• actions
• getters
• vuex 模块化

CSS 预编译：

• LESS
• SASS

开发框架：

• Express
• Koa
• Egg

组件库

• ElementUI（Vue）
• VantUI（Vue）

数据可视化

• Apache ECharts（echarts）
• HighCharts

数据 Mock

• 描述：通过随机数据，模拟各种场景，增加单元测试的真实性。
• Mock.js

代码检查：

• ESLint
• StyleLint

代码风格：

• Prettier

包管理工具：

• npm
• yarn

打包工具：

• Webpack
• Vite

部署

Web 服务器

Nginx

• 描述：高性能的 HTTP 和反向代理 web 服务器。
• 资源：腾讯云动手实验室 https://cloud.tencent.com/developer/labs/gallery
• 反向代理
• 解决跨域
• 改写请求

Apache

容器

Docker

• 描述：容器是一个标准化的软件单元，它将代码及其所有依赖关系打包，以便应用程序从一个计算环境可靠快速地运行到另一个计算环境。Docker 容器镜像是一个轻量的独立的可执行的软件包。包含程序运行的时候所需的一切：代码，运行时间，系统工具，系统库和设置。
• 资源：Docker 从入门到实践 https://vuepress.mirror.docker-practice.com/
• Dockerfile

七、性能优化

• 路由懒加载
• 组件懒加载
• JS 异步加载
• Tree shaking
• 骨架屏
• 分页加载
• 长列表虚拟滚动
• Web Worker 优化长任务
• 图片优化（动态裁剪、懒加载、图片压缩、使用字体图标、图片转 base64 格式）
• CDN 分发