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

Posted 2021-06-28 YuLong~W

tags:

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

文章目录

BOM
- wdinow对象
- - window对象常见事件
  - 定时器
JS执行机制
- 线程
- 同步和异步
其他对象

BOM

BOM（Browser Object Model） 浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

在这里插入图片描述

wdinow对象

是 JS 访问浏览器窗口的一个接口
是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法

window对象常见事件

窗口加载事件：

① window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、css文件等）完全加载完成会触发该事件

window.οnlοad=function( ){ }
window.addEventListener(‘load’,function( ){ })

注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准
如果使用 addEventListener 则没有限制

② document.DOMContentLoaded: 在DOM加载完成时触发，不包括CSS样式表、图片和flash动画等额外内容加载

注意：

Ie9以上才支持
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded
事件比较合适

调整窗口大小事件：

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

widow.οnresize=function( ){ }
window.addEventListener(‘resize’,function( ){ })

定时器

window 对象提供了两个定时器：
在这里插入图片描述

回调函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式
定时器可能有很多，经常给定时器赋值一个标识符ID

定时器中this指向window

案例：60s内只能发送一次短信

<body>
    手机号码：<input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button')
        var time = 60
        btn.addEventListener('click', function () {
            //设置状态不可用
            btn.disabled = true
            //创建定时器
            var timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer)
                    btn.disabled = false
                    btn.innerhtml = '发送'
                } else {
                    btn.innerHTML = '还剩下' + time + '秒'
                    time--
                }
            }, 1000)
        })
    </script>
</body>

在这里插入图片描述

JS执行机制

线程

进程：应用程序的一次动态运行，有独立的内存空间
线程：进程的执行单位，一个进程可以分为若干个线程

javascript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

同步和异步

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

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序一致、同步
异步：做一件事的同时，可处理其它事情

在这里插入图片描述

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

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

①普通事件，如 click、resize 等
②资源加载，如 load、error 等
③定时器，包括setInterval、setTimeout 等

JS执行机制：
在这里插入图片描述

<body>
    <script>
        console.log(1)
        setTimeout(function(){
            console.log(3)
        },1000)
        for(var i=0,str='';i<900000;i++){
            str+=i;
        }//利用字符串拼接拖慢执行时间
        console.log(2)
    </script>
</body>

在这里插入图片描述

其他对象

location对象

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

URL (Uniform Resource Locator, URL) ：统一资源定位符

格式： protocol : // host [:port] / path / [?query] # fragment
例如： http: // www.sinna.cn/index.html ？name=sam&age=20 # link

URL组成：
在这里插入图片描述
常用属性：

常用方法：

navigator对象

navigator 对象包含有关浏览器的信息 导航对象

常用属性：
在这里插入图片描述
常用方法：

<body>
    <script>
        //navigator对象
        console.log("内核："+navigator.appCodeName)
        console.log("名称："+navigator.appName)
        console.log("版本："+navigator.appVersion)
        console.log("cookie："+navigator.cookieEnabled)
        console.log("平台："+navigator.platform)
    </script>
</body>