推荐几篇文章是我个人在面试前都会看一遍的文章：

然后这篇文章记录的就是平时看的一些知识点，不光是面试，在平时敲代码的过程中可能对你也会有所帮助，如果喜欢这篇文章，建议收藏，我会长期更新这篇文章的知识点，感谢支持。

然后，推荐一个学习与巩固JS知识的网站，本篇文章很多知识点都是从这里面提取的，写的非常好，推荐没事多看看。

最后，因为这篇文章是长期更新的，所以很多知识点标题给出了但还没有写，以后都会补上。

进阶版面试题跳转这里：自从用了ChatGPT，一切问题都变得简单起来了，看看AI怎么解答各种疑难面试题！

JS基础

JS中的变量类型

基本类型：null、undefined、boolean、number、bigint、string、symbol

复杂类型：object

引用类型：Array、Object、Function、Date、RegExp

基本包装类型：Boolean、Number、String

单体内置对象：Global、Math

undefined：没有定义的变量，var声明没有初始化的变量

symbol：一种无法被重建的基本类型，可以作为对象的属性名，可以保证属性名不重复，但不能通过for in遍历

原始类型的方法

上面说了JS有7种基本类型即原始类型。JavaScript 允许我们像使用对象一样使用原始类型（字符串，数字等）。JavaScript 还提供了这样的调用方法。

但是，这些特性（feature）都是有成本的！

对象比原始类型“更重”。它们需要额外的资源来支持运作。

以下是 JavaScript 创建者面临的悖论：

人们可能想对诸如字符串或数字之类的原始类型执行很多操作。最好将它们作为方法来访问。
原始类型必须尽可能的简单轻量。

而解决方案看起来多少有点尴尬，如下：

原始类型仍然是原始的。与预期相同，提供单个值
JavaScript 允许访问字符串，数字，布尔值和 symbol 的方法和属性。
为了使它们起作用，创建了提供额外功能的特殊“对象包装器”，使用后即被销毁。

“对象包装器”对于每种原始类型都是不同的，它们被称为 String、Number、Boolean 和 Symbol。因此，它们提供了不同的方法。

例如，字符串方法 str.toUpperCase() 返回一个大写化处理的字符串。

用法演示如下：

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

很简单，对吧？以下是 str.toUpperCase() 中实际发生的情况：

字符串 str 是一个原始值。因此，在访问其属性时，会创建一个包含字符串字面值的特殊对象，并且具有有用的方法，例如 toUpperCase()。
该方法运行并返回一个新的字符串（由 alert 显示）。
特殊对象被销毁，只留下原始值 str。

所以原始类型可以提供方法，但它们依然是轻量级的。

JavaScript 引擎高度优化了这个过程。它甚至可能跳过创建额外的对象。但是它仍然必须遵守规范，并且表现得好像它创建了一样。

总结

除 null 和 undefined 以外的原始类型都提供了许多有用的方法。
从形式上讲，这些方法通过临时对象工作，但 JavaScript 引擎可以很好地调整，以在内部对其进行优化，因此调用它们并不需要太高的成本。

Symbol

这里是Symbol的总结，详情请点击标题链接。

Symbol 是唯一标识符的基本类型

Symbol 是使用带有可选描述（name）的 Symbol() 调用创建的。

Symbol 总是不同的值，即使它们有相同的名字。如果我们希望同名的 Symbol 相等，那么我们应该使用全局注册表：Symbol.for(key) 返回（如果需要的话则创建）一个以 key 作为名字的全局 Symbol。使用 Symbol.for 多次调用 key 相同的 Symbol 时，返回的就是同一个 Symbol。

Symbol 有两个主要的使用场景：

“隐藏” 对象属性。如果我们想要向“属于”另一个脚本或者库的对象添加一个属性，我们可以创建一个 Symbol 并使用它作为属性的键。Symbol 属性不会出现在 for..in 中，因此它不会意外地被与其他属性一起处理。并且，它不会被直接访问，因为另一个脚本没有我们的 symbol。因此，该属性将受到保护，防止被意外使用或重写。

因此我们可以使用 Symbol 属性“秘密地”将一些东西隐藏到我们需要的对象中，但其他地方看不到它。
JavaScript 使用了许多系统 Symbol，这些 Symbol 可以作为 Symbol.* 访问。我们可以使用它们来改变一些内置行为。例如，在本教程的后面部分，我们将使用 Symbol.iterator 来进行迭代操作，使用 Symbol.toPrimitive 来设置对象原始值的转换等等。

