前端學習之面試筆記

5 人贊了文章

自我介紹

我是一個大四的軟體工程專業的學生，我得專業偏硬體，但是我個人偏向前端開發，因為前端跟用戶接觸比較近，所以，我在大三暑假開始自學前端知識，主要是在慕課、網易雲課堂，Udacity等學習網站；刷題主要是在牛客、賽碼、LeetCode等網站上。。。

現在想偷懶把之前學習的路徑和面試經歷的問題碼出來，到時候好繼續學習 PvQ

有什麼問題歡迎大佬指出，樂意接受大佬的批評PvQ

第一次更新 2017/11/12 22:00

第二次更新 2017/11/13 17:40

學習的路徑 是根據這些圖的：

面試的方向 主要是根據一個大佬的帖子 以及 自己在面試時遇到的問題我都會去了解、學習的

附上鏈接：前端校招面試該考察什麼？

我的筆記部分部分先後的，隨意碼入。。。

ok，開始碼字了：

頁面導入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連接屬性等作用； 而@import是CSS提供的，只能用於載入CSS;（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

簡述一下你對HTML語義化的理解？

用正確的標籤做正確的事情。html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存。存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多， 可以達到5M或更大。有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。 cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

如何在頁面上實現一個圓形的可點擊區域？

1、map+area或者svg2、border-radius3、純js實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠坐標等等

介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？

（1）有兩種， IE 盒子模型、W3C 盒子模型；（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；（3）區 別： IE的content部分把 border 和 padding計算了進去;

CSS元素的寬度和高度

*當指定一個CSS元素的寬高是,只是設置內容的寬高,完全大小的元素,必須加上填充，邊框和邊距。

總元素 padding border margin

(填充) (邊框) (邊距)

CSS選擇符有哪些？哪些屬性可以繼承？

* 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標籤選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.後代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a:hover, li:nth-child）* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;* 不可繼承的樣式：border padding margin width height ;

CSS優先順序演算法及其權重規則？

* 優先順序採取就近原則，樣式定義最近者為準，載入樣式以最後載入的定位為準： 優先順序為： !important > id > class > tag > 偽類 權重： tag: 1 class: 10 id: 100

CSS 載入方

* (1) 內聯樣式 (2) 內部樣式 (3) 外部引用

為什麼要初始化CSS樣式？

- 因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的， 如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。- 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

個人建議：需要的時候直接去百度reset.css，下載文件就好了，裡面配置了大部分標籤初始化

鏈接： CSS Tools: Reset CSS

什麼是CSS 預處理器 / 後處理器？

- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性， 還有層級、mixin、變數、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。- 後處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規範處理CSS，讓其更有效； 目前最常做的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

個人只用過Stylus，需要的可以進這個網站：stylus中文文檔 " 綜述 " 張鑫旭-鑫空間-鑫生活

position的值relative和absolute定位原點是？

absolute 生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。 fixed （老IE不支持） 生成絕對定位的元素，相對於瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對於其正常位置進行定位。 static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 inherit 規定從父元素繼承 position 屬性的值。** absolute和fixed會使得元素脫離文檔流

Label的作用是什麼？是怎麼用的？

label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控制項上。<label for="Name">Number:</label><input type=「text「name="Name" id="Name"/><label>Date:<input type="text" name="B"/></label>

用純CSS創建一個三角形的原理是什麼？

#angle{ width: 100px; height: 100px; border-width: 20px; border-style: solid; border-color: red yellow blue purple;}把上、左、右三條邊隱藏掉（顏色設為 transparent）#angle{ width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent blue transparent;}其他方向同理：首先設置width和height為0， 然後設置某三邊為transparent(透明，其實是父類的顏色) 方向向哪，就設置對立面的顏色

對BFC規範(塊級格式化上下文：block formatting context)的理解？

---BFC是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素，反之亦然。***它與其他的塊框類似，但是不同之處是： (1) 可以阻止元素被浮動元素覆蓋； (2) 可以包含浮動元素； (3) 可以阻止margin重疊。 滿足以下條件之一就可以觸發BFC： 1. 根元素，即HTML元素; 2. float 不為none; 3. overflow不為visible 4. display為inline-block，table-cell，table-caption 5. position為absolute或fixed

