css相關

1.萬能居中

1.margin: 0 auto;水平
2.text-align: center;水平
3.行高，垂直
4.表格，center,middle；水平垂直
5.display:table-cell；模擬表格，all
6.絕對定位，50%減自身寬高
7.絕對定位，上下左右全0，margin:auto
8.絕對定位加相對定位。不需要知道寬高
9.IE6，IE7：給父元素設一個font-size:高度/1.14,vertical-align:middle

2. BFC優化

塊格式化上下文, 特性:

使 BFC 內部浮動元素不會到處亂跑；
和浮動元素產生邊界。

3. 盒模型哪兩種模式？什麼區別？如何設定

標準模式: box-sizing: content-box; 寬高不包括內邊距和邊框
怪異模式: box-sizing: border-box

4. 常用清除浮動的方法，如不清除浮動會怎樣？

當父元素不給高度的時候，內部元素不浮動時會撐開, 而浮動的時候，父元素變成一條線, 造成塌陷.

額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設定clear：both；）（不推薦）
父元素新增overflow:hidden; (觸發BFC)
使用after偽元素清除浮動（推薦使用）
使用before和after雙偽元素清除浮動

5. 刪格化的原理

比如antd的row和col, 將一行等分為24份, col是幾就佔幾份, 底層按百分比實現; 結合媒體查詢, 可以實現響應式

6.CSS 選擇符有哪些？

（1）id選擇器（#myid）
（2）類選擇器（.myclassname）
（3）標籤選擇器（div,h1,p）
（4）後代選擇器（h1p）
（5）相鄰後代選擇器（子）選擇器（ul>li）
（6）兄弟選擇器（li~a）
（7）相鄰兄弟選擇器（li+a）
（8）屬性選擇器（a[rel=“external”]）
（9）偽類選擇器（a:hover,li:nth-child）
（10）偽元素選擇器（::before、::after）

7.偽類與偽元素的區別

css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說，偽類和偽元素是用來修飾不在文件樹中的部分，比如，一句
話中的第一個字母，或者是列表中的第一個元素。
偽類用於當已有的元素處於某個狀態時，為其新增對應的樣式，這個狀態是根據使用者行為而動態變化的。比如說，當用戶懸停在指定的
元素時，我們可以通過:hover來描述這個元素的狀態。
偽元素用於建立一些不在文件樹中的元素，併為其新增樣式。它們允許我們為元素的某些部分設定樣式。比如說，我們可以通過::be
fore來在一個元素前增加一些文字，併為這些文字新增樣式。雖然使用者可以看到這些文字，但是這些文字實際上不在文件樹中。
有時你會發現偽元素使用了兩個冒號（::）而不是一個冒號（:）。這是CSS3的一部分，並嘗試區分偽類和偽元素。大多數瀏覽
器都支援這兩個值。按照規則應該使用（::）而不是（:），從而區分偽類和偽元素。但是，由於在舊版本的W3C規範並未對此進行
特別區分，因此目前絕大多數的瀏覽器都支援使用這兩種方式表示偽元素。

8.CSS 中哪些屬性可以繼承？

每一個屬性在定義中都給出了這個屬性是否具有繼承性，一個具有繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值來作為自己的值。
一般具有繼承性的屬性有，字型相關的屬性，font-size和font-weight等。文字相關的屬性，color和text-align等。
表格的一些佈局屬性、列表屬性如list-style等。還有游標屬性cursor、元素可見性visibility。
當一個屬性不是繼承屬性的時候，我們也可以通過將它的值設定為inherit來使它從父元素那獲取同名的屬性值來繼承。

9.CSS 優先順序演算法如何計算？

