前端面试知识点整理（附答案）

摘要：知识点目录基于根据个人理解对每个知识点附上的答案，有错误欢迎大家指出。结构化也是为了增加代码可读性，提升网页质量，比如表示文档页眉页脚，表示导航等。提供标签新增容器标签，结合绘制图形路径文本等。

知识点目录基于 https://segmentfault.com/a/1190000018603454
根据个人理解对每个知识点附上的答案，有错误欢迎大家指出。

html

1. html语义化标签的理解、结构化的理解

大部分情况，采用div+css就可以实现静态页面，但是这样的布局会导致文档结构不够清晰，而且不利于浏览器的读取。而如果采用语义强的标签，比如用H系列标签表示标题,strong表示强调等，这样就能提升网站的可读性，便与团队开发和维护。

结构化也是为了增加代码可读性，提升网页质量，比如header、footer表示文档页眉页脚，nav表示导航等。

2. 能否写出简洁的html结构

    
        
        
    
    
        内容
    

3. SEO优化

h1标签页面只能出现一次，权重最高

减少div标签的使用，尽量使用语义化强的标签

注重meta标签的使用，比如name属性设置为description、keywords等，对搜索引擎的索引有帮助。

注重a标签和img标签的链接(title)和图片说明(alt)

减少http请求次数，合理设置http缓存(合并css、js、图片等外部资源文件)

减少图片数量，小图标可以用精灵图的方式

启用文件压缩等

4. html5新增了哪些特性

增加语义标签

header、footer、nav、section文档中的一节、article页面的独立内容区域、aside页面侧边栏内容、detailes文档某个细节部分、summary包含details元素的标题、dialog对话框

增强表单

提供input更多输入类型，如color、date、email、number、range、tel、week、url、search等；新的表单元素datalist(其id属性与input的list属性绑定，实现选项列表输入)；新表单元素keygen、output等；新增placehoder、required、pattern、min、max、step、height、width、autofocus、multiple属性。

提供audio、video标签

新增canvas容器标签，结合js绘制图形、路径、文本等。

还有moveTo(x,y)线条开始坐标、lineTo(x,y)线条结束坐标；
fillText(text,x,y)实心文本、strokeText(text,x,y)心文本;
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
drawImage(image,x,y) - 将图片放在画布上等

新增API

网络：
    检测网络状态: window.navigator.onLine
    事件监听：online和offline 监听连上网络和断开网络
地理定位：
    获取当前地理信息:
    window.navigator.geolocation.getCurrentPosition(
        successCallback, 
        errorCallback, 
        options
    )
    重复获取当前地理信息:
    window.navigator.geolocation.watchPosition(
        successCallback, 
        errorCallback, 
        options
    )
    成功的回调参数:
        position.coords.latitude 纬度
        position.coords.longitude经度
web存储:
    sessionStorage(生命周期为关闭浏览器) 5M
    localStorage(永久生效，除非手动删除) 20M
全屏:
    允许用户自定义网上任一元素全屏显示：
        requestFullScreen() 开启全屏
        cancelFullScreen() 关闭全屏
文件读取:
    FileList对象，input上传文件后返回该对象
    FileReader对象：
        读取：readAsDataURL(file.files[0])
        监听: onload
拖拽：
    给元素设置draggable="true"，其中img和a标签默认可拖拽
    事件监听：
        拖拽元素:
        drag: 拖拽过程中一直调用
        dragstart: 拖拽开始调用
        dragleave: 鼠标离开拖拽元素调用
        dragend: 拖拽结束调用
        目标元素:
        dragenter：拖拽元素进入时调用
        dragover：停留在目标元素上时调用,注意阻止浏览器默认行为(event.preventDefault())
        drop：当在目标元素上松开鼠标时调用
        dragleave：当鼠标离开目标元素时调用
    可以通过dataTransfer拿到当前的拖拽进来的文件列表
多媒体：
    load()、play()、pause()

css

