一、同源策略
https://juejin.im/entry/59b8fb276fb9a00a42474a6f
1.学习同源策略之前需要理解的概念
什么是HTTP?
超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。
域名级别
子域名：子域名，是顶级域名（一级域名或父域名）的下一级
泛域名是指一个域名下的所有子域名都被解析到同一个IP地址上。
2.什么是同源策略？
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1) Cookie、LocalStorage 和 IndexDB 无法读取
2) DOM 和 Js对象无法获得
3) AJAX 请求不能发送
3.浏览器的同源策略-MDN
https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
1）同源策略
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。（http://www.imooc.com/article/40074）
2）同源的定义
如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。
3）IE例外
当涉及到同源策略时，Internet Explorer 有两个主要的不同点
- 授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），不遵守同源策略的限制。
- 端口：IE 未将端口号加入到同源策略的组成部分之中，因此
http://company.com:81/index.html和http://company.com/index.html属于同源并且不受任何限制。
这些例外是非标准的，其它浏览器也未做出支持，但会助于开发基于window RT IE的应用程序。
4）源的更改
使用 document.domain 来允许子域安全访问其父域时，您需要在父域和子域中设置 document.domain 为相同的值。
二、跨域
https://juejin.im/entry/59b8fb276fb9a00a42474a6f
1.学习跨域之前相关概念理解
重定向：重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置（如：网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向）。浏览器URL的地址栏改变
转发是浏览器只做了一次访问请求。重定向是浏览器做了至少两次的访问请求；
原文链接：https://blog.csdn.net/xianyadong/article/details/81230808
转发是服务器行为，重定向是客户端行为。转发耗时比重定向少。
转发——>客户浏览器发送HTTP请求——>web服务器接受请求——>调用内部一个方法在容器内部完成请求处理和转发动作——>再将转发跳转到的那个网页资源返回给客户； 转发只能在同一个容器内完成 转发的时候浏览器地址是不会变的，在客户浏览器里只会显示第一次进入的那个网址或者路径，客户看不到这个过程，只是得到了想要的目标资源。转发行为浏览器只做了一次请求。（转发只能跳转一次）
重定向——>客户浏览器发送HTTP请求——>web服务器接受请求后发送302状态码以及新的位置给客户浏览器——>客户浏览器发现是302响应，则自动再发送一个新的HTTP请求，请求指向新的地址（302：Found 临时移动，但资源只是临时被移动。即你访问网址A，但是网址A因为服务器端的拦截器或者其他后端代码处理的原因，会被重定向到网址B。）——>服务器根据此请求寻找资源发个客户；再客户浏览器中显示的是重定向之后的路径，客户可以看到地址的变化。重定向行为浏览器做了至少两次请求。（重定向可以跳转多次）
————————————————
回调
2.什么是跨域？
https://juejin.im/entry/59b8fb276fb9a00a42474a6f
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
3.跨域解决方案
1）通过jsonp跨域
2）document.domain + iframe跨域
3）location.hash + iframe
4）window.name + iframe跨域
5）postMessage跨域
6）跨域资源共享（CORS）
7）nginx代理跨域
8）nodejs中间件代理跨域
9）WebSocket协议跨域
三、JSONP的原理，怎么实现的说一下什么是Promise，请求失败调用什么函数
1.JSON
（https://www.liaoxuefeng.com/wiki/1022910821149312/1023021554858080）
四、什么是Promise，请求失败调用什么函数
http://es6.ruanyifeng.com/#docs/promise
1.Promise的含义
Promise是异步编程的一种解决方案。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
2.Promise对象有以下两个特点。
（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
3.请求成功调用什么函数
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
4.请求失败调用什么函数
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
五、正则表达式写手机号和邮箱验证怎么写
正则表达式匹配手机号 var regex= /^[1][3,4,5,7,8][0-9]{9}$/
邮箱：只允许英文字母、数字、下划线、英文句号、以及中划线组成
正则表达式匹配邮箱 var regex=/^([w+.])+@w+([.]w+)+$/
w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]。
* 星号表示某个模式出现0次或多次，等同于{0,}。
模式的精确匹配次数，使用大括号（{}）表示。{n}表示恰好重复n次，{n,}表示至少重复n次，{n,m}表示重复不少于n次，不多于m次。
+ 加号表示某个模式出现1次或多次，等同于{1,}。
? 问号表示某个模式出现0次或1次，等同于{0, 1}。
1.匹配规则
（1）点字符（.)
点字符（.）匹配除回车（
）、换行(
) 、行分隔符（u2028）和段分隔符（u2029）以外的所有字符。注意，对于码点大于0xFFFF字符，点字符不能正确匹配，会认为这是两个字符。
（2）位置字符
位置字符用来提示字符所处的位置，主要有两个字符。
^表示字符串的开始位置$表示字符串的结束位置
（3）选择符（|）
竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog。
转义符
正则表达式中那些有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。比如要匹配+，就要写成+。
重复类
模式的精确匹配次数，使用大括号（{}）表示。{n}表示恰好重复n次，{n,}表示至少重复n次，{n,m}表示重复不少于n次，不多于m次。
六、CDN怎么实现的查找到最近的服务器
七、如果是大张的图片用JPG还是PNG，还有哪些图片格式，webp格式
如果是大张图片应该用JPG，压缩，产生的文件小
- gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
- jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
- png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
- webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+
八、有很多图片，有什么优化方法（说了雪碧图）
1.图片懒加载
https://www.jianshu.com/p/68a6683b6a6a
网页首先用一张轻量级的图片占位，当占位图片被拖动到视窗，瞬间加载目标图片，然后替换占位图片。
https://www.cnblogs.com/hjt-7/p/6293266.html
图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
什么是图片懒加载问题：
对于图片过多的页面，为了加速页面加载速度，
所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
2.雪碧图
https://www.jianshu.com/p/4f64f7be8efa
雪碧图也叫CSS精灵， 是一种CSS图像合成技术；
通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用需要配合background-position来获取。
使用雪碧图的优点有以下几点：
1）将多张图片合并到一张图片中，可以减小图片的总大小。
2）将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
九、缓存的头部
前端面经
美的面经
链接：https://www.nowcoder.com/discuss/277537?type=all&order=time&pos=&page=1
1、wx.request()使用cookie的话怎么配置