一、JS執(zhí)行機(jī)制

（1）JS是單線程

JavaScript語言的一大特點就是單線程，也就是同一時間只能做一件事。因為JavaScript是為了處理頁面中的用戶交互，以及制作DOM二誕生的。比如我們對某個DOM元素進(jìn)行添加和刪除操作，這個不能同時進(jìn)行，應(yīng)該先添加，后刪除。

這樣也會有問題：如果JS執(zhí)行時間過長，會造成頁面渲染不連貫，導(dǎo)致頁面渲染加載阻塞的感覺

為了解決這個問題，利用多喝CPU的計算能力，HTML5提粗Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個線程，于是就有了同步和異步。

（2）同步和異步

1.同步

前一個任務(wù)結(jié)束后再執(zhí)行后一個任務(wù)，程序的執(zhí)行與任務(wù)的排列順序是一致的、同步的。

該怎么理解呢？

就像做飯的同步做法：我們要燒水做飯，等水開了（10分鐘之后），再去切菜，炒菜，一步一步來。

2.異步

在執(zhí)行這個任務(wù)的同時，也在執(zhí)行別的任務(wù)。

再來拿做飯打比方：在燒水的同時，我們來切菜，炒菜。

簡單以一個案例來體驗一下JS的執(zhí)行過程：

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

執(zhí)行結(jié)果是：

由此可以看出，現(xiàn)在的JS可以同時執(zhí)行任務(wù)，也就是可以異步執(zhí)行 

（3）同步任務(wù)

同步任務(wù)都在主線程是執(zhí)行，形成一個執(zhí)行棧

（4）異步任務(wù)

JS的異步任務(wù)是通過回調(diào)函數(shù)實現(xiàn)的

異步任務(wù)有三種類型：

• 普通事件：如click，resize等
• 資源加載：如load，error等
• 定時器：包括setInterval，setTimeout等

異步任務(wù)相關(guān)回調(diào)函數(shù)添加到任務(wù)隊列中（任務(wù)隊列也稱為消息隊列） 

（5）JS執(zhí)行機(jī)制

1.先執(zhí)行執(zhí)行棧中的同步任務(wù)

2.異步任務(wù)（回調(diào)函數(shù)）放入任務(wù)隊列中

3.一旦執(zhí)行棧中的同步任務(wù)完成，按次序讀取任務(wù)隊列中的異步任務(wù)，于是被讀取的異步任務(wù)結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行 

案例：來一個練習(xí)題試試，像下面這個代碼該怎么執(zhí)行呢？究竟是1 2 3還是1 3 2呢？

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

居然還是1 2 3，，看來這個是一個同步任務(wù)，它會形成一個執(zhí)行棧

但是普通的同步任務(wù)只會產(chǎn)生1 2 3的序列，而setTimeout屬于異步任務(wù)的定時器類型，它會產(chǎn)生一個任務(wù)隊列

 按照執(zhí)行機(jī)制來看，先執(zhí)行執(zhí)行棧中的同步任務(wù)，先執(zhí)行

console.log(1);

遇見了異步任務(wù)

setTimeout(fn(), 0);

把異步任務(wù)放入任務(wù)隊列中，不執(zhí)行，執(zhí)行完執(zhí)行棧里的同步任務(wù)后再執(zhí)行，最后的輸出就是我們看見的1 2 3

那如果有多個異步任務(wù)該怎么執(zhí)行呢？我們來看下面這段代碼

console.log(1);
document.onclick = function () {
   console.log('click');
}
console.log(2);
setTimeout(function () {
   console.log(3);
}, 1000);

里面的執(zhí)行過程為：

其中document.onclick那個只有再鼠標(biāo)點擊后才會放入任務(wù)隊列，setTimeout這個只有事件到了才會放入任務(wù)隊列，也就是圖中的console.log(3) ，執(zhí)行完就會清空任務(wù)隊列

 由于主線程不斷的重復(fù)獲得任務(wù)、執(zhí)行任務(wù)、在獲取任務(wù)、再執(zhí)行，所以這種機(jī)制被稱為事件循環(huán)（even lop）