display中屬性值none和hidden的區別

相同點：都能把網頁上某個元素隱藏起來區別： none：不為被隱藏的對象保留其物理空間，即該對象在頁面徹底消失---看不見也摸不到 hidden：使對象在網頁上不可見，即該對象在頁面所佔空間沒有改變---看不見但摸得到

iframe有那些使用場景？有什麼缺點？

使用場景：1. 典型系統結構：左側是功能樹，右側就是一些常見的table或表單之類的，為了每一個功能、單獨分離 出來，採用frame；2. ajax上傳文件；3. 載入別的網址內容；4. 在上傳圖片時，不用flash實現無刷新；5. 跨域訪問的時候可以用到iframe，使得用iframe請求不同域名下的資源缺點：*iframe會阻塞主頁面的Onload事件；*搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制(6-8日 )，所以會影響頁面的並行載入。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

Ajax 和flash的優缺點

**** 優點： ---ajax： 1. 可搜索性 2. 開放性 3. 費用低 4. 易用性 5. 易於開發 ---flash： 1.多媒體處理 2. 兼容性 3.矢量圖形 4. 客戶端資源調度**** 缺點： ---ajax： 1. 它可能破壞瀏覽器的後退功能； 2. 使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中， 不過這些問題都有相關的解決方案 ---flash： 1. 二進位格式 2. 格式私有 3. 性能問題 4. flash文件會很大，用戶第一次使用的時候需要忍受較長的等待時間

src與href的區別

**** src：用於替換當前元素**** href：用於在當前文檔和引用資源之間確認聯繫

如何解決跨域問題?

jsonp：只能處理get請求，不能處理post請求CORS： Access-Control-Allow-Origin：*;iframewindow.namewindow.postMessage伺服器上設置代理頁面

詳見:跨域資源共享 CORS 詳解 - 阮一峰的網路日誌

也可以參考我的另一個帖子： 前端跨域請求原理

一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

簡潔版： 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向伺服器發起請求； 伺服器交給後台處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）； 瀏覽器對載入到的資源（HTML、JS、CSS等）進行語法解析，建立相應的內部數據結構 （如HTML的DOM）； 載入解析到的資源文件，渲染頁面，完成。

.call() 和 .apply() 的區別？

功能基本相同，都是實現繼承和轉換對象指針區別： call的參數列表與apply不同 .call(obj[par1, par2,...]) .apply(obj, pareArray)

DOM操作——怎樣添加、移除、移動、複製、創建和查找節點?

（1）創建新節點 createDocumentFragment() //創建一個DOM片段 createElement() //創建一個具體的元素 createTextNode() //創建一個文本節點（2）添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子節點前插入一個新的子節點（3）查找 getElementsByTagName() //通過標籤名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組， 其中包括id等於name值的) getElementById() //通過元素Id，唯一性

CSS改變HTML樣式以及IE事件

1. 樣式 document.getElementById(id),style.property = 新樣式2.事件 高版本瀏覽器： 監聽事件： addEventListener() 移除事件： removeEventListener() 阻止冒泡： stopPropagation() 事件元素： event.target IE 6/7/8 (萬惡的IE 6)： 監聽事件： attachEvent(event, func()) 移除事件： detachEvent(event, func()) 阻止冒泡： cancleBubble = true 事件元素： event.srcElement

非同步編程的過程

1. 回調函數 2. 事件監聽 3. 發布/訂閱 public/subscribe 4. promise對象 pending(初始狀態) fulfilled(成功執行)/ resolve rejected (執行出錯)

詳見： Javascript非同步編程的4種方法 - 阮一峰的網路日誌

new操作符具體幹了什麼呢?

1、創建一個空對象，並且 this 變數引用該對象，同時還繼承了該函數的原型。2、屬性和方法被加入到 this 引用的對象中。3、新創建的對象由 this 所引用，並且最後隱式的返回 this 。var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);

介紹js有哪些內置對象？

