最近遇到的前端面試題(2017.03.08更新版)

linkFly 發(fā)布于2019-08-21 11:35 / 2048人閱讀

摘要：通過管理組件通信通過驅(qū)動視圖比較差異進行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。達到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進行中已完成，又稱和已失敗。

以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補充。

一. 輸入url后的加載過程

從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么

計算機網(wǎng)絡(luò)體系結(jié)構(gòu)

應(yīng)用層(HTTP、SMTP、FTP、POP3)

運輸層(TCP、UDP)

網(wǎng)絡(luò)層(IP(路由器))

數(shù)據(jù)鏈路層(網(wǎng)橋(CSMA/CD、PPP))

物理層(集線器)

1. 查找域名對應(yīng)IP地址

這一步包括 DNS 具體的查找過程，包括：瀏覽器緩存->系統(tǒng)緩存->路由器緩存...
(1) 瀏覽器搜索自己的 DNS 緩存（維護一張域名與 IP 地址的對應(yīng)表）；
(2) 搜索操作系統(tǒng)中的 DNS 緩存（維護一張域名與 IP 地址的對應(yīng)表）；
(3) 搜索操作系統(tǒng)的 hosts 文件（ Windows 環(huán)境下，維護一張域名與 IP 地址的對應(yīng)表）；
(4) 操作系統(tǒng)將域名發(fā)送至 LDNS（本地區(qū)域名服務(wù)器），LDNS 查詢自己的 DNS 緩存（一般查找成功率在 80% 左右），查找成功則返回結(jié)果，失敗則發(fā)起一個迭代 DNS 解析請求：

① LDNS 向 Root Name Server （根域名服務(wù)器，如 com、net、org等的解析的頂級域名服務(wù)器的地址）發(fā)起請求，此處，Root Name Server 返回 com 域的頂級域名服務(wù)器的地址；
② LDNS 向 com 域的頂級域名服務(wù)器發(fā)起請求，返回 baidu.com 域名服務(wù)器地址；
③ LDNS 向 baidu.com 域名服務(wù)器發(fā)起請求，得到 www.baidu.com 的 IP 地址；

(5) LDNS 將得到的 IP 地址返回給操作系統(tǒng)，同時自己也將 IP 地址緩存起來；

(6) 操作系統(tǒng)將 IP 地址返回給瀏覽器，同時自己也將 IP 地址緩存起來；

2. 建立連接(TCP的三次握手)

(1) 主機向服務(wù)器發(fā)送一個建立連接的請求；

(2) 服務(wù)器接到請求后發(fā)送同意連接的信號；

(3) 主機接到同意連接的信號后，再次向服務(wù)器發(fā)送了確認信號 ;

注意：這里的三次握手中主機兩次向服務(wù)器發(fā)送確認，第二次是為了防止已失效的連接請求報文段傳至服務(wù)器導(dǎo)致錯誤。

3. 構(gòu)建網(wǎng)頁

(1) 瀏覽器根據(jù) URL 內(nèi)容生成 HTTP 請求，請求中包含請求文件的位置、請求文件的方式等等；

(2) 服務(wù)器接到請求后，會根據(jù) HTTP 請求中的內(nèi)容來決定如何獲取相應(yīng)的 HTML 文件；

(3) 服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器；

(4) 在瀏覽器還沒有完全接收 HTML 文件時便開始渲染、顯示網(wǎng)頁；

(5) 在執(zhí)行 HTML 中代碼時，根據(jù)需要，瀏覽器會繼續(xù)請求圖片、音頻、視頻、CSS、JS等文件，過程同請求 HTML ；

瀏覽器渲染展示網(wǎng)頁過程

HTML代碼轉(zhuǎn)化為DOM(DOM Tree)

CSS代碼轉(zhuǎn)化成CSSOM（CSS Object Model）

結(jié)合DOM和CSSOM，生成一棵渲染樹（包含每個節(jié)點的視覺信息）(Render Tree)

生成布局（layout），即將所有渲染樹的所有節(jié)點進行平面合成

將布局繪制（paint）在屏幕上

4. 斷開連接(TCP的四次揮手)