从技术上说，Symbol 不是 100% 隐藏的。有一个内置方法 Object.getOwnPropertySymbols(obj) 允许我们获取所有的 Symbol。还有一个名为 Reflect.ownKeys(obj) 的方法可以返回一个对象的所有键，包括 Symbol。所以它们并不是真正的隐藏。但是大多数库、内置方法和语法结构都没有使用这些方法。

类型转换

显式类型转换（强制类型转换）

parseInt()：字符串转数字，parseFloat()同理

parseInt('abc'); // NaN
parseInt(3.14); // 3

隐式类型转换

双等==：先转换类型，再进行比较（值相等即可）

三等===：不转换类型，直接比较（值和类型相等）

减法可以做隐式的类型转换，加法不行

'12'+'5' // '125'
'12'-'5' // 7

JSON和数组的区别

数组用[]，下标是数字，有length，循环用length
JSON用{}，下标是字符串，无length，循环用for in

函数传参

arguments [] （可变参数）（不定参数）：参数个数可变，是一个数组。

例：结合ES6解构赋值，说一下下面的区别：

({a:1,b:1})=>{}
({a,b}={a:1,b:1})=>{}

函数表达式 vs 函数声明

总结一下函数声明和函数表达式之间的主要区别。

首先是语法：如何通过代码对它们进行区分。

函数声明：在主代码流中声明为单独的语句的函数。
```
// 函数声明
function sum(a, b) {
  return a + b;
}
```
函数表达式：在一个表达式中或另一个语法结构中创建的函数。下面这个函数是在赋值表达式 = 右侧创建的：
```
// 函数表达式
let sum = function(a, b) {
  return a + b;
};
```

更细微的差别是，JavaScript 引擎会在 什么时候 创建函数。

函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。

一旦代码执行到赋值表达式 let sum = function… 的右侧，此时就会开始创建该函数，并且可以从现在开始使用（分配，调用等）。

函数声明则不同。

在函数声明被定义之前，它就可以被调用。

例如，一个全局函数声明对整个脚本来说都是可见的，无论它被写在这个脚本的哪个位置。

这是内部算法的原故。当 JavaScript 准备运行脚本时，首先会在脚本中寻找全局函数声明，并创建这些函数。我们可以将其视为“初始化阶段”。

在处理完所有函数声明后，代码才被执行。所以运行时能够使用这些函数。

函数声明的另外一个特殊的功能是它们的块级作用域。

严格模式下，当一个函数声明在一个代码块内时，它在该代码块内的任何位置都是可见的。但在代码块外不可见。

例如，想象一下我们需要依赖于在代码运行过程中获得的变量 age 声明一个函数 welcome()。并且我们计划在之后的某个时间使用它。

如果我们使用函数声明，则以下代码无法像预期那样工作：

let age = prompt("What is your age?", 18);

// 有条件地声明一个函数
if (age < 18) {

  function welcome() {
    alert("Hello!");
  }

} else {

  function welcome() {
    alert("Greetings!");
  }

}

// ……稍后使用
welcome(); // Error: welcome is not defined

这是因为函数声明只在它所在的代码块中可见。

总结

函数是值。它们可以在代码的任何地方被分配，复制或声明。
如果函数在主代码流中被声明为单独的语句，则称为“函数声明”。
如果该函数是作为表达式的一部分创建的，则称其“函数表达式”。
在执行代码块之前，内部算法会先处理函数声明。所以函数声明在其被声明的代码块内的任何位置都是可见的。
函数表达式在执行流程到达时创建。

在大多数情况下，当我们需要声明一个函数时，最好使用函数声明，因为函数在被声明之前也是可见的。这使我们在代码组织方面更具灵活性，通常也会使得代码可读性更高。

深层克隆

到现在为止，我们都假设 user 的所有属性均为原始类型。但属性可以是对其他对象的引用。那应该怎样处理它们呢？

例如：

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

现在这样拷贝 clone.sizes = user.sizes 已经不足够了，因为 user.sizes 是个对象，它会以引用形式被拷贝。因此 clone 和 user 会共用一个 sizes：

就像这样：

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true，同一个对象

// user 和 clone 分享同一个 sizes
user.sizes.width++;       // 通过其中一个改变属性值
alert(clone.sizes.width); // 51，能从另外一个看到变更的结果

为了解决此问题，我们应该使用会检查每个 user[key] 的值的克隆循环，如果值是一个对象，那么也要复制它的结构。这就叫“深拷贝”。