Object 是 JavaScript 中所有對象的父對象數據封裝類對象：Object、Array、Boolean、Number 和 String其他對象：Function、Arguments、Math、Date、RegExp、Error

介紹js的基本數據類型。

Undefined、Null、Boolean、Number、String

Ajax(Asynchronous Javascript And XML)

Ajax = 非同步傳輸 + Js + XML，是一種用於創建快速動態網頁技術 通過在後台伺服器進行少量的數據交換 Ajax可使網頁實現非同步更新，即局部刷新頁面所謂非同步，在這裡簡單地解釋就是：向伺服器發送請求的時候， 我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行後續操作， 與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。(1)創建XMLHttpRequest對象,也就是創建一個非同步調用對象(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息(3)設置響應HTTP請求狀態變化的函數(4)發送HTTP請求(5)獲取非同步調用返回的數據(6)使用JavaScript和DOM實現局部刷新

同步和非同步的區別？

同步： 瀏覽器訪問伺服器請求，用戶看得到頁面刷新，重新發送請求，等請求完成，頁面刷新， 新內容出現，用戶看到新內容，進行下一步操作。非同步： 瀏覽器訪問伺服器請求，用戶正常操作，瀏覽器後端發送請求，等請求完成，頁面不刷新， 新內容出現，用戶看到新內容。

前端性能優化的方法？

（1） 減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適； 網頁Gzip，CDN託管，data緩存 ，圖片伺服器。 （2） 前端模板 JS+數據，減少由於HTML標籤導致的帶寬浪費，前端用變數保存AJAX請求結果， 每次操作本地變數，不用請求，減少請求次數 （3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。 （4） 當需要設置的樣式很多時設置className而不是直接操作style。 （5） 少用全局變數、緩存DOM節點查找的結果。減少IO讀取操作。 （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。 （7） 圖片預載入，將樣式表放在頂部，將腳本放在底部 加上時間戳。 （8） 避免在頁面的主體布局中使用table，table要等其中的內容完全下載之後才會顯示出來， 顯示比div+css布局慢。(筆試考過)

如何區別內聯元素、塊級元素、內聯塊狀元素？及其之間的轉換

獨佔一行 能否設置寬高 是否有margin、padding塊狀 √ √ 豎直、水平均有內聯 × × 只有水平方向有內聯元素---> 塊狀元素 =====>>>>> display: block;塊狀元素---> 內聯元素 =====>>>>> display: inline;元素---> 內聯塊狀元素 =====>>>>> display: inline-block;

常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

JS原型和原型鏈，他們有何特點？

prototype(原型)： 每個對象都會在其內部轉化一個屬性原型鏈： 當我們訪問一個對象的屬性時，如果該對象內部不存在這個屬性， 那麼他就會去該prototype里找這個屬性，這個prototype又會有自己的prototype，如此循環特點： JS對象是通過對象引用傳遞的，我們創建的每一個對象並沒有一份屬於自己的原型副本， 當我們修改原型時，與之相關的對象也會繼承這一改變。

JS繼承方式？

1、原型鏈繼承 核心： 將父類的實例作為子類的原型 特點： 1. 非常純粹的繼承關係，實例是子類的實例，也是父類的實例 2. 父類新增原型方法/原型屬性，子類都能訪問到 3. 簡單，易於實現 缺點： 1. 要想為子類新增屬性和方法，必須要在new Animal()這樣的語句之後執行， 不能放到構造器中 2. 無法實現多繼承 3. 來自原型對象的引用屬性是所有實例共享的 4. 創建子類實例時，無法向父類構造函數傳參 推薦指數：（3、4兩大致命缺陷）2、構造繼承 核心：使用父類的構造函數來增強子類實例，等於是複製父類的實例屬性給子類（沒用到原型） 特點： 1. 解決了1中，子類實例共享父類引用屬性的問題 2. 創建子類實例時，可以向父類傳遞參數 3. 可以實現多繼承（call多個父類對象） 缺點： 1. 實例並不是父類的實例，只是子類的實例 2. 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法 3. 無法實現函數復用，每個子類都有父類實例函數的副本，影響性能 推薦指數：（缺點3）3、實例繼承 核心：為父類實例添加新特性，作為子類實例返回 特點： 1. 不限制調用方式，不管是new 子類()還是子類(),返回的對象具有相同的效果 缺點 1. 實例是父類的實例，不是子類的實例 2. 不支持多繼承 推薦指數：4、拷貝繼承 特點： 1. 支持多繼承 缺點： 1. 效率較低，內存佔用高（因為要拷貝父類的屬性） 2. 無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到） 推薦指數：（缺點1）5、組合繼承 核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點， 然後通過將父類實例作為子類原型，實現函數復用 特點： 1. 彌補了方式2的缺陷，可以繼承實例屬性/方法，也可以繼承原型屬性/方法 2. 既是子類的實例，也是父類的實例 3. 不存在引用屬性共享問題 4. 可傳參 5. 函數可復用 缺點： 1. 調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了） 推薦指數：（僅僅多消耗了一點內存）6、寄生組合繼承 核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候， 就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點 特點： 1. 堪稱完美 缺點： 1. 實現較為複雜 推薦指數：（實現複雜，扣掉一顆星）

詳見： JS實現繼承的幾種方式 - 幻天芒 - 博客園

JSON語法規則？

JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式；用於存儲和傳輸數據的格式，通常用於伺服器向網頁傳遞數據。JSON 語法是 JavaScript 對象表示法語法的子集。 數據在鍵(key)/值(val)對中 數據由逗號分隔 花括弧保存對象 方括弧保存數組JSON 值JSON 值可以是： 數字（整數或浮點數） 字元串（在雙引號中） 邏輯值（true 或 false） 數組（在方括弧中） 對象（在花括弧中） null

== 與 ===的區別？

1. 對於string，number等基礎類型，兩則是有區別的 1) 不同類型： == 先轉化成同一類型後的值然後二者的值進行比較 === 若類型不同，其結果就是不等 2) 同類型：直接比較 值2. 對於Array Object 等高級類型， == 和 === 沒有區別，進行 指針地址 比較3. 基礎類型 與 高級類型，二者有區別 1) == 將高級類型轉換成基礎類型，進行 值 比較 2) 因為 類型不同， === 結果為 false

