JavaScript学习笔记——BOM（下）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41591033/article/details/100032234

4. 执行机制

4.1 JS是单线程

JS语言的一大特点就是单线程，也就是说，同一时间只能做一件事。
单线程就意味着，所有任务需要排队，第一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行时间过长，就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

4.2 一个问题

以下代码的执行结果是什么？

        console.log(1);
        setTimeout(function(){
            console.log(3);
            
        }, 10000);
        console.log(2);

按照目前知识，以上代码应该先打印1，再打印3，十秒之后再打印2，这样未免太浪费时间

4.3 同步和异步

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

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，比如做饭的同步做法：我们要等饭煮熟后（20分钟之后），再去洗菜，炒菜。

异步

当一个任务耗时较长时，在完成此任务的同时，去处理其他任务，比如做饭的异步做法：在米饭煮熟的20分钟时间里，去洗菜，炒菜。
他们的本质区别：这条流水线上各个流程的执行顺序不同

同步任务

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

异步任务

JS的异步通过回调函数实现。一般而言，异步任务有以下三种类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setTimeout，setInterval等
异步任务相关回调函数添加到任务队列中·（任务队列也称消息队列）

4.4 执行机制

1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行
再回过头看4.2的代码，应该是如下执行顺序
在这里插入图片描述
先执行同步任务 console.log(1);，setTimeout（将setTimeout的回调函数存入消息队列）， console.log(2);再将setTimeout的回调函数执行。
这种主线程一直重复获取任务，执行任务，再获取任务，再执行任务的过程又称为事件循环

5. location对象

5.1 什么是location对象

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

5.2 URL

统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器该怎么处理它
URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
https://www.bilibili.com/video/av56979338?p=92

组成	说明
protocol	通信协议常用的http,tp,maito等
host	主机（域名） www.bilibili.com
port	端口号（可选）省略时使用方案的默认端口号，如http默认端口号为80
path	路径由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分割开来
fragment	片段 #后面内容常见于链接锚点

5.3 location对象的属性

location对象属性	返回值
location.href	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

案例：5秒之后自动跳转页面

分析：

利用定时器做倒计时效果
时间到了，利用location.herf跳转页面

        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var timer = 5;

        btn.addEventListener('click', function(){
            setInterval(function(){
                if(timer == 0){
                    location.href = 'https://www.baidu.com/';
                }else{
                    div.innerHTML = timer + '秒之后自动跳转页面';
                    timer--;
                }

            }, 1000)
        });

5.4 location对象的方法

location对象的方法	返回值
location.assign()	跟herf一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，不记录历史，所以不能后退
location.reload()	重新加载页面，相当于刷新按钮f5 如果参数为true强制刷新ctrl+f5

6. 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.herf = '';	//手机端页面
        }else{
            window.location.herf = '';	//pc端页面
        }

7. history对象

window对象给我们提供了一个history对象，与浏览器历史纪录进行交互，该对象包含用户（在浏览器窗口中）访问锅的URL。

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1，前进一个页面。如果是-1，后退一个页面

        var btn = document.querySelector('button');
        btn.addEventListener('click', function(){
            //history.forward();
            history.go(1);
           // history.back();
            history.go(-1);
        });