BOM浏览器对象模型

博文整理自网道(WangDoc.com)

浏览器环境

JS是浏览器的内置脚本语言，浏览器内置了JS引擎，并且提供各种接口，让JS脚本可以控制浏览器的各种功能。一旦网页内嵌了 JS 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

浏览器组成

浏览器的核心是两部分：渲染引擎和JS引擎（JS解释器）

渲染引擎

将网页代码渲染为用户视觉可以感知的平面文档。渲染引擎处理网页的四个阶段：

1. 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
2. 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
3. 布局：计算出渲染树的布局（layout）。
4. 绘制：将渲染树绘制到屏幕。

JS引擎

读取网页中的 JS 代码，对其处理后运行

对比	内容	备注
JS 解释型语言	不需要编译，解释器实时运行 每次运行都要调用解释器	浏览器对JS进行编译生成字节码 及时编译 字节码只在运行时编译
编译型语言	运行速度快，系统开销小

浏览器提供的JS接口

接口	内容	备注
Cookie文本信息 (由HTTP协议生成)	服务器保存在浏览器的一小段文本信息 < 4KB 浏览器每次向服务器发出请求，就会自动附上这段信息	目的是区分用户，放置状态信息 使用场景:对话管理 个性化信息 追踪用户
XMLHttpRequest 对象	用于浏览器与服务器之间的通信
Storage 接口	用于脚本在浏览器保存数据 window.sessionStorage和window.localStorage这两个对象部署了 Storage 接口	sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空 localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。

同源限制

浏览器安全的基石是”同源政策“，最早由网景公司1995年引入浏览器，目前所有浏览器都实行这个政策。含义是指：A网页设置的Cookie，B网页不能打开，除非这两个网页同源，即协议、域名、端口都相同。

同源政策的目的是保证用户信息的安全，防止恶意的网站窃取数据。

限制的范围有：无法读取非同源网页的Cookie、LocalStorage 和 IndexedDB；无法接触非同源网页的DOM；无法向非同源地址发送AJAX请求

同源政策规定，AJAX 请求只能发给同源的网址，否则就报错。

除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。

• JSONP
• WebSocket
• CORS

标题	内容	备注
JSONP	服务器与客户端跨源通信
WebSocket	一种通信协议	该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信
CORS 跨源资源分享	跨源 AJAX 请求的根本解决方法 需要浏览器和服务器同时支持	相比 JSONP 只能发GET请求，CORS 允许任何类型的请求。