兼容性問題

1. HTML部分1. HTML5標籤在IE 9 以下的瀏覽器識別 2. ul標籤內外邊距問題。 Q： IE 6/7 中ul有個默認的外邊距 IE 8 及其以上的版本中與其他瀏覽器中，有個默認的內邊距 A： 統一設置ul 的內外邊距為 0 2.CSS樣式 (萬惡的IE 6 ) 1. CSS的hack問題，主要針對IE 的不同版本，不同的瀏覽器的寫法不同，IE 的條件注釋hack： <!--[if IF6] 此處內容只有IE6可見<![end if]--> <!--[if IF7] 此處內容只有IE7可見<![end if]--> 2. Q： IE6 雙邊距問題：IE6 浮動後，又有橫向的margin，此時，鈣元素的外邊距是其值的2倍 A: display: block； 3. Q: 不同瀏覽器的標籤默認的外補丁和內補丁不同 A: *{margin:0;padding:0;} 4. Q: IE6 下圖片下方有空隙 A: 給img設置display: block； 5. Q: IE6 下 兩個float之間會有3px 的 bug A: 兩邊元素設置為float: left; 6. Q: 行內屬性標籤，設置display:block後採用float布局，又有橫行的margin的情況，IE6間距bug A: 在display:block;後面加入display:inline;display:table; 7. Q: IE6下無法設置1px的行高，原因是有其默認行高引起的 A: 設其overflow: hidden;或者 line-height: 1px; 8. Q: IE6 下使用margin: 0 auto;無法使其居中 A: 為其父元素設置text-align: center; 9. Q: 標籤最低高度設置min-height不兼容 A: 如果我們要設置一個標籤的最小高度200px，需要進行的設置為： {min-height:200px; height:auto !important; height:200px; overflow:visible;} 10. Q: IE6下，沒有min-width A: 默認的width = min-width 11. Q: 被點擊過的超鏈接不再具有hover 和 active屬性 A: 按L-V-H-A的順序書寫CSS樣式 12. Q: 在使用相對或絕對定位後，IE中設置的z-index失效 A: 其元素依賴於父元素的z-index，但父元素默認為0，子高父低，故不改變顯示順序 13. Q: 一個父標籤與幾個子標籤嵌套，父標籤不浮動，子標籤float，子標籤不撐開父的高度。 A: a 在子標籤最後清浮動{<div stylex="height:0;clear:both;">&nbsp;</div>} b 父標籤添加{overflow：hidden；} c 給父標籤設置高度3. JS的兼容性1. 事件的捕獲方式不一致。 IE 是由內向外 其他瀏覽器是由外向內 但最終結果是講IE的標準為準 2. ajax的實現方法不同。 IE 是 activeObject 其他瀏覽器 是XMLHttpRrequest 3. 事件綁定方法函數 IE 是 attachEvent 其他瀏覽器是 addEventListener 4. window.event獲取事件元素的方法不同 IE 是 event.srcElement 其他瀏覽器 是 event.target 5. 獲取DOM的父子節點不同 IE 父： parentElement 子：parentElement.children 其他瀏覽器 父： parentNode 子： parentNode.childNodes