(1) 主機向服務(wù)器發(fā)送一個斷開連接的請求；

(2) 服務(wù)器接到請求后發(fā)送確認收到請求的信號；(此時服務(wù)器可能還有數(shù)據(jù)要發(fā)送至主機)

(3) 服務(wù)器向主機發(fā)送斷開通知；(此時服務(wù)器確認沒有要向主機發(fā)送的數(shù)據(jù))

(4) 主機接到斷開通知后斷開連接并反饋一個確認信號，服務(wù)器收到確認信號后斷開連接；

注意：這里的四次揮手中服務(wù)器兩次向主機發(fā)送消息，第一次是回復(fù)主機已收到斷開的請求，第二次是向主機確認是否斷開，確保數(shù)據(jù)傳輸完畢。

三次握手 && 四次揮手

二. 有了解過Common.js嗎？

發(fā)現(xiàn)這方面的資料很少啊，都沒有相中的比較好理解的。

淺析JS中的模塊規(guī)范（CommonJS，AMD，CMD）

前端模塊化（CommonJs,AMD和CMD）

前端模塊化

前端模塊化 三. 有了解過React.js嗎？

React.js 只是一個視圖庫

　　（1）聲明式設(shè)計

　　（2）高效：通過對DOM的模擬，最大限度的減少與DOM的交互。

　　（3）靈活：可以與已知的框架或庫很好的配合。

　　（4）JSX：是js語法的擴展，不一定使用，但建議用。

　　（5）組件：構(gòu)建組件，使代碼更容易得到復(fù)用，能夠很好地應(yīng)用在大項目的開發(fā)中。

　　（6）單向響應(yīng)的數(shù)據(jù)流：React實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是解釋了它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

react 通過prop管理組件通信,通過state 驅(qū)動視圖比較差異進行更新操作
作者：第七頁
鏈接：https://www.zhihu.com/question/39825457/answer/83544390
來源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。
*angular 是MV 框架, react是用來構(gòu)建可重復(fù)使用的UI組件的， 可以看成是個提供工具的library。
react 可以和 angular 的 directive做比較。 這樣比較的話， react是比angular directive 在組建UI上更powerful的。**
作者：空空
鏈接：https://www.zhihu.com/question/23444167/answer/24957302
來源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。

React.js 初學(xué)者應(yīng)該知道的 9 件事

React之特點及常見用法

React 入門實例教程

請問 React 和 Angular 各有什么優(yōu)缺點，各自又適合什么開發(fā)場景？

四. angular和vue的區(qū)別

唉，這個真的太難總結(jié)了，求評論！！！

Vue擁有類似 Angular 的雙向數(shù)據(jù)綁定，以及類似 React 的虛擬DOM。

angular && vue && react

Vue.js 很好，但會比 Angular 或 React 更好嗎？

vue.js與angular，react等框架分析比較

淺析angular，react，vue.js jQuery使用區(qū)別

五. less的特點

每次被問到這個我只能想起less中的定義變量，用太久less都忘了css不能嵌套，醉了醉了。

變量

混合（Mixins）

嵌套規(guī)則

運算

函數(shù)

命名空間

作用域

注釋

導(dǎo)入（Import）

Less語言特性

sass-vs-less

Sass和Less的區(qū)別

sass 與 less 的區(qū)別與學(xué)習(xí)

六. less的原理

本質(zhì)上，less 包含一套自定義的語法及一個解析器，用戶根據(jù)這些語法定義自己的樣式規(guī)則，這些規(guī)則最終會通過解析器，less 把這些樣式規(guī)則編譯成瀏覽器可以識別的 css 樣式。less 并沒有裁剪 css 原有的特性，更不是用來取代 css 的，而是在現(xiàn)有 css 語法的基礎(chǔ)上，為 css 加入程序式語言的特性。less 最終需要編譯成 css 文件才能起到樣式的效果，我們可以稱 less 為 css 樣式生成工具。

七. gulp的特點

使用 gulp.js，你的構(gòu)建腳本是代碼，而不是配置文件；

使用標準庫（node.js standard library）來編寫腳本；

插件都很簡單，只負責(zé)完成一件事－基本上都是 20 行左右的函數(shù)；

