2021前端面试题整理

一、HTML篇

语义化标签

$：IFE-NOTE：页面结构语义化
$：HTML5新特性
$：HTML+CSS面试题

二、CSS篇

50道基础题

$：50道CSS基础面试题

常见布局

$：前端7大常用布局方式
$：Flex布局和常用属性

居中问题

$：在不确定自身宽度的情况下，用 CSS 实现元素水平居中
$：在不确定自身高度的情况下，用 CSS 实现元素垂直居中

BFC

$：什么是BFC？什么条件下会触发？应用场景有哪些？

BEM

$：BEM命名规范

CSS预处理器

$：Less常用到的语法
$：Sass常用到的语法
$：Sass和Less的区别

常见单位

$：了解px、rpx、em、rem、%、vw、vh、vm的区别

三、JavaScript篇

数据类型

$：8种数据类型
$：原始数据类型和引用数据类型区别

原型链

讲讲原型?
js中万物皆对象。
__proto__是每个对象都有的属性，prototype是函数对象特有的属性。
__proto__指向对象构造函数的prototype，prototype指向原型对象。
每个原型对象，都包含一个指针constructor指向构造函数

讲讲原型链？
当访问一个对象的某个属性的时候，会先在这个对象的本身属性上找，如果没有找到，会去它的__proto__上找，即它的构造函数的prototype，如果还没找到，会在构造函数的prototype的__proto__上找。这样一层层向上查找就会形成一个链式结构，称为原型链。

$：从原型到原型链
$：从简单例子来理解原型

继承

$：js实现继承的几种方式

闭包

「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。

$：什么是闭包？闭包的作用及应用场景

new

new做了什么？
(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；
(3) 执行构造函数中的代码（为这个新对象添加属性） ；
(4) 返回新对象。

$：JS 的 new 到底是干什么的
$：如何模拟实现一个new的效果

this

this是在执行上下文创建时确定的一个在执行过程中不可更改的变量。
可以讲讲直接调用、对象的方法、构造函数、箭头函数几种情况下this是什么。

$：讲讲this？
$：从简单例子来理解this

VO和AO

什么是执行上下文?
执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。
js中有3种执行上下文类型：全局执行上下文、函数执行上下文、eval函数执行上下文。
全局执行上下文在一个程序中只有一个，任何不在函数内部的代码都在全局执行上下文中。函数执行上下文可以有多个，在函数被调用的时候创建。
什么是变量对象(VO)？
每个执行上下文都有一个变量对象(VO)。
全局执行上下文的变量对象(VO)始终存在，即全局对象(window对象)。
函数执行上下文的变量对象(VO)只会在函数执行过程中存在。在函数被调用后且函数具体代码执行之前，js会将当前函数的参数列表初始化为一个变量对象并将当前执行上下文与之关联，函数代码块中声明的变量和函数将作为属性添加到这个变量对象上。
什么是活动对象(AO)？
函数执行上下文中的变量对象(VO)内部定义的属性和方法是不能被直接访问到的，当函数被调用的时候，变量对象(VO)会被激活成活动对象(AO)，这时我们才能访问到它的属性和方法。
什么是作用域？
作用域为可访问变量，对象，函数的集合。
什么是作用域链？
当查找变量的时候，会先在当前的执行上下文的变量对象中查找，如果没有找到，会在它的父级执行上下文的变量对象中查找，一直找到全局执行上下文的变量对象。这样由多个执行上下文的变量对象构成的链表，就叫做作用域链。

$：js执行上下文-执行栈

词法作用域

javascript使用的是词法作用域。函数作用域在函数声明的时候就确定了，与函数调用位置无关。

$：深入理解js作用域——词法作用域和动态作用域

深拷贝和浅拷贝

$：JS中浅拷贝的手段有哪些
$：写一个完整的深拷贝？
$：如何写出一个满意的深拷贝
$：深拷贝的终极探索

事件冒泡、事件捕获、事件代理

事件代理：可以将多个事件处理函数减为一个，而且对于不同的元素可以有不同的处理方法。主要是通过给父级元素而不是子级元素绑定事件，当点击子级元素时，通过事件冒泡机制在其绑定的父级元素上触发事件处理函数，目的是为了提升性能。

$：你真的理解事件冒泡和事件捕获吗？
$：JS 事件委托的概念和作用

排序算法

$：实现常见排序算法

手写常见原理

$：手写常见原理
$：三元博客

面试题汇总

$：3篇经典面试题
$：54道求代码运行结果面试题

四、ES6

Map和Set

$：讲讲Map和Set?

Promise

$：Promise对象的理解学习
$：手写Promise 20行

class

$：class对象的理解学习

扩展运算符

$：三点扩展运算符常见用法

箭头函数

$：箭头函数的理解学习

export、import

$：ES6中export和import详解

五、AJAX篇

AJAX原理

$：AJAX原理及常见面试题
$：ajax常见面试题(含跨域解决方案)

六、浏览器篇

JS运行机制

$：从浏览器多进程到JS单线程，全面梳理了解JS运行机制

七、网络

osi七层，TCP/IP，五层协议，tcp和udp区别，tcp三次握手，四次挥手，tcp状态，http状态码，http1.0，http1.1

$：计算机网络知识点整理

TCP3次握手

下面两篇配合一起看：
$：TCP和UDP的区别
$：TCP3次握手、四次挥手过程

http原理

$：谈谈https的原理？为什么https能保证安全？

浏览器输入url后发生了什么

$：细说浏览器输入URL后发生了什么

前端的安全知识？XSS、CSRF，以及如何防范

$：寒冬求职之你必须要懂的Web安全

http体系

$：巩固http知识体系

八、性能

$：前端性能优化的七大手段

减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化

节流防抖

$：前端节流（throttle）和防抖（debounce）的区别和用法

虚拟列表

$：虚拟列表的实现原理

图片懒加载

$：如何实现图片懒加载

本地存储

$：浏览器的本地存储有哪些？各自优缺点？

浏览器缓存机制

$：深入理解浏览器的缓存机制

九、Vue篇

axios原理

$：axios执行原理

vuex

config.js配置

浏览器回退机制

面试题汇总

$：30 道 Vue 面试题

$：Vue常见面试题汇总

十、webpack

webpack的基础知识

$：掘金刘小夕的webpack系列

webpack代码分割

$：webpack的代码分割（路由懒加载同理）