2018-1-24

最近再度複習前端知識，遇到一個小問題，特意把這個問題的理解留下，以便於學習

問題： mouseover與mouseenter的區別

html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width_=device-width"> <title>JS Bin</title></head><body> <p>不論滑鼠指針穿過被選元素或其子元素，都會觸發 mouseover 事件。</p> <p>只有在滑鼠指針穿過被選元素時，才會觸發 mouseenter 事件。</p> <div id="con1"> <button id="b1">mouseove & mouseout</button> </div> <p id="demo1"></p> <div id="con2"> <button id="b2">mouseenter & mouseleave</button> </div> <p id="demo2"></p></body></html>

JS

// mouseoverdocument.getElementById(con1).addEventListener(mouseover, function() { document.getElementById(demo1).innerHTML = mouseover + over++})//mouseoutdocument.getElementById(con1).addEventListener(mouseout, function() { document.getElementById(demo1).innerHTML = mouseout + out++})//mouseenterdocument.getElementById(con2).addEventListener(mouseenter, function() { document.getElementById(demo2).innerHTML = mouseenter + enter++})//mouseleavedocument.getElementById(con2).addEventListener(mouseleave, function() { document.getElementById(demo2).innerHTML = mouseleave + leave++})

結果

結論是

不論滑鼠指針穿過被選元素或其子元素，都會觸發 mouseover 事件。只有在滑鼠指針穿過被選元素時，才會觸發 mouseenter 事件。

代碼地址： JS Bin

2018-3-3

好久沒複習基礎了，最近拿出來看，發現好多不會的，還是接著上來寫筆記吧，o(╥﹏╥)o

最近有在刷題

setTimeout(() => console.log(a), 0);var p = new Promise((resolve) => { console.log(b); resolve();});p.then(() => console.log(c));p.then(() => console.log(d));console.log(e);// // 任務隊列優先順序：promise.Trick()>promise的回調>setTimeout>setImmediate

遇到setTimeout(fn, 0),於是就去百度了下這個知識點，得到了這個結論

setTimeout(fn, 0)的作用是指定某個任務在主線程最早可得的空閑時間執行，也就是說，儘可能早得執行。它在"任務隊列"的尾部添加一個事件，因此要等到主線程把同步任務和"任務隊列"現有的事件都處理完，才會得到執行。

在某種程度上，我們可以利用setTimeout(fn,0)的特性，修正瀏覽器的任務順序。

工作線程為非同步 http 請求線程即 Ajax 線程

注意非同步過程的回調函數，一定不在當前這一輪事件循環中執行。而是當 這一輪執行完了，主線程空了，再從任務（消息）隊列中取。

JS引擎運行時

