浏览器相关总结 #8
Description
浏览器对象(BOM)
描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）。
BOM对象的属性
-
Window对象：
是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。
-
Document对象：
实际上是window对象的属性。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。
-
Location对象：
它是window对象和document对象的属性。Location对象表示载入窗口的URL，此外它还可以解析URI.
-
Navigator对象：
Navigator包含大量Web浏览器相关的信息。各种浏览器支持该对象的属性和方法不尽相同。
-
Screen对象：
通过其可以获取用户屏幕相关的信息.
-
全局的方法和属性
- alert/confirm/prompt
- setTimeout/setInterval/eval/JSON
- ...
浏览器的本地存储
cookie
- 兼容性好，基本上所有浏览器都适用
- 容量小，约4kb
- 占用http请求头，每次请求都上传
- 其他
- 如果不想让js操作某个cookie，设置cookie时HttpOnly 为true
- 如果只能https时发送cookie，设置secure为true
IE userdata
- IE独有,在win2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的
- 被杀毒软件删除本地存储文件后，会出现一些异常问题
code
(function(window, document) {
"use strict";
var userData, attr, attributes;
if (!window.localStorage && (userData = document.body) && userData.addBehavior) {
if (userData.addBehavior("#default#userdata")) {
userData.load((attr = "localStorage"));
attributes = userData.XMLDocument.documentElement.attributes;
window.localStorage = {
"length" : attributes.length,
"key" : function(idx) { return (idx >= this.length) ? null : attributes[idx].name; },
"getItem" : function(key) { return userData.getAttribute(key); },
"setItem" : function(key, value) {
userData.setAttribute(key, value);
userData.save(attr);
this.length += ((userData.getAttribute(key) === null) ? 1 : 0);
},
"removeItem" : function(key) {
if (userData.getAttribute(key) !== null) {
userData.removeAttribute(key);
userData.save(attr);
this.length = Math.max(0, this.length - 1);
}
},
"clear" : function() {
while (this.length) { userData.removeAttribute(attributes[--this.length].name); }
userData.save(attr);
}
};
}
}
})(this, this.document);
Flash SharedObject
- 容量适中，基本上不存在兼容性问题
- 缺点是浏览器要安装flash，同时要在页面中引入特定的swf和js文件，增加额外负担
Local Storage/Session storage
- 容量大、易用、强大、原生支持
- 兼容性差些（chrome, safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）
web SQL/IndexedDB
- html5新增，只有部分浏览器支持
application cache
- 离线应用存储，整个url对应的资源进行存储
- 使用过程也有很多坑
浏览器协议
-
浏览器本身支持，与获取文档相关的协议
- http:/https:
- ftp:
- file:
- ...
-
第三方应用或插件支持的协议
- mailto:
- tel:
- sms:
- ...
<a href="mailto:someone@example.com?subject=This%20is%20the%20subject&cc=someone_else@example.com&body=This%20is%20the%20body">Send email</a> <a href="tel:+468123456">Call</a> <a href="sms:+15105550101?body=hello，你好，我是宋史超"> 带中文 </a>
-
伪协议
是浏览器内部保留协议用于方便访问浏览器的脚本解析引擎和某些内部功能
- javascript:
javascript:协议允许后面执行javascript代码，并且继承了调用的当前域。有些情况会对后面的内容处理两次，如果代码正确的话，会把后面的代码当成html解析，覆盖掉原来的html代码,所以很多javascript:void+ 一段代码：
<iframe src='javascript:"hello"'> </iframe>
- data：
该协议会创建一个短小的内置式文档，
<!-- 仅一行代码，打造一个在线编辑器 --> data:text/html, <html contenteditable> <!-- 图片采用datauri协议，减少请求 --> <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD...">
- about:blank
about:blank这个URL可以用来被创建DOM对象，例如：
<iframe src="about:blank" name="test"></iframe> <script> frames["test"].document.body.innerHTML = "<h1>Hi!</h1>"; </script>
在浏览器中，创建一个about:blank页面，它继承的域为创建它的页面的域。例如，点击一个链接，提交一个表单，创建一个新窗口，但是当用户手动输入about:或者书签中打开的话，他的域是一个特殊的域，任何其他的页面都不可以访问。
- view-scource:
查看源代码协议
同源策略(Same Origin policy，SOP），
浏览器通过隔离来自不同源的文件之间的访问来提供各种安全保障。
同源策略一开始是为了管理DOM之间的访问，后来逐渐扩展到Javascript对象，但并非是全部。例如非同源的脚本之间可以调用location.assign()和location.replace()。
什么是源
协议-域名-端口 三元素组合在一起组成一个“源(Origin)",这三个要素必须都相同，不满足这三个要素相同的条件的被称为跨域。
| 原始资源 | 要访问的资源 | 非IE浏览器 | IE浏览器 |
|---|---|---|---|
| http://example.com/a/ | http://example.com/b/ | 可以访问 | 可以访问 |
| http://example.com/ | http://www.example.com/ | 主机不匹配 | 主机不匹配 |
| http://example.com/a/ | https://example.com/a/ | 协议不匹配 | 协议不匹配 |
| http://example.com:81/ | http://example.com/ | 端口不匹配 | 可以访问 |
同源策略的影响
- cookie
js只能操作当前页面的域名下的cookie，不能操作不同源的域名下的cookie；
cookie设置总结:
当在foo.example.com设置cookie，domain设置为不同值时，浏览器的cookie最终生效的域如下：
| domain设置为： | 非IE浏览器 | IE浏览器 |
|---|---|---|
| 设置为空 | foo.example.com（当前页面所在域） | *.foo.example.com |
| bar.foo.example.com | cookie设置失败，设置的域是当前域的一个子域 | |
| foo.example.com | *.foo.example.com | |
| baz.example.com | cookie设置失败，域名不匹配 | |
| example.com | *.example.com | |
| ample.com | cookie设置失败，域名不匹配 | |
| .com | 设置失败，域名太广，存在安全风险。 |
-
XMLHttpRequest
XMLHttpRequest请求严格遵守同源策略，非同源不可以请求。
跨域请求解决方案
- 当协议和端口号相同，两个域名具有相同的父域名时，采用document.domain= 公共的父域名
- 服务器端代理
- JSONP
- html5的postMessage + onmessage
- XHR2的跨源资源共享（CORS）
CORS机制为跨域的ajax请求提供了可能，需要被跨域请求的服务器设置
Access-Control-Allow-Origin:被跨域的源，例如
http响应头： HTTP/1.1 200 OK Access-Control-Allow-Origin:http://another-domain.com -
iframe
- 页面中的js只能访问同源的子节点iframe/同源的顶层页面中的dom节点
- 执行同源的子节点iframe/同源的顶层页面中的js。
-
localstorage
现在的浏览器都支持，除了IE6与IE7。
localStorage对象可以长时间保存，并且遵守同源策略。
但是在IE8中localStorage会把域名相同但是协议分别为HTTP和HTTPS的内容放在一起，IE9中已修改。
在Firefox中，localStorage没有问题，但是sessionStorage也是会把域名相同的HTTP与HTTPS放在一起。
-
Adobe Flash
AllowScriptAccess参数：用来控制flash通过ExternallInterface.call()函数调用javascript的时的限制。
有三个值：always，never和sameorigin，最后一个值只允许同域的JavaScript操作（08年之前默认为always，现在默认为sameorigin）。
AllowNetworking参数：用来控制flash与外部的网络通讯。
可选的值为：all（允许使用所有的网络通讯，默认值），internal（flash不能与浏览器通讯如navigateToURL，但是可以调用其他的API），none（禁止任何的网络通讯）
浏览器的工作过程
-
本地缓存查找
- 如果本地缓存中存在该url的内容
- 不过期时，返回本地缓存的内容
- 过期时，条件查询请求url的内容
- 直接请求url的内容
- 如果本地缓存中存在该url的内容
-
向服务器发出请求url
- DNS查询，如果本地DNS缓存有，直接得到ip，否则通过DNS查询获取服务器ip
- 建立连接(http/https)
- 向服务器发出http请求
-
数据在网络上转发
-
服务器端处理请求并返回结果
- 路由转发
- 获取数据(缓存/file/db/...)
- format数据（或渲染模版，输出数据）
- 输出内容
-
浏览器接收和解析返回的内容
-
接收内容
-
解析内容和绘制
- 解析HTML/SVG/XHTML，构建文档对象模型(DOM树) 参考
- 解析CSS，构建 CSS对象模型(CSSOM树) 参考
- 将DOM树和CSSOM树合并为渲染树 参考
- layout/reflow，计算每个节点的几何外观
计算每个Element的位置，布局阶段的输出结果称为 “盒模型”（box model）。盒模型精确表达了窗口中每个元素的位置和大小，而且所有的相对的度量单位都被转化成了屏幕上的绝对像素位置。
- paint或格栅化”（rasterizing），将渲染树中的每个节点绘制到屏幕中
通过调用操作系统Native GUI的API绘制，将渲染树转化为屏幕上的每个像素点
-
浏览器单线程机制 参考
浏览器的UI更新和js的执行共用同一个线程UI Thread，同一时间要么进行UI更新，要么执行js代码。他们通过共享同一个任务队列UI Queue来实现这一机制。
浏览器的限制
- iframe 不同iframe是不同的运行空间，互相不受干扰，同域是可以通过dom提供的api访问以及执行js。
- html5的api,例如文件访问，地理位置查询等，低版本浏览器不支持
- css布局只能按照矩形块来布局，除了css3的变形，css3的属性，新的属性
- ...