BOM(笔记）

JS执行机制

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜

异步

做一件事的同时，可以去处理其他事情。比如做饭的异步做法，烧水的同时，利用这10分钟，去切菜，炒菜

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

js的异步通过回调函数实现的

异步任务的类型：

1、普通事件，如 click、resize 等

2、资源加载，如 load、error 等

3、定时器，包括 setInterval、setTimeout 等

异步任务相关添加到任务队列中（任务队列也称为消息队列）

js执行机制

1.先执行 执行栈中的同步任务

2.异步任务放到任务队列中

3.同步任务执行完毕，按次序读取异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop )

     console.log(1)
    console.log(2)
    setTimeout(function () {
      console.log(3)
    }, 0)
    console.log(4);
    //1243

location对象

location.href

location.search 属性获取地址中携带的参数，符号 ？后面部分

location.hash 属性获取地址中的啥希值，符号 # 后面部分

location.reload

  <a href="#/my">我的</a>
  <a href="#/friend">关注</a>
  <a href="#/download">下载</a>
  <button>刷新</button>
  <script>
    const reload = document.querySelector('button')
    reload.addEventListener('click', function () {
      //相当于按下f5 f5刷新
      // location.reload()
      //ctrl+f5 强制刷新
      location.reload(true)
    })
  </script>

navigator对象

记录了浏览器自身的相关信息

通过userAgent检测浏览器版本及平台

// 检测 userAgent（浏览器信息）
 !(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
 const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()

history对象

模拟浏览器前进后退，历史记录

back.onclick=function(){
//后退一步
  history.back()
}