1. css选择器

标签~

类~

id~

并集~（逗号）

交集~（标签连写）

后代~（空格）

子~（>）

相邻兄弟~（+）

兄弟~（~）

通配符~（*）

属性~（[]）

序~（:first-child、:last-child、nth-child等）

伪类~

伪元素~

css3新增的属性和选择器:
    属性选择器、伪类选择器、反选伪类（:not()）
    box-shadow、border-image、
    text-overflow(clip|ellipsis|string)、word-wrap、border-radius、opacity、
    box-sizing、resize、
    background-size、background-origin、background-clip
    transform、trasition、animation

2. 三大特性

继承性（父元素设置属性，子元素默认也生效。color-|font-|text-|line-开头的可以继承）

层叠性（多个选择器选中同一元素，修改同一属性时。觉得如何生效需要根据优先级判断）

优先级

3. BFC机制

BFC（Block Formatting Context）概念

格式化上下文，指一个独立的渲染区域或者说是一个隔离的独立容器

形成BFC的条件

浮动元素，float除none以外的值

定位元素，position（absolute、fixed）

display（inline-block、table-cell、table-caption）

overflow（除visible以外的值）hidden、auto、scroll

body根元素

BFC的特性

是个独立容器，内部元素不会影响外面元素

不被浮动元素覆盖

父元素是BFC时，不会被子元素的margin挤下来

BFC容器的高度，内部浮动元素也参与计算（比如overflow:hidden清除浮动，可以让内部浮动元素也能撑开父元素高度）

4. 盒模型

将元素类比为一个盒子，有外边距、边框、内边距、宽度、高度五个元素决定齐所占的元素空间大小

常见问题：

padding内边距会导致元素的宽度和高度变化

可通过box-sizing:border-box锁定元素宽高;

content-box 元素的宽高 = 边框 + 内边距 + 内容宽高
border-box 元素的宽高 = width/height的宽高

margin合并现象（默认垂直方向的外边距不会叠加，会出现合并，谁的边距大就按照谁的来）；

将其中一个元素放入一个BFC模式的元素内（不推荐，会改变文档结构）；一般会给其中一个元素设置margin-bottom直接给够距离

margin塌陷现象，内部盒子的外边距会将父盒子顶下来

利用BFC机制，比如父盒子设置overflow:hidden；

宽度高度问题

内容宽高 = width/height
元素宽高 = 边框+内边距+width/height;设置box-sizing:border-box后值为：width/height
元素空间的宽高：外边距+边框+内边距+width/height

5.css模块化开发（css预处理器：stylus/scss/less）

css预处理器方便开发，无需考虑浏览器兼容问题，代码模块化、清晰简洁
scss 是 sass3 引入新的语法，其语法完全兼容 css3，并且继承了 sass 的强大功能。sass 和 scss 其实是同一种东西，我们平时都称之为 sass，两者之间不同之处有以下两点：1.文件扩展名不同(.sass/.scss);2.语法书写方式不同，sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 scss 的语法书写和我们的 css 语法书写方式非常类似。

6. 屏幕适配以及页面自适应

允许网页宽度自动调整

宽度百分比

相对字体rem/em

流动布局，利用float或者display:fixed等

使用css media模块

@media screen and (min-width: 768px) and (max-width: 1024px)
    ...

图片自适应，max-width/min-width等

7. 布局相关

标准文档流(padding+margin)+浮动+定位

百分比布局

flex弹性布局

grid栅格布局（display:grid），使用框架中的类名来替代，本质上还是百分比布局

JavaScript

1. 变量数据类型及检测：基本 + 引用

基本：String、Number、Boolean、Undefined、Null
引用：Object（Array、Function...）
检测：
   typeof(用于基本类型;typeof null返回object;typeof []返回object)
          变量 === null ? "null" : typeof 变量
   instanceof(用于引用类型；不适用undefined和null)
   (变量).constructor(不适用undefined和null)
   Object.prototype.toString.call(),可以解决判断所有类型

