JavaScript中BOM简介及其对象js执行机制

Posted 遥岑.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中BOM简介及其对象js执行机制相关的知识,希望对你有一定的参考价值。

BOM简介

什么是BOM

BOM(Browser Object Model):浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
BOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。
BOM缺乏标准,javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

DOM和BOM的区别

DOM

  • 文档对象模型
  • DOM就是把文档当作一个对象来看待
  • DOM的顶级对象是document
  • DOM主要是操作页面元素
  • DOM是W3C标准规范

BOM

  • 浏览器对象模型
  • 浏览器当作一个对象看待
  • BOM的顶级对象是window
  • BOM主要是浏览器窗口交互的一些对象
  • BOM是浏览器厂商在各自浏览器上定义的,兼容性较差

BOM的构成

BOM构成

  • BOM比DOM大,包括DOM

window对象是浏览器的顶级对象,一方面,它是js访问浏览器窗口的一个接口;另一方面,它是一个全局对象,定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用时可以省略window。

Window对象的常见事件

窗口加载事件

  1. window.onload事件:是窗口(页面)加载事件,当文档内容(包括图像、脚本文件、CSS文件等)完全加载完成会触发该事件。
window.onload = function() { } 

window.addEventListener('load',function() { })
  • 有了window.onload就可以把js代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数
  1. document.DOMContentLoaded加载事件,会在DOM加载完成时触发,这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。
document.addEventListener('DOMContentLoaded',fuction() { })
  • 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适

le9以上才支持

调整窗口大小事件

window.onresize:当浏览器窗口大小发生改变时触发该事件。

window.onresize = function() { }

window.addEventListener('resize',function() { })
  • 只要窗口大小发生像素变化,就会触发这个事件
  • 我们经常利用这个事件完成响应式布局

定时器函数

window对象为我们提供了两个非常友好的方法:setTimeout、setInterval。

定时器函数

setTimeout( )定时器

setTimeout:在给定的时间(以毫秒为单位)之后,执行函数,返回值是一个定时器对象。

window.setTimeout(function() { },时间)
  • window可以省略
  • 延迟的毫秒数省略默认为0,如果写必须是毫秒
  • 因为定时器可能有很多,我们经常给定时器赋值一个标识符
  • setTimeout( )这个调用函数也称为回调函数callback

停止setTimeout( )定时器

clearTimeout:清除setTimeout定时器对象。

window.clearTimeout(定时器对象)

setInterval( )定时器

setInterval方法重复调用一个函数,每隔这个时间,就会调用一次回调函数。

window.setInterval(function() {},时间)
  • 以毫秒为单位

停止setInterval( )定时器

clearInterval方法取消了先前通过调用setInterval( )建立的定时器。

window.clearInterval(定时器对象)

js执行机制

js是单线程

JavaScript的一个特点是单线程,也就是说,同一个时间只能做一件事
这是因为JavaScript这门脚本语言诞生的使命所致,JavaScript是为处理页面中用户的交互以及操作DOM而诞生的。
单线程也就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。
这样导致的问题是,如果js执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

进程:程序的一次动态运行,有独立的内存空间
线程:是进程的运行单位,一个进程可以分为若干个线程

同步和异步

为了解决这个问题,利用多核CPU的计算能力,html5提出Web Worker标准,允许JavaScript脚本创建多个线程。
于是,js中出现了同步异步

同步:前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
异步:在做一件事情的同时去做其他的事情。
区别:执行顺序不同。

同步任务和异步任务

同步任务:同步任务都在主线程上执行,形成一个执行栈
异步任务:js的异步是通过回调函数实现的, 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

一般而言,异步任务有以下三种类型:

  1. 普通事件,如click,resize等
  2. 资源加载,如load,error等
  3. 定时器,包括setInterval、setTimeout等

js执行机制

  1. 先执行执行栈中的同步任务
  2. 异步任务(回调函数)放入任务队列
  3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行

在这里插入图片描述

console.log(1)

document.onclick = function() {
    console.log('click')
}

console.log(2)

setTimeout(function() {
     console.log(3)
},3000)

//执行结果:1 2 3 click 或 1 2 click 3      

执行机制示意图:
在这里插入图片描述
由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop)。

location对象

什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的url,并且可以用于解析url。
因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。

URL

统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址,互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=19#link

url

  • protocol:网络协议(http、ftp、mailto等)
  • host:主机(即服务器名),例如:本地机的ip是127.0.0.1,或 localhost
  • port:端口,65535个,0-1023:由系统使用;1024-65535:用户使用
  • path:路径,若文件的位置:users/index.html
  • query:参数,以键值对的形式表示,参数之间用‘&’分隔,参数和地址之间用’?'分隔

location对象的属性

在这里插入图片描述
在这里插入图片描述

location对象的方法

在这里插入图片描述

navigator对象

navigator常用属性

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
在这里插入图片描述

navigator常用方法

javaEnabled( ):指定是否在浏览器中启用java。

history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。
该对象包含用户(在浏览器窗口中)访问过的URL。

history常用属性

history.length:返回历史列表中的网址数

history常用方法

在这里插入图片描述

  • history对象一般在实际开发中比较少用,但会在一些OA办公系统中见到

以上是关于JavaScript中BOM简介及其对象js执行机制的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript BOM及相关对象JS执行机制

JavaScript-BOM

JavaScript之BOM

JavaScript---BOM对象

JavaScript学习笔记

JavaScript BOM