Web APIs笔记06——BOM- 操作浏览器

Window对象

BOM(浏览器对象模型)

• BOM(Browser Object Model ) 是浏览器对象模型
  
• window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
• window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模
  型）
• document 是实现 DOM 的基础，它其实是依附于 window 的属性。
• 注：依附于 window 对象的所有属性和方法，使用时可以省略 window

定时器-延时函数

• JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
• 语法：setTimeout(回调函数，等待的毫秒数)
• setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
• 清除延时函数：

<script>
      let timer = setTimeout(回调函数，等待的亳秒数
      clearTimeout(timer )
script>

• 结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能

div class="clock">div>
<script>
      let clock = document.querySelector('.clock' )
      function myInterval() {
      
            let d = new Date();
            clock. innerText = d.toLocalestring();
            //延时任务，自调用
            setTimeout (myInterval, 1000);
      }
      // 启动定时任务
      myInterval();
script>

• 两种定时器对比：
  ➢setInterval 的特征是重复执行，首次执行会延时
  ➢setTimeout 的特征是延时执行，只执行1次
  ➢setTimeout 结合递归函数,能模拟setInterval重复执行
  ➢clearTimeout 清除由setTimeout创建的定时任务

JS执行机制

JS 是单线程

• JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这
  门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比
  如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
• 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问
  题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

• 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
• 异步：你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可