[JS-DOM BOM学习笔记]BOM那些儿事儿2

最新推荐文章于 2024-10-15 11:12:27 发布

钧桐

最新推荐文章于 2024-10-15 11:12:27 发布

阅读量159

点赞数 2

分类专栏： JS-DOM BOM学习笔记文章标签： java javascript js

本文链接：https://blog.csdn.net/qq_42136832/article/details/117434317

版权

JS-DOM BOM学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

BOM那些儿事儿

JS执行队列
loacation对象
navigator对象
history对象

JS执行队列

JS是单线程

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致—JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

单线程就意味着所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

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

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

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

1.普通时间，如click，resize
2.资源加载，如load，error等
3.定时器，包括setInterval，setTimeout等

    <script>
        console.log(1);
        setTimeout(function(){
            console.log(3);
        },0)
        console.log(2);
    </script>

同步

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

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用时间去切菜，炒菜。

JS执行机制

1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

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

loacation对象

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

URL

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

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

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机(域名)
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

重点记住：href和search

五秒钟之后跳转页面案例

    <button>跳转</button>
    <div></div>
    <script>
        var btn=document.querySelector('button')
        var div=document.querySelector('div')
        btn.addEventListener('click',function(){
            location.href='http://www.baidu.com';
        })
        var timer=5
        setInterval(() => {
            if(timer == 0){
                location.href='http://www.baidu.com';
            }else{
                div.innerHTML='您将在'+timer+'秒钟之后跳转页面'
                timer--
            }

        }, 1000);
    </script>

location对象的方法

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