我们可以用递归来实现。或者不自己造轮子，使用现成的实现，例如 JavaScript 库 lodash 中的 _.cloneDeep(obj)。

for-in、for-of

简单来说就是两者都可以用于遍历，不过for in遍历的是数组的索引（index），而for of遍历的是数组元素值（value）

for in

for in更适合遍历对象，当然也可以遍历数组，但是会存在一些问题，

比如：

index索引为字符串型数字，不能直接进行几何运算

var arr = [1,2,3]
    
for (let index in arr) {
  let res = index + 1
  console.log(res)
}
//01 11 21

遍历顺序有可能不是按照实际数组的内部顺序

使用for in会遍历数组所有的可枚举属性，包括原型，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性

var arr = [1,2,3]
Array.prototype.a = 123
    
for (let index in arr) {
  let res = arr[index]
  console.log(res)
}
//1 2 3 123

for(let index in arr) {
    if(arr.hasOwnProperty(index)){
        let res = arr[index]
  		console.log(res)
    }
}
// 1 2 3

for of

for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引

var arr = [1,2,3]
arr.a = 123
Array.prototype.a = 123
    
for (let value of arr) {
  console.log(value)
}
//1 2 3

for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用for in循环（这也是它的本职工作）或用内建的Object.keys()方法

var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key of Object.keys(myObject)) {
  console.log(key + ": " + myObject[key]);
}
//a:1 b:2 c:3
复制代码

小结

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

for in总是得到对象的key或数组、字符串的下标

for of总是得到对象的value或数组、字符串的值

类型判断

方式	特性	缺点
`typeof`	`typeof`可以识别出基本类型`boolean,number,undefined,string,symbol`，可以识别出`function`。`typeof`可以用来识别一些基本类型。	不能识别`null`。不能识别引用数据类型，会把`null、array、object`统一归为`object`类型。
`instanceof`	可以检测出引用类型，如`array、object、function`，同时对于是使用`new`声明的类型，它还可以检测出多层继承关系。其实也很好理解，js的继承都是采用原型链来继承的。比如`objA instanceof A` ，其实就是看objA的原型链上是否有A的原型，而A的原型上保留A的`constructor`属性。所以`instanceof`一般用来检测对象类型，以及继承关系。	`instanceof`不能识别出基本的数据类型 `number、boolean、string、undefined、unll、symbol`。
`constructor`	指向构造函数，可以用来识别一些基本类型。	`null、undefined`没有`construstor`方法，因此`constructor`不能判断`undefined`和`null`。它是不安全的，因为`contructor`的指向是可以被改变。
`toString`	此方法可以相对较全的判断js的数据类型。最完美的方案。	无

// 基本数据类型：Undefined、Null、Boolean、Number、String，Symbol
// 引用数据类型 ：Object
let bool = true;
let num = 1;
let str = 'abc';
let  und= undefined;
let nul = null;
let arr = [1,2,3,4];
let obj = {name:'xiaoming',age:22};
let fun = function(){console.log('hello')};
let s1 = Symbol();
// ------------- typeof ----------------
console.log(typeof bool); //boolean
console.log(typeof num);//number
console.log(typeof str);//string
console.log(typeof und);//undefined
console.log(typeof nul);//object
console.log(typeof arr);//object
console.log(typeof obj);//object
console.log(typeof fun);//function
console.log(typeof s1); //symbol
// ------------- instanceof ----------------
console.log(bool instanceof Boolean);// false
console.log(num instanceof Number);// false
console.log(str instanceof String);// false
console.log(und instanceof Object);// false
console.log(nul instanceof Object);// false
console.log(arr instanceof Array);// true
console.log(obj instanceof Object);// true
console.log(fun instanceof Function);// true
console.log(s1 instanceof Symbol);// false
// ------------- constructor ----------------
console.log(bool.constructor === Boolean);// true
console.log(num.constructor === Number);// true
console.log(str.constructor === String);// true
console.log(arr.constructor === Array);// true
console.log(obj.constructor === Object);// true
console.log(fun.constructor === Function);// true
console.log(s1.constructor === Symbol);//true
// ------------- typeof ----------------
console.log(Object.prototype.toString.call(bool));//[object Boolean]
console.log(Object.prototype.toString.call(num));//[object Number]
console.log(Object.prototype.toString.call(str));//[object String]
console.log(Object.prototype.toString.call(und));//[object Undefined]
console.log(Object.prototype.toString.call(nul));//[object Null]
console.log(Object.prototype.toString.call(arr));//[object Array]
console.log(Object.prototype.toString.call(obj));//[object Object]
console.log(Object.prototype.toString.call(fun));//[object Function]
console.log(Object.prototype.toString.call(s1)); //[object Symbol]

