### 同源策略是什么?
### javascript跨域通信
同源:两个文档同源需满足
- 协议相同
- 域名相同
- 端口相同
跨域通信:js进行DOM操作、通信时如果目标与当前窗口不满足同源条件,浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法
- 如果是log之类的简单单项通信,新建<img>,<script>,<link>,<iframe>元素,通过src,href属性设置为目标url。实现跨域请求
- 如果请求json数据,使用<script>进行jsonp请求
- 现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象,origin是目标窗口的origin。window.addEventListener(‘message‘, handler, false);handler的event.data是postMessage发送来的数据,event.origin是发送窗口的origin,event.source是发送消息的窗口引用
- 内部服务器代理请求跨域url,然后返回数据
- 跨域请求数据,现代浏览器可使用HTML5规范的CORS功能,只要目标服务器返回HTTP头部**Access-Control-Allow-Origin: ***即可像普通ajax一样访问跨域资源
----------
所谓的跨域问题是由于浏览器的同源策略限制的,当协议域名端口号不同即为跨域,对于协议和端口来说,前端不能解决。解决跨域的几种方式:
- JSONP 跨域 :
> 这种方式跨域是通过script标签引入js文件,这个js文件又会返回一个js函数调用,也就是请求后通过callback的方式回传结果优点:
1.不受同源策略的限制
2.兼容性更好
3.支持老版本浏览器
缺点:只支持get请求
- CORS 跨域
> 其原理是使用自定义的http头部请求,让浏览器与服务器之间进行沟通,从而决定请求或响应是否成功
优点:
1.支持所有类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持
- h5的postMessage方法
> window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据,只能在两个窗口(iframe)之间交换数据
[前端面试查漏补缺--(三) 跨域及常见解决办法][1]
### get/post区别
- 表单的method属性设置post时发送的是post请求,其余都是get请求
- get请求通过url地址发送请求参数,参数可以直接在地址栏中显示,安全性较差;post是通过请求体发送请求参数,参数不能直接显示,相对安全
- get请求URL地址有长度限制,根据浏览器的不同,限制字节长度不同,post请求没有长度限制
##### 补充get和post请求在缓存方面的区别
- get请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存。
- post不同,post做的一般是修改和删除的工作,所以必须与数据库交互,所以不能使用缓存。因此get请求适合于请求缓存。
### http/https区别
- https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
- http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
- http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
- http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全
### 你了解的http状态码
- 1** 信息,服务器收到请求,需要请求者继续执行操作(101,升级为websocket协议)
- 2** 成功,操作被成功接收并处理(206,部分内容,分段传输)
- 3** 重定向,需要进一步操作以完成请求(301,302重定向;304命中缓存)
- 4** 客户端错误,请求包含语法错误或无法完成请求(401,要求身份验证;403,服务器理解客服端需求,但是禁止访问)
- 5** 服务器错误,服务器在处理请求的过程中发生了错误
### 应用程序存储和离线web应用
HTML5新增应用程序缓存,允许web应用将应用程序自身保存到用户浏览器中,用户离线状态也能访问。 1.为html元素设置manifest属性:<html manifest="myapp.appcache">,其中后缀名只是一个约定,真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确 2.manifest文件首行为CACHE MANIFEST,其余就是要缓存的URL列表,每个一行,相对路径都相对于manifest文件的url。注释以#开头 3.url分为三种类型:CACHE:为默认类型。NETWORK:表示资源从不缓存。 FALLBACK:每行包含两个url,第二个URL是指需要加载和存储在缓存中的资源, 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存,如果从网络中载入这样的URL失败的话,就会用第二个URL指定的缓存资源来替代。以下是一个文件例子:
```
CACHE MANIFEST
CACHE:
myapp.html
myapp.css
myapp.js
FALLBACK:
videos/ offline_help.html
NETWORK:
cgi/
```
### 客户端存储localStorage和sessionStorage
- localStorage有效期为永久,sessionStorage有效期为顶层窗口关闭前
- 同源文档可以读取并修改localStorage数据,sessionStorage只允许同一个窗口下的文档访问,如通过iframe引入的同源文档。
- Storage对象通常被当做普通javascript对象使用:通过设置属性来存取字符串值,也可以通过setItem(key, value)设置,getItem(key)读取,removeItem(key)删除,clear()删除所有数据,length表示已存储的数据项数目,key(index)返回对应索引的key
```
localStorage.setItem(‘x‘, 1); // storge x->1
localStorage.getItem(‘x); // return value of x
// 枚举所有存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
localStorage.removeItem(‘x‘); // remove x
localStorage.clear(); // remove all data
```
### cookie及其操作
- cookie是web浏览器存储的少量数据,最早设计为服务器端使用,作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
- 通过读写cookie检测是否支持
- cookie属性有名,值,max-age,path, domain,secure;
- cookie默认有效期为浏览器会话,一旦用户关闭浏览器,数据就丢失,通过设置max-age=seconds属性告诉浏览器- cookie有效期
- cookie作用域通过文档源和文档路径来确定,通过path和domain进行配置,web页面同目录或子目录文档都可访问
- 通过cookie保存数据的方法为:为document.cookie设置一个符合目标的字符串如下
- 读取document.cookie获得‘; ‘分隔的字符串,key=value,解析得到结果
```
document.cookie = ‘name=qiu; max-age=9999; path=/; domain=domain; secure‘;
document.cookie = ‘name=aaa; path=/; domain=domain; secure‘;
// 要改变cookie的值,需要使用相同的名字、路径和域,新的值
// 来设置cookie,同样的方法可以用来改变有效期
// 设置max-age为0可以删除指定cookie
//读取cookie,访问document.cookie返回键值对组成的字符串,
//不同键值对之间用‘; ‘分隔。通过解析获得需要的值
```
### 前端本地存储
[前端面试查漏补缺--(四) 前端本地存储][2]
### 渲染机制及重绘和回流
[前端面试查漏补缺--(五) 渲染机制及重绘和回流][3]
### 浏览器缓存
[前端面试查漏补缺--(六) 浏览器缓存][4]
### 从输入URL到看到页面发生的全过程(含三握手,四挥手详解)
[前端面试查漏补缺--(十二) 从输入URL到看到页面发生的全过程(含三握手,四挥手详解)][5]
[1]: https://juejin.im/post/5c6bca00f265da2dcf627aaa
[2]: https://juejin.im/post/5c6bcdc8e51d45209a1ca3b6#heading-10
[3]: https://juejin.im/post/5c6c182ee51d45760b1c8e30
[4]: https://juejin.im/post/5c6c9c99f265da2d896326ae
[5]: https://juejin.im/post/5c6f9d24e51d4511dd3fd0a2
原文地址:https://www.cnblogs.com/shucher/p/10457929.html