2. 运算符

算术运算符(+、-、*、/、%、++、--)

赋值运算符(=、+=、-=、*=、/=、%=)

条件运算符(三元表达式)

逻辑运算符(!、&&(短路，第一个值为false，第二个值不用检测了)、||(短路，第一个值为true，第二个值不用检测了))

比较运算符(双等于、===、!=、>、<、>=、<=)

位运算符(非~、按位与&、按位或|、异或^、左移<<、有符号右移>>、无符号右移>>>)

显示类型转换(Boolean()、Number()、String()、Object()等)

隐示类型转换

+运算符的一个值如果是字符串，它会把另一个值转为字符串拼接
一元+，会将值试图转为数字，如 +"5"
一元!，会将值试图转为boolean，再取反
在做比较运算时，也会发生很多隐示转换：
    对象转字符串再转数字
    布尔转数字
    字符串转数字

条件语句(if、switch case)；循环语句(for、while、do while、foreach、for of、for in等)

3. 函数

函数定义：
    function example(param){}
    const example = function(param){}
    (function (param){})()
    const example = new Function("param", "")
    (param) => {} 箭头函数内的this与外层的this一样，箭头函数不能提升
函数调用：
    函数名调用 example(param)相当于window.example(param)
    作为方法调用，比如某个对象中的行为 obj.example(param)
    构造函数调用 const exampleObj = new example(param); exampleObj.属性/行为
    作为函数方法调用函数call()、apply()：
        obj = example.call(obj, param1, param2)
        obj = example.apply(obj, paramArray)

call和apply详解：

在javascript中，call和apply都是为了改变某个函数运行时的上下文(context)而存在的，换句话说，就是为了改变函数体内部this的指向。
function fruits() {}
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
var apple = new fruits;
apple.say();    //My color is red

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow
所以，可以看出call和apply是为了动态改变this而出现的，当一个object没有某个方法（本例子中banana没有say方法），
但是其他的有（本例子中apple有say方法），我们可以借助call或apply用其它对象的方法来操作。

二者区别：
    func.call(this, arg1, arg2); 若干个参数
    func.apply(this, [arg1, arg2]); 数组参数
    
常用实例：
数组追加：
    var array1 = [12 , "foo" , {name:"Joe"} , -2458]; 
    var array2 = ["Doe" , 555 , 100]; 
    Array.prototype.push.apply(array1, array2); 
    // array1 值为  [12 , "foo" , {name:"Joe"} , -2458 , "Doe" , 555 , 100]
获取数组中的最大值和最小值：
    var numbers = [5, 458 , 120 , -215 ];
    var maxInNumbers = Math.max.apply(Math, numbers), //458
        maxInNumbers = Math.max.call(Math, 5, 458, 120, -215); //458
    // number 本身没有 max 方法，但是 Math 有，我们就可以借助 call 或者 apply 使用其方法。
验证是否是数组（前提是toString()方法没有被重写过）：
    functionisArray(obj){ 
        return Object.prototype.toString.call(obj) === "[object Array]" ;
    }
真伪数组转换：
    真转伪：[].push.apply(obj, arr);
    伪转真：[].slice.call(obj);
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用

实参形参传值问题

基本类型，按值传递（函数内部修改形参值，不会影响外部实参值）
引用类型，按对象共享传递
    var obj = {};
    function f(o) {
        o.name = "li";
    }
    f(obj);
    console.log(obj.name); //li  被修改了

    var obj = {};
    function f(o) {
        o = [];
    }
    f(obj);
    console.log(obj); //{}  没有修改
    调用函数传参时，函数接受对象实参引用的副本(既不是按值传递的对象副本，也不是按引用传递的隐式引用)。
    它和按引用传递的不同在于：在共享传递中对函数形参的赋值，不会影响实参的值。如下面例子中，不可以通过修改形参o的值，来修改obj的值。
    也就是说不可以改变引用类型的指针，只可以改变这个对象的属性

