資訊專(zhuān)欄INFORMATION COLUMN
摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。
以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。
一. 輸入url后的加載過(guò)程從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么
計(jì)算機(jī)網(wǎng)絡(luò)體系結(jié)構(gòu)
應(yīng)用層(HTTP、SMTP、FTP、POP3)
運(yùn)輸層(TCP、UDP)
網(wǎng)絡(luò)層(IP(路由器))
數(shù)據(jù)鏈路層(網(wǎng)橋(CSMA/CD、PPP))
物理層(集線器)
1. 查找域名對(duì)應(yīng)IP地址這一步包括 DNS 具體的查找過(guò)程，包括：瀏覽器緩存->系統(tǒng)緩存->路由器緩存...
(1) 瀏覽器搜索自己的 DNS 緩存（維護(hù)一張域名與 IP 地址的對(duì)應(yīng)表）；
(2) 搜索操作系統(tǒng)中的 DNS 緩存（維護(hù)一張域名與 IP 地址的對(duì)應(yīng)表）；
(3) 搜索操作系統(tǒng)的 hosts 文件（ Windows 環(huán)境下，維護(hù)一張域名與 IP 地址的對(duì)應(yīng)表）；
(4) 操作系統(tǒng)將域名發(fā)送至 LDNS（本地區(qū)域名服務(wù)器），LDNS 查詢 自己的 DNS 緩存（一般查找成功率在 80% 左右），查找成功則返回結(jié)果，失敗則發(fā)起一個(gè)迭代 DNS 解析請(qǐng)求：
① LDNS 向 Root Name Server （根域名服務(wù)器，如 com、net、org等的解析的頂級(jí)域名服務(wù)器的地址）發(fā)起請(qǐng)求，此處，Root Name Server 返回 com 域的頂級(jí)域名服務(wù)器的地址；
② LDNS 向 com 域的頂級(jí)域名服務(wù)器發(fā)起請(qǐng)求，返回 baidu.com 域名服務(wù)器地址；
③ LDNS 向 baidu.com 域名服務(wù)器發(fā)起請(qǐng)求，得到 www.baidu.com 的 IP 地址；
(5) LDNS 將得到的 IP 地址返回給操作系統(tǒng)，同時(shí)自己也將 IP 地址緩存起來(lái)；
(6) 操作系統(tǒng)將 IP 地址返回給瀏覽器，同時(shí)自己也將 IP 地址緩存起來(lái)；
2. 建立連接(TCP的三次握手)(1) 主機(jī)向服務(wù)器發(fā)送一個(gè)建立連接的請(qǐng)求；
(2) 服務(wù)器接到請(qǐng)求后發(fā)送同意連接的信號(hào)；
(3) 主機(jī)接到同意連接的信號(hào)后，再次向服務(wù)器發(fā)送了確認(rèn)信號(hào) ;
3. 構(gòu)建網(wǎng)頁(yè)注意：這里的三次握手中主機(jī)兩次向服務(wù)器發(fā)送確認(rèn)，第二次是為了防止已失效的連接請(qǐng)求報(bào)文段傳至服務(wù)器導(dǎo)致錯(cuò)誤。
(1) 瀏覽器根據(jù) URL 內(nèi)容生成 HTTP 請(qǐng)求，請(qǐng)求中包含請(qǐng)求文件的位置、請(qǐng)求文件的方式等等；
(2) 服務(wù)器接到請(qǐng)求后，會(huì)根據(jù) HTTP 請(qǐng)求中的內(nèi)容來(lái)決定如何獲取相應(yīng)的 HTML 文件；
(3) 服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器；
(4) 在瀏覽器還沒(méi)有完全接收 HTML 文件時(shí)便開(kāi)始渲染、顯示網(wǎng)頁(yè)；
(5) 在執(zhí)行 HTML 中代碼時(shí)，根據(jù)需要，瀏覽器會(huì)繼續(xù)請(qǐng)求圖片、音頻、視頻、CSS、JS等文件，過(guò)程同請(qǐng)求 HTML ；
4. 斷開(kāi)連接(TCP的四次揮手)瀏覽器渲染展示網(wǎng)頁(yè)過(guò)程
HTML代碼轉(zhuǎn)化為DOM(DOM Tree)
CSS代碼轉(zhuǎn)化成CSSOM（CSS Object Model）
結(jié)合DOM和CSSOM，生成一棵渲染樹(shù)（包含每個(gè)節(jié)點(diǎn)的視覺(jué)信息）(Render Tree)
生成布局（layout），即將所有渲染樹(shù)的所有節(jié)點(diǎn)進(jìn)行平面合成
將布局繪制（paint）在屏幕上
(1) 主機(jī)向服務(wù)器發(fā)送一個(gè)斷開(kāi)連接的請(qǐng)求；
(2) 服務(wù)器接到請(qǐng)求后發(fā)送確認(rèn)收到請(qǐng)求的信號(hào)；(此時(shí)服務(wù)器可能還有數(shù)據(jù)要發(fā)送至主機(jī))
(3) 服務(wù)器向主機(jī)發(fā)送斷開(kāi)通知；(此時(shí)服務(wù)器確認(rèn)沒(méi)有要向主機(jī)發(fā)送的數(shù)據(jù))
(4) 主機(jī)接到斷開(kāi)通知后斷開(kāi)連接并反饋一個(gè)確認(rèn)信號(hào)，服務(wù)器收到確認(rèn)信號(hào)后斷開(kāi)連接；
注意：這里的四次揮手中服務(wù)器兩次向主機(jī)發(fā)送消息，第一次是回復(fù)主機(jī)已收到斷開(kāi)的請(qǐng)求，第二次是向主機(jī)確認(rèn)是否斷開(kāi)，確保數(shù)據(jù)傳輸完畢。
三次握手 && 四次揮手
二. 有了解過(guò)Common.js嗎？發(fā)現(xiàn)這方面的資料很少啊，都沒(méi)有相中的比較好理解的。
淺析JS中的模塊規(guī)范（CommonJS，AMD，CMD）
前端模塊化（CommonJs,AMD和CMD）
前端模塊化
前端模塊化 三. 有了解過(guò)React.js嗎？React.js 只是一個(gè)視圖庫(kù)
?。?）聲明式設(shè)計(jì)
?。?）高效：通過(guò)對(duì)DOM的模擬，最大限度的減少與DOM的交互。
?。?）靈活：可以與已知的框架或庫(kù)很好的配合。
?。?）JSX：是js語(yǔ)法的擴(kuò)展，不一定使用，但建議用。
（5）組件：構(gòu)建組件，使代碼更容易得到復(fù)用，能夠很好地應(yīng)用在大項(xiàng)目的開(kāi)發(fā)中。
（6）單向響應(yīng)的數(shù)據(jù)流：React實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是解釋了它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡(jiǎn)單。
react 通過(guò)prop管理組件通信,通過(guò)state 驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作
作者：第七頁(yè)
鏈接：https://www.zhihu.com/question/39825457/answer/83544390
來(lái)源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。*angular 是MV 框架, react是用來(lái)構(gòu)建可重復(fù)使用的UI組件的， 可以看成是個(gè)提供工具的library。
react 可以和 angular 的 directive做比較。 這樣比較的話， react是比angular directive 在組建UI上更powerful的。**作者：空空
鏈接：https://www.zhihu.com/question/23444167/answer/24957302
來(lái)源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。
React.js 初學(xué)者應(yīng)該知道的 9 件事
React之特點(diǎn)及常見(jiàn)用法
React 入門(mén)實(shí)例教程
請(qǐng)問(wèn) React 和 Angular 各有什么優(yōu)缺點(diǎn)，各自又適合什么開(kāi)發(fā)場(chǎng)景？
四. angular和vue的區(qū)別唉，這個(gè)真的太難總結(jié)了，求評(píng)論！?。?/strong>
Vue擁有類(lèi)似 Angular 的雙向數(shù)據(jù)綁定，以及類(lèi)似 React 的虛擬DOM。
angular && vue && react
Vue.js 很好，但會(huì)比 Angular 或 React 更好嗎？
vue.js與angular，react等框架分析比較
淺析angular，react，vue.js jQuery使用區(qū)別
*
五. less的特點(diǎn)每次被問(wèn)到這個(gè)我只能想起less中的定義變量，用太久less都忘了css不能嵌套，醉了醉了。
變量
混合（Mixins）
嵌套規(guī)則
運(yùn)算
函數(shù)
命名空間
作用域
注釋
導(dǎo)入（Import）
Less語(yǔ)言特性
sass-vs-less
Sass和Less的區(qū)別
sass 與 less 的區(qū)別與學(xué)習(xí)
六. less的原理本質(zhì)上，less 包含一套自定義的語(yǔ)法及一個(gè)解析器，用戶根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，less 把這些樣式規(guī)則編譯成瀏覽器可以識(shí)別的 css 樣式。less 并沒(méi)有裁剪 css 原有的特性，更不是用來(lái)取代 css 的，而是在現(xiàn)有 css 語(yǔ)法的基礎(chǔ)上，為 css 加入程序式語(yǔ)言的特性。less 最終需要編譯成 css 文件才能起到樣式的效果，我們可以稱 less 為 css 樣式生成工具。
七. gulp的特點(diǎn)使用 gulp.js，你的構(gòu)建腳本是代碼，而不是配置文件；
使用標(biāo)準(zhǔn)庫(kù)（node.js standard library）來(lái)編寫(xiě)腳本；
插件都很簡(jiǎn)單，只負(fù)責(zé)完成一件事－基本上都是 20 行左右的函數(shù)；
任務(wù)都以最大的并發(fā)數(shù)來(lái)執(zhí)行；
Gulp是一個(gè)基于流的構(gòu)建系統(tǒng)，使用代碼優(yōu)于配置的策略。輸入／輸出（I/O）是基于“流式”的。
作用Sass、Less編譯
Css Js 圖片壓縮
Css Js 合并
Css Js 內(nèi)聯(lián)
Html的include功能
Autoprefixer(自動(dòng)處理瀏覽器css前綴)
自動(dòng)刷新
去緩存
Handlebars模板文件的預(yù)編譯
雪碧圖
ESLint
rem移動(dòng)端適配方案
其他補(bǔ)充| gulp | grunt | |
|---|---|---|
| 速度 | 快 | 慢 |
| 格式 | 和node差不多 | json套json |
| 操作基于 | 二進(jìn)制流 | 文件 |
gulp VS grunt
前端工程的構(gòu)建工具對(duì)比 Gulp vs Grunt
模塊化 && 構(gòu)建
常規(guī)GruntFile.js && gulpFile.jsdist是指distribution——分配,分發(fā)——發(fā)布完成的文件夾一般命名dist。
dest則是destination——目的地,終點(diǎn)——用于grunt文件路徑相關(guān)的配置項(xiàng)，一般會(huì)和src配對(duì)出現(xiàn)。比如文件壓縮插件：壓縮源（src）文件，生成壓縮包到（dest）。
作者：峰子
鏈接：https://www.zhihu.com/question/29199796/answer/82862432
來(lái)源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。
GruntFile.js
gulpfile.js
*
八. ajax的原理在舊的交互方式中,由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器,服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的HTHL頁(yè)到客戶端, 每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí),客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡(jiǎn)單的一個(gè)數(shù)據(jù),都要返回一個(gè)完整的HTML頁(yè),而用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁(yè)面。而使用Ajax后用戶從感覺(jué)上幾乎所有的操作都會(huì)很快響應(yīng)沒(méi)有頁(yè)面重載（白屏）的等待。
Ajax的原理簡(jiǎn)單來(lái)說(shuō)是在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎)，通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來(lái)操作DOM而更新頁(yè)面。使用戶操作與服務(wù)器響應(yīng)異步化。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。
Ajax的過(guò)程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說(shuō)，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶。達(dá)到無(wú)刷新的效果。
每天10個(gè)前端知識(shí)點(diǎn)：ajax && jsonp
ajax過(guò)程獲得ajax
打開(kāi)地址
發(fā)送數(shù)據(jù)
接收數(shù)據(jù)
*
九. 有了解過(guò)ES6嗎？哈哈，這個(gè)后面會(huì)寫(xiě)一整篇，敬請(qǐng)期待！
【探秘ES6】系列專(zhuān)欄（一）：ES6簡(jiǎn)介
十. git mergegit merge 和 git rebase 小結(jié)
十一. less不依靠構(gòu)建轉(zhuǎn)css我猜這道面試題應(yīng)該也不讓用 lessc ，哈哈哈！
依舊求評(píng)論，我只會(huì)lessc和構(gòu)建轉(zhuǎn)化誒。
甩上gulp構(gòu)建轉(zhuǎn)化
十二. 冒泡、快排這個(gè)后面也有一篇簡(jiǎn)單的算法篇，敬請(qǐng)期待！
冒泡排序
每次比較相鄰的兩個(gè)數(shù)，如果后一個(gè)比前一個(gè)小，換位置。 時(shí)間復(fù)雜度：O(n^2)
快速排序
采用二分法，取出中間數(shù)，數(shù)組每次和中間數(shù)比較，小的放到左邊，大的放到右邊。 時(shí)間復(fù)雜度：O(nlog2(n))十三. promise
Promise對(duì)象有以下兩個(gè)特點(diǎn)。
對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：Pending（進(jìn)行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失?。Ｖ挥挟惒讲僮鞯慕Y(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。這也是Promise這個(gè)名字的由來(lái)，它的英語(yǔ)意思就是“承諾”，表示其他手段無(wú)法改變。
一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)?b>Resolved和從Pending變?yōu)?b>Rejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果。就算改變已經(jīng)發(fā)生了，你再對(duì)Promise對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過(guò)了它，再去監(jiān)聽(tīng)，是得不到結(jié)果的。
ECMAScript 6入門(mén) - Promise對(duì)象
十四. 性能優(yōu)化詳見(jiàn)性能優(yōu)化篇！
每天10個(gè)前端知識(shí)點(diǎn)：性能優(yōu)化篇 - 簡(jiǎn)書(shū)
十五. js的冒泡(Bubbling Event)和捕獲(Capture Event)的區(qū)別js之事件冒泡和事件捕獲詳細(xì)介紹
冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。
捕獲型事件(event capturing)：事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確(也可以在窗口級(jí)別捕獲事件，不過(guò)必須由開(kāi)發(fā)人員特別指定)。
DOM事件流：同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會(huì)觸及DOM中的所有對(duì)象，從document對(duì)象開(kāi)始，也在document對(duì)象結(jié)束。
DOM事件模型最獨(dú)特的性質(zhì)是，文本節(jié)點(diǎn)也觸發(fā)事件(在IE中不會(huì))。
示例
假設(shè)一個(gè)元素div，它有一個(gè)下級(jí)元素p。
元素
這兩個(gè)元素都綁定了click事件，如果用戶點(diǎn)擊了p：
事件捕獲
當(dāng)你使用事件捕獲時(shí)，**父級(jí)元素先觸發(fā)**，子級(jí)元素后觸發(fā)，即div先觸發(fā)，p后觸發(fā)。
事件冒泡
當(dāng)你使用事件冒泡時(shí)，**子級(jí)元素先觸發(fā)**，父級(jí)元素后觸發(fā)，即p先觸發(fā)，div后觸發(fā)。
addEventListener函數(shù)，它有三個(gè)參數(shù)，第三個(gè)參數(shù)若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。
IE只支持事件冒泡，不支持事件捕獲。
Paste_Image.png
阻止冒泡? 在W3c中，使用stopPropagation()方法
? 在IE下設(shè)置oEvent.cancelBubble = true；
阻止捕獲在捕獲的過(guò)程中stopPropagation()后，后面的冒泡過(guò)程也不會(huì)發(fā)生了。
阻止事件的默認(rèn)行為，例如click 后的跳轉(zhuǎn)
? 在W3c中，使用oEvent.preventDefault()方法；
? 在IE下設(shè)置window.event.returnValue = false;
十七. js的Object和其他語(yǔ)言的object的區(qū)別數(shù)組更多應(yīng)用詳見(jiàn)：每天10個(gè)前端知識(shí)點(diǎn)：數(shù)組應(yīng)用篇
js對(duì)象的創(chuàng)建 js對(duì)象和java對(duì)象的不同
面向?qū)ο蠓譃榛谠偷拿嫦驅(qū)ο蠛突谀０宓拿嫦驅(qū)ο蟆?/p>
Java：基于模板的面向?qū)ο蟆?/p>
class A
{
private String name;
public void fun(){
}
}
A a = new A();
a.fun();
JavaScript：基于原型的面向?qū)ο?，基于事件的網(wǎng)頁(yè)腳本語(yǔ)言。
十八. js的Element和Node的區(qū)別JavaScript中Element與Node的區(qū)別，children與childNodes的區(qū)別
Element繼承了Node類(lèi)，也就是說(shuō)Element是Node多種類(lèi)型中的一種。
children是Element的屬性，childNodes是Node的屬性
HTML中的Node和Element的區(qū)別
NODE是相對(duì)TREE這種數(shù)據(jù)結(jié)構(gòu)而言的。TREE就是由NODE組成。
node有幾個(gè)**子類(lèi)型**：**Element**，Text,，Attribute，RootElement，Comment，Namespace等。
ELEMENT則是HTML里的概念，是元素即標(biāo)簽包含內(nèi)部屬性及內(nèi)容的總體，是HTML中的數(shù)據(jù)的組成部分之一。
*
十九. svn與git的區(qū)別
git是分布式的，svn不是。
git跟svn一樣有自己的集中式版本庫(kù)或服務(wù)器。但git更傾向于被使用于分布式模式，克隆版本庫(kù)后即使沒(méi)有網(wǎng)絡(luò)也能夠commit文件，查看歷史版本記錄，創(chuàng)建項(xiàng)目分支等，等網(wǎng)絡(luò)再次連接上Push到服務(wù)器端。
git把內(nèi)容按元數(shù)據(jù)方式存儲(chǔ)，而svn是按文件。
所有的資源控制系統(tǒng)都是把文件的元信息隱藏在一個(gè)類(lèi)似.svn,.cvs等的文件夾里。 git目錄是處于你的機(jī)器上的一個(gè)克隆版的版本庫(kù)，它擁有中心版本庫(kù)上所有的東西，例如標(biāo)簽，分支，版本記錄等。
git沒(méi)有一個(gè)全局的版本號(hào)，svn有。
git的內(nèi)容完整性優(yōu)于svn。
因?yàn)間it的內(nèi)容存儲(chǔ)使用的是SHA-1哈希算法。
git可以有無(wú)限個(gè)版本庫(kù)，svn只能有一個(gè)指定中央版本庫(kù)。
當(dāng)svn中央版本庫(kù)有問(wèn)題時(shí)，所有工作成員都一起癱瘓直到版本庫(kù)維修完畢或者新的版本庫(kù)設(shè)立完成。 每一個(gè)git都是一個(gè)版本庫(kù)，區(qū)別是它們是否擁有活躍目錄（Git Working Tree）。如果主要版本庫(kù)（例如：置於GitHub的版本庫(kù)）有問(wèn)題，工作成員仍然可以在自己的本地版本庫(kù)（local repository）提交，等待主要版本庫(kù)恢復(fù)即可。工作成員也可以提交到其他的版本庫(kù)！二十. 定時(shí)器
這是一道筆試題，小白就是小白啊，還第一次見(jiàn)到定時(shí)器的第三個(gè)參數(shù)，還是這么寫(xiě)的。
你應(yīng)該知道的setTimeout秘密
↑ 上面這篇文章值得耐心細(xì)看，對(duì)理解定時(shí)器有很大幫助。
首先我們要了解之前提到的定時(shí)器，setTimeout(fn, 0)輸出時(shí)間并不為0且大于0。
這是因?yàn)?JavaScript是單線程執(zhí)行的。也就是說(shuō)，在任何時(shí)間點(diǎn)，有且只有一個(gè)線程在運(yùn)行JavaScript程序，無(wú)法同一時(shí)候運(yùn)行多段代碼。
瀏覽器的內(nèi)核是多線程的，它們?cè)趦?nèi)核控制下相互配合以保持同步，一個(gè)瀏覽器至少實(shí)現(xiàn)三個(gè)常駐線程：JavaScript引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程。
JavaScript引擎是基于事件驅(qū)動(dòng)單線程執(zhí)行的，JavaScript引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來(lái)，然后加以處理，瀏覽器無(wú)論什么時(shí)候都只有一個(gè)JavaScript線程在運(yùn)行JavaScript程序。
GUI渲染線程負(fù)責(zé)渲染瀏覽器界面，當(dāng)界面需要重繪（Repaint）或由于某種操作引發(fā)回流(Reflow)時(shí)，該線程就會(huì)執(zhí)行。但需要注意，GUI渲染線程與JavaScript引擎是互斥的，當(dāng)JavaScript引擎執(zhí)行時(shí)GUI線程會(huì)被掛起，GUI更新會(huì)被保存在一個(gè)隊(duì)列中等到JavaScript引擎空閑時(shí)立即被執(zhí)行。
事件觸發(fā)線程，當(dāng)一個(gè)事件被觸發(fā)時(shí)，該線程會(huì)把事件添加到待處理隊(duì)列的隊(duì)尾，等待JavaScript引擎的處理。這些事件可來(lái)自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如setTimeout、也可來(lái)自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點(diǎn)擊、Ajax異步請(qǐng)求等，但由于JavaScript的單線程關(guān)系，所有這些事件都得排隊(duì)等待JavaScript引擎處理（當(dāng)線程中沒(méi)有執(zhí)行任何同步代碼的前提下才會(huì)執(zhí)行異步代碼）。
以下為這次遇見(jiàn)的題目
廣義上我們遇到定時(shí)器的題目一般是這樣的
setTimeout這次遇見(jiàn)的是這樣的：
循環(huán)只進(jìn)行兩次
關(guān)于定時(shí)器.png
幾個(gè)讓我印象深刻的面試題(一) | Jay Zangwill
請(qǐng)注意：這個(gè)t是定義在閉包外面的，也就是說(shuō)t并沒(méi)有被閉包保存，所以這里的t指的是最后一個(gè)循環(huán)留下來(lái)的t，所以最后一個(gè)3被清除了，沒(méi)有輸出。
setTimeout可以傳入第三個(gè)參數(shù)、第四個(gè)參數(shù)...，用來(lái)表示第一個(gè)參數(shù)（回調(diào)函數(shù)）傳入的參數(shù)。
于是我檢測(cè)了以下變形
循環(huán)只進(jìn)行兩次
循環(huán)只進(jìn)行兩次
t為非 2 / 3 時(shí)，循環(huán)輸出3次
setInterval這次遇見(jiàn)的長(zhǎng)這樣：
幾個(gè)讓我印象深刻的面試題(一) | Jay Zangwill
第一次觸發(fā)回調(diào)函數(shù)執(zhí)行的時(shí)候 t 的值是undefined，第二次觸發(fā)的時(shí)候有值了。這和程序的執(zhí)行順序有關(guān)。我們知道js正常情況下是從上到下，從右到左執(zhí)行的。
所以這里每次循環(huán)先設(shè)置定時(shí)器，然后把定時(shí)器的返回值賦值給t。在第一次循環(huán)的時(shí)候t并沒(méi)有被賦值，所以是undefined，在第二次循環(huán)的時(shí)候，定時(shí)器其實(shí)清理的是上一個(gè)循環(huán)的定時(shí)器。所以導(dǎo)致每次循環(huán)都是清理上一次的定時(shí)器，而最后一次循環(huán)的定時(shí)器沒(méi)被清理，導(dǎo)致一直輸出3。
于是我做了以下測(cè)試
轉(zhuǎn)載：http://www.jianshu.com/p/3944...
個(gè)人建了前端學(xué)習(xí)群，旨在一起學(xué)習(xí)前端。純凈、純粹技術(shù)討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86887.html
摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...
摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過(guò)程 從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么 計(jì)算機(jī)...
摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問(wèn)題集錦關(guān)于，工作和學(xué)習(xí)過(guò)程中遇到過(guò)許多問(wèn)題，也解答過(guò)許多別人的問(wèn)題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱為惰性加載，即在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖像。用戶滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
閱讀 1201·2023-04-26 03:02
閱讀 1233·2023-04-25 19:18
閱讀 2620·2021-11-23 09:51
閱讀 2603·2021-11-11 16:55
閱讀 2654·2021-10-21 09:39
閱讀 1737·2021-10-09 09:59
閱讀 2029·2021-09-26 09:55
閱讀 3554·2021-09-26 09:55
