小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

下述内容所属本专栏系列-第八部分 BOM

8.4 JavaScript 执行机制

JavaScript 的定时器可以完成一些异步操作。例如，同时设置多个定时器，每个定时器都在3秒后执行一段代码，则三秒后，这些定时器中的代码都会执行。JavaScript 的定时器虽然没有 Java 中的多线程那样强大，但在开发中也能满足大部分的需求。

本节将针对 JavaScript 的执行机制进行讲解

8.4.1 单线程

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

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

案例：演示，

console.log(1);

setTimeout(function() {
console.log(3);
}, 5000);

console.log(2);

执行上述代码，在控制台会看到程序先输出了1、2，等待 5 秒后输出 3。由此可见，当调用setTimeout() 方法后，该方法会立即执行完成，然后执行后面的代码，在控制台中输出 2。而为 setTimeout() 传入的函数，它会在 5 秒后执行。像这样的操作就称为异步操作。这个异步执行的函数称为回调函数，它的调用时机是由定时器来决定的。

8.4.2 同步和异步

为了更好地利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是 JavaScript 出现了同步和异步的概念。

所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法，烧水煮饭，等水开了之后，再去切菜，炒菜。
所谓异步，就是在做一件事件的同时，可以去处理其他的事情。还以做饭为例，异步做法是，在烧水煮饭的同时去切菜炒菜。

同步任务都是在主线程上执行的，会形成一个执行栈，而异步任务是通过回调函数实现的，一般来说，异步任务有 3 种类型，第 1 种是普通事件，如 click、resize 等；第 2 种是资源加载，如 load、error 等；第 3 种是定时器，如 setlnterval()、setTimeout()。

8.4.3 执行机制

当定时器的时间设为 0 的时候，就会产生一个问题，到底是为定时器传入的回调周函数优先执行，还是 setTimeout() 后面的代码优先执行呢?

示例代码如下：

console.log(1);

setTimeout(function() {

console.log(3);
}, 0);

for(var i = 0, str = ''; i < 900000; i++) {
str += i;
// 利用字符串拼接运算拖慢执行时间
}

console.log(2);

上述代码执行后，输出顺序为1、2、3。显然，为定时器传入的回调函数是最后执行的。为了降低偶然性，第 5 ~ 7 行的代码拖慢了执行时间，但最终结果仍然是 3 最后输出。

在 JavaScript 中，同步任务是优先执行的，它们会被放入执行栈中执行，而异步任务(回调函数)则被放人任务队列中，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务就会结束等待状态，进人执行栈，开始执行。

因为 JavaScript 的主线程会不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( Event Loop)。

8.5 location 对象

location 对象比较特别，它既是 window 对象的属性，同时也是 document 对象的属性，window location 等同于document.location，它们是引用了同一个对象。location 对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的 URL。

8.5.1 URL 的组成

location 对象与 URL 相关，因此在学习 location 对象前，我们先来看一下 URL 的组成。在 Internet 上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为统一资源定位符 ( Unifom Resoure Loator, URL)。

在 URL 中，包含了网络协议、服务器的主机名、端口号、资源名称字符串、参数以及锚点，具体示例如下：

// 示例1
protocol://host[:port]/path/[?query]fragment

// 示例2
http://www.example.com:80/web/index.html?a=3&b=4#res

URL 组成说明

各部分	说明
protocol	网络协议，常用的如 http、ftp、mailto 等
host	服务器的主机名，如 www.example.com
port	端口号，可选，省略时使用协议的默认端口，如 http 默认端口为 80
path	路轻，如 " /web/index.html "
query	参数为键值对的形式，通过 " & " 符导分隔，如 " a=3&b=4 "
fragment	锚点，如 " #res " ，表示页面内部的锚点

8.5.2 location 的常用属性

BOM 中 location 对象提供的方法，可以更改当前用户在浏览器中访问的 URL ，实现新文档的载入、重载以及替换等功能。

location 对象提供的 search 属性返回 URL 中的参数，通常用于在向服务器查询信息时传入一些查询条件，如页码，搜索的关键字、排序方式等。除了 search 属性外，location 对象还提供了其他的属性，用于获取或设置对应的 URL 地址的组成部分，如服务器主机名、端口号、URL 协议以及完整的 URL 地址等。

location 对象的属性

属性	说明
location.search	返回(或设置)当前 URL 的查询部分( " ? " 之后的部分)
location.hash	返回一个 URL 的锚部分( 从 " # " 开始的部分)
location.host	返回一个 URL 的主机名和端口
location.hostname	返回 URL 的主机名
location.href	返回完整的 URL
location.pathname	返回 URL 的路径名
location.port	返回一个 URL 服务器使用的端口号
location.protocol	返回一个 URL 协议

🌊🌈往期回顾：

HTML入门指南学习专栏「已完结」:

Javascript入门指南学习专栏「更新中」:

🌊🌈关于后记：

感激相遇你好我是阿ken
个人微信：wlpchaojibang 有问题请随时与我交流，一个人可以走的很快，但一群人才可以走的更远!

「关注」：提高学习效率！

👍🏻：原创不易，适当鼓励！

⭐：收藏文章，温故知新！

💬：评论交流，共同进步！

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十七）