任務(wù)都以最大的并發(fā)數(shù)來執(zhí)行；

Gulp是一個基于流的構(gòu)建系統(tǒng)，使用代碼優(yōu)于配置的策略。輸入／輸出（I/O）是基于“流式”的。

作用

Sass、Less編譯

Css Js 圖片壓縮

Css Js 合并

Css Js 內(nèi)聯(lián)

Html的include功能

Autoprefixer(自動處理瀏覽器css前綴)

自動刷新

去緩存

Handlebars模板文件的預(yù)編譯

雪碧圖

ESLint

rem移動端適配方案

其他補充

	gulp	grunt
速度	快	慢
格式	和node差不多	json套json
操作基于	二進制流	文件

gulp VS grunt

前端工程的構(gòu)建工具對比 Gulp vs Grunt

模塊化 && 構(gòu)建

dist是指distribution——分配,分發(fā)——發(fā)布完成的文件夾一般命名dist。
dest則是destination——目的地,終點——用于grunt文件路徑相關(guān)的配置項，一般會和src配對出現(xiàn)。比如文件壓縮插件：壓縮源（src）文件，生成壓縮包到（dest）。
作者：峰子
鏈接：https://www.zhihu.com/question/29199796/answer/82862432
來源：知乎
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。

常規(guī)GruntFile.js && gulpFile.js

GruntFile.js

gulpfile.js

八. ajax的原理

在舊的交互方式中,由用戶觸發(fā)一個HTTP請求到服務(wù)器,服務(wù)器對其進行處理后再返回一個新的HTHL頁到客戶端, 每當服務(wù)器處理客戶端提交的請求時,客戶都只能空閑等待,并且哪怕只是一次很小的交互、只需從服務(wù)器端得到很簡單的一個數(shù)據(jù),都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。而使用Ajax后用戶從感覺上幾乎所有的操作都會很快響應(yīng)沒有頁面重載（白屏）的等待。

Ajax的原理簡單來說是在用戶和服務(wù)器之間加了—個中間層(AJAX引擎)，通過XmlHttpRequest對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來操作DOM而更新頁面。使用戶操作與服務(wù)器響應(yīng)異步化。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請求數(shù)據(jù)。

Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術(shù)。簡單的說，也就是javascript可以及時向服務(wù)器提出請求和處理響應(yīng)，而不阻塞用戶。達到無刷新的效果。

每天10個前端知識點：ajax && jsonp

ajax過程

獲得ajax

打開地址

發(fā)送數(shù)據(jù)

接收數(shù)據(jù)

九. 有了解過ES6嗎？

哈哈，這個后面會寫一整篇，敬請期待！

【探秘ES6】系列專欄（一）：ES6簡介

十. git merge

git merge 和 git rebase 小結(jié)

十一. less不依靠構(gòu)建轉(zhuǎn)css

我猜這道面試題應(yīng)該也不讓用 lessc ，哈哈哈！

依舊求評論，我只會lessc和構(gòu)建轉(zhuǎn)化誒。

甩上gulp構(gòu)建轉(zhuǎn)化

十二. 冒泡、快排

這個后面也有一篇簡單的算法篇，敬請期待！

冒泡排序

每次比較相鄰的兩個數(shù)，如果后一個比前一個小，換位置。
時間復(fù)雜度：O(n^2)

快速排序

采用二分法，取出中間數(shù)，數(shù)組每次和中間數(shù)比較，小的放到左邊，大的放到右邊。
時間復(fù)雜度：O(nlog2(n))

十三. promise

Promise對象有以下兩個特點。

對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作，有三種狀態(tài)：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）。只有異步操作的結(jié)果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。

一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)?b>Resolved和從Pending變?yōu)?b>Rejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結(jié)果。就算改變已經(jīng)發(fā)生了，你再對Promise對象添加回調(diào)函數(shù)，也會立即得到這個結(jié)果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結(jié)果的。

ECMAScript 6入門 - Promise對象

十四. 性能優(yōu)化

詳見性能優(yōu)化篇！

每天10個前端知識點：性能優(yōu)化篇 - 簡書

