1.::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用
經(jīng)常會(huì)遇到的的偽元素有：::before, ::after（在CSS3中唯一引入的偽元素是::selection），偽類包括：:focus, :hover, :link。
在css2中，對(duì)兩者沒(méi)有特別的區(qū)分，單冒號(hào)和雙冒號(hào)都可以；css3中的偽元素需要用雙冒號(hào)表示。
2.script中的async defer：

• <script src="script.js"></script>
  沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
• <script async src="script.js"></script>
  有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
• <script defer src="myscript.js"></script>
  有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

3.CSS中 link 和@import 的區(qū)別是？

• link屬于HTML標(biāo)簽，而@import是CSS提供的;
• 頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
• import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無(wú)兼容問(wèn)題;
• link方式的樣式的權(quán)重 高于@import的權(quán)重.

@import 的不推薦原因：link混合@import會(huì)破壞并行下載，這是一個(gè)很嚴(yán)重的問(wèn)題，這會(huì)導(dǎo)致原本并行下載的樣式變成一個(gè)一個(gè)的同步下載
4.BFC
參考1
參考2

BFC全稱”Block Formatting Context”, 中文為“塊級(jí)格式化上下文”。

Formatting Context：指頁(yè)面中的一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。

BFC：塊級(jí)格式化上下文，它是指一個(gè)獨(dú)立的塊級(jí)渲染區(qū)域，只有Block-level BOX參與，該區(qū)域擁有一套渲染規(guī)則來(lái)約束塊級(jí)盒子的布局，且與區(qū)域外部無(wú)關(guān)。（不嚴(yán)謹(jǐn)?shù)恼f(shuō)只有 塊元素 參與）

BFC的生成（滿足以下條件之一）：

• 根元素
• float的值不為none
• overflow的值不為visible
• display的值為inline-block、flex、 inline-flex、table-cell、table-caption
• position的值為absolute或fixed

BFC的約束規(guī)則:

• 生成BFC元素的子元素會(huì)一個(gè)接一個(gè)的放置。垂直方向上他們的起點(diǎn)是一個(gè)包含塊的頂部，兩個(gè)相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級(jí)元素外邊距會(huì)折疊。
• 生成BFC元素的子元素中，每一個(gè)子元素做外邊距與包含塊的左邊界相接觸，（對(duì)于從右到左的格式化，右外邊距接觸右邊界），即使浮動(dòng)元素也是如此（盡管子元素的內(nèi)容區(qū)域會(huì)由于浮動(dòng)而壓縮），除非這個(gè)子元素也創(chuàng)建了一個(gè)新的BFC（如它自身也是一個(gè)浮動(dòng)元素）。

通俗的解釋就是：

• 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置
• 垂直方向上的距離由margin決定。（完整的說(shuō)法是：屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊，與方向無(wú)關(guān)。）
• 每個(gè)元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動(dòng)元素也是如此。（這說(shuō)明BFC中子元素不會(huì)超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
• BFC的區(qū)域不會(huì)與float的元素區(qū)域重疊
  計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算
  BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面元素，反之亦然

看到以上的幾條約束，讓我想起學(xué)習(xí)css時(shí)的幾條規(guī)則

• Block元素會(huì)擴(kuò)展到與父元素同寬，所以block元素會(huì)垂直排列
• 垂直方向上的兩個(gè)相鄰DIV的margin會(huì)重疊，而水平方向不會(huì)(此規(guī)則并不完全正確)
• 浮動(dòng)元素會(huì)盡量接近往左上方（或右上方）
• 為父元素設(shè)置overflow：hidden或浮動(dòng)父元素，則會(huì)包含浮動(dòng)元素
  5.margin重疊
  CSS CSS 外邊距(margin)重疊及防止方法
  CSS外邊距合并的問(wèn)題

margin重疊計(jì)算方法：()

