计算机前端需要学什么？好学吗？小编今天给大家详细系统说一说前端的学习路线。小编会把这份学习拆分成五个阶段，告诉你每个阶段需要学习哪些内容，以及学完之后做个什么样的项目测试自己是否已经成功掌握，希望大家都能初步了解前端的知识，今天小编给大家好好聊一聊。

      第一阶段：HTML/CSS3

　　这个阶段需要学习的内容包含：vscode开发工具使用、markdown文档工具使用、浏览器平台环境、标签基础、DTD与META、语义化、选择器、权重与优先级、匹配规则、浮动与清除、BFC、类名组合规则、SEO前端技巧、定位、叠加技巧、伪类、伪元素、盒子模型、代码规范、性能优化、渲染原理、CSS Sprites 、 iconfont字体图标、布局思路、布局定式css3动画、 css3选择器、 css3过渡、flex布局、背景渐变、css3实用动效、3D模块、css3变量、em/rem/vw。

　　第二阶段：JavaScript部分

　　JavaScript部分是前端的重点!需要学习的内容包含：

　　ECMAScript

　　语言概览、语句语法、数据类型、运算符、隐式转换、运算规则、控制流程、作用域、作用域链、作用域解析、js解释引擎、字符串属性方法、for of/for in

　　数组属性方法、对象、广义对象概念、对象特性、存储机制、深拷贝、对象实际应用、工厂模式、构造函数、原型、原型链、原型指向、封装

　　多种继承、包装对象、this、this指向、js数据处理、垃圾GC、闭包原理与应用、debug方法论、浏览器控制台工具应用、面向对象开发、函数式开发

　　纯函数、递归函数、回调函数、组合函数、缓存函数、柯里化函数、偏函数、函数防抖与节流、高级函数、IIFE函数、模块化

　　数学对象、高级数组方法(reduce、filter、map、every、some、forEach、find、findIndex、include)等

　　高级对象方法(entires、defineProperty、freeze、fromEntries、assign、keys、create、hasOwnProperty)等

　　this通过bind、call、apply指向偏移、同步与异步、闭包模块化、数据形变处理、性能处理

　　DOM/BOM

　　DOM对象与方法、节点与遍历树、DOM选择器、DOM节点增删改查、DOM样式操作、DOM位置获取与偏移、DOM对象与标签区别、DOM虚拟化、DOM事件、Event对象、定时器与监听器、事件委托、事件代理、事件分流、事件冒泡、默认行为、事件捕获、防抖、节流、滚动、键盘行为、事件降频、行为锁机制、拖拽模组、碰撞检测、距离判断、三角函数、方向判断、运动框架、弹性运动、重力加速度、DOM树、CSSOM树、渲染解析、加载、回流、重绘、浏览器线程与阻塞、BOM深入、window对象、navigator、history、screen、location、spa概念、本地传参、日期对象使用、日期格式化封装、随机封装、DOM分片容器

　　JS业务应用扩展

　　JSON对象、数据解析、JSON方法、模板渲染、缓存懒加载、正则表达式RegExp、元字符、修饰符、正向预查、贪婪模式、replace方法、分组与不分组、test、match与exec

　　正则库封装、表单校验、图片预存懒加载、自定义封装滚动组件、多重轮播(循环、视差、旋转木马)、选项卡切换、楼梯导航、吸顶导航、拖拽导航

　　JavaScript编码风格指南、console应用技巧

　　ECMAScript5 --- ECMAScript9扩展

　　版本解读、应用环境、let、const、解构赋值、箭头函数、对象解构、reset参数解构、class、set、get、extends、super、static、private实现、symbol、promise、proxy代理拦截、async/await

　　对象新增API、数组新增API、字符串新增API、原型属性、对象修饰、代理拦截、链式询问、空值合并运算符。

　　第三阶段：HTML5 / 移动端开发

　　需要学习的内容包含：

　　HTML5标签与API

　　HTML5概念、定义、新增特性、DTD对比、新增H5标签、新增语义化H5标签、H5表单

　　H5拖拽事件 video、audio、fullScreen、FileReader文件流、Blob对象、sessionStorage、localStorage、

　　网络状态、页面生命周期、网页状态监听、地理信息与定位、canvas画布、worker多线程、Notifications桌面通知

　　播放器开发 canvas交互特效开发

　　移动端适配/事件

　　移动端适配概念、尺寸与分辨率原理、PPI与DPI计算、DIP与DPR设备像素概念、视口viewport概念、布局视口、视觉视口、理想视口

　　视口适配方案(Meta viewport)缩放设置 、screen窗口大小API、媒体查询@media、rem适配、vw vh适配

　　移动端适配方案、flexible rem方案、 vh vw方案 、复合方案、高清适配方案、移动端字体缩放解决、1px边框问题解决、半像素线

　　图片高清适配、image-set、srcset、js拼接URL技巧、IPhonex刘海屏适配、安全区域、fit与env

　　Meta权限管理、兼容优化、IOS头部底部闪屏回退输入框问题、输入法空格问题、默认首字母大写问题、滑动卡顿问题等

　　终端样式美化与访问判断

　　Touch事件组封装、click延迟处理、FastClick使用、禁用缩放设置理想视口

　　常用类库/工具

　　jquery: 元素选择、增删改差、事件处理、位置获取、动画过渡、高级方法、特效应用

　　zepto：移动端的jquery、DOM操作、移动端事件、click延迟处理、touch事件组

　　基础UI库: layerUI 、easyUI、bootStrap、UI模块化、UI库使用技巧、文档解读、案例调试、表单系统

　　iScroll、touchjs等移动端事件库使用

　　swiper：移动端网站触摸滑动、轮播图插件、模块化应用、源码解读

　　art-template: 模板引擎 模板语法、渲染方法、原生模板引擎实现

　　CSS预处理：sass、less使用 stylus深入学习 、预处理语法、css编程、 Minxin 、预处理函数、继承、嵌套

　　vscode高级插件与配置 liveserver sass

　　模板化应用 、预处理应用

　　date-picker移动端原生组件开发

　　需求分析、业务规则、技术栈选型、文件输出规则、技术分析

　　MVC模型概念与设计、业务逻辑分类

　　view层适配方案 原型布局搭建 模板化生成

　　工具函数开发、面向对象式业务设计 功能类日期对象开发

　　交互业务封装 模块对接 优化设计 面向对象高级程序设计。

　　第四阶段：VUE框架、React框架

　　能够熟练运用vue、vuex、vuerouter、vue-cli、webpack、postcss、babel 以及各种第三方库，实现项目开发需求，独立完成完整的前端现代化工程项目，并且深入框架原理掌握mvvm核心，能够用原生JavaScript模拟实现vue的内核双向绑定响应式模型。

上一篇

后端和前端有什么区别？薪资有差别吗？

下一篇

java和php哪个好？为什么？