判斷優先順序時，首先我們會判斷一條屬性宣告是否有權重，也就是是否在聲明後面加上了!important。一條宣告如果加上了權重，那麼它的優先順序就是最高的，前提是它之後不再出現相同權重的宣告。如果權重相同，我們則需要去比較匹配規則的特殊性。
一條匹配規則一般由多個選擇器組成，一條規則的特殊性由組成它的選擇器的特殊性累加而成。選擇器的特殊性可以分為四個等級，第一個等級是行內樣式，為1000，第二個等級是id選擇器，為0100，第三個等級是類選擇器、偽類選擇器和屬性選擇器，為0010，第四個等級是元素選擇器和偽元素選擇器，為0001。規則中每出現一個選擇器，就將它的特殊性進行疊加，這個疊加只限於對應的等級的疊加，不會產生進位。選擇器特殊性值的比較是從左向右排序的，也就是說以1開頭的特殊性值比所有以0開頭的特殊性值要大。
比如說特殊性值為1000的的規則優先順序就要位元殊性值為0999的規則高。如果兩個規則的特殊性值相等的時候，那麼就會根據它們引入的順序，後出現的規則的優先順序最高。

10.display 有哪些值？說明他們的作用。

block 塊型別。預設寬度為父元素寬度，可設定寬高，換行顯示。
none 元素不顯示，並從文件流中移除。
inline 行內元素型別。預設寬度為內容寬度，不可設定寬高，同行顯示。
inline-block預設寬度為內容寬度，可以設定寬高，同行顯示。
list-item 像塊型別元素一樣顯示，並新增樣式列表標記。
table 此元素會作為塊級表格來顯示。
inherit 規定應該從父元素繼承display屬性的值。

JavaScript相關

1. 介紹 js 的基本資料型別。

js 一共有六種基本資料型別，分別是 Undefined、Null、Boolean、Number、String，還有在 ES6 中新增的 Symbol 型別，代表建立後獨一無二且不可變的資料型別，它的出現我認為主要是為了解決可能出現的全域性變數衝突的問題。

2. JavaScript 有幾種型別的值？你能畫一下他們的記憶體圖嗎？

js 可以分為兩種型別的值，一種是基本資料型別，一種是複雜資料型別。

複雜資料型別指的是 Object 型別，所有其他的如 Array、Date 等資料型別都可以理解為 Object 型別的子類。

兩種型別間的主要區別是它們的儲存位置不同，基本資料型別的值直接儲存在棧中，而複雜資料型別的值儲存在堆中，通過使用在棧中儲存對應的指標來獲取堆中的值。

3. 內部屬性 [[Class]] 是什麼？

所有 typeof 返回值為 “object” 的物件（如陣列）都包含一個內部屬性 [[Class]]（我們可以把它看作一個內部的分類，而非傳統的面向物件意義上的類）。這個屬性無法直接訪問，一般通過 Object.prototype.toString(…) 來檢視。例如：

Object.prototype.toString.call( [1,2,3] );
// "[object Array]"

Object.prototype.toString.call( /regex-literal/i );
// "[object RegExp]"

4.介紹 js 有哪些內建物件？

js 中的內建物件主要指的是在程式執行前存在全域性作用域裡的由 js 定義的一些全域性值屬性、函式和用來例項化其他物件的建構函式物件。一般我們經常用到的如全域性變數值 NaN、undefined，全域性函式如 parseInt()、parseFloat() 用來例項化物件的建構函式如 Date、Object 等，還有提供數學計算的單體內建物件如 Math 物件。

5.undefined 與 undeclared 的區別？

已在作用域中宣告但還沒有賦值的變數，是 undefined 的。相反，還沒有在作用域中宣告過的變數，是 undeclared 的。

對於 undeclared 變數的引用，瀏覽器會報引用錯誤，如 ReferenceError: b is not defined 。但是我們可以使用 typeof 的安全防範機制來避免報錯，因為對於 undeclared（或者 not defined ）變數，typeof 會返回 “undefined”。

6.null 和 undefined 的區別？

首先 Undefined 和 Null 都是基本資料型別，這兩個基本資料型別分別都只有一個值，就是 undefined 和 null。