总结：在项目中使用哪个判断，还是要看使用场景，具体的选择，一般基本的类型可以选择typeof，引用类型可以使用instanceof。

CSS布局

flex

这里推荐一篇文章，推荐速览

grid

页面上的弹性布局第一推荐，也推荐一篇文章速览

BFC

BFC全称 Block Formatting Context 即块级格式上下文，简单的说，BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界。

如何触发BFC

float不为 none
overflow的值不为 visible
position 为 absolute 或 fixed
display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则是什么

BFC是页面上的一个隔离的独立容器，不受外界干扰或干扰外界
计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）
BFC的区域不会与float的元素区域重叠
BFC内部的元素会在垂直方向上放置
BFC内部两个相邻元素的margin会发生重叠

BFC的应用场景

清除浮动：BFC内部的浮动元素会参与高度计算，因此可用于清除浮动，防止高度塌陷
避免某元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠
阻止外边距重叠：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

CSS3伪类与伪元素

伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素

那如何区分伪元素和伪类，记住两点：

1. 伪类表示被选择元素的某种状态，例如:hover

2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after

核心区别在于，是否创造了“新的元素”。

其余详细说明可点击标题的连接查看。

搞清楚定义，还要知道如何使用，这点很重要。这里也有一篇文章，推荐速览。

Promise

前端必须搞懂的一个东西，面试太常问了！！！

这里涉及了几个知识点，我都整理在了一篇文章里，强烈推荐看一看。

如果了解了Promise的实现原理，这里列出几个比较深的问题：

1、Promise 中为什么要引入微任务？

由于promise采用.then延时绑定回调机制，而new Promise时又需要直接执行promise中的方法，即发生了先执行方法后添加回调的过程，此时需等待then方法绑定两个回调后才能继续执行方法回调，便可将回调添加到当前js调用栈中执行结束后的任务队列中，由于宏任务较多容易堵塞，则采用了微任务。

2、Promise 中是如何实现回调函数返回值穿透的？

首先Promise的执行结果保存在promise的data变量中，然后是.then方法返回值为使用resolved或rejected回调方法新建的一个promise对象，即例如成功则返回new Promise（resolved），将前一个promise的data值赋给新建的promise。

3、Promise 出错后，是怎么通过“冒泡”传递给最后那个捕获？

promise内部有resolved_和rejected_变量保存成功和失败的回调，进入.then（resolved，rejected）时会判断rejected参数是否为函数，若是函数，错误时使用rejected处理错误；若不是，则错误时直接throw错误，一直传递到最后的捕获，若最后没有被捕获，则会报错。可通过监听unhandledrejection事件捕获未处理的promise错误。

定时器

有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行。这就是所谓的“计划调用（scheduling a call）”。

目前有两种方式可以实现：

setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

这两个方法并不在 JavaScript 的规范中。但是大多数运行环境都有内建的调度程序，并且提供了这些方法。目前来讲，所有浏览器以及 Node.js 都支持这两个方法。

说一下周期性调度，一种是使用 setInterval，另外一种就是嵌套的 setTimeout，就像这样：

下面来比较这两个代码片段。第一个使用的是 setInterval：

let i = 1;
setInterval(function() {
  func(i++);
}, 100);

第二个使用的是嵌套的 setTimeout：

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100); // (*)
}, 100);

上面这个 setTimeout 在当前这一次函数执行完时 (*) 立即调度下一次调用。

嵌套的 setTimeout 要比 setInterval 灵活得多。采用这种方式可以根据当前执行结果来调度下一次调用，因此下一次调用可以与当前这一次不同。

例如，我们要实现一个服务（server），每间隔 5 秒向服务器发送一个数据请求，但如果服务器过载了，那么就要降低请求频率，比如将间隔增加到 10、20、40 秒等。

并且，如果我们调度的函数占用大量的 CPU，那么我们可以测量执行所需要花费的时间，并安排下次调用是应该提前还是推迟。

嵌套的 setTimeout 能够精确地设置两次执行之间的延时，而 setInterval 却不能。

就上面的例子，对 setInterval 而言，内部的调度程序会每间隔 100 毫秒执行：

注意到了吗？

使用 setInterval 时，func 函数的实际调用间隔要比代码中设定的时间间隔要短！

这也是正常的，因为 func 的执行所花费的时间“消耗”了一部分间隔时间。