十五. js的冒泡(Bubbling Event)和捕獲(Capture Event)的區(qū)別

js之事件冒泡和事件捕獲詳細介紹

冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)。

捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發(fā)，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發(fā)人員特別指定)。

DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結(jié)束。

DOM事件模型最獨特的性質(zhì)是，文本節(jié)點也觸發(fā)事件(在IE中不會)。

示例
假設(shè)一個元素div，它有一個下級元素p。


　　元素

這兩個元素都綁定了click事件，如果用戶點擊了p：

事件捕獲

當你使用事件捕獲時，**父級元素先觸發(fā)**，子級元素后觸發(fā)，即div先觸發(fā)，p后觸發(fā)。

事件冒泡

當你使用事件冒泡時，**子級元素先觸發(fā)**，父級元素后觸發(fā)，即p先觸發(fā)，div后觸發(fā)。

addEventListener函數(shù)，它有三個參數(shù)，第三個參數(shù)若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。
IE只支持事件冒泡，不支持事件捕獲。

Paste_Image.png

阻止冒泡

? 在W3c中，使用stopPropagation()方法
? 在IE下設(shè)置oEvent.cancelBubble = true；

在捕獲的過程中stopPropagation()后，后面的冒泡過程也不會發(fā)生了。

阻止捕獲

阻止事件的默認行為，例如click 后的跳轉(zhuǎn)
? 在W3c中，使用oEvent.preventDefault()方法；
? 在IE下設(shè)置window.event.returnValue = false;

十六. 數(shù)組的翻轉(zhuǎn)（非reverse）

數(shù)組更多應(yīng)用詳見：每天10個前端知識點：數(shù)組應(yīng)用篇

十七. js的Object和其他語言的object的區(qū)別

js對象的創(chuàng)建 js對象和java對象的不同

面向?qū)ο蠓譃榛谠偷拿嫦驅(qū)ο蠛突谀０宓拿嫦驅(qū)ο蟆?/p>

Java：基于模板的面向?qū)ο蟆?/p>

class A
{
   private String name;
   public void fun(){

   }
}

A a = new A();
a.fun();

JavaScript：基于原型的面向?qū)ο螅谑录木W(wǎng)頁腳本語言。

十八. js的Element和Node的區(qū)別

JavaScript中Element與Node的區(qū)別，children與childNodes的區(qū)別

Element繼承了Node類，也就是說Element是Node多種類型中的一種。

children是Element的屬性，childNodes是Node的屬性

HTML中的Node和Element的區(qū)別

NODE是相對TREE這種數(shù)據(jù)結(jié)構(gòu)而言的。TREE就是由NODE組成。

node有幾個**子類型**：**Element**，Text,，Attribute，RootElement，Comment，Namespace等。

ELEMENT則是HTML里的概念，是元素即標簽包含內(nèi)部屬性及內(nèi)容的總體，是HTML中的數(shù)據(jù)的組成部分之一。

十九. svn與git的區(qū)別

git是分布式的，svn不是。

git跟svn一樣有自己的集中式版本庫或服務(wù)器。但git更傾向于被使用于分布式模式，克隆版本庫后即使沒有網(wǎng)絡(luò)也能夠commit文件，查看歷史版本記錄，創(chuàng)建項目分支等，等網(wǎng)絡(luò)再次連接上Push到服務(wù)器端。

git把內(nèi)容按元數(shù)據(jù)方式存儲，而svn是按文件。

所有的資源控制系統(tǒng)都是把文件的元信息隱藏在一個類似.svn,.cvs等的文件夾里。
git目錄是處于你的機器上的一個克隆版的版本庫，它擁有中心版本庫上所有的東西，例如標簽，分支，版本記錄等。

git沒有一個全局的版本號，svn有。

git的內(nèi)容完整性優(yōu)于svn。

因為git的內(nèi)容存儲使用的是SHA-1哈希算法。

git可以有無限個版本庫，svn只能有一個指定中央版本庫。