4. 字符串、数组、对象常用API

数组方法

concat()拼接数组，参数是任意个值或者数组，返回新数组，不影响原数组
join()将数组的值用指定分隔符转成字符串，不传参默认为逗号,返回新值，不影响原值
pop()删除并返回数组最后一个元素
push()向数组末尾添加一个或多个元素，返回数组新长度
shift()删除并返回数组第一个元素
unshift()想数组开头添加一个或多个元素，返回数组新长度

slice(start,end)包含头不包含尾，返回新值对原值没有影响
splice(index,howmany,item1...,itemX)
    可用于替换，删除，添加；
    howmany表示要删除的个数,返回被删除的值组成的数组，原数组被修改
    
sort()对数组元素排序,修改原值
reverse()点到数组中元素的顺序,修改原值

every()是对数组中的每一项运行给定函数，如果每一项都返回true，则返回true
some()是对数组中的每一项运行给定函数，如果对任一项返回true，则返回true
filter()是对数组中的每一项运行给定函数，返回该函数返回true的项组成数组
map()是对数组中的每一项运行给定函数，返回每次函数调用的结果组成数组
reduce()从数组元素中计算出一个值
arr.indexOf("")查找数组，判断数组中是否含有某一项

字符串

三个字符方法：
charAt()返回给定位置的字符
charCodeAt()返回给定位置的字符编码
str[index]直接用方括号加索引也能返回指定位置的字符，IE7及更早版本不支持

操作字符串方法：
concat()用于拼接字符串，可传任意个参数
slice(start,end)包含头不包含尾，返回新值对原值没有影响
substring(start,end)包含头不包含尾，返回新值对原值没有影响
substr(start,num)第二个参数为个数，返回新值对原值没有影响

字符串位置方法：
indexOf()从前往后找、lastIndexOf()从后往前找

大小写：
toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()
都是返回新值对原值没有影响

字符串的模式匹配方法：
match()参数为正则表达式或者RegExp对象，返回匹配的数组
search()返回字符串中第一个匹配项的索引，如果没找到就返回-1
replace(egexp/substr, replacement/function)，返回新值对原值没有影响
split()基于分隔符分割字符串，返回新数组对原值没有影响

trim()删除字符串前后所有空格，返回新值对原值没有影响

5. 正则表达式

格式：/正则表达式主体/修饰符(可选)
d: 0-9任意一个数字
w: 数字、字母、下划线 0-9 a-z A-Z _
s: 空格或者空白
(): 分组
[a-z]: 区间内任意一个
*: 0到多个
+: 1到多个
{n}: 正好n次
{n,m}: n-m次
比如手机：/1[34578]d{9}/

6. 作用域、作用域链、闭包

作用域

全局作用域、函数作用域
ES6引入let和const关键字，随即带来块级作用域的概念

作用域链

对象有一个内部属性[[Scope]]，该属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链。
js解析某个变量时，会从代码嵌套的最内层开始，如果没找到，会顺着作用域链向上查找。

闭包

函数内部返回一个函数
对外部暴露指定行为，但还是能用到自己作用域内的变量
    function greet(){
        name = "Alan";
        return function() {
            console.log("Hi " + name);
        }
    }
    greet()();