二、location對象

（1）location對象

window對象給我們提供了一個location屬性用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。因為這個屬性返回的是一個對象，所以我們將這個屬性也稱為location對象。

（2）URL

統(tǒng)一資源定位符（Uniform Resource Locator，URL）是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址?；ヂ?lián)網(wǎng)上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器一個怎么處理它。

URL的一般語法格式為：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

（3）location對象的屬性

敲重點?。?！href和search要重點記住

來做一個案例：5秒后跳轉(zhuǎn)頁面

手動跳轉(zhuǎn)：

<button>點擊</button>

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
    location.;
})

直接輸出location.href可以得到該頁面的整個URL，賦值可以去往另一個頁面

主播主播，手動跳轉(zhuǎn)還是太累了，有沒有更強(qiáng)勢的跳轉(zhuǎn)方式？

有的有的，有一個自動跳轉(zhuǎn)的方法

先建立一個空的div盒子

<div></div>

然后寫JS，采用定時器實現(xiàn)5s后跳轉(zhuǎn)頁面

var div = document.querySelector('div');
var timer = 5;
function fn() {
   div.innerHTML = '您將在' + timer + '秒之后跳轉(zhuǎn)到首頁';
   timer--;
}
fn();
setInterval(function () {
   if (timer == 0) {
        location.;
   }
   else {
        fn();
   }
}, 1000)

案例：獲取URL參數(shù)數(shù)據(jù)

來練習(xí)一下數(shù)據(jù)在不同頁面中的傳遞

新建一個文件夾，將我們要建立我們這兩個頁面

然后在login.html中使用表單，來將數(shù)據(jù)傳輸?shù)絠ndex.html里

<form action="index.html">
   用戶名<input type="text" name="uname">
   <input type="submit" value="登錄">
</form>

 在這個界面里輸入123 

在index這里我們就有了123這個信息

 也就是要用？后面的那一串信息

我們可以用location.search得到?uname=123

但是我們不需要?，則我們用substr去掉

var params=location.search.substr(1);

 然后再利用=分割鍵和值，也就是split('=')

var arr=params.split('=');

再把數(shù)據(jù)寫入div中

var div = document.querySelector('div');
div.innerHTML = arr[1] + '歡迎您';

這樣就能把數(shù)據(jù)傳到另一個頁面上啦

（4）location對象的方法

1.location.assign()

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
     location.assign('http://www.itcast.cn');
})

記錄瀏覽歷史，可以實現(xiàn)后退功能

2.location.replace()

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
     location.replace('http://www.itcast.cn');
})

不記錄瀏覽歷史，不可以實現(xiàn)后退功能

3.location.reload();

location.reload();

重新加載，也就是刷新，如果參數(shù)是true，則強(qiáng)制刷新

（5）navigator對象

navigator對象包含有關(guān)瀏覽器的信息，有很多屬性，最常用的是userAgent，該屬性可以返回有客戶機(jī)發(fā)送服務(wù)器的user—-agent頭部的值。

下面前端代碼可以判斷用戶那個中斷打開頁面，實現(xiàn)跳轉(zhuǎn)

if(navigator.userAgent.match(/phone|pad|pod|iPod|ios|ipad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";//手機(jī)
}
else {
    window.location.href = "";//電腦
}

（6）history對象

window對象給我們提供了一個history對象，與瀏覽器歷史記錄進(jìn)行交互。該對象包含用戶（在瀏覽器窗口中）訪問過的URL。

1.back()

模擬后退功能

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
    history.back()
})

2.forward()

模擬前進(jìn)功能

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
    history.forward()
})

3.go()

模擬前進(jìn)和后退

前進(jìn)：

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

后退：

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

 history對象一般在實際開發(fā)中比較少用，但是會在一下辦公系統(tǒng)中見到。

總結(jié)

到此這篇關(guān)于從JavaScript的執(zhí)行機(jī)制到location對象的文章就介紹到這了,更多相關(guān)JS的執(zhí)行機(jī)制到location對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論