欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js前端面試之同步與異步問題詳解

 更新時間:2019年04月03日 11:50:38   作者:solvep  
這篇文章主要給大家介紹了關(guān)于js前端面試之同步與異步問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

我本來是打算寫一篇co源碼精讀(為啥讀co,因為它短),然鵝發(fā)現(xiàn)自己存在一系列基礎(chǔ)問題沒有搞透徹,打算寫一個js基礎(chǔ)系列文章,總結(jié)自己的理解(copy),希望與你在學(xué)習(xí)路上一同進步。首先問問自己當(dāng)面試官問到j(luò)s中的同步和異步,這個問題該怎么回答?理解一個問題無非是what-why-how

js同步和異步問題是什么-->為什么會產(chǎn)生異步問題-->如何解決。

一、JavaScript起源

技術(shù)的出現(xiàn),和應(yīng)用場景密切相關(guān)的。JavaScript誕生于1995年。當(dāng)時,它的主要目的是處理以前由服務(wù)器端語言(如Perl)負(fù)責(zé)的一些輸入驗證操作。在JavaScript問世之前,必須把表單數(shù)據(jù)發(fā)送到服務(wù)器端才能確定用戶是否沒有填寫某個必填域,是否輸入了無效的值。Netscape Navigator希望通過JavaScript來解決這個問題。起初名字為livescript,但是后來Netscape(網(wǎng)景)與Sun公司成立了一個開發(fā)聯(lián)盟。Netscape為了搭上媒體熱炒Java的順風(fēng)車,臨時把LiveScript改名為JavaScript,所以從本質(zhì)上來說JavaScript和Java沒什么關(guān)系(趁熱度)。

如今,JavaScript的用途早已不再局限于簡單的數(shù)據(jù)驗證,而是具備了與瀏覽器窗口及其內(nèi)容等幾乎所有方面交互的能力。今天的JavaScript已經(jīng)成為一門功能全面的編程語言

總結(jié):js最初的用途是為來實現(xiàn)用戶與瀏覽器的交互

二、JS為何是單線程的?

JavaScript的單線程,與它的用途有關(guān)。作為瀏覽器腳本語言,JavaScript的主要用途是與用戶互動,以及操作DOM。這決定了它只能是單線程,否則會帶來很復(fù)雜的同步問題。比如,假定JavaScript同時有兩個線程,一個線程在某個DOM節(jié)點上添加內(nèi)容,另一個線程刪除了這個節(jié)點,這時瀏覽器應(yīng)該以哪個線程為準(zhǔn)?

所以,為了避免復(fù)雜性,從一誕生,JavaScript就是單線程,這已經(jīng)成這門語言的核心特征,將來也不會改變。

注:所謂單線程,是指在JS引擎中負(fù)責(zé)解釋和執(zhí)行JavaScript代碼的線程只有一個。

三、計算機的同步與異步(重點)

計算機領(lǐng)域中的同步(Synchronous)和異步(Asynchronous)和我們生活中的同步和異步的概念是恰好相反的,感覺是翻譯要背這個鍋。生活中的同步,突出的是‘同',相同的步伐,是咱倆一起行動,比如一起去逛街吃飯飯睡覺覺。異步則是你忙你的,我忙我的,步調(diào)不致且互不干擾。難到計算機里的同步和異步不是這樣?確實不是。

計算機的同步就好比:你去外地上學(xué)人生地不熟,突然生活費不夠了;此時你決定打電話回家,通知家里轉(zhuǎn)生活費過來,可是當(dāng)你撥出電話時,對方一直處于待接聽狀態(tài)(即:打不通,聯(lián)系不上),為了拿到生活費,你就不停的oncall、等待,最終可能不能及時要到生活費,導(dǎo)致你今天要做的事都沒有完成,而白白花掉了時間。
計算機的異步就是:在你打完電話發(fā)現(xiàn)沒人接聽時,猜想:對方可能在忙,暫時無法接聽電話,所以你發(fā)了一條短信(或者語音留言,亦或是其他的方式)通知對方后便忙其他要緊的事了;這時你就不需要持續(xù)不斷的撥打電話,還可以做其他事情;待一定時間后,對方看到你的留言便回復(fù)響應(yīng)你,當(dāng)然對方可能轉(zhuǎn)錢也可能不轉(zhuǎn)錢。但是整個一天下來,你還做了很多事情?;蛘哒f你找室友臨時借了一筆錢,又開始happy的上學(xué)時光了。

總結(jié):計算機中的同步就是排隊等待,假如你是第一百零一個備胎,那你只能等前面的一百個爆了之后才能‘處理'你。異步就是,盡管你是第一百零一個,她還是能照顧到你的感受。

四、js單線程為什么會有'異步'問題

看完前面的鋪墊你是否會產(chǎn)生這些疑問,JS是單線程的,那么他是如何是實現(xiàn)異步操作的?AJAX異步發(fā)送和回調(diào)請求,還有setTimeout也看起來像是多線程的?不急慢慢來

  • js是同步的?