私有作用域
    (function () {
        // private scope
    )()
模块模式
    var Module = (function () {
        function _privateMethod() {}
        return {
            publicMethod: function() {
                // can call privateMethod();
            }
        }
    })()

7. 构造函数、原型、原型链、继承

构造函数、原型和实例之间的关系

构造函数的prototype指向一个原型对象，
原型对象的constructor指回构造函数，
实例的内部指针__proto__指向原型对象。
通过调用构造函数产生的实例，都有一个内部属性，指向了原型对象。所以实例能够访问原型对象上的所有属性和方法

例子：
    function Dog (name) {
        this.name = name;
    }
    Dog.prototype.speak = function () {
    　　alert("wang");
    }
    var doggie = new Dog("jiwawa");
    doggie.speak();  //wang 
    Dog.prototype.constructor == Dog  //true

graph LR
    C[实例] --> B
    A[构造函数Dog] --> B[Dog的原型对象]
    B --> A

原型链、继承

//定义一个 Animal 构造函数，作为 Dog 的父类
function Animal () {
    this.superType = "Animal";
}
Animal.prototype.superSpeak = function () {
    alert(this.superType);
}
function Dog (name) {
    this.name = name;
}
//改变Dog的prototype指针，指向一个 Animal 实例
Dog.prototype = new Animal();
Dog.prototype.speak = function () {
　　alert(this.type);
}
var doggie = new Dog("jiwawa");
doggie.superSpeak();  //Animal 

如果将Dog的prototype指针指向另一个Animal的实例，那么Dog的实例就能调用Animal的属性和方法。

8. 函数上下文(this指向)

规律一：函数名加圆括号直接调用，函数上下文是 window 对象。
规律二：函数如果作为一个对象的方法，对象使用点方法进行调用，那么函数的上下文就是这个对象。
规律三：函数是事件处理函数，那么函数的上下文就是触发这个事件的对象。
规律四：函数被定时器调用时，上下文是 window 对象。
规律五：数组中存放的函数，被数组索引调用，函数上下文就是这个数组。

9. js的运行机制、事件队列和循环

JS单线程（主线程）
       ↓
单线程导致任务需要排队，如果前一个任务耗时很长，后面的就一直等着。
如果排队是因为计算了大，CPU忙不过来，倒也算了。
很多时候没事因为IO设备慢（比如Ajax操作从网络读取数据）
       ↓
同步任务和异步任务
    同步：在主线程上排队执行的任务，前一个完成，才执行后一个。
    异步：不进入主线程，而进入“任务队列”，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复
       ↓
"任务队列"是一个事件（消息）的队列，IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。
"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。
所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是，由于"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。
       ↓
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。

10. Ajax(Asynchronous JavaScript and XML)原理

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

var xmlHttp;
if (window.XMLHttpRequest) {// IE7及以上
    xmlHttp = new XMLHttpRequest();
} else {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("GET/POST", url, true/false);
// 如果是post，需要设置请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(); // 如果是post，需要传参数，参数为空就传null;
xmlHttp.onreadystatechagne = function() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
            // 成功回调函数...
        } else {
            // 失败回调函数...
        }
    }
};
    
相关知识点：
    GET 更简单更快，无法发送大数据，无法缓存
    POST 更大更稳定，可发大数据，可缓存
    readyState(0: 请求未初始化
               1: 服务器连接已建立
               2: 请求已接收
               3: 请求处理中
               4: 请求已完成，且响应已就绪)
   status(1字头：消息,代表请求已被接受，需要继续处理；
          2字头：成功；
          3字头：重定向；
          4字头：请求错误；
          5、6字头：服务器错误)
          常见：200成功、304缓存、404未找到页面、500服务器错误

11. Axios原理

普通使用：
    import axios from "axios"
    axios.get/post(url, params).then(function(){}).catch(function(){})
自定义axios常见使用方式:
    let myAxios = axios.create({
        baseURL: "",
        timeout: 30000,
        headers: {},
        ...
    })
    // 请求拦截器
    myAxios.interceptors.request.use(
        function (config) {
            // 发送请求之前做些什么，比如token
            if (store.state.Token) {
                config.headers.Authorization = "前缀" + store.state.Token
            }
            reutrn config
        },
        function (error) {
            // 对请求错误，做些什么
            return Promise.reject(error)
        }
    )
    // 响应拦截器
    myAxios.interceptors.response.use(
        function (response) {
            // 对响应数据做点什么
            return response.data
        },
        function (error) {
            // 对响应错误做点什么, 比如后台返回token失效的状态码，就需要跳转login
            if (error && error.response) {
                switch (error.response.status) {
                    case 400: 
                        error.message = "请求出错"
                        break
                    case 401:
                        alert("token失效，重新登录")
                        store.commit("loginOut")
                        setTimeout(() => {
                            window.location.reload()
                        }, 1000)
                        return
                }
            } else {
                error.message = "连接服务器失败"
            }
            alert(error.message)
            return Promise.reject(error.response)
        }
    )

