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