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() 重新加载页面，相当于刷新

1     <button>123</button>
2     <script>
3         var btn = document.querySelector('button')
4         btn.addEventListener('click', function () {
5             location.assign('http://www.baidu.com')
6             // loaction.replace('http://www.baidu.com')
7             location.reload()
8         })
9     </script>

navigator对象

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

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

history对象

back()对象可以后退功能

forward()对象可以前进功能

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

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

posted @ 2020-04-09 14:15 徐12 阅读(184) 评论(0) 收藏举报

刷新页面返回顶部

徐许

JS 执行机制笔记

history对象

公告