12. 异步编程

回调函数

事件监听

ES6/Promise对象(避免层层嵌套的异步回调，代码更清晰)

ES6/Generator函数

ES7/async和await

浏览器

1. 内核

Trident(IE)、Gecko9(火狐)、Blink(Chrome、Opera)、Webkit(Safari)

2. 功能模块

HTML解释器
    CSS解释器
    图层布局计算模块：布局计算每个对象的精确位置和大小
    视图绘制模块：进行具体节点的图像绘制，将像素渲染到屏幕上
    JavaScript引擎：编译执行JS代码

3. 运行机制

运行机制：
    浏览器使用http/https向服务的请求页面
        ↓
    解析HTML，构建DOM树
        ↓
    计算DOM树上的CSS
        ↓
    （排版）根据CSS属性渲染元素，得到内存中的位图
        ↓
    （可选步骤）对位图进行合成，提升后续绘制速度
        ↓
    绘制到界面上

4. 渲染原理

解析HTML，生成DOM树（DOM）
解析CSS，生成CSSOM树（CSSOM）
将DOM和CSSOM合并，生成渲染树（Render-Tree）
计算渲染树的布局（Layout）
将布局渲染到屏幕上（Paint）

5. 浏览器交互：BOM和DOM相关webApi、监听事件

JavaScript分三个部分：
    ECMAScript标准 --- 基本语法
    DOM --- 文档对象模型，操作页面元素的
    BOM --- 浏览器对象模型，操作浏览器的
浏览器顶级对象： window
页面顶级对象： document
页面中所有内容都属于浏览器

BOM(Browser Object Model)浏览器对象模型

BOM是独立于内容的、可以与浏览器窗口进行互动的对象结构，其由多个对象组成，其中代表浏览器窗口的Window对象是其顶层对象。
可刷新浏览器、后退、前进、在浏览器中输入URL等。
alert()、prompt()、confirm()
onload()、onunload()
setTimeout()、clearTimeout()、setInterval()、clearInterval()
loaction、history、navigator

DOM(Document Object Model)文档对象模型

document.
    getElementById()
    getElementsByTagName()
    getElementsByName()
    getElementsByClassName()
    querySelector()
    createElement()
    appendChild()

监听事件

addEventListener("事件名","事件处理函数","布尔值false冒泡,true捕获")
removeEventListener("事件名","事件处理函数","布尔值")
preventDefault()阻止默认事件
stopPropagation()阻止事件冒泡
其他常用事件：
    onclick、ondbclick、
    onmousedown、onmouseup、onmouseout、onmousemove、onmouseover

事件代理（事件委托）

原理：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == "li"){
　　　　    alert(target.innerHTML);
　　　　}
　　}
}

6. 缓存机制

强缓存:用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。
    协商缓存:用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源。
    两者共同点：客户端获得的数据最后都是从客户端缓存中获得。
    两者的区别：从名字就可以看出，强缓存不与服务器交互，而协商缓存则需要与服务器交互。

7. 跨域

为什么会跨域：浏览器的同源策略（阻止不同协议或者域名或者端口的请求）
解决方法：
    JSONP(只能发GET请求)
    空iframe加form
    CORS(跨域资源共享)：响应头设置Access-Control-Allow-Origin等...
    代理
    ...

关于网络协议

1. HTTP协议

HTTP(Hyper Text Transfer Protocol)超文本传输协议：
    基于TCP/IP通信协议传递数据，用于从万维网服务器传输超文本到本地浏览器的传送协议
