前端知识整理1

前端知识整理，包括html/css/js，但不限于这三大类，持续更新中。
本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:）

1.HTML

---

2.CSS

2.1 css三栏布局实现方案

题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应

1.浮动布局
实现方法：左栏、右栏分别左右浮动，定宽300px，中间设置左右margin撑开左右两栏需要占据的位置，html结构顺序为：左栏、右栏、中间。
缺点：浮动元素脱离文档流，需要清除浮动，如果处理不好，会导致很多问题（影响前后标签、父级标签的位置及 width height 属性）。
优点：比较简单，兼容性比较好。只要清除浮动做的好，是没有什么问题的。
2.绝对定位布局
实现方法：三栏设置绝对定位，左栏 left:0; width:300px，右栏 right:0; width:300px，中间 left:300px; right:300px;
缺点：脱离文档流，之后的元素也要脱离文档流。有效性、可使用性比较差。
优点：方便快捷，配合js使用方便。
3.flex布局
实现方法：三栏的父元素 display:flex; 中间 flex:1 (flex-grow: 1; flex-shrink: 1; flex-basis: 0%;); 左栏、右栏定宽300px;
优点：移动端已经大量使用，是css3为了解决上面两种方案的缺点而出现，是相对比较完美的方案。
缺点：不能兼容IE8及以下浏览器。
4.表格布局
实现方法：三栏的父元素 display:table; 三栏分别设置 display: table-cell; 左栏、右栏定宽300px;
优点：用表格布局实现三栏布局很简单就能搞定，兼容性好（兼容IE8），在flex布局不兼容的时候，可以尝试表格布局。
缺点：有些历史诟病，只适用部分场景；某个内容撑开了，其他内容也会跟着撑开，有时候这种效果不是我们想要的。
5.网格布局
实现方式：三栏的父元素 display:grid; grid-template-rows:100px; grid-template-columns:300px auto 300px;
网格布局是新出的一种布局方式，技术比较新，还未普及，但是也需要我们掌握。

三个延伸问题
1.几种布局方式的优缺点？
如上

2.假设把高度去掉，三栏的高度根据内容自适应，那个方案不再适用，哪个还能适用？
flex和table还能适用，其余不再适用。

3.兼容性如何，在真实业务中，哪个方案最实用？
如上，根据使用场景和业务需求，选择合适的方案。

2.2 清除浮动的实现方案

题目：有哪些清除浮动的方案？每种方案的优缺点？

2.3 css盒模型

题目：谈谈你对css盒模型的认识？

1.基本概念（标准模型+IE模型）
css 盒模型：margin + border + padding + content

2.标准模型和IE模型的区别
区别就是高度和宽度的计算方式不同
标准模型：width(height) = content
IE模型：width(height) = border + padding + content

3.css如何设置这两种模型
标准模型：box-sizing: content-box; （浏览器默认值）
IE模型：box-sizing: border-box;

4.JS如何设置、获取盒模型对应的宽和高
（1）dom.style.width/height ，这种方式只能获取内联样式设置的宽和高
（2）dom.currentStyle.width/height ，不管是内联样式、<style>标签写的样式、<link>外联样式，即获取渲染后的宽高（仅IE支持）
（3）window.getComputedStyle(dom).width/height ，获取渲染后的宽高（兼容性更好、通用性更好，chrome/firefox）
（4）dom.getBoundingClientRect().width/height ，获取渲染后的宽高（计算元素的绝对位置，返回top/left/width/height）

5.根据盒模型解释边距重叠
（1）父子元素边距重叠，取最大值合并
（2）兄弟元素边距重叠，取最大值合并
（3）空元素上下边距重叠，取最大值合并

6.BFC
BFC的基本概念：块级格式化上下文
BFC的原理（BFC的渲染规则）：
（1）在同个BFC元素垂直方向的元素外边距会发生重叠（解决方案：将元素放在不同的BFC容器中）；
（2）BFC的区域不会与浮动元素发生重叠（BFC可以阻止元素被浮动元素覆盖）；
（3）BFC在页面上是一个独立的容器，外面的元素不影响里面，里面的元素不影响外面；
（4）计算BFC的高度时，浮动元素也会参与计算；（BFC子元素即使是float也会参与高度计算）
如何创建BFC？
（1）body 根元素就是BFC；
（2）float的值不为none；
（3）position的值不为static或者relative（可以设置为absolute或者fixed）；
（4）display 为 inline-block、table、table-cells、flex；
（5）overflow 除了 visible 以外的值 (hidden、auto、scroll)

