前言
之前小编写了一篇前端面试套餐：Vue面试题总结+JavaScript前端经典面试题+100道 CSS 面试题文章，有讲到打算后面单独写一篇详讲前端基础学什么，拖了这么久终于出来了哈哈哈哈。至于前端怎么学，小伙伴们可以看看这篇文章，有详细讲了3个学习方法，点击这直接跳转到文章。让我们一起看看，前端基础都要学些什么？
抛开面试，系统学习
在一切之前，应该系统地去学习前端的基础知识。 对前端而言，这些基础包括 HTML，CSS，JavaScript，浏览器原理，网络协议，MVVM 框架和一些必要的计算机基础等。应该先抛开面试的目的去学习这些知识，建立自己的知识体系，然后再结合面试题，运用掌握的知识去理解并解决面试题。
JavaScript 基础
- 执行上下文/作用域链/闭包
- this/call/apply/bind
- 原型/继承
- Promise
- 深浅拷贝
- 事件机制/Event Loop
- 函数式编程
- service worker/web worker
- 常用方法
...
CSS 基础
- position
- 行内元素/块状元素
- flex
- 1px
- 重绘回流
- Sass/Less
- 居中/常见布局
- 层叠上下文
...
框架
- MVVM
- 生命周期
- 数据绑定
- 状态管理
- 组件通信
- computed/watch 原理
- Virtual DOM
- diff
- React Hook
- React Hoc/Vue mixin
- Vue 和 React 有什么不同
...
工程化
- webpack
- babel
- 模板引擎
- 前端发布
- weex
...
性能优化
- 打包优化
- 网络优化
- 代码优化
...
TypeScript
网络/浏览器
- HTTP
- DNS
- TCP
- HTTPS
- CDN
...
经典问题，从输入 URL 到页面展示，发生了什么。这个问题我觉得还是很考验广度和深度的，可以好好思考一下，每个人可能回答的结果都会是不一样的。
计算机基础
- 设计模式
- 数据结构
- 基础算法
安全
...学习输入，面试输出
很多人刷了很多面试题，看了很多面经，知识储备充分，但面试的时候，即使是自己熟悉的考点，也很难令面试官满意。其关键原因在于，学习是一种输入，但面试是一种输出。
面试需要的不是你懂，而是要让面试官知道你懂，你必须有能力将考点中的要点联系起来，连贯的说出来，这并不是看过一次就能达到的。但不少人以为看过这类文章，知道这个点，就可以了。事实上，只是“知道”远远不够。
这种问题，根本上，是对技术点的不够深入，不够熟悉，没有形成自己的理解。我也经历过这一过程，你知道这些概念，自己也能分清，但难以向别人讲明白。简单测试一个CSS问题：什么是BFC？ 你肯定知道叫块级格式化上下文，问题是，怎么向面试官解释这个东西？
为了解决这个问题，首先，学习过程注重理解而不是记忆。
第二，一个知识点，需要通过多篇文章学习，重复学习，加深理解，总结出自己的答案和看法。
第三，刻意练习。如果你有伙伴，可以相互提问。如果没有，也可以自问自答。
HTML
- 你是怎么理解HTML语义化
- 你用过哪些HTML5标签
- meta viewport 是做什么用的，怎么写？
- H5是什么
- label标签的作用
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- a标签中 如何禁用href 跳转页面 或 定位链接
- canvas在标签上设置宽高 和在style中设置宽高有什么区别
- 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
- iframe有哪些缺点？
CSS
- 页面渲染时，dom 元素所采用的 布局模型,可通过box-sizing进行设置。根据计算宽高的
- ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大
- 几种获得宽高的方式 :
- 拓展各种获得宽高的方式 :
- css reset和normalize.css有什么区别：
- 居中方法：
- css优先确定级：
- 如何清除浮动：
- 自适应布局：
- 画三角形：
- link @import导入css：
- 长宽比方案：
- display相关：
- CSS优化：
JavaScript
- 请你谈谈Cookie的优缺点
- Array.prototype.slice.call(arr，2)方法的作用是：
- 简单说一下浏览器本地存储是怎样的
- 原型 / 构造函数 / 实例
- 原型链：
- 执行上下文(EC)
- 变量对象
- 作用域链
- 闭包
- 对象的拷贝
- new运算符的执行过程
- instanceof原理
- 代码的复用
- 继承
浏览器
- 跨标签页通讯
- 浏览器架构
- 从输入 url 到展示的过程
- 重绘与回流
- 存储
- Web Worker
- V8垃圾回收机制
- 内存泄露
- reflow(回流)和repaint(重绘)优化
- 如何减少重绘和回流?
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- localStorage 与 sessionStorage 与cookie的区别总结
- 浏览器如何阻止事件传播，阻止默认行为
- 虚拟DOM方案相对原生DOM操作有什么优点，实现上是什么原理？
服务端与网络
- http/https 协议
- 常见状态码
- get / post
- Websocket
- TCP三次握手
- TCP四次挥手
- Node 的 Event Loop: 6个阶段
- URL概述
- 安全
- HTTPS和HTTP的区别
- HTTP版本
- 从输入URL到页面呈现发生了什么？
- HTTP缓存
- 缓存位置
- 强缓存
Vue
- vue.js的两个核心是什么？
- vue 的双向绑定的原理是什么？
- vue生命周期钩子函数有哪些？
- 请问 v-if 和 v-show 有什么区别？
- vue常用的修饰符
- nextTick
- 什么是vue生命周期
- 数据响应(数据劫持)
- virtual dom 原理实现
- Proxy 相比于 defineProperty 的优势
- vuex
- vue中 key 值的作用
- Vue 组件中 data 为什么必须是函数？
- v-for 与 v-if 的优先级
- 说出至少 4 种 vue 当中的指令和它的用法
算法
- 五大算法
- 基础排序算法
- 高级排序算法
- 递归运用(斐波那契数列)： 爬楼梯问题
- 数据树
- 天平找次品
学习&面试：注重逻辑表达
如果上一点是说能正确回答问题，这点则是能更好的回答问题。一个逻辑清晰的回答，能让面试官感受到，面前的小伙子不仅熟悉这个问题，还有比较优秀的语言能力和逻辑能力。
比如，常见问题：说说 var, let/const 的区别。大部分人都能罗列出它们的区别和注意点，但这很难给面试官留下什么印象。但是，如果你添加几句联系性的语句，效果就不一样了：
这几句简单的连接，让整个回答从一个简单的要点堆砌变成关系密切的表达。
然而，这并非易事。前提是必须要有较好的逻辑思维，既然选择这行，相信各位这点没有问题。
在学习每一个技术点的时候，都要注意一些问题：是什么？为了解决什么问题？如何实现的，有没有更深的原理？如何使用？使用的时候需要注意什么？有哪些应用的场景？有什么不足？这些不足能否避免？ 这些问题能让你更加全面地体会各个问题的联系。