浏览器，服务器，网络
### 同源策略是什么？
### 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