主要特点：
    简单快速、灵活、无连接（完成请求就断开链接）、无状态、支持B/S C/S

URL

HTTP使用统一资源标识符URI来传输数据和建立连接，统一资源定位符URL是URI的一种特殊类型
URL：协议+域名+端口+虚拟目录+文件名+锚(#)+参数(?)

Request

请求行(请求方法 URL 协议版本)
请求头(头部字段名 值...)
空行(一定有一个空行)请求数据
请求数据

Response

状态行（协议版本 状态码 状态消息）
消息报头
空行
响应正文（服务器返回给客户端的文本信息）

状态码

1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

常见：
    200 OK：客户端请求成功
    400 Bad Request：客户端请求有语法错误，不能被服务器所理解
    401 Unauthorized：请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
    403 Forbidden：服务器收到请求，但是拒绝提供服务
    404 Not Found：请求资源不存在，eg：输入了错误的URL
    500 Internal Server Error：服务器发生不可预期的错误
    503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常

请求方法

GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE

HTTP工作原理

建立TCP连接（三次握手），客户端连接服务器
    ↓
发送HTTP请求
    ↓
服务器接受请求，返回HTTP响应
    ↓
释放TCP连接
    ↓
浏览器解析HTML内容

GET和POST区别

GET: 请求数据附在URL后，地址栏可见
POST: 请求数据包在请求体中

GET: 长度有限（2083字节）
POST: 理论上不限制大小，服务器常会对POST数据大小进行限制

GET: 数据明文，不安全
POST: 安全

2. cookie、session、token、localStorage、sessionStorage

Cookie

客户端缓存技术
浏览器的一种数据存储功能，由服务器生成，发送给浏览器，以键值方式存储，下次请求，会把cookie发送给服务器，过期时长由expire决定

Session

会话缓存技术
类似客户端的身份标识，由服务器生成，保存在服务器端，以键值方式存储，默认30分钟过期
客户端每次像服务器发送请求，都带上身份标识，服务器就知道请求来自谁。客户端常用cookie方式保存标识

Token

用户登录成功，服务器生成Token返回给客户端
客户端保存Token
客户端每次请求携带Token
服务器校验Token

localStorage

生命周期永久，除非手动清楚，存放大小一般5MB，存在客户端

sessionStorage

当前会话有效，关闭浏览器清楚，存放大小5MBD，存在客户端

关于ES6语法

变量声明 let/const

变量名不自动提示，提供块级作用域

箭头函数

() => {}
箭头函数中没有this，如果在箭头函数内使用this，该this是外层的this

模板字符串

使用``将字符串包裹，在其中可以使用${}来包裹一个变量或表达式

解析结构

数组以序列号对应，对象根据属性名对应
eg: 
    // es5
    var loading = props.loading;
    var clicked = props.clicked;
    // es6
    const { loading, clicked } = props;
    
    // es6
    const arr = [1, 2, 3];
    const [a, b, c] = arr;
    // es5
    var arr = [1, 2, 3];
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];

函数默认参数

// es5
function add(x, y) {
    var x = x || 20;
    var y = y || 30;
    return x + y;
}
console.log(add());

// es6
function add(x = 20, y = 30) {
    return x + y;
}
console.log(add());

展开运算符

使用...可以将数组或者对象进行展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];

const obj1 = {
  a: 1,
  b: 2, 
  c: 3
}
const obj2 = {
  ...obj1,
  d: 4,
  e: 5,
  f: 6
}
// 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})

对象字面量与class

当属性与值同名时，可简写
const person = {
    name,
    age
}

// ES5
// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 原型方法
Person.prototype.getName = function() {
  return this.name
}
// ES6
class Person {
  constructor(name, age) {  // 构造函数
    this.name = name;
    this.age = age;
  }

  getName() {  // 原型方法
    return this.name
  }
}

extends继承关键字、super()

Promise

