A.BOM对象

1. window对象（不常用）

框架集 <frameset>

通常使用iframe在页面引入广告，因为广告一般是与页面内容不相关的。我们可以将iframe理解为一个沙盒，里面的内容能够被top window完全控制，而且主页的css样式是不会入侵iframe里面的样式

frame与iframe两者可以实现的功能基本相同，不过Iframe比frame具有更多的灵活性， frame是整个页面的框架，iframe是内嵌的网页元素，也可以说是内嵌的框架:
frame必须在frameset里，而frameset不能与body元素共存，也就说有frameset元素的文档只能是一个框架集，不能有别的东西；但是iframe无所畏惧

窗口位置和大小（主页没有权限，必须window.open()才能）

窗口位置： window.screenLeft 和 window.screenTop（Opera只能用这个） / screenX 和 screenY（FireFox只能用这个）

var newOnglet = window.open("http://www.wrox.com/","newWindow","resizable=yes");
newOnglet.moveBy(0,100); //将窗向下移动 100 像素
newOnglet.moveTo(200,300); //将窗口移动到(200,300)

窗口大小： window.innerHeight, window.innerWidth（也有outerHeight）

window.resizeTo(100, 100); //调整到 100×100
window.resizeBy(100, 50); //从100×100 调整到 200×150

SetTimeInterval() 和 setTimeout()

JavaScript 是一个单线程序的解释器,因此一定时间内只能执行一段代码。为了控制要执行的代码,就有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。 setTimeout() 的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;如果队列不是空的,那么它就要等前面的代码执行完了以后再执行。

调用 setTimeout() 之后,该方法会返回一个数值 ID,表示超时调用。这个超时调用 ID 是计划执行代码的唯一标识符,可以通过它来取消超时调用

//设置超时调用
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);

clearTimeout(timeoutId);

系统对话框

var input = prompt("hello","init value");
alert(input);
confirm(input);

2. location对象（导航）

location 是最有用的 BOM 对象之一。事实上, location 对象是很特别的一个对象,因为它既是 window 对象的属性,也是
document 对象的属性;换句话说, window.location 和 document.location 引用的是同一个对象。

位置操作函数(页面跳转)

location.assign() 历史记录中就会生成一条新记录。以下三行代码等效：

location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

location.replace() 不会在历史记录中生成新记录。在调用 replace() 方法之后,用户不能回到前一个页面
location.reload()
```
location.reload(); //重新加载(有可能从缓存中加载)
location.reload(true); //重新加载(从服务器重新加载)
```
位于 reload() 调用之后的代码可能会也可能不会执行,这要取决于网络延迟或系统资源等因素。
为此,最好将 reload() 放在代码的最后一行

3.navigator对象

常用属性方法：plugins、userAgent、language等

4.screen对象（基本不用）

大部分属性都是只读。应用场景也比较少，比如 window.resizeTo(screen.availWidth, screen.availHeight);
许多浏览器都会禁用调整浏览器窗口大小的能力,因此上面这行代码不一定在所有环境下都有效。
涉及移动设备的屏幕大小时,情况有点不一样。运行 iOS 的设备始终会像是把设备竖着拿在手里一样,因此返回的值是 768×1024。而 Android 设备则会相应调用 screen.width 和 screen.height 的值。

5.history对象（前进后退）

当页面的 URL 改变时,就会生成一条历史记录。history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的
window 对象关联。出于安全方面的考虑,开发人员无法得知用户浏览过的 URL。

history.go(-1); //后退一页
history.go(1); //前进一页

B.浏览器内核(browser kernel)

浏览器内核（browser kernel)是浏览器最为核心的部分，浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要此内核。

可以分为两部分：一部分是渲染引擎，负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，生成DOM树,render，repaint这些工作，然后会输出至显示器或打印机。另一部分是JS引擎，负责解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

1. 渲染引擎（render engineer/layout engineer)

Trident派系：
IE浏览器内核：Trident内核，也是俗称的IE内核。
百度浏览器、世界之窗内核：IE内核；（真的是年迈的百度啊）

Gecko派系：
Firefox浏览器内核：Gecko内核，俗称Firefox内核。

webkit派系：
Chrome浏览器内核：统称为Chromium内核或Chrome内核。演进Chromium内核 → Webkit内核 → Blink内核。
Safari浏览器内核：Webkit内核。演进 KHTML->Webkit(WebCore+JSCore)->Webkit2。
Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核。
IOS和Android的默认浏览器都基于Webkit

混合的双内核模式（主要是国内）：
360浏览器、猎豹浏览器内核：IE内核+Chrome双内核；
搜狗、遨游、QQ浏览器内核：IE内核（兼容模式）+Webkit（高速模式）；
2345浏览器内核：现在也是IE+Chrome双内核了；
UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核

2. JS引擎

JS运行机制：快速理解-10分钟入门
- 灵魂3问：JS为什么是单线程？为什么单线程的情况下需要异步？单线程又如何实现异步？
- Event loop(macro-task宏任务 + micro-task微任务)
- setTimeOut

C.客户端检测（解决非现代浏览器）

在决定使用哪种客户端检测方法时,一般应优先考虑使用能力检测。怪癖检测是确定应该如何处理代码的第二选择。而用户代理检测则是客户端检测的最后一种方案,因为这种方法对用户代理字符串具有很强的依赖性。

能力检测 (又称特性检测) : 能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何,只要确定浏览器支持特定的能力,就可以给出解决方案。
怪癖检测 : 怪癖实际上是浏览器实现中存在的 bug,例如早期的 WebKit 中就存在一个怪癖,即它会在 for-in 循环中返回被隐藏的属性。怪癖检测通常涉及到运行一小段代码,然后确定浏览器是否存在某个怪癖。由于怪癖检测与能力检测相比效率更低,因此应该只在某个怪癖会干扰脚本运行的情况下使用。怪癖检测无法精确地检测特定的浏览器和版本。
用户代理检测 : 通过检测用户代理字符串来识别浏览器。用户代理字符串中包含大量与浏览器有关的信息,包括浏览器、平台、操作系统及浏览器版本。用户代理字符串有过一段相当长的发展历史,在此期间,浏览器提供商试图通过在用户代理字符串中添加一些欺骗性信息,欺骗网站相信自己的浏览器是另外一种浏览器。用户代理检测需要特殊的技巧,特别是要注意 Opera会隐瞒其用户代理字符串的情况。即便如此,通过用户代理字符串仍然能够检测出浏览器所用的呈现引擎以及所在的平台,包括移动设备和游戏系统。

JavaScript高级程序设计-CH8、9 客户端BOM