也可能出现这种情况，就是 func 的执行所花费的时间比我们预期的时间更长，并且超出了 100 毫秒。

在这种情况下，JavaScript 引擎会等待 func 执行完成，然后检查调度程序，如果时间到了，则立即再次执行它。

极端情况下，如果函数每次执行时间都超过 delay 设置的时间，那么每次调用之间将完全没有停顿。

这是嵌套的 setTimeout 的示意图：

嵌套的 setTimeout 就能确保延时的固定（这里是 100 毫秒）。

这是因为下一次调用是在前一次调用完成时再调度的。

垃圾回收和 setInterval/setTimeout 回调（callback）

当一个函数传入 setInterval/setTimeout 时，将为其创建一个内部引用，并保存在调度程序中。这样，即使这个函数没有其他引用，也能防止垃圾回收器（GC）将其回收。
// 在调度程序调用这个函数之前，这个函数将一直存在于内存中
setTimeout(function() {...}, 100);
对于 setInterval，传入的函数也是一直存在于内存中，直到 clearInterval 被调用。

这里还要提到一个副作用。如果函数引用了外部变量（译注：闭包），那么只要这个函数还存在，外部变量也会随之存在。它们可能比函数本身占用更多的内存。因此，当我们不再需要调度函数时，最好取消它，即使这是个（占用内存）很小的函数。

最后请注意，所有的调度方法都不能保证确切的延时。

例如，浏览器内的计时器可能由于许多原因而变慢：

CPU 过载。
浏览器页签处于后台模式。
笔记本电脑用的是电池供电（译注：使用电池供电会以降低性能为代价提升续航）。

所有这些因素，可能会将定时器的最小计时器分辨率（最小延迟）增加到 300ms 甚至 1000ms，具体以浏览器及其设置为准。

AJAX

定时器 VS AJAX

ajax(...successCallback: (res)=>{console.log(1)});
setTimeout(()=>{console.log(2)})

入上述代码所示，是先输出1还是2？

首先我们知道ajax和定时器都是宏任务，那这里就要确认这种不确定回调时间的宏任务是直接加入宏任务队列的吗？

答案是否定的，比如setTimeout在js执行到的时候是不会直接往宏任务队列中添加的，js会开启一个计时器线程，等到计时器时间到了，再添加到宏任务队列。

那么以此类推，ajax请求应该也是类似的，只有请求返回了，才会把回调任务加入宏任务队列。

再回头看在上面的代码我们知道，浏览器中计时器最小时间为4ms，也就是说4ms之后输出2，但是ajax请求的过程就比较复杂，即使很快的返回了，那也是需要经历一整个网络请求流程，所以不会在4ms之内完成，所以我们可以基本确定，先输出2，再输出1。

当然这块只是我个人的理解，可以提出疑问。

闭包

永远记住闭包的方法是通过背包的类比。当一个函数被创建并传递或从另一个函数返回时，它会携带一个背包。背包中是函数声明时作用域内的所有变量。

如果问到闭包的实际应用，那下面的函数防抖和函数节流是最好的例子。

常用方法

函数防抖

防抖，即短时间内大量触发同一事件，只会执行一次函数，实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。

function debounce(func, wait) {
    let timeout = null
    return function() {
        let context = this
        let args = arguments
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait)
    }
}

函数节流

防抖是延迟执行，而节流是间隔执行，函数节流即每隔一段时间就执行一次，实现原理为设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器

function throttle(func, wait) {
    var prev = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - prev > wait) {
            func.apply(context, args);
            prev = now;
        }
    }
}

前端概念与知识

MVVM

MVVM（Model-View-ViewModel）是对MVC（Model-View-Control）和MVP（Model-View-Presenter）的进一步改进。
- View：视图层（UI用户界面）
- ViewModel：业务逻辑层（一切JS可视为业务逻辑）
- Model：数据层（存储数据及对数据的处理，如增删改查）
MVVM将数据双向绑定（data-binding）作为核心思想，View和Model之间没有联系，他们通过ViewModel这个桥梁进行交互。
Model和ViewModel之间的交互是双向的，因此View的变化会自动同步到Model，而Model的变化也会立即反映到View上显示。

JS和ES的关系

JS由三部分组成：ES+DOM（文档对象模型）+BOM（浏览器对象模型）
ES作为核心，是一套标准，规范了语言的组成，JS是ES规范的实现

解决跨域问题

JSONP
CORS
通过修改document.domain来跨子域
使用window.name来进行跨域
使用window.postMessage方法
flash
在服务器上设置代理页面

