HTML BOM

大纲

1. BOM的概念
2. window对象
3. 提示框
4. 间隔调用和延迟调用
5. 初始数据解析
6. 页面加载优化和js文件解析顺序
7. 浏览器性能优化：回流和重绘
8. window.history对象
9. 函数的[道岔]：call和apply
10. 闭包
11. this总结

1.BOM的概念

1.1 BOM

**概念：**BOM(Browser Object Model)即浏览器对象模型
关于BOM的说明：

1. BOM提供了独立于内容而与浏览器窗口进行交互的对象
2. 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window对象
3. BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
4. BOM缺乏一个统一的标准

• JavaScript语法的标准化组织是ECMA
  

• DOM的标注化组织是W3C[所有浏览器公共遵守的标准]
  

• BOM是各个浏览器厂商根据dom在各自浏览器上的实现；[表现为不同浏览器定义有差别，实现方式不同]
  

通常情况下如果提到了bom，一般指的都是window对象。

1.2 BOM和DOM的关系

1. DOM通过document对象来访问、控制、修改html和xhtml等文档中的内容
2. BOM通过window对象来访问、控制、修改浏览器中的内容
   联系：
3. BOM包含DOM。
4. 浏览器提供用来访问的是BOM对象
5. 从BOM对象可以访问到DOM对象，从而使javascript可以操作浏览器、并通过操作浏览器读取到文档的内容

区别：

1. DOM描述了处理网页内容的方式和接口，即操作页面内部
2. BOM描述了与浏览器进行交互的方法和接口，即操作页面之间。

2.window对象

2.1 window对象

概念:window对象是bom的具象化表现形式。
window和bom之间的关系就好比document对象和dom之间的关系一样；
bom相当于dom；
window对象相当于document对象；

因为window对象是js中的顶级对象，因此所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。例：

说明	代码
打开窗口	window.open(url)[等价于open(url);]
关闭窗口	window.close()[等价于close();]
获取事件	window.event[等价于event;]
获取文档	window.document[等价于document]

2.2 window对象中常用的属性和方法

1. window.name
   属性：window.name是window对象的一个属性，默认值为空。
   特性：window.name值在不同的页面(甚至不同域名)加载后依旧存在，并且可以支持非常长的name值(2MB左右)
   应用：
   正是由于window.name属性拥有在不同页面保持存在的特性，因此出现了一门叫做[跨域传输]的技巧。
   而这个技巧的内部实现原理就是window.name的持久性的特性。
2. window尺寸属性
   window.outerHeight
   window.outerWidth
   这两个属性返回的是整个浏览器的高度，和页面窗口的大小没有任何关系。
   window.innerHeight
   window.innerWidth
   返回视口的宽高(计算滚动条的高度)，页面变化它就变。
   document.documentElement.clientHeight
   document.documentElement.clientWidth
   返回视口的宽高(不计算滚动条的高度)。
   window.pageYOffset
   window.pageXOffset
   返回页面滚动的距离(通用)
   这两个属性指的是页面发生滚动的距离
   window.screenX
   window.screenY
   返回浏览器距离屏幕的距离

3.window.navigator对象属性
window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用。(这个对象和event一样是一个全局变量，并且是唯一的)

代码	说明
navigator.appCodeName	浏览器代码名的字符串表示
navigator.appName	官方浏览器名的字符串表示
navigator.appVersion	浏览器版本信息的字符串表示
navigator.cookieEnabled	如果启用cookie返回true，否则返回false
navigator.javaEnabled()	如果启用java返回true，否则返回false
navigator.platform	浏览器所在计算机平台的字符串表示
navigator.plugins	安装在浏览器中的插件数组
navigator.userAgent	返回和浏览器内核相关的信息

如果window.navigator.userAgent出现了Mobile，可以确定用户使用的是移动设备。

4.window对象中涉及到的方法

3.提示框

3.1 浏览器中常见的三种提示框

1. alert(alertMsg);
   表示警示框，作用是提示用户信息，该方法执行后无返回值。
2. prompt(alertMsg,defaultMsg);
   表示警示框，作用是提示用户信息，该方法执行后根据情况不同返回值略有不同。

• 点击取消，返回值为null
  

• 没有默认值
    如果用户没有输入内容，返回一个空字符串
    如果用户输入了内容，返回值为用户输入的内容。
  

• 有默认值  
    如果用户没有输入内容，返回默认值
    如果用户修改了默认值，返回值为用户输入的内容
  

3. confirm(alertMsg)
   表示警示框，作用是提示用户信息，点击确认返回true，点击取消返回false。

以上三种对话框都是模式对话框，即在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入，并暂停对JavaScript代码的执行，在用户做出响应之前，不会执行下一条语句。

4.间隔调用和延迟调用

4.1 间隔调用

间隔调用全称为间隔调用函数，又名定时器。是一种能够每间隔一定时间自动执行一次的函数。
语法：

var timer = null;
timer = setInterval(需要执行的函数，执行间隔时间ms);

例如：

setInterval(function (){
   
        console.log('Hello World');
    },2000);

清除间隔调用：
既然间隔调用每隔一段时间就会自动执行一次，那么清除间隔调用就势必存在。
语法：clearInterval(变量标识)
例如：clearInterval(timer)
上述代码就能够将刚刚创建的定时器移除掉，令其不再间隔一段时间后自动再次执行。

间隔调用的返回值是一个数字队列，因此通过访问数字队列来清楚间隔调用也被允许。

var time1 = setInterval(function (){
   console.log('这是time1间隔调用');},2000);
var time2 = setInterval(function (){
   console.log('这是time2间隔调用');},2000);
var time3 = setInterval(function (){
   console.log('这是time3间隔调用');},2000);
console.log(time1);
clearInterval(1);
console.log(time2);
clearInterval(time2);
console.log(time3);

如果间隔调用的函数需要传入参数，则间隔调用需要使用如下的方式声明：

语法：

var timer = null