undefined 代表的含義是未定義，null 代表的含義是空物件。一般變數聲明瞭但還沒有定義的時候會返回 undefined，null主要用於賦值給一些可能會返回物件的變數，作為初始化。

undefined 在 js 中不是一個保留字，這意味著我們可以使用 undefined 來作為一個變數名，這樣的做法是非常危險的，它會影響我們對 undefined 值的判斷。但是我們可以通過一些方法獲得安全的 undefined 值，比如說 void 0。

當我們對兩種型別使用 typeof 進行判斷的時候，Null 型別化會返回 “object”，這是一個歷史遺留的問題。當我們使用雙等號對兩種型別的值進行比較時會返回 true，使用三個等號時會返回 false。

7. 如何獲取安全的 undefined 值？

因為 undefined 是一個識別符號，所以可以被當作變數來使用和賦值，但是這樣會影響 undefined 的正常判斷。

表示式 void ___ 沒有返回值，因此返回結果是 undefined。void 並不改變表示式的結果，只是讓表示式不返回值。

按慣例我們用 void 0 來獲得 undefined。

8.說幾條寫 JavaScript 的基本規範？

在平常專案開發中，我們遵守一些這樣的基本規範，比如說：

（1）一個函式作用域中所有的變數宣告應該儘量提到函式首部，用一個 var 宣告，不允許出現兩個連續的 var 宣告，宣告時
如果變數沒有值，應該給該變數賦值對應型別的初始值，便於他人閱讀程式碼時，能夠一目瞭然的知道變數對應的型別值。

（2）程式碼中出現地址、時間等字串時需要使用常量代替。

（3）在進行比較的時候吧，儘量使用’=’, '!‘代替’==’, ‘!=’。

（4）不要在內建物件的原型上新增方法，如 Array, Date。

（5）switch 語句必須帶有 default 分支。

（6）for 迴圈必須使用大括號。

（7）if 語句必須使用大括號。

9.JavaScript 原型，原型鏈？有什麼特點？

在 js 中我們是使用建構函式來新建一個物件的，每一個建構函式的內部都有一個 prototype 屬性值，這個屬性值是一個物件，這個物件包含了可以由該建構函式的所有例項共享的屬性和方法。當我們使用建構函式新建一個物件後，在這個物件的內部將包含一個指標，這個指標指向建構函式的 prototype 屬性對應的值，在 ES5 中這個指標被稱為物件的原型。一般來說我們是不應該能夠獲取到這個值的，但是現在瀏覽器中都實現了proto屬性來讓我們訪問這個屬性，但是我們最好不要使用這個屬性，因為它不是規範中規定的。ES5 中新增了一個 Object.getPrototypeOf() 方法，我們可以通過這個方法來獲取物件的原型。
當我們訪問一個物件的屬性時，如果這個物件內部不存在這個屬性，那麼它就會去它的原型物件裡找這個屬性，這個原型物件又會有自己的原型，於是就這樣一直找下去，也就是原型鏈的概念。原型鏈的盡頭一般來說都是 Object.prototype 所以這就是我們新建的物件為什麼能夠使用 toString() 等方法的原因。
特點：
JavaScript 物件是通過引用來傳遞的，我們建立的每個新物件實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的物件也會繼承這一改變。

10.js 中整數的安全範圍是多少？

安全整數指的是，在這個範圍內的整數轉化為二進位制儲存的時候不會出現精度丟失，能夠被“安全”呈現的最大整數是 2^53 - 1，即9007199254740991，在 ES6 中被定義為 Number.MAX_SAFE_INTEGER。最小整數是-9007199254740991，在 ES6 中被定義為 Number.MIN_SAFE_INTEGER。
如果某次計算的結果得到了一個超過 JavaScript 數值範圍的值，那麼這個值會被自動轉換為特殊的 Infinity 值。如果某次計算返回了正或負的 Infinity 值，那麼該值將無法參與下一次的計算。判斷一個數是不是有窮的，可以使用 isFinite 函式來判斷。