XML和JSON的区别

数据体积方面

JSON相对XML来讲数据体积小，传递速度快
数据交互方面

JSON与JS的交互更加方便，更容易解析处理，更好的数据交互
数据描述方面

JSON的数据描述性比XML差
传输速度方面

JSON的速度远快于XML

浏览器缓存策略

浏览器缓存位置和优先级

Service Worker
Memory Cache（内存缓存）
Disk Cache（硬盘缓存）
Push Cache（推送缓存）
以上缓存都没命中就会进行网络请求

不同缓存间的差别

Service Worker

和Web Worker类似，是独立的线程，我们可以在这个线程中缓存文件，在主线程需要的时候读取这里的文件，Service Worker使我们可以自由选择缓存哪些文件以及文件的匹配、读取规则，并且缓存是持续性的

Memory Cache

即内存缓存，内存缓存不是持续性的，缓存会随着进程释放而释放

Disk Cache

即硬盘缓存，相较于内存缓存，硬盘缓存的持续性和容量更优，它会根据HTTP header的字段判断哪些资源需要缓存

Push Cache

即推送缓存，是HTTP/2的内容，目前应用较少

浏览器缓存策略

强缓存(不要向服务器询问的缓存)

设置Expires

即过期时间，例如「Expires: Thu, 26 Dec 2019 10:30:42 GMT」表示缓存会在这个时间后失效，这个过期日期是绝对日期，如果修改了本地日期，或者本地日期与服务器日期不一致，那么将导致缓存过期时间错误。

设置Cache-Control

HTTP/1.1新增字段，Cache-Control可以通过max-age字段来设置过期时间，例如「Cache-Control:max-age=3600」除此之外Cache-Control还能设置private/no-cache等多种字段

协商缓存(需要向服务器询问缓存是否已经过期)

Last-Modified

即最后修改时间，浏览器第一次请求资源时，服务器会在响应头上加上Last-Modified ，当浏览器再次请求该资源时，浏览器会在请求头中带上If-Modified-Since 字段，字段的值就是之前服务器返回的最后修改时间，服务器对比这两个时间，若相同则返回304，否则返回新资源，并更新Last-Modified

ETag

HTTP/1.1新增字段，表示文件唯一标识，只要文件内容改动，ETag就会重新计算。缓存流程和 Last-Modified 一样：服务器发送 ETag 字段 -> 浏览器再次请求时发送 If-None-Match -> 如果ETag值不匹配，说明文件已经改变，返回新资源并更新ETag，若匹配则返回304

两者对比

ETag 比 Last-Modified 更准确：如果我们打开文件但并没有修改，Last-Modified 也会改变，并且 Last-Modified 的单位时间为一秒，如果一秒内修改完了文件，那么还是会命中缓存
如果什么缓存策略都没有设置，那么浏览器会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间

事件冒泡与事件委托（代理）

重排与重绘

一篇文章推荐阅读，文章把渲染队列和优化建议说的很通俗易懂，能快速理解这其中的原理。

这里还有一个罗列所有重绘与重排相关的css属性的网站，挺好玩的。

JS垃圾回收机制

对于开发者来说，JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。

当我们不再需要某个东西时会发生什么？JavaScript 引擎如何发现它并清理它？

可达性（Reachability）

JavaScript 中主要的内存管理概念是 可达性。

简而言之，“可达”值是那些以某种方式可访问或可用的值。它们一定是存储在内存中的。

这里列出固有的可达值的基本集合，这些值明显不能被释放。

比方说：
- 当前函数的局部变量和参数。
- 嵌套调用时，当前调用链上所有函数的变量与参数。
- 全局变量。
- （还有一些内部的）
这些值被称作 根（roots）。
如果一个值可以通过引用或引用链从根访问任何其他值，则认为该值是可达的。对外引用不重要，只有传入引用才可以使对象可达。

比方说，如果全局变量中有一个对象，并且该对象有一个属性引用了另一个对象，则该对象被认为是可达的。而且它引用的内容也是可达的。

几个对象相互引用，但外部没有对其任意对象的引用，这些对象也可能是不可达的，并被从内存中删除。

在 JavaScript 引擎中有一个被称作垃圾回收器的东西在后台执行。它监控着所有对象的状态，并删除掉那些已经不可达的。

内部算法

垃圾回收的基本算法被称为 “mark-and-sweep”。

定期执行以下“垃圾回收”步骤：