主線程運行的時候，產生堆（heap）和棧（stack），棧中的代碼調用各種外部API，它們在"任務隊列"中加入各種事件（click，load，done）。只要棧中的代碼執行完畢，主線程就會去讀取"任務隊列"，依次執行那些事件所對應的回調函數。

詳見

【 js 基礎 】【 源碼學習 】 setTimeout(fn, 0) 的作用?

www.cnblogs.com

不知道大家有沒有遇到這種問題

當margin-top、padding-top的值是百分比時，分別是如何計算的？

答案是-->相對最近父級塊級元素的width，相對最近父級塊級元素的width

這是一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right, 還是top/bottom, 都是以父元素的width為參照物的！

祭出W3C標準

https://drafts.csswg.org/css-box/#the-margin-properties?

drafts.csswg.org

CSS basic box model

CSS basic box model?

drafts.csswg.org

意思是

請注意，在水平流動中，margin-top和margin-bottom的百分比與包含塊的寬度有關，而不是高度（並且在垂直流中，margin-left和margin-right是相對於高度而不是寬度）。

詳見

人類身份驗證 - SegmentFault?

segmentfault.com

通信類問題

什麼是同源策略及限制？

同源策略限制從一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。

這是一個用來格力潛在惡意文件的關鍵的安全機制。

那麼什麼是源呢？一個鏈接一般包括協議，埠，域名比如：https://github.com/Rain120https 協議，其中還有httpgithub.com 域名80 埠，默認埠就是80，可以不寫出來三個中任意一個不相同就是源不同，即跨域接著來講什麼是限制？ 不是一個源的文檔不能操作另一個源的文檔主要體現在那些方面呢？1. Cookie，Localstorage和IndexDB無法讀取2. DOM無法獲得3. Ajax請求不能發送

前後端如何通信？

• Ajax
• WebSocket
• CORS

如何創建Ajax？

常見考察點：

• XMLHttpRequest對象的工作流程
• 兼容性處理
• 事件的觸發條件
• 時間e 事件的觸發順序

XHR建立典型的Ajax請求的步驟(原生的ajax)

1. new一個XHR對象(注意IE6/7的兼容問題)----萬惡的IE6 2. 調用open()3. send(), 發送一些信息4. 監聽，onReadyStateChange()事件，主要插入成功後要做的事情，監聽readyState的變化

發送消息

function test(){ var xmlhttp; // 兼容性處理 if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//萬惡的IE6 } xmlhttp.open("?GET", index.php,true); xmlhttp.send(); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState === 4 && (xmlhttp.status === 200 || xmlhttp.status === 304)){ document.getElementById("?myId").innerHTML = xmlhttp.responseText; } }}

接受消息

var xhr = createXHR();xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { alert(xhr.statusText); } else { alert("Request was unsuccessful: " + xhr.status); } }};xhr.open("get", "example.txt", true);xhr.send(null);

XHR的方法

• abort() ： 導致當前正在執行的請求被取消
• getAllResponseHeaders() ： 返回包含所有響應頭的名稱和值的單個字元串
• getResponseHeader(name) ： 返迴響應頭中指定的名稱和值
• open(method,url,async,username,pwd) ： 設置HTTP方法（get或post）等
• send(content) ： 發出帶有指定主體內容的請求
• setRequestHeader(name,value) ： 使用指定的名稱和值設置請求頭

readyState屬性對應的關係：

XMLHttpRequest.readyState 屬性返回一個 XMLHttpRequest 代理當前所處的狀態。

一個 XHR 代理總是處於下列狀態中的一個：值 狀態 描述0 UNSENT 代理被創建，但尚未調用 open() 方法。 （未初始化） 請求為未初始化，open()還未調用1 OPENED open() 方法已經被調用。 （載入）伺服器連接已建立，open() 方法已經被調用2 HEADERS_RECEIVED send() 方法已經被調用，並且頭部和狀態已經可獲得。 （載入完成）請求已接收，即收到頭信息了3 LOADING 下載中； responseText 屬性已經包含部分數據。 （交互）請求正在處理ing，即接收到響應的主體了4 DONE 下載操作已完成。 （完成）請求已完成而且響應已就緒，即響應已完成UNSENT XMLHttpRequest 代理已被創建， 但尚未調用 open() 方法。OPENED open() 方法已經被觸發。在這個狀態中，可以通過 setRequestHeader() 方法來設置 請求的頭部， 可以調用 send() 方法來發起請求。HEADERS_RECEIVED send() 方法已經被調用，響應頭也已經被接收。LOADING 響應體部分正在被接收。如果 responseType 屬性是「text」或空字元串， responseText 將會在載入的過程中擁有部分響應數據。DONE 請求操作已經完成。這意味著數據傳輸已經徹底完成或失敗。