3.JavaScript

3.1 DOM 事件

DOM事件的级别

DOM0  element.onclick = function(){};
// false 为默认值，代表事件在冒泡阶段触发。设为true，代表事件在捕获阶段触发。
DOM2  element.addEventListener('click', function(){}, false);
DOM3  element.addEventListener('keyup', function(){}, false);

DOM事件模型
捕获：由上到下
冒泡：由下到上

DOM事件流
三个阶段：（鼠标点击）-> 捕获 -> 目标阶段 -> 冒泡

DOM事件捕获的具体流程
window -> document -> html -> body -> ...(父元素) -> 目标元素
document.documentElement === html，冒泡流程则相反

Event对象的常见应用

event.preventDefault();  // 阻止默认行为
event.stopPropagation();  // 阻止事件冒泡
event.stopImmediatePropagation();  // 元素绑定了多个同样类型的事件，处理事件优先级
event.currentTarget;  // 当前绑定事件的对象
event.target;  // 当前被点击的元素

自定义事件

let ev = document.getElementById('ev');
let eve = new Event('custome');
ev.addEventListener('custome', function () {
   console.log('custome');
});
ev.dispatchEvent(eve);
// new CustomEvent(); // 用法类似Event，传参不一样

事件捕获流程

window.addEventListener('click', function () {
    console.log('window captrue');
}, true);
document.addEventListener('click', function () {
    console.log('document captrue');
}, true);
document.documentElement.addEventListener('click', function () {
    console.log('html captrue');
}, true);
document.body.addEventListener('click', function () {
    console.log('body captrue');
}, true);
ev.addEventListener('click', function () {
    console.log('ev captrue');
}, true);
// window -> document -> html -> body -> ev

自定义事件

let ev = document.getElementById('ev');
let eve1 = new Event('test1');
ev.addEventListener('test1', function () {
    console.log('test1 dispatch');
});
setTimeout(function () {
    ev.dispatchEvent(eve1);
}, 1000);

/*bubbles: 一个布尔值, 表明该事件是否会冒泡
cancelable: 一个布尔值, 表明该事件是否可以被取消
detail: 当事件初始化时传递的数据*/
let eve2 = new CustomEvent('test2', {bubbles: false, cancelable: true, detail: {a: 'aaa'}});
ev.addEventListener('test2', function (e) {
    console.log(e);
    console.log('test2 dispatch');
});
setTimeout(function () {
    ev.dispatchEvent(eve2);
}, 2000);

3.2 HTTP协议

HTTP协议的主要特点？
简单快速，灵活，无连接，无状态

HTTP报文的组成部分？
请求报文：请求行，请求头，空行，请求体
响应报文：响应行，响应头，空行，响应体

HTTP方法？
GET 获取资源
POST 传输资源
PUT 更新资源
DELETE 删除资源
HEAD 获得报文首部

POST和GET的区别？
重要的五点：
（1）GET在浏览器回退时是无害的，而POST会再次提交请求
（2）GET请求会被浏览器主动缓存，而POST不会，除非手动设置
（3）GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
（4）GET请求在URL中传送的参数是有长度限制的，而POST没有限制
（5）GET参数通过URL传递，POST放在Request body中
其他不同：
GET产生的URL地址可以被收藏，而POST不可以
GET请求只能进行URL编码，而POST支持多种编码方式
对参数的数据类型，GET只接受ASCll字符，而POST没有限制
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息