垃圾收集器找到所有的根，并“标记”（记住）它们。
然后它遍历并“标记”来自它们的所有引用。
然后它遍历标记的对象并标记 它们的 引用。所有被遍历到的对象都会被记住，以免将来再次遍历到同一个对象。
……如此操作，直到所有可达的（从根部）引用都被访问到。
没有被标记的对象都会被删除。

我们还可以将这个过程想象成从根溢出一个巨大的油漆桶，它流经所有引用并标记所有可到达的对象。然后移除未标记的。

这是垃圾收集工作的概念。JavaScript 引擎做了许多优化，使垃圾回收运行速度更快，并且不影响正常代码运行。

一些优化建议：

分代收集（Generational collection）—— 对象被分成两组：“新的”和“旧的”。许多对象出现，完成它们的工作并很快死去，它们可以很快被清理。那些长期存活的对象会变得“老旧”，而且被检查的频次也会减少。
增量收集（Incremental collection）—— 如果有许多对象，并且我们试图一次遍历并标记整个对象集，则可能需要一些时间，并在执行过程中带来明显的延迟。所以引擎试图将垃圾收集工作分成几部分来做。然后将这几部分会逐一进行处理。这需要它们之间有额外的标记来追踪变化，但是这样会有许多微小的延迟而不是一个大的延迟。
闲时收集（Idle-time collection）—— 垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。

总结

主要需要掌握的内容：

垃圾回收是自动完成的，我们不能强制执行或是阻止执行。
当对象是可达状态时，它一定是存在于内存中的。
被引用与可访问（从一个根）不同：一组相互连接的对象可能整体都不可达。

如何加快页面加载

这是个大的课题，绝对不是简单的用webpack模块化打包、文件压缩等等这些常规的前端操作就能概述完的，我以后也会专门写一篇文章，从域名解析开始到页面加载完全，这期间每个步骤的优化点都会展开来讲讲。

HTTP

前端安全

什么是CSRF攻击

CSRF即Cross-site request forgery(跨站请求伪造)，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

假如黑客在自己的站点上放置了其他网站的外链，例如www.weibo.com/api，默认情况下，浏览器会带着weibo.com的cookie访问这个网址，如果用户已登录过该网站且网站没有对CSRF攻击进行防御，那么服务器就会认为是用户本人在调用此接口并执行相关操作，致使账号被劫持。

如何防御CSRF攻击

验证Token：浏览器请求服务器时，服务器返回一个token，每个请求都需要同时带上token和cookie才会被认为是合法请求
验证Referer：通过验证请求头的Referer来验证来源站点，但请求头很容易伪造
设置SameSite：设置cookie的SameSite，可以让cookie不随跨域请求发出，但浏览器兼容不一

什么是XSS攻击

XSS即Cross Site Scripting（跨站脚本），指的是通过利用网页开发时留下的漏洞，注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。常见的例如在评论区植入JS代码，用户进入评论页时代码被执行，造成页面被植入广告、账号信息被窃取

XSS攻击有哪些类型

存储型：即攻击被存储在服务端，常见的是在评论区插入攻击脚本，如果脚本被储存到服务端，那么所有看见对应评论的用户都会受到攻击。
反射型：攻击者将脚本混在URL里，服务端接收到URL将恶意代码当做参数取出并拼接在HTML里返回，浏览器解析此HTML后即执行恶意代码
DOM型：将攻击脚本写在URL中，诱导用户点击该URL，如果URL被解析，那么攻击脚本就会被运行。和前两者的差别主要在于DOM型攻击不经过服务端

如何防御XSS攻击

输入检查：对输入内容中的<script><iframe>等标签进行转义或者过滤
设置httpOnly：很多XSS攻击目标都是窃取用户cookie伪造身份认证，设置此属性可防止JS获取cookie
开启CSP，即开启白名单，可阻止白名单以外的资源加载和运行

浏览器相关

页面从点击到加载完成经历了哪些

浏览器从URL中解析出服务器的主机名
浏览器将服务器的主机名转换成服务器的IP地址
浏览器将端口号（如果有的话）从URL中解析出来
浏览器建立一条与Web服务器的TCP连接
浏览器向服务器发送一条HTTP请求报文
服务器向浏览器回送一条HTTP响应报文
关闭连接，浏览器显示文档

如果你想详细地了解这一过程可以查看我的深入浏览器之页面加载中的计算机网络，中间用了很多计算机网络的知识来详细讲解这一过程。

浏览器请求页面时，各个进程间是怎么配合的？