詳見：XMLHttpRequest.readyState

XMLHttpRequest.readyState?

developer.mozilla.org

詳見：XMLHttpRequest.readyState

XMLhttpRequest

後台>------------------------------->伺服器 交換數據 1. 運用HTML和CSS來實現頁面，表達信息 2. 運用XHR和伺服器進行數據的非同步交換 3. 運用JS和操作DOM，實現動態局部刷新

JQuery ajax

定義和用法ajax() 方法通過 HTTP 請求載入遠程數據。該方法是 jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。$.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。注意：所有的選項都可以通過 $.ajaxSetup() 函數來全局設置。

示例：

$(function () { $("input").click(function () { $.ajax({ type : "POST", url: test.php, data:{ url: baidu.com }, success : function(response,status,xhr){ $(#box).html(response); } }) })});

詳見： jQuery ajax - ajax() 方法

jQuery AJAX 方法 | 菜鳥教程

建議清除浮動的方式

.clearfix:after{ content: ; display: block; height: 0; clear: both; visibility: hidden;}.clearfix { zoom:1;}

box-sizing是什麼

設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding

box-sizing屬性可以為三個值之一：

• content-box，默認值，只計算內容的寬度，border和padding不計算入width之內
• padding-box，padding計算入寬度內
• border-box，border和padding計算入寬度之內

多益筆試題目

HTTP/2 的優勢

相比 HTTP/1.x，HTTP/2 在底層傳輸做了很大的改動和優化：

1. HTTP/2 採用二進位格式傳輸數據，而非 HTTP/1.x 的文本格式。二進位格式在協議的解析和優化擴展上帶來更多的優勢和可能。
2. HTTP/2 對消息頭採用 HPACK 進行壓縮傳輸，能夠節省消息頭佔用的網路的流量。而 HTTP/1.x 每次請求，都會攜帶大量冗餘頭信息，浪費了很多帶寬資源。頭壓縮能夠很好的解決該問題。
3. 多路復用，直白的說就是所有的請求都是通過一個 TCP 連接並發完成。HTTP/1.x 雖然通過 pipeline 也能並發請求，但是多個請求之間的響應會被阻塞的，所以 pipeline 至今也沒有被普及應用，而 HTTP/2 做到了真正的並發請求。同時，流還支持優先順序和流量控制。
4. Server Push：服務端能夠更快的把資源推送給客戶端。例如服務端可以主動把 JS 和 CSS 文件推送給客戶端，而不需要客戶端解析 HTML 再發送這些請求。當客戶端需要的時候，它已經在客戶端了。

form數據序列化

var formData = new FormData(form);var value = formData.entries();var data = [];for (var val in value) { data.push(val);}console.log(data);return data;

錯誤監控

1、 錯誤類型

即時錯誤（代碼錯誤）

資源錯誤

2、錯誤的捕獲方式

即時錯誤：（1）try...catch （2）window.error

資源錯誤：（1）object.error（2）performance.getEntries()（3）Error事件捕獲

延伸：跨域的js運行的錯誤可以捕獲嗎？錯誤提示是什麼？應該怎麼處理？

解決方案：

1. 客戶端：在script標籤中增加crossorigin屬性
2. 服務端：設置JS資源響應頭Access-Control-Allow-Origin: *;（*可以替換成跨域域名）

上傳錯誤的基本原理

1. 採用Ajax通信的方式上報
2. 利用Image對象上報

(new Image()).src = url; //上傳的url

Rainy

Github: Rain120

推薦閱讀：