前言

之前小编写了一篇前端面试套餐：Vue 面试题总结 +JavaScript 前端经典面试题 +100 道 CSS 面试题文章，有讲到打算前面独自写一篇详讲前端根底学什么，拖了这么久终于进去了哈哈哈哈。至于前端怎么学，小伙伴们能够看看这篇文章，有具体讲了 3 个学习办法，点击这间接跳转到文章。让咱们一起看看，前端根底都要学些什么？

抛开面试，零碎学习

在所有之前，应该系统地去学习前端的基础知识。对前端而言，这些根底包含 HTML，CSS，JavaScript，浏览器原理，网络协议，MVVM 框架和一些必要的计算机根底等。应该先抛开面试的目标去学习这些常识，建设本人的常识体系，而后再联合面试题，使用把握的常识去了解并解决面试题。

JavaScript 根底

JavaScript 根底十分重要，相比于大同小异的框架面试题，JavaScript 能够问很多货色，而且细问起来也有很多有意思货色，如果工夫短缺能够系统地过一遍。（事实往往是没工夫 …）

• 执行上下文 / 作用域链 / 闭包
• this/call/apply/bind
• 原型 / 继承
• Promise
• 深浅拷贝
• 事件机制 /Event Loop
• 函数式编程
• service worker/web worker
• 罕用办法
  …

CSS 根底

• position
• 行内元素 / 块状元素
• flex
• 1px
• 重绘回流
• Sass/Less
• 居中 / 常见布局
• 层叠上下文
  …

框架

这一块次要是关注 Vue 和 React 的共性和个性，偏重 Vue（我工作中是主 Vue），过程中看了一些源码，加深了解。

• MVVM
• 生命周期
• 数据绑定
• 状态治理
• 组件通信
• computed/watch 原理
• Virtual DOM
• diff
• React Hook
• React Hoc/Vue mixin
• Vue 和 React 有什么不同
  …

工程化

对于写业务的同学来说，之前可能没有大规模接触过工程化的货色，不过这并不影响咱们能够本人去学习和理解。

• webpack
• babel
• 模板引擎
• 前端公布
• weex
  …

性能优化

性能优化是必备技能，必须理解。

• 打包优化
• 网络优化
• 代码优化
  …

TypeScript

TypeScript 不敢写本人深刻，只是理解，所以只是温习了一些根底的知识点和比较简单的问题，比方：JavaScript 和 TypeScript 有什么区别，在进行我的项目选型时，什么因素会让你抉择 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 当中的指令和它的用法

算法

• 五大算法
• 根底排序算法
• 高级排序算法
• 递归使用(斐波那契数列)：爬楼梯问题
• 数据树
• 天平找次品

文章篇幅无限起因，前端面试题精编解析 PDF 完整版请【点击这里收费支付】

学习 & 面试：重视逻辑表白

如果上一点是说能正确答复问题，这点则是能更好的答复问题。一个逻辑清晰的答复，能让面试官感触到，背后的小伙子不仅相熟这个问题，还有比拟优良的语言能力和逻辑能力。

比方，常见问题：说说 var, let/const 的区别。大部分人都能列举出它们的区别和留神点，但这很难给面试官留下什么印象。然而，如果你增加几句联系性的语句，成果就不一样了：

var是 ES5 之前的变量申明形式，存在很多容易产生误解的缺点 ，具体体现在：……（列举 var 的一些有余）, 针对这些问题，ES6 提出了 let/const 的变量申明形式 ，它们具备一些新的个性：……（列举 let/const 个性）。

这几句简略的连贯，让整个答复从一个简略的要点堆砌变成关系密切的表白。

然而，这并非易事。前提是必须要有较好的逻辑思维，既然抉择这行，置信各位这点没有问题。

在学习每一个技术点的时候，都要留神一些问题：是什么？为了解决什么问题？如何实现的，有没有更深的原理？如何应用？应用的时候须要留神什么？有哪些利用的场景？有什么有余？这些有余是否防止？ 这些问题能让你更加全面地领会各个问题的分割。