整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
javascript 是一門單線程的語言，在同一個時間只能做完成一件任務(wù)，如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，再去執(zhí)行后面的任務(wù)。作為瀏覽器端的腳本語言，javascript 的主要功能是用來和用戶交互以及操作 dom。假設(shè) javascript 不是單線程語言，在一個線程里我們給某個 dom 節(jié)點增加內(nèi)容的時候，另一個線程同時正在刪除這個 dom 節(jié)點的內(nèi)容，則會造成混亂。
由于 js 單線程的設(shè)計，假設(shè) js 程序的執(zhí)行都是同步。如果執(zhí)行一些耗時較長的程序，例如 ajax 請求，在請求開始至請求響應(yīng)的這段時間內(nèi)，當(dāng)前的工作線程一直是空閑狀態(tài)， ajax 請求后面的 js 代碼只能等待請求結(jié)束后執(zhí)行，因此會導(dǎo)致 js 阻塞的問題。
javascript 單線程指的是瀏覽器中負(fù)責(zé)解釋和執(zhí)行 javascript 代碼的只有一個線程，即為 js 引擎線程，但是瀏覽器的渲染進程是提供多個線程的，如下：
為解決上述類似上述 js 阻塞的問題，js 引入了同步和異步的概念。
“同步”就是后一個任務(wù)等待前一個任務(wù)結(jié)束后再去執(zhí)行。
“異步”與同步不同，每一個異步任務(wù)都有一個或多個回調(diào)函數(shù)。webapi 會在其相應(yīng)的時機里將回調(diào)函數(shù)添加進入消息隊列中，不直接執(zhí)行，然后再去執(zhí)行后面的任務(wù)。直至當(dāng)前同步任務(wù)執(zhí)行完畢后，再把消息隊列中的消息添加進入執(zhí)行棧進行執(zhí)行。
異步任務(wù)在瀏覽器中一般是以下：
“棧”是一種數(shù)據(jù)結(jié)構(gòu)，是一種線性表。特點為 LIFO，即先進后出 （last in, first out）。
利用數(shù)組的 push 和 shift 可以實現(xiàn)壓棧和出棧的操作。
在代碼運行的過程中，函數(shù)的調(diào)用會形成一個由若干幀組成的棧。
function foo(b) {
let a=10;
return a + b + 11;
}
function bar(x) {
let y=3;
return foo(x * y);
}
console.log(bar(7))上面代碼最終會在控制臺打印42,下面梳理一下它的執(zhí)行順序。
對象被分配在堆中，堆是一個用來表示一大塊（通常是非結(jié)構(gòu)化的）內(nèi)存區(qū)域的計算機術(shù)語。
首先，stack 是有結(jié)構(gòu)的，每個區(qū)塊按照一定次序存放，可以明確知道每個區(qū)塊的大小；heap 是沒有結(jié)構(gòu)的，數(shù)據(jù)可以任意存放。因此，
stack 的尋址速度要快于 heap。
其次，每個線程分配一個 stack，每個進程分配一個 heap，也就是說，stack 是線程獨占的，heap 是線程共用的。
此外，stack 創(chuàng)建的時候，大小是確定的，數(shù)據(jù)從超過這個大小，就發(fā)生 stack overflow 錯誤，而 heap 的大小是不確定的，
需要的話可以不斷增加。
public void Method1()
{
int i=4;
int y=2;
class1 cls1=new class1();
}上面代碼這三個變量和一個對象實例在內(nèi)存中的存放方式如下。
從上圖可以看到，i、y和cls1都存放在stack，因為它們占用內(nèi)存空間都是確定的，而且本身也屬于局部變量。但是，cls1指向的對象實例存放在heap，因為它的大小不確定。作為一條規(guī)則可以記住，所有的對象都存放在heap。
接下來的問題是，當(dāng)Method1方法運行結(jié)束，會發(fā)生什么事？
回答是整個stack被清空，i、y和cls1這三個變量消失，因為它們是局部變量，區(qū)塊一旦運行結(jié)束，就沒必要再存在了。而heap之中的那個對象實例繼續(xù)存在，直到系統(tǒng)的垃圾清理機制（garbage collector）將這塊內(nèi)存回收。因此，一般來說，內(nèi)存泄漏都發(fā)生在heap，即某些內(nèi)存空間不再被使用了，卻因為種種原因，沒有被系統(tǒng)回收。
隊列是一種數(shù)據(jù)結(jié)構(gòu)，也是一種特殊的線性表。特點為 FIFO，即先進先出（first in, first out）
利用數(shù)組的 push 和 pop 可實現(xiàn)入隊和出隊的操作。
事件循環(huán)和事件隊列的維護是由事件觸發(fā)線程控制的。
事件觸發(fā)線程線程同樣是由瀏覽器渲染引擎提供的，它會維護一個事件隊列。
js 引擎遇到上文所列的異步任務(wù)后，會交個相應(yīng)的線程去維護異步任務(wù)，等待某個時機，然后由事件觸發(fā)線程將異步任務(wù)對應(yīng)的回調(diào)函數(shù)加入到事件隊列中，事件隊列中的函數(shù)等待被執(zhí)行。
js 引擎在執(zhí)行過程中，遇到同步任務(wù)，會將任務(wù)直接壓入執(zhí)行棧中執(zhí)行，當(dāng)執(zhí)行棧為空（即 js 引擎線程空閑）， 事件觸發(fā)線程 會從事件隊列中取出一個任務(wù)（即異步任務(wù)的回調(diào)函數(shù)）放入執(zhí)行在棧中執(zhí)行。
執(zhí)行完了之后，執(zhí)行棧再次為空，事件觸發(fā)線程會重復(fù)上一步的操作，再從事件隊列中取出一個消息，這種機制就被稱為 事件循環(huán) （Event Loop）機制。
為了更好地理解Event Loop，請看下圖（轉(zhuǎn)引自Philip Roberts的演講《Help, I'm stuck in an event-loop》）。
例子代碼：
console.log('script start')
setTimeout(()=> {
console.log('timer 1 over')
}, 1000)
setTimeout(()=> {
console.log('timer 2 over')
}, 0)
console.log('script end')
// script start
// script end
// timer 2 over
// timer 1 over模擬 js 引擎對其執(zhí)行過程：
此時，執(zhí)行棧為空，js 引擎線程空閑。便從事件隊列中讀取任務(wù)，此時隊列如下：
注意點：
上面，timer 2 的延時為 0ms，HTML5標(biāo)準(zhǔn)規(guī)定 setTimeout 第二個參數(shù)不得小于4（不同瀏覽器最小值會不一樣），不足會自動增加，所以 "timer 2 over" 還是會在 "script end" 之后。
就算延時為0ms,只是 time 2 的回調(diào)函數(shù)會立即加入事件隊列而已，回調(diào)的執(zhí)行還是得等到執(zhí)行棧為空時執(zhí)行。
在 ES6 新增 Promise 處理異步后，js 執(zhí)行引擎的處理過程又發(fā)生了新的變化。
看代碼：
console.log('script start')
setTimeout(function() {
console.log('timer over')
}, 0)
Promise.resolve().then(function() {
console.log('promise1')
}).then(function() {
console.log('promise2')
})
console.log('script end')
// script start
// script end
// promise1
// promise2
// timer over這里又新增了兩個新的概念， macrotask （宏任務(wù)）和 microtask （微任務(wù)）。
所有的任務(wù)都劃分到宏任務(wù)和微任務(wù)下：
js 引擎首先執(zhí)行主代碼塊。
執(zhí)行棧每次執(zhí)行的代碼就是一個宏任務(wù)，包括任務(wù)隊列（宏任務(wù)隊列）中的。執(zhí)行棧中的任務(wù)執(zhí)行完畢后，js 引擎會從宏任務(wù)隊列中去添加任務(wù)到執(zhí)行棧中，即同樣是事件循環(huán)的機制。
當(dāng)在執(zhí)行宏任務(wù)遇到微任務(wù) Promise.then 時，會創(chuàng)建一個微任務(wù)，并加入到微任務(wù)隊列中的隊尾。
微任務(wù)是在宏任務(wù)執(zhí)行的時候創(chuàng)建的，而在下一個宏任務(wù)執(zhí)行之前，瀏覽器會對頁面重新渲染（task >> render >> task（任務(wù)隊列中讀取））。 同時，在上一個宏任務(wù)執(zhí)行完成后，頁面渲染之前，會執(zhí)行當(dāng)前微任務(wù)隊列中的所有微任務(wù)。
所以上述代碼的執(zhí)行過程就可以解釋了。
js 引擎執(zhí)行 promise.then 時，promise1、promise2 被認(rèn)為是兩個微任務(wù)按照代碼的先后順序被加入到微任務(wù)隊列中，script end執(zhí)行后，棧空。
此時當(dāng)前宏任務(wù)（script 主代碼塊）執(zhí)行完畢，并不從當(dāng)前宏任務(wù)隊列中讀取任務(wù)。而是立馬清空當(dāng)前宏任務(wù)所產(chǎn)生的微任務(wù)隊列。將兩個微任務(wù)依次放入執(zhí)行棧中執(zhí)行。執(zhí)行完畢，打印 promise1、promise2。棧空。 此時，第一輪事件循環(huán)結(jié)束。
緊接著，再去讀取宏任務(wù)隊列中的任務(wù)，time over 被打印。棧空。
因此，宏任務(wù)和微任務(wù)的執(zhí)行機制如下：
因為,async 和 await 本質(zhì)上還是基于 Promise 的封裝，而 Promise 是屬于微任務(wù)的一種。所以使用 await 關(guān)鍵字與 Promise.then 效果類似：
setTimeout(_=> console.log(4))
async function main() {
console.log(1)
await Promise.resolve()
console.log(3)
}
main()
console.log(2)
// 1
// 2
// 3
// 4async 函數(shù)在 await 之前的代碼都是同步執(zhí)行的， 可以理解為 await 之前的代碼都屬于 new Promise 時傳入的代碼，await 之后的所有代碼都是 Promise.then 中的回調(diào)，即在微任務(wù)隊列中。
參考：
原文作者:大芒果哇
原文地址:https://www.cnblogs.com/shenggao/p/13799566.html
者：櫻桃小丸子兒
來源：https://www.jianshu.com/p/2f7eb1ad7174
1、Html5與html4相比，各有何優(yōu)缺點？ 怎樣處理html5新標(biāo)簽的兼容性問題？
html5余html4的異同請看以下的鏈接
html5與html4的異同
兼容性問題
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如html5shim。
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
1、JS如何使頁面跳轉(zhuǎn)?怎么引入一個外部JS文件?
①直接在head標(biāo)簽內(nèi)寫入js代碼，如下
<Script Language="JavaScript">js 語句</Script>
②引入寫好的js文件，使用語句
<script language="JavaScript" src="test.js"></script>
也是直接放入到head標(biāo)簽里頭，也有的是放在</body>前面。
2、輸入框的驗證用什么事件?
change(fn)
3、undefined與null有何異同？
null是一個表示"無"的對象，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示"無"的原始值，轉(zhuǎn)為數(shù)值時為NaN。
undefined：
（1）變量被聲明了，但沒有賦值時，就等于undefined。
（2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時，默認(rèn)返回undefined。
null：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
（2） 作為對象原型鏈的終點。
它們都表示空，轉(zhuǎn)換為boolean后都為false，但是null代表一個對象變量已經(jīng)被初始化，但未裝入對象；undefined表示未初始化變量
4、===與==有何異同？
相同點：都是判定兩個值是否相等
不同點：==不會判斷類型，而===會判斷類型
5、如何判斷一個變量的值是否為數(shù)字？以及有哪些手段判斷變量值的數(shù)據(jù)類型？
全局函數(shù)isNaN可以判斷一個變量的值是否為數(shù)字。
可以使用運算符type、instanceof判斷變量值的數(shù)據(jù)類型。
6、什么是Bom什么是Dom?你如何理解Dom?
鏈接標(biāo)記target與Dom，Bom
7、Array的join、push、splice、slice各有何用途，splice與slice有何異同？
join：使用指定間隔符連接所有元素為字符串
push：在尾部添加元素并維護array實例的length
splice與slice都是截取一部分元素。不同的在于：slice返回截取后的新實例，splice在原array實例上操作，更詳細(xì)的請見下文鏈接。
JS中數(shù)組對象詳解
8、如何阻止表單提交？
在onsubmit事件中返回false
9、如何動態(tài)操作表格？
可以像普通dom一樣操作，但是因為表格的dom比較復(fù)雜，所以我通常是使用table的insertRow、deleteRow及tr對象的insetCell、deleteCell操作。
10、String.match與RegExp.exec有何區(qū)別？
match只會返回沒有分組的全部匹配結(jié)果或者有分組的第一次匹配結(jié)果；
而exec可以利用循環(huán)返回全部匹配結(jié)果。
11、為驗證手機號寫一個正則。
function checkSubmitMobil()
{
if ($("#phoneNum").val()=="") {
alert("手機號碼不能為空！");
//$("#moileMsg").html("<font color='red'>手機號碼不能為空！</font>");
$("#mobile").focus();
return false;
}
if (!$("#phoneNum").val().match(/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/))
{
alert("手機號碼格式不正確！");
//$("#moileMsg").html("<font color='red'>手機號碼格式不正確！請重新輸入！</font>");
$("#phoneNum").focus();
return false;
}
return true;
}
12、正則的i標(biāo)記與g標(biāo)記各有何用途？
i：不區(qū)分大小寫；
g：全局匹配。
13、為String添加trim()方法。
String.prototype.trim=function() {
return this.replace(/^ +| +$/g,"");
}
14、簡述COOKIE。在JS中如何操作Cookie?
簡述cookie，在JS中如何操作cookie
15、談?wù)刯avascript數(shù)組排序方法sort()的使用，重點介紹sort()參數(shù)的使用及其內(nèi)部機制。
JS數(shù)組排序方法sort()的使用
16、談?wù)刬nnerHTML outerHTML innerText之間的區(qū)別。
①innerHTML是w3c的html dom定義的方法，而后兩者是IE獨有的方法；
②innerHTML代表一個元素節(jié)點內(nèi)由所有子節(jié)點，不包括當(dāng)前節(jié)點組成的html代碼；
③outerHTML代表一個元素節(jié)點內(nèi)由所有子節(jié)點和當(dāng)前節(jié)點組成的html代碼；
④innerText代表一個元素節(jié)點內(nèi)由所有子文本節(jié)點內(nèi)容組成的文本；
17、在JavaScript中定時調(diào)用函數(shù) foo() 如何寫？
setTimeout( foo, 1000 //這里設(shè)置延時數(shù) );
18、setTimeout與setInterval有何區(qū)別?
①setTimeout和setInterval的語法相同。它們都有兩個參數(shù)，一個是將要執(zhí)行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當(dāng)過了那個時間段之后就將執(zhí)行那段代碼。
②不過這兩個函數(shù)還是有區(qū)別的，setInterval在執(zhí)行完一次代碼之后，經(jīng)過了那個固定的時間間隔，它還會自動重復(fù)執(zhí)行代碼，而setTimeout只執(zhí)行一次那段代碼。
19、你在js中用過array嗎？如果用過，array中添加數(shù)據(jù)用什么方法？
在尾部添加使用push();
在頭部添加使用unshift();
在任意位置添加使用splice(),但要注意把它的刪除個數(shù)設(shè)置為0;
array詳細(xì)介紹請看下文鏈接
JS中數(shù)組對象詳解
20、簡述javascript的優(yōu)缺點。
優(yōu)點：簡單易用，與Java有類似的語法，可以使用任何文本編輯工具編寫，只需要瀏覽器就可執(zhí)行程序，并且事先不用編譯，逐行執(zhí)行，無需進行嚴(yán)格的變量聲明，而且內(nèi)置大量現(xiàn)成對象，編寫少量程序可以完成目標(biāo)；
缺點：不適合開發(fā)大型應(yīng)用程序；
21、Javascript有哪些內(nèi)置對象?
只有Math和Global（在瀏覽器環(huán)境中，Global就是Window）
22、列舉Javascript的本地對象。
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
23、javascript的typeof返回哪些數(shù)據(jù)類型
object number function boolean undefind string
24、例舉3種強制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?
強制（parseInt,parseFloat,number）
隱式（==–===）
25、IE和DOM事件流的區(qū)別
①執(zhí)行順序不一樣、
②參數(shù)不一樣
③事件加不加on
④this指向問題
26、事件綁定和普通事件有什么區(qū)別
①事件綁定就是針對dom元素的事件，綁定在dom元素上
②普通事件即為非針對dom元素的事件
27、事件委托是什么
利用事件冒泡的原理，讓自己的所觸發(fā)的事件，由他的父元素代替執(zhí)行！
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。
例子請看以下鏈接
JS中的事件委托
28、閉包是什么，有什么特性，對頁面有什么影響
什么是閉包
“官方”的解釋：所謂“閉包”，指的是一個擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個函數(shù)），因而這些變量也是該表達(dá)式的一部分。
在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等語言中都能找到對閉包不同程度的支持。
通俗的講就是函數(shù)a的內(nèi)部函數(shù)b，被函數(shù)a外部的一個變量引用的時候，就創(chuàng)建了一個閉包。
閉包的特性：
①.封閉性：外界無法訪問閉包內(nèi)部的數(shù)據(jù)，如果在閉包內(nèi)聲明變量，外界是無法訪問的，除非閉包主動向外界提供訪問接口；
②.持久性：一般的函數(shù)，調(diào)用完畢之后，系統(tǒng)自動注銷函數(shù)，而對于閉包來說，在外部函數(shù)被調(diào)用之后，閉包結(jié)構(gòu)依然保存在；
對頁面的影響
使用閉包會占有內(nèi)存資源，過多的使用閉包會導(dǎo)致內(nèi)存溢出等。
詳細(xì)請看以下推薦鏈接
深入理解JavaScript的閉包特性 如何給循環(huán)中的對象添加事件
29、javascript的本地對象，內(nèi)置對象和宿主對象
①本地對象為array obj regexp等可以new實例化
②內(nèi)置對象為gload Math 等不可以實例化的
③宿主為瀏覽器自帶的document,window 等
30、編寫一個數(shù)組去重的方法
思路：
1.創(chuàng)建一個新的數(shù)組存放結(jié)果
2.創(chuàng)建一個空對象
3.for循環(huán)時，每次取出一個元素與對象進行對比，如果這個元素不重復(fù)，則把它存放到結(jié)果數(shù)組中，同時把這個元素的內(nèi)容作為對象的一個屬性，并賦值為1，存入到第2步建立的對象中。
說明：至于如何對比，就是每次從原數(shù)組中取出一個元素，然后到對象中去訪問這個屬性，如果能訪問到值，則說明重復(fù)。
代碼如下：
Array.prototype.unique3=function(){
var res=[];
var json={};
for(var i=0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]]=1;
}
}
return res;
}
var arr=[112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
31、this對象的理解
①this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
②如果有new關(guān)鍵字，this指向new出來的那個對象；
③在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window；
32、eval是做什么的？
①它的功能是把對應(yīng)的字符串解析成JS代碼并運行；
②應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。
③由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj=eval('('+ str +')');
33、new操作符具體干了什么呢?
①創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。
②屬性和方法被加入到 this 引用的對象中。
③新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。
34、call() 和 apply() 的區(qū)別和作用？
①apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null，則使用全局對象代替。
如：function.apply(this,[1,2,3])；
②call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。
如：function.call(this,1,2,3)；
如何獲取UA
JS代碼
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
35、請解釋一下 JavaScript 的同源策略
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
36、請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
小結(jié)
在互聯(lián)網(wǎng)上，圖像和鏈接則是通過URL唯一確定信息資源的位置。URL分為絕對URL和相對URL。通過使用<img />標(biāo)記在瀏覽器中顯示一張圖像。超文本具有的鏈接能力，可層層鏈接相關(guān)文件，這種具有超鏈接能力的操作，稱為超鏈接。鏈接文檔中的特定位置也稱為錨點，定義錨點和超鏈接都使用<a>標(biāo)記。圖像地圖是帶有可點擊區(qū)域的圖像，每個區(qū)域是一個相關(guān)的超級鏈接。video和audio這兩個HTML5新增加的元素，它們分別用來處理視頻與音頻數(shù)據(jù)，使得多媒體播放再也不需要安裝插件了。
習(xí)題
1．a(chǎn)udio元素中src屬性的作用是（C）
A．提供播放、暫停和音量控件 B．循環(huán)播放
C．制定要播放音頻的URL D．插入一段替換內(nèi)容
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