當svn中央版本庫有問題時，所有工作成員都一起癱瘓直到版本庫維修完畢或者新的版本庫設(shè)立完成。
每一個git都是一個版本庫，區(qū)別是它們是否擁有活躍目錄（Git Working Tree）。如果主要版本庫（例如：置於GitHub的版本庫）有問題，工作成員仍然可以在自己的本地版本庫（local repository）提交，等待主要版本庫恢復(fù)即可。工作成員也可以提交到其他的版本庫！

二十. 定時器

這是一道筆試題，小白就是小白啊，還第一次見到定時器的第三個參數(shù)，還是這么寫的。

你應(yīng)該知道的setTimeout秘密

↑ 上面這篇文章值得耐心細看，對理解定時器有很大幫助。

首先我們要了解之前提到的定時器，setTimeout(fn, 0)輸出時間并不為0且大于0。

這是因為 JavaScript是單線程執(zhí)行的。也就是說，在任何時間點，有且只有一個線程在運行JavaScript程序，無法同一時候運行多段代碼。

瀏覽器的內(nèi)核是多線程的，它們在內(nèi)核控制下相互配合以保持同步，一個瀏覽器至少實現(xiàn)三個常駐線程：JavaScript引擎線程，GUI渲染線程，瀏覽器事件觸發(fā)線程。

JavaScript引擎是基于事件驅(qū)動單線程執(zhí)行的，JavaScript引擎一直等待著任務(wù)隊列中任務(wù)的到來，然后加以處理，瀏覽器無論什么時候都只有一個JavaScript線程在運行JavaScript程序。

GUI渲染線程負責(zé)渲染瀏覽器界面，當界面需要重繪（Repaint）或由于某種操作引發(fā)回流(Reflow)時，該線程就會執(zhí)行。但需要注意，GUI渲染線程與JavaScript引擎是互斥的，當JavaScript引擎執(zhí)行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JavaScript引擎空閑時立即被執(zhí)行。

事件觸發(fā)線程，當一個事件被觸發(fā)時，該線程會把事件添加到待處理隊列的隊尾，等待JavaScript引擎的處理。這些事件可來自JavaScript引擎當前執(zhí)行的代碼塊如setTimeout、也可來自瀏覽器內(nèi)核的其他線程如鼠標點擊、Ajax異步請求等，但由于JavaScript的單線程關(guān)系，所有這些事件都得排隊等待JavaScript引擎處理（當線程中沒有執(zhí)行任何同步代碼的前提下才會執(zhí)行異步代碼）。

以下為這次遇見的題目

廣義上我們遇到定時器的題目一般是這樣的

setTimeout

這次遇見的是這樣的：

循環(huán)只進行兩次

關(guān)于定時器.png

幾個讓我印象深刻的面試題(一) | Jay Zangwill

請注意：這個t是定義在閉包外面的，也就是說t并沒有被閉包保存，所以這里的t指的是最后一個循環(huán)留下來的t，所以最后一個3被清除了，沒有輸出。

setTimeout可以傳入第三個參數(shù)、第四個參數(shù)...，用來表示第一個參數(shù)（回調(diào)函數(shù)）傳入的參數(shù)。

于是我檢測了以下變形

循環(huán)只進行兩次

t為非 2 / 3 時，循環(huán)輸出3次

setInterval

這次遇見的長這樣：

幾個讓我印象深刻的面試題(一) | Jay Zangwill

第一次觸發(fā)回調(diào)函數(shù)執(zhí)行的時候 t 的值是undefined，第二次觸發(fā)的時候有值了。這和程序的執(zhí)行順序有關(guān)。我們知道js正常情況下是從上到下，從右到左執(zhí)行的。
所以這里每次循環(huán)先設(shè)置定時器，然后把定時器的返回值賦值給t。在第一次循環(huán)的時候t并沒有被賦值，所以是undefined，在第二次循環(huán)的時候，定時器其實清理的是上一個循環(huán)的定時器。所以導(dǎo)致每次循環(huán)都是清理上一次的定時器，而最后一次循環(huán)的定時器沒被清理，導(dǎo)致一直輸出3。

于是我做了以下測試

轉(zhuǎn)載：http://www.jianshu.com/p/3944...

個人建了前端學(xué)習(xí)群，旨在一起學(xué)習(xí)前端。純凈、純粹技術(shù)討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。