是的,單線程,那肯定只能同步(排隊)執(zhí)行咯

  • js為什么需要異步?

如果JS中不存在異步,只能自上而下執(zhí)行,萬一上一行解析時間很長,那么下面的代碼就會被阻塞。

對于用戶而言,阻塞就意味著"卡死",這樣就導(dǎo)致了很差的用戶體驗

  • js單線程又是如何實現(xiàn)異步的呢?

通過事件循環(huán)(event loop)實現(xiàn)'異步'

經(jīng)典問題:

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

也就是說,setTimeout里的函數(shù)并沒有立即執(zhí)行,而是延遲了一段時間,滿足一定條件后,才去執(zhí)行的,這類代碼,我們叫異步代碼。

所以,這里我們首先知道了JS里的一種分類方式,就是將任務(wù)分為: 同步任務(wù)和異步任務(wù)

雖然JS是單線程的但是瀏覽器的內(nèi)核是多線程的,在瀏覽器的內(nèi)核中不同的異步操作由不同的瀏覽器內(nèi)核模塊調(diào)度執(zhí)行,異步操作會將相關(guān)回調(diào)添加到任務(wù)隊列中。而不同的異步操作添加到任務(wù)隊列的時機也不同,如 onclick, setTimeout, ajax 處理的方式都不同,這些異步操作是由瀏覽器內(nèi)核的 webcore 來執(zhí)行的,webcore 包含上圖中的3種 webAPI,分別是 DOM Binding、network、timer模塊。

按照這種分類方式:JS的執(zhí)行機制是

  • 首先判斷js代碼是同步還是異步,同步就進入主進程,異步就進入event table
  • 異步任務(wù)在event table中注冊函數(shù),當(dāng)滿足觸發(fā)條件后,被推入event queue
  • 同步任務(wù)進入主線程后一直執(zhí)行,直到主線程空閑時,才會去event queue中查看是否有可執(zhí)行的異步任務(wù),如果有就推入主進程中

以上三步循環(huán)執(zhí)行,這就是event loop

總結(jié):同步可以保證順序一致,但是容易導(dǎo)致阻塞;異步可以解決阻塞問題,但是會改變順序性,根據(jù)不同的需要去寫你的代碼。

每周都會持續(xù)更新,您的點贊,收藏,關(guān)注三連擊是我的動力。

決定了前方的路怎么走,就不要總回頭看,peace&love。

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對腳本之家的支持。

相關(guān)文章

  • 使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件

    使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件

    這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-03-03
  • 微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹

    微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹

    這篇文章主要介紹了微信內(nèi)置瀏覽器私有接口WeixinJSBridge介紹,本文講解了發(fā)送給好友、分享函數(shù)、隱藏工具欄、隱藏三個點按鈕等功能,需要的朋友可以參考下
    2015-05-05
  • layer彈出層框架alert與msg詳解

    layer彈出層框架alert與msg詳解

    本文主要介紹了layer彈出層框架alert與msg的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • JavaScript錯誤處理和堆棧追蹤詳解

    JavaScript錯誤處理和堆棧追蹤詳解

    這篇文章主要為大家詳細介紹了JavaScript錯誤處理和堆棧追蹤的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • js實現(xiàn)圖片上傳并預(yù)覽功能

    js實現(xiàn)圖片上傳并預(yù)覽功能

    這篇文章主要為大家詳細介紹了js實現(xiàn)圖片上傳并預(yù)覽功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-08-08
  • 你不知道的前端console用法分享

    你不知道的前端console用法分享

    console一定是各位前端最熟悉的小伙伴了,有些網(wǎng)站還會在控制臺輸出一些有意思的東西,下面這篇文章主要給大家介紹了關(guān)于前端console用法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-08-08
  • JavaScript變量基本使用方法實例分析

    JavaScript變量基本使用方法實例分析

    這篇文章主要介紹了JavaScript變量基本使用方法,結(jié)合實例形式分析了JavaScript變量的類型、使用注意事項及命名規(guī)范,需要的朋友可以參考下
    2019-11-11
  • 跟我學(xué)習(xí)javascript的閉包

    跟我學(xué)習(xí)javascript的閉包

    跟我學(xué)習(xí)javascript的閉包,這篇文章的目的就是讓大家對javascript閉包有一個非常全面的了解,感興趣的小伙伴們可以參考一下。
    2015-11-11
  • javascript下arguments,caller,callee,call,apply示例及理解

    javascript下arguments,caller,callee,call,apply示例及理解

    在看到大家如此關(guān)注JS里頭的這幾個對象,我試著把原文再修改一下,力求能再詳細的闡明個中意義
    2009-12-12
  • 微信小程序動態(tài)添加和刪除組件的現(xiàn)實

    微信小程序動態(tài)添加和刪除組件的現(xiàn)實

    這篇文章主要介紹了微信小程序動態(tài)添加和刪除組件的現(xiàn)實,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02

最新評論