共计 3644 个字符，预计需要花费 10 分钟才能阅读完成。
同源策略是什么？
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）之间交换数据
前端面试查漏补缺 –(三) 跨域及常见解决办法
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 返回键值对组成的字符串，
// 不同键值对之间用 ’; ‘ 分隔。通过解析获得需要的值
前端本地存储
前端面试查漏补缺 –(四) 前端本地存储
渲染机制及重绘和回流
前端面试查漏补缺 –(五) 渲染机制及重绘和回流
浏览器缓存
前端面试查漏补缺 –(六) 浏览器缓存
从输入 URL 到看到页面发生的全过程 (含三握手, 四挥手详解)
前端面试查漏补缺 –(十二) 从输入 URL 到看到页面发生的全过程 (含三握手, 四挥手详解)
