当我们使用new 的时候，js到底做了些什么？
1.首先创建了一个新的空对象
2.把构造函数的原型赋值的这个新对象原型上
3.把构造函数的this指向这个对象，执行构造函数，为对象添加属性
4.判断构建函数返回类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象
js的节流和防抖
节流：
事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。
防抖：
多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！
使用场景：
节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。
function throttle(fn, delay) {
//记录上一次函数触发的时间
var lastTime = 0;
return function(){
//记录当前函数触发的时间
var nowTime = Date.now();
if(nowTime - lastTime > delay){
//修正this指向问题 fn.call(this);
//同步执行结束时间 lastTime = nowTime;
}
}
}
当在浏览器输入一个地址，回车后，浏览器到底做了些什么
1.浏览器解析域名，获取域名对应的IP地址
2.查看浏览器缓存，有没有存储过该地址的浏览记录
3.建立tcp链接，经历三次握手
4.浏览器发送http请求
4.服务器根据http请求返回对应的文件资源
5.拿到文件资源进行解析，执行html，css，js，渲染页面
6.四次挥手，断开与服务器的链接
原生ajax
// 1.创建ajax对象
const xhr = new XMLHttpRequest()
// 2.调用open方法传入 方式和地址,是否异步
xhr.open('GET','https:baidu.com', false)
// 3.设置请求头
xhr.setRequestHeader('')
// 4.调用send传入参数
xhr.send({id:"2222"})
// 5.监听ajax状态
xhr.onreadystatechange = ()=>{
if(xhr.readyState ===4){
if(xhr.status===200){
//
}
}
}
性能优化有哪些方面
1.减少Http请求
2.使用服务端渲染
但是服务端渲染会增大服务的的计算压力
3.一些静态资源可以使用CDN
4.将 CSS 放在文件头部，JavaScript 文件放在底部
5.善用缓存，不重复加载相同的资源
6.使用字体图标代替一些小图片
7.压缩文件大小
8.图片懒加载
9.可以使用css3 代替一些图片效果，比如渐变，阴影
10.通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
11.减少重绘重排
12.使用DNS预解析
浏览器缓存机制
1.dns缓存
dns 是域名系统，通过dns解析域名，获取对应的IP地址。
dns缓存 查询过程如下
1.首先查询浏览器自身的dns缓存，找到了解析完成。
2.没有找到，去系统里面的hosts是否存在对应映射关系，有，解析完成。
3.没找到，去本地dns服务里面查找，找到就解析完成。
4.如果本地DNS服务器还没找到的话,它就会向根服务器发出请求,进行递归查询。
2.cdn缓存
cdn 是网络分发 cdn会先判断本地的缓存是否过期，过期了就会去最近的cdn服务请求对应的数据，更新本地的缓存，并返给客户端。
cdn优势
1.起到了分流作用，大大的降低了服务器的压力。2解决了跨地域，跨运营商的问题，访问延时大大降低。
浏览器缓存 (HTTP缓存)
先看图
什么是浏览器缓存
简单来说，就是将HTTP请求到的资源浏览器缓存到本地的一种行为。
缓存分为 强缓存和协商缓存,浏览器向服务端请求时，先判断强缓存，在判断协商缓存
1.强缓存
浏览器在加载资源时，会先根据本地缓存中header 中的 expires 和 cahe-control 是否命中强缓存，如果命中，则不会想服务端发起请求。
expires
该字段时http1.0的规范。它的值是一个GMT 格式的时间字符串，时间就是失效时间，在这个时间内，即命中缓存。这种方式有一个明显的缺点，由于失效时间是一个绝对时间，所以当服务器与客户端时间偏差较大时，就会导致缓存混乱。
cahe-control
该字段时http1.1的规范。主要是利用该字段的max-age 来判断，是一个相对时间。
例如 Cache-Control:max-age=3600，代表着资源的有效期是 3600 秒。
cache-control 除了该字段外，还有下面几个比较常用的设置值：
no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存。
no-store：禁止使用缓存，每一次都要重新请求数据。
public：可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器。
private：只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存。
Cache-Control 与 Expires 可以在服务端配置同时启用，同时启用的时候 Cache-Control 优先级高。
协商缓存
当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务器根据 header 中的部分信息来判断是否命中缓存。如果命中，则返回 304 ，告诉浏览器资源未更新，可使用本地的缓存。
这里的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match.
Last-Modify/If-Modify-Since
浏览器第一次请求一个资源的时候，服务器返回的 header 中会加上 Last-Modify，Last-modify 是一个时间标识该资源的最后修改时间。
当浏览器再次请求该资源时，request 的请求头中会包含 If-Modify-Since，该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后，根据资源的最后修改时间判断是否命中缓存。
如果命中缓存，则返回 304，并且不会返回资源内容，并且不会返回 Last-Modify。
缺点:
短时间内资源发生了改变，Last-Modified 并不会发生变化。
周期性变化。如果这个资源在一个周期内修改回原来的样子了，我们认为是可以使用缓存的，但是 Last-Modified 可不这样认为,因此便有了 ETag。
ETag/If-None-Match
与 Last-Modify/If-Modify-Since 不同的是，Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的，资源变化都会导致 ETag 变化。服务器根据浏览器上送的 If-None-Match 值来判断是否命中缓存。
与 Last-Modified 不一样的是，当服务器返回 304 Not Modified 的响应时，由于 ETag 重新生成过，response header 中还会把这个 ETag 返回，即使这个 ETag 跟之前的没有变化。
Last-Modified 与 ETag 是可以一起使用的，服务器会优先验证 ETag，一致的情况下，才会继续比对 Last-Modified，最后才决定是否返回 304。
总结
当浏览器再次访问一个已经访问过的资源时，它会这样做：
1.看看是否命中强缓存，如果命中，就直接使用缓存了。
2.如果没有命中强缓存，就发请求到服务器检查是否命中协商缓存。
3.如果命中协商缓存，服务器会返回 304 告诉浏览器使用本地缓存。
4.否则，返回最新的资源。
get和post 的区别
1.参数携带
get 参数在url上面，post在请求体里面
2.缓存
get 可以缓存，post 不能
3.后退页面的影响
get 没有影响，post 会重新请求
4.传送数据大小
get 一般在2-4kb，post 数据大小根据php.ini配置，可以无限大
5.安全性
get由于参数在url上，是没有安全性的，post参数在请求体中，比get安全一点，但是 如果有人进行抓包处理的话，那也就没有安全性可言了，所以比较隐私的数据最好是进行加密处理在传递。
6.数据包
get只会产生一个数据包，而post会有两个。get会把header 和数据一起发送过去，服务器就会返回对应资源，而post会先发送header，让服务端校验，在发送数据，服务端在返回资源。