用户输入url并回车。
用户输入URL，浏览器进程会根据用户输入的信息判断是搜索还是网址，如果是搜索内容，就将搜索内容+默认搜索引擎合成新的URL；如果用户输入的内容符合URL规则，浏览器进程就会根据URL协议，在这段内容上加上协议合成合法的URL。
浏览器导航栏显示loading状态，但是页面还是呈现之前的页面不变，因为新页面的响应数据还没有获得。
浏览器进程构建请求行信息，通过进程间通信（IPC）把url请求发送给网络进程
网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程
如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：
1. 进行DNS解析，获取服务器ip地址
2. 利用ip地址和服务器建立tcp连接
3. 完成构建请求信息并发送请求
4. 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
网络进程解析响应流程：
1. 检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步，如果是200，则继续处理请求。
2. 检查响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染，如果是html等资源则将其转发给浏览器进程。
浏览器进程接收到网络进程的响应头数据之后，检查当前url是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程。
渲染进程准备好后，浏览器进程发送CommitNavigation消息到渲染进程，发送CommitNavigation时会携带响应头、等基本信息。渲染进程接收到消息和网络进程建立传输数据的“管道”。
渲染进程接收完数据后，向浏览器进程发送“确认提交”。
浏览器进程接收到确认消息后更新浏览器界面状态：安全、地址栏url、前进后退的历史状态、更新web页面。

如果下载 CSS 文件阻塞了，会阻塞 DOM 树的合成吗？会阻塞页面的显示吗？

当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了，在解析过程中，如果遇到了JS脚本，如下所示：

<html>     
  <body>         
    极客时间         
    <script>         
      document.write("--foo")         
    </script>     
  </body> 
</html>

那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。那么第二种情况复杂点了，我们内联的脚本替换成js外部文件，如下所示：

 <html>     
   <body>         
     极客时间         
     <script type="text/javascript" src="foo.js"></script>     
   </body> 
</html>

这种情况下，当解析到JavaScript的时候，会先暂停DOM解析，并下载foo.js文件，下载完成之后执行该段JS文件，然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。我们再看第三种情况，还是看下面代码：

<html>     
  <head>         
    <style type="text/css" src = "theme.css" ></style>     
  </head>     
  <body>         
    <p>极客时间</p>         
    <script>
      let e = document.getElementsByTagName('p')[0]             
      e.style.color = 'blue'         
    </script>     
  </body> 
</html>

当我在JavaScript中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析。

浏览器的渲染流程是什么？

渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
创建布局树，并计算元素的布局信息。
对布局树进行分层，并生成分层树。
为每个图层生成绘制列表，并将其提交到合成线程。
合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

为什么减少重绘、重排能优化 Web 性能吗？那又有那些具体的实践方法能减少重绘、重排呢？

重排需要更新完整的渲染流水线，所以开销也是最大的。

相较于重排操作，重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。

如果更改一个既不要布局也不要绘制的属性，渲染引擎将跳过布局和绘制，只执行后续的合成操作，我们把这个过程叫做合成。

使用 CSS 的 transform 来实现动画效果，可以避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的，因为是在非主线程上合成，并没有占用主线程的资源，另外也避开了布局和绘制两个子阶段，所以相对于重绘和重排，合成能大大提升绘制效率。

减少重排重绘, 方法很多：

使用 class 操作样式，而不是频繁操作 style
避免使用 table 布局
批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
Debounce window resize 事件
对 dom 属性的读写要分离
will-change: transform 做优化

总有一个你不知道的前端面试知识点（长期更新）

JS基础

JS中的变量类型

类型转换

JSON和数组的区别

函数传参

类型判断

CSS布局

Promise

AJAX

定时器 VS AJAX

常用方法

函数防抖

函数节流

前端概念与知识

MVVM

JS和ES的关系

解决跨域问题

XML和JSON的区别

浏览器缓存位置和优先级

不同缓存间的差别

浏览器缓存策略

事件冒泡与事件委托（代理）

重排与重绘

JS垃圾回收机制

如何加快页面加载

HTTP

什么是CSRF攻击

如何防御CSRF攻击

什么是XSS攻击

XSS攻击有哪些类型

如何防御XSS攻击

浏览器相关

页面从点击到加载完成经历了哪些

浏览器请求页面时，各个进程间是怎么配合的？

如果下载 CSS 文件阻塞了，会阻塞 DOM 树的合成吗？会阻塞页面的显示吗？

浏览器的渲染流程是什么？

为什么减少重绘、重排能优化 Web 性能吗？那又有那些具体的实践方法能减少重绘、重排呢？