某中型公司面試原題

本文適合最近在考慮新機會的的小伙伴閱讀

歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～

作者：廣東靚仔

一、前言

?這套題目是某位群友親身經(jīng)歷過的，感謝小伙伴share~

二、原題

講講事件循環(huán)

所謂單線程，無非就是同步隊列和異步隊列，js代碼是自上向下執(zhí)行的，在主線程中立即執(zhí)行的就是同步任務(wù)，比如簡單的邏輯操作及函數(shù)，而異步任務(wù)不會立馬立馬執(zhí)行，會挪步放到到異步隊列中，比如ajax、promise、事件、計時器等等。

也就是先執(zhí)行同步，主線程結(jié)束后再按照異步的順序再次執(zhí)行。

事件循環(huán)意思就是：等待主線程中任務(wù)全部完成后，再回來把異步隊列中任務(wù)放到主程序中運行，這樣反復(fù)的循環(huán)

在事件循環(huán)中，每進行一次循環(huán)操作稱為tick，tick 的任務(wù)處理模型是比較復(fù)雜的，里邊有兩個詞：分別是 Macro Task （宏任務(wù)）和 Micro Task（微任務(wù)）。

事件委托

sass和less的區(qū)別

sass和less都是css的預(yù)編譯處理語言，他們引入了mixins，參數(shù)，嵌套規(guī)則，運算，顏色，名字空間，作用域，JavaScript賦值等 加快了css開發(fā)效率,

sass的安裝需要Ruby環(huán)境的，是在服務(wù)端上處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放到項目中。

Less是@，而Scss是$

Sass提供4中輸出選項：nested, compact, compressed 和 expanded.

scss引用的外部文件命名必須以開頭, 文件名如果以下劃線開頭的話，Sass會認為該文件是一個引用文件，不會將其編譯為css文件.

Sass有工具庫Compass

Less有UI組件庫Bootstrap

http的狀態(tài)碼、http緩存

狀態(tài)碼分為5類：

301：

302：

304：

305：被請求的資源必須通過指定的代理才能被訪問。

400：

403：服務(wù)器已經(jīng)理解請求，但是拒絕執(zhí)行它。

404：請求失敗，請求所希望得到的資源未被在服務(wù)器上發(fā)現(xiàn)。

500：

服務(wù)器遇到了一個未曾預(yù)料的狀況，導(dǎo)致了它無法完成對請求的處理。一般來說，這個問題都會在服務(wù)器端的源代碼出現(xiàn)錯誤時出現(xiàn)。

http緩存請求相應(yīng)頭：

http緩存方案

不推薦緩存html文件，這樣每次html加載渲染都可以感知文件變化，反正文件沒變還是使用本地緩存，文件名都變了說明修改過，重新請求緩存就好了。

了解了上面不同瀏覽器行為對http緩存的不同影響，理解強緩存與協(xié)商性緩存就很容易了。

不發(fā)起http請求，直接使用本地緩存，比如瀏覽器地址欄回車，使用瀏覽器的刷新按鈕，在Expires或max-age生效的情況下，觸發(fā)的都是強緩存。

在使用本地緩存前，先與服務(wù)器協(xié)商，核對緩存文件是否為最新。比如設(shè)置了cache-control=no-cache，不管你做任何操作，都會發(fā)起請求，這一類就是協(xié)商性緩存了。

css盒模型

/*?標(biāo)準模型?*/
box-sizing:content-box;

?/*IE模型*/
box-sizing:border-box;

BFC(block formatting context)塊級格式化上下文

(1). 內(nèi)部的box會在垂直方向上，一個接一個地放

(2). 每個元素的margin box的左邊，與包含塊border box的左邊相接觸（對于從做往右的格式化，否則相反）

(3). box垂直方向的距離由margin決定，屬于同一個bfc的兩個相鄰box的margin會發(fā)生重疊

(4). bfc的區(qū)域不會與浮動區(qū)域的box重疊

(5). bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc里的元素，反過來，里面的也不會影響外面的

(6). 計算bfc高度的時候，浮動元素也會參與計算

1. 脫離文檔流（float不為none時）

2.position為absolute或fixed

3. display 為inline-block、table-cell、table-caption、flex、inline-flex。

4. overflow不為visible

5. 根元素。

1. 自適應(yīng)兩欄布局

2. 清除內(nèi)部浮動

3. 防止垂直margin重疊

小程序分包機制

微信小程序采用的是類似離線包加載方案，用戶第一次打開時會先下載好所有代碼，然后再加載頁面；當(dāng)用戶再次進入時，會直接使用已下載的代碼，省去了代碼下載的過程，打開速度更快。

第一次打開小程序時白屏?xí)r間很長，因為要先下載好所有的代碼，代碼越多，白屏?xí)r間越長

離線包和M頁的一種結(jié)合機制，即把代碼劃分成主包+N個分包

目錄

├──?app.js
├──?app.json
├──?app.wxss
├──?packageA
│???└──?pages
│???????├──?cat
│???????└──?dog
├──?packageB
│???└──?pages
│???????├──?apple
│???????└──?banana
├──?pages
│???├──?index
│???└──?logs
└──?utils

?

app.json?

subpackages 字段聲明項目分包結(jié)構(gòu)：

{
??"pages":[
????"pages/index",
????"pages/logs"
??],
"subpackages":?[
??{
????"root":?"packageA",
????"pages":?[
??????"pages/cat",
??????"pages/dog"
????]
??},?{
????"root":?"packageB",
????"name":?"pack2",
????"pages":?[
??????"pages/apple",
??????"pages/banana"
????]
??}
??]
}

subpackages 中，每個分包的配置有以下幾項：

字段類型說明rootString分包根目錄nameString分包別名，分包預(yù)下載時可以使用pagesStringArray分包頁面路徑，相對與分包根目錄independentBoolean分包是否是獨立分包

打包原則

app（主包）也可以有自己的 pages（即最外層的 pages 字段）

subpackage 的根目錄不能是另外一個 subpackage 內(nèi)的子目錄

tabBar 頁面必須在 app（主包）內(nèi)

引用原則

packageA 無法 import packageB 的 template，但可以 require app、自己 package 內(nèi)的 template

packageA 無法使用 packageB 的資源，但可以使用 app、自己 package 內(nèi)的資源

js的基本數(shù)據(jù)類型和引用類型

說說js緩存

緩存的好處：

本地存儲

sessionStorage

localStorage

cookie

cookie和storage的區(qū)別

jquery的ajax實現(xiàn)原理

1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來”很像，目的也一樣，都是請求一個url，然后把服務(wù)器返回的數(shù)據(jù)進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；

<b id="afajh"><abbr id="afajh"></abbr></b>