瀏覽器網路相關

1. reflow(迴流)和repaint(重繪)優化

瀏覽器渲染過程: DOM tree, CSS tree --> Render tree --> Paint
DOM tree根節點為html
渲染從瀏覽器左上角到右下角
第一次開啟頁面至少觸發一次重繪和迴流, 結構如寬高位置變化時, 觸發reflow迴流;非結構如背景色變化時, 觸發repaint重繪. 二者都會造成體驗不佳

2.如何減少重繪和迴流?

通過classname或cssText一次性修改樣式, 而非一個一個改
離線模式: 克隆要操作的結點, 操作後再與原始結點交換, 類似於虛擬DOM
避免頻繁直接訪問計算後的樣式, 而是先將資訊儲存下來
絕對佈局的DOM, 不會造成大量reflow
p不要巢狀太深, 不要超過六層

3.一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？

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

4.localStorage 與 sessionStorage 與cookie的區別總結

共同點: 都儲存在瀏覽器端, 且同源localStorage 與 sessionStorage 統稱webStorage,儲存在瀏覽器,不參與伺服器通訊,大小為5M
生命週期不同: localStorage永久儲存, sessionStorage當前會話, 都可手動清除
作用域不同: 不同瀏覽器不共享local和session, 不同會話不共享session
Cookie: 設定的過期時間前一直有效, 大小4K.有個數限制, 各瀏覽器不同, 一般為20個.攜帶在HTTP頭中, 過多會有效能問題.可自己封裝, 也可用原生

5.瀏覽器如何阻止事件傳播，阻止預設行為

阻止事件傳播(冒泡): e.stopPropagation()
阻止預設行為: e.preventDefault()

6.虛擬DOM方案相對原生DOM操作有什麼優點，實現上是什麼原理？

虛擬DOM可提升效能, 無須整體重新渲染, 而是區域性重新整理.
JS物件, diff演算法

7.瀏覽器事件機制中事件觸發三個階段

事件捕獲階段: 從dom樹節點往下找到目標節點, 不會觸發函式
事件目標處理函式: 到達目標節點
事件冒泡: 最後從目標節點往頂層元素傳遞, 通常函式在此階段執行.
addEventListener第三個引數預設false(冒泡階段執行),true(捕獲階段執行).
阻止冒泡見以上方法.

8.什麼是跨域？為什麼瀏覽器要使用同源策略？你有幾種方式可以解決跨域問題？瞭解預檢請求嘛？

跨域是指一個域下的文件或指令碼試圖去請求另一個域下的資源
防止XSS、CSFR等攻擊, 協議+域名+埠不同
jsonp; 跨域資源共享（CORS）(Access control); 伺服器正向代理等

預檢請求: 需預檢的請求要求必須首先使用 OPTIONS 方法發起一個預檢請求到伺服器，以獲知伺服器是否允許該實際請求。"預檢請求“的使用，可以避免跨域請求對伺服器的使用者資料產生未預期的影響

9.瞭解瀏覽器快取機制嗎？

瀏覽器快取就是把一個已經請求過的資源拷貝一份儲存起來，當下次需要該資源時，瀏覽器會根據快取機制決定直接使用快取資源還是再次向伺服器傳送請求.
from memory cache ; from disk cache
作用: 減少網路傳輸的損耗以及降低伺服器壓力。
優先順序: 強制快取 > 協商快取; cache-control > Expires > Etag > Last-modified

10.為什麼操作 DOM 慢?

DOM本身是一個js物件, 操作這個物件本身不慢, 但是操作後觸發了瀏覽器的行為, 如repaint和reflow等瀏覽器行為, 使其變慢

11.什麼情況會阻塞渲染？

js指令碼同步執行
css和圖片雖然是非同步載入, 但js檔案執行需依賴css, 所以css也會阻塞渲染