HTTP状态码？
1xx: 指示信息-表示请求已经接收，继续处理
2xx: 成功-表示请求已被成功接收
3xx: 重定向-要完成请求必须进行更进一步的操作
4xx: 客户端错误-请求有语法错误或请求无法实现
5xx: 服务端错误-服务端未能实现合法的请求
常见的状态码：
200 OK：客户端请求成功
206 Partial Content：客户发送了一个带有Range头的GET请求，服务端完成了它
301 Moved Permanently：所请求的页面已经转移至新的URL
302 Found：所请求的页面已经临时转移至新的url
304 Not Modified：客户端有缓冲的文档并发出了一个条件性的请求，服务端告诉客户，原来缓冲的文档还可以继续使用
400 Bad Request：客户端请求有语法错误，不能被服务器所理解
401 Unauthorized：请求未经授权，这个状态码必须和WWW-Authenticate报头域一起使用
403 Forbidden：对被请求页面的访问被禁止
404 Not Found：请求资源不存在
500 Internal Server Error：服务器发生不可预期的错误，原来缓冲的文档还可以继续使用
503 Server Unavailable：请求未完成，服务器临时过载或宕机，一段时间后可能恢复正常

什么是持久连接？
HTTP协议采用“请求-应答”模式，当使用普通模式，即非 Keep-Alive模式时，每个请求/应答客户端和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）。
当使用Keep-Alive模式（又称持久连接，连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后续请求时，Keep-Alive功能避免了建立或者重新建立连接。

什么是管线化？
在使用持久连接的情况下，某个连接上消息的传递类似于：
请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3
某个连接上的消息变成了类似这样（管线化）
请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3

管线化特点：
1、管线化机制通过持久连接完成，仅 HTTP/1.1 支持此技术
2、只有GET和HEAD请求可以进行管线化，而POST则有所限制
3、初次创建连接时不应启动管线机制，因为对方（服务器）不一定支持 HTTP/1.1 版本的协议
4、管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变
5、HTTP/1.1 要求服务器端支持管线化，但并未要求服务器端也对响应进行管线化处理，只是要求对于管线化的请求不失败即可
6、由于上面提到的服务器端问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，
因此现代浏览器如Chrome和FireFox默认并未开启管线化支持

3.3 原型和原型链

创建对象有几种方法？

// 第一种方式：字面量
let o1 = {name: 'o1'};
let o2 = new Object({name: 'o2'});

// 第二种方式：通过构造函数
let M = function (name) {
    this.name = name;
};
let o3 = new M('o3');

// 第三种方式
let p = {name: 'p'};
// Object.create() 的参数就是所创建出来的对象的__proto__
let o4 = Object.create(p);
console.log(o4.__proto__ === p); // true

instanceof的原理？
当使用instanceof判断一个对象实例的构造函数时，只要是在实例的原型链上的构造函数，instanceof 都返回true

console.log(o3 instanceof M); // true
console.log(o3 instanceof Object); // true
console.log(o3.__proto__ === M.prototype); // true
console.log(M.prototype.__proto__ === Object.prototype); // true
console.log(o3.__proto__.constructor === M); // true
console.log(o3.__proto__.constructor === Object); // false

new运算符原理？

let new1 = function (func) {
    // 一个新对象被创建，它继承自 func.prototype
    let o = Object.create(func.prototype);
    // 构造函数foo被执行。执行的时候，相应的参数会被传入，同时上下文（this）会被指定为这个新实例
    // new func 等同于 new func()，只能用在不传递任何参数的情况
    let k = func.call(o);
    if (typeof k === 'object') {
        // 如果构造函数返回了一个对象，那么这个对象会取代整个new出来的结果
        return k;
    } else {
        // 如果构造函数没有返回对象，那么 new 出来的结果就是之前 Object.create 创建的对象
        return o;
    }
};
let o5 = new1(M);
console.log(o5 instanceof M, o5 instanceof Object); // true true
console.log(o5.__proto__.constructor === M); // true
console.log(o5.__proto__.constructor === Object); // false
M.prototype.walk = function () {
    console.log('walk');
};
o5.walk(); // 'walk'
o3.walk(); // 'walk'

3.4 面向对象

声明类的方式

/*ES5类的声明*/
function Animal () {
    this.name = 'name';
}

/*ES6中class的声明*/
class Animal2 {
    constructor () {
        this.name = name;
    }
}

/*实例化*/
console.log(new Animal(), new Animal2());  // Animal {name: "name"}  Animal2 {name: ""}

js实现继承的几种方式