解决异步回调地狱问题
promise.then(function(value) {
  // success 成功回调
}, function(error) {
  // failure 失败回调
});
then方法返回一个新的Promise实例，因此支持链式写法，后面的then会等待前面then返回的Promise对象状态发生变化，然后决定调用resolve还是reject。
.catch()
.finally() ES2018引入, 不管promise最后状态，都会执行
.all()将多个Promise实例包装成一个新的Promise实例，只有子实例状态都变为fulfilled，包装实例才变为fulfilled，如果其中一个是rejected，那么包装也是rejected。
.race()同all()方法，相当于或操作，只要有一个实例状态改变，包装实例就会跟着改变
.resolve()将现有对象转为Promise对象
.reject()返回一个状态为rejected的Promise实例

Modules

Symbol(表示独一无二的值)

Set和Map

Set类似于数组，但其成员的值都是唯一的，没有重复的值
const s = new Set()
const s1 = new Set([1,2,3,2,3])
[...s]
add(value)：添加某个值，返回 Set 结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。

类似于对象，也是键值对的集合，但是键不限于字符串，各种类型都可以当作键。
const map = new Map()
map.set(键,值)
map.get(键)
map.has(键)
map.delete(键)
map.clear()
map.size

遍历Set和Map：
    keys()：返回键名的遍历器。
    values()：返回键值的遍历器。
    entries()：返回所有成员的遍历器。
    forEach()：遍历 Map 的所有成员
由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致

Proxy

在目标对象之前架设一层“拦截”，外界访问该对象，都必须先通过这层拦截
var proxy = new Proxy(target, handler)
eg:
    var obj = new Proxy({}, {
      get: function (target, key, receiver) {
        console.log(`getting ${key}!`);
        return Reflect.get(target, key, receiver);
      },
      set: function (target, key, value, receiver) {
        console.log(`setting ${key}!`);
        return Reflect.set(target, key, value, receiver);
      }
    });
get(target, propKey, receiver)：
    拦截对象属性的读取，比如proxy.foo和proxy["foo"]。
set(target, propKey, value, receiver)：
    拦截对象属性的设置，比如proxy.foo =v或proxy["foo"]=v，返回一个布尔值。
has(target, propKey)：
    拦截propKey in proxy的操作，返回一个布尔值
...

Iterator和for...of循环

Iterator作用：
    1. 为各种数据结构，提供一个统一的访问接口
    2. 使数据结构的成员能够按某种次序排列
    3. 创造了一种新的遍历命令for...of
遍历器原理：创建一个指针指向数据结构(Array/Set/Map/String/TypedArry/arguments/NodeList)的初始位置，
           第一次调用指针对象的next方法，将指针指向第一个成员，第二次next指向第二个，以此类推，直到结束位置。
for(let val of 数据结构){}

export 和 export default

export与export default均可用于导出常量、函数、文件、模块等
在一个文件或模块中，export、import可以有多个，export default仅有一个
通过export方式导出，在导入时要加{ }，export default则不需要
export能直接导出变量表达式，export default不行

Vue

1. 指令

v-text：绑定元素的文本内容 
v-html：绑定元素的innerHTML 

v-show：显示与隐藏，切换元素的display CSS属性
v-if：Dom元素的销毁和重建
v-for
v-on：绑定事件监听器，缩写@；使用：v-on:click="handleClick()"
    修饰符：
    .stop - 调用 event.stopPropagation()。
    .prevent - 调用 event.preventDefault()。
    .capture - 添加事件侦听器时使用 capture 模式。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。比如 @click.enter="handleEnter"
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
v-bind：动态绑定一个或多个特性或组件prop到表达式，缩写":"; 比如 :class="{}"
    修饰符：
    .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
    .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
    .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
v-model：数据双向绑定
    修饰符：
    .lazy - 取代 input 监听 change 事件
    .number - 输入字符串转为有效的数字
    .trim - 输入首尾空格过滤
v-slot：用于