• 全部都為正值，取最大者(1, 2 , 3 中 取 3)
• 不全是正值，則取絕對(duì)值，然后 最大的正邊界 減去 絕對(duì)值最大的負(fù)邊界 ([1, 2, 6] 和 [ -1, -3, -9] 中 取 6 - |-9| 的值）；
• 沒(méi)有正值，則都取絕對(duì)值，然后用0減去最大值。(-1, -2 , -3 中 取 -3)

注意：

• 水平邊距永遠(yuǎn)不會(huì)重合
• BFC后，消除了margin重疊

• 根元素的垂直margin不會(huì)被重疊
• float : 相鄰的盒模型中，如果其中的一個(gè)是浮動(dòng)的（float），垂直margin不會(huì)重疊，并且浮動(dòng)的盒模型和它的子元素之間也是這樣。
• overflow : 設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）
• position : 設(shè)置了絕對(duì)定位（position:absolute）的盒模型，垂直margin不會(huì)被重疊，并且和他們的子元素之間也是一樣。
• display : 設(shè)置了display:inline-block的元素，垂直margin不會(huì)重疊，甚至和他們的子元素之間也是一樣。

防止外邊距重疊解決方案：

• 外層元素padding代替
• 內(nèi)層元素透明邊框 border:1px solid transparent;
• 內(nèi)層元素絕對(duì)定位 postion:absolute:
• 外層元素 overflow:hidden;
• 內(nèi)層元素 加float:left;或display:inline-block;
• 內(nèi)層元素padding:1px;

6.js異步編程的4種方法

• 回調(diào)函數(shù)
• 事件監(jiān)聽(tīng)
• 發(fā)布/訂閱
• Promises對(duì)象

單線程
如何自定義事件

dom.addEventListener('自定義事件',function(){
  console.log('自定義事件');
});

var eve = new Event('自定義事件');
dom.dispatchEvent(eve);

寫(xiě)一個(gè)promise

var promise = new Promise(function(resolve, reject) {
 if (/* 異步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

promise.then(function(value) {
 // success
}, function(value) {
 // failure
});

同時(shí)發(fā)送多個(gè)請(qǐng)求：關(guān)于promises，你理解了多少？

其它：

寫(xiě)一個(gè)原生ajax

//var xhr=new ActiveXObject()(IE5/IE6使用，現(xiàn)在基本不用)
var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest對(duì)象

xhr.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時(shí)，函數(shù)被回調(diào)
    if (xhr.readyState === 4) { // 成功完成
        // 判斷響應(yīng)結(jié)果:
        if (xhr.status === 200) {
            // 成功
        } else {
            // 失敗
        }
    } else {
        // HTTP請(qǐng)求還在繼續(xù)...
    }
}

// 發(fā)送請(qǐng)求:
xhr.open('GET', 'url'，'true（異步）或 false（同步）');
xhr.send();

7.虛擬DOM
實(shí)現(xiàn)虛擬 DOM 所需的技術(shù)背景可以分為兩個(gè)方面：

• 需要了解的是與 DOM 緊密相關(guān)的樹(shù)形數(shù)據(jù)結(jié)構(gòu)，及對(duì)樹(shù)進(jìn)行增查改刪等操作的算法
• 需要了解的是用于轉(zhuǎn)譯 JSX 代碼的工具鏈（可以用Babel 的 transform-react-jsx 插件來(lái)實(shí)現(xiàn)）
  更新虛擬 DOM：差量更新

JSX：
React 使用 JSX 來(lái)替代常規(guī)的 JavaScript，JSX語(yǔ)法像是在Javascript代碼里直接寫(xiě)XML的語(yǔ)法，實(shí)質(zhì)上這只是一個(gè)語(yǔ)法糖，每一個(gè)XML標(biāo)簽都會(huì)被JSX轉(zhuǎn)換工具轉(zhuǎn)換成純Javascript代碼
優(yōu)點(diǎn)：

• JSX 執(zhí)行更快，因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。
• 它是類型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。
• 使用 JSX 編寫(xiě)模板更加簡(jiǎn)單快速,組件的結(jié)構(gòu)和組件之間的關(guān)系看上去更加清晰

8.react和vue

react和vue的相似之處：
1.使用虛擬dom
2.提供了響應(yīng)式和組件化的視圖組件
3.關(guān)注核心庫(kù)，伴隨于此，有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫(kù)

性能方面的差異：
1.渲染性能

• 渲染用戶界面的時(shí)候，dom的操作成本是最高的，那為了盡可能的減少對(duì)dom的操作，Vue和React都利用虛擬DOM來(lái)實(shí)現(xiàn)這一點(diǎn)，但Vue的Virtual DOM實(shí)現(xiàn)（一個(gè)陷阱的叉子）的權(quán)重要輕得多，因此比React的引入開(kāi)銷更少。
• Vue 和 React 也提供功能性組件，這些組件因?yàn)槎际菦](méi)有聲明，沒(méi)有實(shí)例化的，因此會(huì)花費(fèi)更少的開(kāi)銷。當(dāng)這些都用于關(guān)鍵性能的場(chǎng)景時(shí)，Vue 將會(huì)更快。

2.更新性能
在react中，當(dāng)一個(gè)組件的狀態(tài)發(fā)生變化時(shí)，它將會(huì)引起整個(gè)組件的子樹(shù)都進(jìn)行重新渲染，從這個(gè)組件的根部開(kāi)始。那為了避免子組件不必要的重新渲染，您需要隨時(shí)使用shouldComponentUpdate，并使用不可變的數(shù)據(jù)結(jié)構(gòu)。 在Vue中，組件的依賴關(guān)系在它的渲染期間被自動(dòng)跟蹤，因此系統(tǒng)準(zhǔn)確地知道哪些組件實(shí)際上需要重新渲染。這就意味著在更新方面,vue也是快于React

3.開(kāi)發(fā)中
在開(kāi)發(fā)中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。這是由于 React 有大量的檢查機(jī)制，這會(huì)讓它提供許多有用的警告和錯(cuò)誤提示信息。vue在實(shí)現(xiàn)這些檢查時(shí)，也更加密切地關(guān)注了性能方面。