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

• <script src="script.js"></script>
  沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
• <script async src="script.js"></script>
  有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
• <script defer src="myscript.js"></script>
  有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。

3.CSS中 link 和@import 的區別是？

• link屬于HTML標簽，而@import是CSS提供的;
• 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
• import只在IE5以上才能識別，而link是HTML標簽，無兼容問題;
• link方式的樣式的權重 高于@import的權重.

@import 的不推薦原因：link混合@import會破壞并行下載，這是一個很嚴重的問題，這會導致原本并行下載的樣式變成一個一個的同步下載
4.BFC
參考1
參考2

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

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

BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。（不嚴謹的說只有 塊元素 參與）

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

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

BFC的約束規則:

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

通俗的解釋就是：

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

看到以上的幾條約束，讓我想起學習css時的幾條規則

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

margin重疊計算方法：()

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

注意：

• 水平邊距永遠不會重合
• BFC后，消除了margin重疊

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

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

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

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

• 回調函數
• 事件監聽
• 發布/訂閱
• Promises對象

單線程
如何自定義事件

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

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

寫一個promise

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

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

同時發送多個請求：關于promises，你理解了多少？

其它：

寫一個原生ajax

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

xhr.onreadystatechange = function () { // 狀態發生變化時，函數被回調
    if (xhr.readyState === 4) { // 成功完成
        // 判斷響應結果:
        if (xhr.status === 200) {
            // 成功
        } else {
            // 失敗
        }
    } else {
        // HTTP請求還在繼續...
    }
}

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

7.虛擬DOM
實現虛擬 DOM 所需的技術背景可以分為兩個方面：

• 需要了解的是與 DOM 緊密相關的樹形數據結構，及對樹進行增查改刪等操作的算法
• 需要了解的是用于轉譯 JSX 代碼的工具鏈（可以用Babel 的 transform-react-jsx 插件來實現）
  更新虛擬 DOM：差量更新

JSX：
React 使用 JSX 來替代常規的 JavaScript，JSX語法像是在Javascript代碼里直接寫XML的語法，實質上這只是一個語法糖，每一個XML標簽都會被JSX轉換工具轉換成純Javascript代碼
優點：

• JSX 執行更快，因為它在編譯為 JavaScript 代碼后進行了優化。
• 它是類型安全的，在編譯過程中就能發現錯誤。
• 使用 JSX 編寫模板更加簡單快速,組件的結構和組件之間的關系看上去更加清晰

8.react和vue

react和vue的相似之處：
1.使用虛擬dom
2.提供了響應式和組件化的視圖組件
3.關注核心庫，伴隨于此，有配套的路由和負責處理全局狀態管理的庫

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

• 渲染用戶界面的時候，dom的操作成本是最高的，那為了盡可能的減少對dom的操作，Vue和React都利用虛擬DOM來實現這一點，但Vue的Virtual DOM實現（一個陷阱的叉子）的權重要輕得多，因此比React的引入開銷更少。
• Vue 和 React 也提供功能性組件，這些組件因為都是沒有聲明，沒有實例化的，因此會花費更少的開銷。當這些都用于關鍵性能的場景時，Vue 將會更快。

2.更新性能
在react中，當一個組件的狀態發生變化時，它將會引起整個組件的子樹都進行重新渲染，從這個組件的根部開始。那為了避免子組件不必要的重新渲染，您需要隨時使用shouldComponentUpdate，并使用不可變的數據結構。 在Vue中，組件的依賴關系在它的渲染期間被自動跟蹤，因此系統準確地知道哪些組件實際上需要重新渲染。這就意味著在更新方面,vue也是快于React

3.開發中
在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。這是由于 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。vue在實現這些檢查時，也更加密切地關注了性能方面。