1.借助构造函数实现继承
原理：利用call、apply，改变父类的this指向
缺点：无法继承父类prototype上的属性

function Parent1 () {
    this.name = 'parent1';
}
Parent1.prototype.say = function () {
    console.log('say');
};
function Child1 () {
    Parent1.call(this); // apply
    this.type = 'child1';
}
console.log(new Child1()); // Child1 {name: "parent1", type: "child1"}
console.log(new Child1().say()); // Uncaught TypeError: (intermediate value).say is not a function

2.借助原型链实现继承
原理：原型链的原理
缺点：实例化出来的每一个对象，他们的属性会相互影响。（原型链中的原型对象是公用的）

function Parent2 () {
    this.name = 'parent2';
    this.arr = [1, 2, 3];
}
function Child2 () {
    this.type = 'child2';
}
Child2.prototype = new Parent2();
let s1 = new Child2();
let s2 = new Child2();
s1.arr.push(4);
console.log(s1.arr); // [1, 2, 3, 4]
console.log(s2.arr); // [1, 2, 3, 4]
console.log(s1.__proto__ === Child2.prototype); // true
console.log(s1.__proto__ === s2.__proto__); // true

3.组合方式
缺点：父类的构造函数执行了两次。。。

function Parent3 () {
    this.name = 'parent3';
    this.arr = [1, 2, 3];
}
function Child3 () {
    Parent3.call(this);
    this.type = 'child3';
}
Child3.prototype = new Parent3();
let s3 = new Child3();
let s4 = new Child3();
s3.arr.push(4);
console.log(s3.arr, s4.arr); // [1, 2, 3, 4]  [1, 2, 3]

4.组合方式的优化1
缺点：通过子类实例化的对象，它的constructor指向了父类而不是子类，无法区分实例是由父类创造的还是子类创造的

