JS 执行机制笔记

    js同步和异步同步

前一个任务结束以后再执行下面一个任务，程序的执行顺序与任务的排列顺序是一致的

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

异步

前一个任务没结束之前程序还可以执行别的任务

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

一般情况下异步有三种类型

1、普通事件，比如click，resixe等

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

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

异步任务的相关回调函数添加到任务队列中

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

由于主线程不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制叫事件循环

    location对象

window对象给我们提供了一个location属性用于获取或者设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以这个属性也叫location对象
    URL
    统一资源定位符，是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL，他包含了信息指出文件的位置以及浏览器怎么处理
    URL的一般语法格式是
    protocol://host[:post]/path/[?query]#fragment
    http://www.itcast.cn/index.html?name=andy&age=18#link
    protocol:通信协议 常用的有HTTP，ftp,maito等
    host：主机(域名)
    port:端口号省略时用方案的默认端口号
    path:路径 一般用来表示主机上的一个目录或文件地址
    query：参数 以键值对的形式通过&符号隔开
    fragment：片段 #后面内容常见于链接

    loaction常见的属性 ！！！！
    loaction.href 获取或者设置整个URL ！！！！！！
    location.host 返回主机（域名）
    location.port 返回端口号 如果没有端口号返回空字符串
    location.pathname 返回路径
    location.search 返回参数
    location.hash 返回片段 #后面内容常见于链接

    location常用的方法

    location.assign() 记录浏览历史可以后退

    location.replace() 不记录浏览历史不可以后退

    location.reload() 重新加载页面，相当于刷新

     <button>123</button>
     <script>
         var btn = document.querySelector('button')
         btn.addEventListener('click', function () {
             location.assign('http://www.baidu.com')
             // loaction.replace('http://www.baidu.com')
             location.reload()
         })
     </script>

    navigator对象

    navigator对象包含了有关浏览器的信息,这个里面有很多的属性,常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

     if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows
     phone)/i))){
     window.location.href="" //手机
     }else{
     window.location.href="" //电脑
     }

    history对象

    back()对象 可以后退功能

    forward()对象 可以前进功能

    go(参数) 前进后退功能 如果参数是1就前进一个页面 如果是-1就后退一个页面

     <a href="./day2.html">去</a> <button class="bt1">后退</button>
     <script>
         var btn = document.querySelector('.bt1')
         btn.addEventListener('click', function () {
             history.go(-1)
         })
     </script>