function Parent4 () {
    this.name = 'parent4';
    this.arr = [1, 2, 3];
}
function Child4 () {
    Parent4.call(this);
    this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
let s5 = new Child4();
console.log(s5 instanceof Child4, s5 instanceof Parent4); // true true
// s5是通过new Child4()创建的，它的constructor应该指向Child4，但是却指向了Parent4
console.log(s5.constructor); // f Parent4 () {}

5.组合方式的优化2
js实现继承比较完美的方案

function Parent5 () {
    this.name = 'parent5';
    this.arr = [1, 2, 3];
}
function Child5 () {
    Parent5.call(this);
    this.type = 'child5';
}
// Object.create 创建了一个中间对象
Child5.prototype = Object.create(Parent5.prototype);
// 如果一下这句代码放在上一种方案，因为Child4.prototype也是一个对象（引用类型数据），直接赋值也是改的Parent4
Child5.prototype.constructor = Child5;
let s7 = new Child5();
let s8 = new Child5();
s7.arr.push(4);
console.log(s7.arr, s8.arr); // [1, 2, 3, 4]  [1, 2, 3]
console.log(s7 instanceof Child5, s7 instanceof Parent5); // true true
console.log(s7.constructor); // ƒ Child5 () {}

3.5 前端通信

1.什么是同源策略以及限制
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制
限制：（1）Cookie、LocalStorage和IndexDB无法读取（2）DOM 无法获得（3）AJAX请求不能发送

2.前后端如何通信
Ajax WebSocket CORS

3.如何创建Ajax
（1）XMLHttpRequest 对象的工作流程
（2）兼容性处理
（3）事件的触发条件
（4）事件的触发顺序

util.json = function (options) {
     var opt = {
         url: '',
         type: 'get',
         data: {},
         success: function () {},
         error: function () {},
     };
     util.extend(opt, options);
     if (opt.url) {
         var xhr = XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP');
         var data = opt.data,
             url = opt.url,
             type = opt.type.toUpperCase(),
             dataArr = [];
         for (var k in data) {
             dataArr.push(k + '=' + data[k]);
         }
         if (type === 'GET') {
             url = url + '?' + dataArr.join('&');
             xhr.open(type, url.replace(/\?$/g, ''), true);
             xhr.send();
         }
         if (type === 'POST') {
             xhr.open(type, url, true);
             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             xhr.send(dataArr.join('&'));
         }
         xhr.onload = function () {
             if (xhr.status === 200 || xhr.status === 304) {
                 var res;
                 if (opt.success && opt.success instanceof Function) {
                     res = xhr.responseText;
                     if (typeof res ==== 'string') {
                         res = JSON.parse(res);
                         opt.success.call(xhr, res);
                     }
                 }
             } else {
                 if (opt.error && opt.error instanceof Function) {
                     opt.error.call(xhr, res);
                 }
             }
         };
     }
 };

4.跨域通信的几种方式
（1）JSONP

 util.jsonp = function (url, onsuccess, onerror, charset) {
     var callbackName = util.getName('tt_player');
     window[callbackName] = function () {
         if (onsuccess && util.isFunction(onsuccess)) {
             onsuccess(arguments[0]);
         }
     };
     var script = util.createScript(url + '&callback=' + callbackName, charset);
     script.onload = script.onreadystatechange = function () {
         if (!script.readyState || /loaded|complete/.test(script.readyState)) {
             script.onload = script.onreadystatechange = null;
             // 移除该script的 DOM 对象
             if (script.parentNode) {
                 script.parentNode.removeChild(script);
             }
             // 删除函数或变量
             window[callbackName] = null;
         }
     };
     script.onerror = function () {
         if (onerror && util.isFunction(onerror)) {
             onerror();
         }
     };
     document.getElementsByTagName('head')[0].appendChild(script);
 };

举个例子

// 使用jsonp的方式向页面动态添加了script，发出一个请求。注意callback=需要执行的函数名
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
// 上面的请求会返回如下内容，你在本地定义了全局函数jsonp()，随之执行
<script type="text/javascript">
  jsonp({
      data: {},
      // ...
  });
</script>

（2）Hash

// 利用hash，场景是当前页面 A 通过iframe或frame嵌入了跨域的页面 B
// 在A中伪代码如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B中的伪代码如下
window.onhashchange = function () {
    var data = window.location.hash;
};

（3）postMessage
HTML5的标准，利用一些API就能实现

// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
// 在A中伪代码如下：
window.postMessage('data', 'http://B.com');
// 在B中的伪代码如下：在窗口B中监听
window.addEventListener('message', function (event) {
    console.log(event.origin);
    console.log(event.source);
    console.log(event.data);
}, false);

（4）WebSocket

var ws = new WebSocket('wss://echo.websocket.org');

ws.onopen = function (evt) {
    console.log('Connection open ...');
    ws.send('Hello WebSockets!');
};

ws.onmessage = function (evt) {
    console.log('Received Message: ', evt.data);
    ws.close();
};

ws.onclose = function (evt) {
    console.log('Connection closed.');
};

Websocket【参考资料】：http://www.ruanyifeng.com/blo...

（5）CORS

// url（必选），options（可选）
fetch('/some/url/', {
    method: 'get',
}).then(function (response) {

}).catch(function (err) {
    // 出错了，等价于 then 的第二个参数，但这样更好用更直观
});

CORS【参考资料】：http://www.ruanyifeng.com/blo...

3.6 前端安全

1.CSRF
CSRF，通常称为跨站请求伪造，英文名 Cross-site request forgery

攻击原理：

防御措施：
token验证
referer验证（页面来源验证）
隐藏令牌（类似token，把token放在http header中，不放在链接上）

2.XSS
XSS（cross-site scripting 跨域脚本攻击）

攻击原理
注入js脚本

防御措施
宗旨：让注入的js脚本无法执行

3.7 浏览器渲染机制

1.什么是DOCTYPE及作用
DTD（document type definition， 文档类型定义）是一系列的语法规则，用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。（DTD就是告诉浏览器，我是什么文档类型，应该用什么引擎来解析、渲染文档）
DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错。（DOCTYPE就是用来告诉浏览器，当前文档是什么文档类型的）

常见的DOCTYPE有哪些？
HTML5 <!DOCTYPE html>
HTML 4.01 Strict 严格模式
HTML 4.01 Transitional 传统模式

2.重排Reflow
定义：DOM结构中的各个元素都有自己的盒子，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为reflow。
触发Reflow的条件：
1、当你增加、删除、修改DOM节点时，会导致Reflow或Repaint
2、当你移动DOM的位置，或是搞个动画的时候
3、当你修改CSS样式的时候
4、当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候
5、当你修改网页的默认字体时
怎样避免Reflow？（也就是避免触发Reflow的条件）

3.重绘Repaint
定义：当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint（页面要呈现的内容统统画在屏幕上）。
触发Repaint的条件：（页面显示的内容不一样了，就是重绘了）
DOM改动、CSS改动
怎样减少Repaint？（频繁操作DOM时，利用 document.createDocumentFragment() 创建临时节点最后只操作一次DOM等等）

3.8 js运行机制

js是单线程的语言（同个时间只能做一件事）
js任务队列：任务里有同步任务和异步任务，先执行完同步任务，才会执行异步任务

同步任务：
while,for,alert...

console.log('a');
while (true) {

}
console.log('b'); // 只打印了a，后续没有执行，while是个同步任务

异步任务：
setTimeOut 和 setInterval （setTimeout 时间到了之后，才会把函数体扔到异步队列中，等待事件循环之后执行）
DOM事件、异步ajax、ES6中的Promise...

3.9 页面性能

提升页面性能的方法有哪些？
1、资源压缩合并，减少HTTP请求
2、非核心代码异步加载 -> 异步加载的方式 -> 异步加载的区别
3、利用浏览缓存 -> 缓存的分类 -> 缓存的原理
4、使用CDN加速资源（网络优化）
5、预解析DNS
页面中所有的a标签，高级浏览器是默认打开a标签DNS预解析的。但网站如果是https协议的，很多浏览器是默认关闭a标签DNS预解析的。
<meta http-equiv="x-dns-prefetch-control" content="on"> 强制打开a标签的DNS预解析，放到head中
<link rel="dns-prefetch" href="//host_name_to_prefetch.com"> DNS预解析，放到head中

异步加载
1、异步加载的方式
（1）动态脚本加载 （2）defer （3）async
2、异步加载的区别
（1）defer 是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
（2）async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

<!--defer 按照加载的顺序依次执行-->
<script src="defer1.js" defer></script>
<script src="defer2.js" defer></script>

<!--async 执行顺序和加载顺序无关，先解析完成的先执行-->
<script src="async1.js" async></script>
<script src="async2.js" async></script>

浏览器缓存
1、缓存的分类
（1）强缓存（本地已有资源文件，不询问服务器，直接拿来用）

Expires Expires:Tue, 07 May 2019 22:08:48 GMT
Cache-Control Cache-Control:max-age=3600

（2）协商缓存（本地已有资源文件，但是不确定是否要用，要询问服务器这个资源是否可用）

Last-Modified If-Modified-Since Last-Modified:Tue, 07 May 2019 22:08:48 GMT
Etag If-None-Match

2、缓存原理：
资源文件在浏览器中存在的备份（副本）。页面中有个图片，请求回来之后缓存到本地（电脑磁盘），浏览器在下次请求这个图片的时候，是从磁盘直接读取这个图片，而不会去请求图片地址。

3.10 错误监控

前端错误的分类
1、即时运行错误：代码错误
2、资源加载错误

错误的捕获方式
1、即时运行错误的捕获方式
（1） try...catch
（2） window.onerror （无法捕获资源加载错误，比如script的资源加载错误，不会向上冒泡到window）

<script>
    window.addEventListener('error', function (e) {
        console.log('捕获', e);
    }, true);
</script>
<script src="http://baidu.com/test.js"></script> <!--错误的资源-->

2、资源加载错误的捕获方式
（1）object.onerror 事件，image对象、script标签
（2）performance.getEntries() 获取所有已加载资源的加载时长，可以间接的拿到没有加载的资源错误
（3）Error 事件捕获（通过事件捕获，而不是冒泡）
延伸：跨域的js运行错误可以捕获吗，错误提示什么，应该怎么处理？
1、在 script 标签增加 crossorigin 属性（客户端做）
2、设置 js 资源响应头 Access-Control-Allow-Origin:* （服务端做）

上报错误的基本原理
1、采用Ajax通信的方式上报
2、利用Image对象上报

(new Image()).src = 'http://www.baidu.com/testwqe?rw=erdf23';