前言

臨近2019年的尾聲，是不是該為了更好的2020年再戰一回呢？ ‘勝敗兵家事不期，包羞忍恥是男兒。江東子弟多才俊，捲土重來未可知’，那些在秋招失利的人，難道就心甘情願放棄嗎！

此文總結2019年以來本人經歷以及瀏覽文章中，較熱門的一些面試題，涵蓋從CSS到JS再到Vue再到網路等前端基礎到進階的一些知識。

總結面試題涉及的知識點是對自己的一個提升，也希望可以幫助到同學們，在2020年會有一個更好的競爭能力。

• Javascript篇 - juejin.im/post/5e2122…
• Es6篇 - juejin.im/post/5e2962…
• Vue篇 - juejin.im/post/5e5485…

Module One - Cascading Style Sheets

'流'概念

'流'是css的一種基本定位和佈局機制，HTML預設的佈局機制就是'流佈局',是一種自上而下（例如塊級元素div），從左到右（例如內聯元素span）排列的佈局方式

盒模型

元素按照盒模型的規則在頁面中進行佈局，它是由content+ margin + border + padding組成

盒模型可以分為兩種：

• IE盒模型（怪異盒模型）
  • width = border + padding + content
  • 一個塊的寬度 = width + margin
• W3C盒模型（標準盒模型）
  • width = content
  • 一個塊的寬度 = width + padding + border + margin

Css中預設的盒模型是W3C盒模型，兩者間的轉換可以通過設定屬性box-sizing來轉換

box-sizing: content-box; // W3C盒模型標準
box-sizing: border-box; // IE盒模型標準
複製程式碼

content

content這個屬性經常被忽略，它顧名思義就是內容了，對於div等非替換元素來看，其content就是div內部的元素。而對於替換元素，其content就是可替換的部分

content 常在偽元素中出現,作用是在css中直接生成可在網頁中顯示的內容

<!-- 假設我們要在這段內容後面再加一點內容 -->
<h1>I am Title！</h1> 

h1:after {
    content:'I am content！';
}

<!-- 將會渲染出 I am Title！I am content！ -->
複製程式碼

margin | padding 分別適用於什麼場合？

• 何時使用margin：在border外側需要留空
• 何時使用padding：在border內側需要留空

❗ 瀏覽器相容性問題：在IE5.X,IE6中，為float的盒子指定margin時，左側margin可能會變成兩倍的寬度，通過改用padding或者指定盒子為display:inline就可以解決

對WEB標準以及W3C的理解與認識

• 標籤閉合，標籤小寫，不亂巢狀，提高搜尋機器人搜尋機率
• 使用外鏈css和js指令碼，結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件 容易維護，改版容易，不需要變動頁面的內容，提供列印版本而不需要複製內容，提高網站易用性

如何理解BFC規範？

BFC（block formatting context）是一個獨立的容器，決定了該容器中的內容應該如何進行定位，以及與其他容器之間的相互作用。

一個頁面是有多個box（盒子）組成，每一個box的型別和display屬性決定了這個box的內部佈局方式

不同型別的 box，會參與不同的 Formatting Context（決定如何渲染文件的容器），因此box內的元素會以不同的方式渲染,所以在一個BFC中，內部的元素不會影響到外部的元素

如何觸發BFC？

1 - 根元素 → 根元素（html）就是最大的BFC
2 - position設定為 fixed 或者 absolute
3 - display設定為 inline-block 、table-block 、 table-caption
4 - overflow的值不為visible（預設）
5 - float的值不為none（預設）
複製程式碼

BFC的定位方案

1 - 內部的box會在垂直方向上一個接一個的擺放
2 - box垂直方向的距離由margin決定，屬於同一個BFC中的兩個相鄰box的margin會重疊（注意是垂直方向上）
3 - BFC中每個元素的左邊margin會與包含塊的左邊border相接觸
4 - 計算BFC的高度時，浮動元素也會參與計算
複製程式碼

Css選擇器有哪些? 哪些屬性可以繼承？

css選擇器有：
    - id選擇器
    - 類選擇器
    - 標籤
    - 相鄰選擇器(h1+p)
    - 子選擇器(ul>li)
    - 後代選擇器(li a)
    - 萬用字元選擇器(*)
    - 屬性選擇器（a[rel = "XXX"]）
    - 偽類選擇器( :hover :first-child ···)
    - 偽元素選擇器( :before :after ···)
    - 分組選擇器
    
可繼承的樣式：font-size, font-family, color，ul，li，dl，dt，dd；

不可繼承的樣式：border, padding, margin, width, height
複製程式碼

Css選擇器優先順序

!important > 內聯style > id > class > tag

優先順序演算法：
1 - 同權重情況下樣式定義最近者為準（優先順序相同，選擇最後出現的樣式）
2 - 元素選擇符的權值：元素標籤（派生選擇器）：1，class選擇符：10，id選擇符：100，內聯樣式權值最大，為1000
3 - 繼承得到的樣式的優先順序最低
複製程式碼

Css權重是如何計算？

一般情況下 - !important > 內聯style > ID選擇器 > 類選擇器 > 標籤選擇器 > 萬用字元選擇器

但遇到這幾種選擇器同時作用於一個元素時，元素又是如何選擇樣式呢？

關於權重計算，有兩種方式

• 二進位制規則計算
• 以1,10,100,1000等數值計算

各選擇器全值總覽

• 內聯style，權值：1000
• ID選擇器，權值：0100
• 類選擇器，權值：0010
• 標籤選擇器 & 偽元素選擇器，權值：0001
• 萬用字元、子選擇器、相鄰選擇器等，權值：0000
• 繼承樣式沒有權值

如果層級相同，則向後比較，層級不同時，層級高的權重大

Css3新增偽類偽元素

x:first-of-type → 選擇屬於其父元素的首個 <x> 元素的每個 <x> 元素
x:last-of-type → 選擇屬於其父元素的最後一個 <x> 元素的每個 <x> 元素
x:only-of-type 選擇屬於其父元素唯一的 <x> 元素的每個 <x> 元素
x:only-child 選擇屬於其父元素的唯一子元素的每個 <x> 元素
x:nth-child(1) 選擇屬於其父元素的第一個子元素的每個 <x> 元素

:enabled 每個已啟用的元素（多用於表單元素 例如input）
:disabled 控制表單控制元件的禁用狀態
:checked，單選框或核取方塊被選中
:before在元素之前新增內容（可用來做清除浮動）
:after在元素之後新增內容
複製程式碼

Css偽類與偽元素有什麼區別？

偽類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具有的特性
而不是元素的di、class、屬性等靜態的標籤
由於狀態是動態變化的，所以一個元素達到一個特定狀態時，他可能得到偽類的樣式；當狀態改變時，他又失去這個樣式。

由此可以看出，他的功能和class有些類似，但它是基於文件之外的抽象，所以叫偽類
（:first-child   :link   :visitive   :hover   :focus   :lang）


偽元素：
與偽類針對特殊狀態的元素不同的是，偽元素對元素中的特定內容進行操作，
它所操作的層次比偽類更深一層，
也因此它的動態性比偽類要低得多。它控制的內容實際上和元素是相同的，
但是它本身只是基於元素的抽象，並不存在於文件中，所以叫偽元素
（:first-line  :first-letter   :befoe   :after)
複製程式碼

display 各值解析

value	describe
none	元素會被隱藏，不顯示
inline	元素會被設定為內聯元素，內部按行從左向右排列（元素前後沒有換行符）
block	元素會被設定為塊級元素，內部按列從上向下排列（元素前後帶有換行符）
inline-block	元素會被設定為行內塊級元素，不會獨佔一行的塊級元素
list-item	元素會作為列表顯示
table	元素會作為塊級表格來顯示（類似table），表格前後帶有換行符
flex	元素會進入flex佈局模式

inline、block、inline-block三者區別

block

塊級元素特點：

1 - 每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（一個塊級元素獨佔一行）

2 - 元素的高度、寬度、行高以及頂和底邊距都可設定。

3 - 元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

 

 

inline
內聯元素特點：

1 - 和其他元素都在一行上；

2 - 元素的高度、寬度及頂部和底部邊距不可設定；

3 - 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

 

 

inline-block
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點。

inline-block 元素特點：

1 - 和其他元素都在一行上；

2 - 元素的高度、寬度、行高以及頂和底邊距都可設定。
複製程式碼

使用 display:inline-block 會產生什麼問題？又如何解決？

問題 兩個display:inline-block元素放到一起時會產生一段空白。

原因 元素被當成了行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據CSS中white-space屬性預設是normal(合併多餘空白），原來HTML程式碼中的回車換行符被轉換成一個空白符，在字型不為0的情況下，空白符佔據一定寬度，所以inline-block的元素之間就會出現空白間隙

解決方式

1 - 將子元素標籤的結束符和下一個標籤的開始符寫在同一行

<div>
    <div>
        左
    </div><div>
        右
    </div>
</div>

2 - 父元素中設定font-size:0, 在子元素上設定正確font-size

3 - 為子元素設定float:left
複製程式碼

逢面必問的居中方案

水平居中

• 行內元素：text-align:center
• 塊級元素（寬度確定）

1. width確定，使用margin實現：margin:0 auto
2. 絕對定位 + margin-left：負寬度/2 （前提父元素設定相對定位）
{
    width:100px;
    position:absolute;
    left:50%;
    margin-left:-50px
}
複製程式碼

• 塊級元素（寬度未知）

1. display:table + margin左右auto
2. display:inline-block + text-align:center
3. 絕對定位 + transform
{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
4. 萬能flex佈局（個人推薦）
{
    display:flex;
    justify-content:center;
}
複製程式碼

垂直居中

• line-height 適合純文字類內容居中
• 父元素設定相對定位，子元素設定絕對定位，標籤通過margin實現自適應居中
• 萬能flex

{
    display:flex;
    align-items:center;
}
複製程式碼

• 父元素設定相對定位，子元素設定絕對定位，通過transform實現居中
• 父元素設定display:table + 子元素設定vertical-align:middle

垂直水平居中

• 萬能flex（個人推薦）

{
    display:flex;
    justify-content:center;
    align-items:center;
}
複製程式碼

• position + transform （寬高未知）

父元素
{
    position:relative;
}
子元素
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
複製程式碼

• position + margin （寬高確定）

父元素
{
    position: relative;
}
子元素
{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
複製程式碼

• 絕對定位設定各個方向為0，通過margin:auto實現垂直水平居中（寬高已知）

父元素
{
    position: relative;
}
子元素
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
複製程式碼

吃透定位 position

position屬性共有5和屬性值，分別如下

• relative 相對定位，相對於自身位置進行定位

很多人不明白相對於自身位置是什麼意思，其實可以這樣理解：

    將本身當前位置固定住，以此位置進行定位
複製程式碼

• absolute 絕對定位，相對於position不為static的第一個父級元素進行定位
• fixed 固定定位。相對於瀏覽器視窗進行定位
• inherit 繼承父級元素position屬性值
• static 預設值，即沒有定位，仍為文件流

對於position，需要注意的是absolute到底是相對於哪一個父級進行定位

css3新增了一個新的定位屬性 - sticky，作用類似於relative和fixed. 元素在跨越特定閾值前為相對定位，跨越之後為固定定位。

浮動佈局是什麼？優劣勢在哪？

浮動佈局 - 當元素設定了浮動後，可以向左向右移動，直到它的外邊緣碰到包含它的框或者另外一個浮動元素的邊框為止。

浮動元素脫離了正常文件流，可以想象成浮動元素浮在了正常文件流上方，文件流不再有這個元素存在

優點

在圖文混排的場景下十分適用，可以實現文字環繞圖片的效果，當元素浮動後，它有著塊級元素的特點（可設定寬高），但它與inline-block存在差別

• float可以在橫向排序上設定方向，而inline-block不可
• inline-block會出現存在空白間隙情況

缺點

float致使元素脫離文件流，若父元素高度自適應，則會引起父元素高度塌陷

清除浮動（常見面試題）

• 通過偽類選擇器清除浮動（關鍵方式）

<div class="Parent">
    <div class="Float"></div>
</div>

設定 .Parent:after偽元素
.Parent:after{
      /* 設定新增子元素的內容是空 */
      content: '';  
      /* 設定新增子元素為塊級元素 */
      display: block;
      /* 設定新增的子元素的高度0 */
      height: 0;
      /* 設定新增子元素看不見 */
      visibility: hidden;
      /* 設定clear：both */
      clear: both;
}
複製程式碼

• 父級元素新增overflow屬性，或者設定高度（原理是觸發父元素BFC）

<div class="Parent" style="overflow:hidden">//auto 也可以
    <div class="Float"></div>
</div>
複製程式碼

• 新增額外標籤

<div class="Parent">
    //新增額外標籤並且新增clear屬性
    <div style="clear:both"></div>
    <div class='Float'></div>
</div>
複製程式碼

▲ 注意：設定元素浮動後，該元素的display值會變為block

當position跟display、overflow、float這些特性相互疊加後會出現什麼情況？

- display：規定元素應該生成的框的型別（子元素的排序方式）
- position：規定元素的定位型別
- float：定義元素在哪個方向浮動

其中，position:absolute / fixed 優先順序最高
當position設定為absolute或者fixed時，float失效，display需要調整
float / absolute定位的元素，只能是塊元素或表單（block / table）
複製程式碼

佈局精英 - flex 佈局

該佈局提供了一種更高效的方法對容器中的專案進行佈局、對齊和分配空間，他沒有方向上的限制，可以由開發人員自由操作

使用場景： 移動端開發，安卓，iOS

容器屬性（6）

• flex-direction 決定主軸方向（容器排列方向）

flex-direction: row | row-reverse | column | column-reverse;
複製程式碼

• flex-wrap 如果一條軸線排不下，定義換行規則

flex-wrap: nowrap | wrap | wrap-reverse;
複製程式碼

• flex-flow flex-direction和flex-wrap的簡寫形式

flex-flow: <flex-direction> || <flex-wrap>;
複製程式碼

• justify-content 定義容器在主軸上的對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around;
複製程式碼

• align-items 定義容器在交叉軸上的對齊方式

align-items: flex-start | flex-end | center | baseline | stretch;
複製程式碼

• align-content 定義多根軸線的對齊方式，如果容器只有一根軸線，該屬性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
複製程式碼

專案屬性（6）

• order 定義專案的排列順序，數值越小，排列越靠前，預設為0
• flex-grow 定義專案的放大比例，預設為0（即如果存在剩餘空間，也不放大）
• flex-shrink 定義專案的縮小比例，預設為1（即如果空間不足，該專案將縮小）
• flex-basis 定義了在分配多餘空間之前，專案佔據的主軸空間。預設值為auto（專案本來大小）
• flex 是flex-grow、flex-shrink和flex-basis的簡寫，預設值為 0 1 auto

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

該屬性有兩個快捷值: auto(1 1 auto) 和 none(0 0 auto)

建議優先使用這個屬性，而不是單獨寫三個分離的屬性

因為瀏覽器會推算相關值
複製程式碼

• align-self 允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性，預設值為auto（表示繼承父元素align-items屬性，如果沒有父元素，等同於stretch）

align-self: auto | flex-start | flex-end | center | baseline | stretch;
複製程式碼

經典佈局案例 - 三欄佈局

三欄佈局 - 左右容器固定，中間容器自適應

三欄佈局在實際中十分常用，也是css面試常題，實現方法有如下三種：

<div class="container">
    <div class="left">left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

第一種方式：flex
.container{
    display: flex;
}
.left{
    flex-basis:200px;
    background: green;
}
.main{
    flex: 1;
    background: red;
}
.right{
    flex-basis:200px;
    background: green;
}

第二種方式：position + margin
.left,.right{
    position: absolute;
    top: 0;
    background: red;
}
.left{
    left: 0;
    width: 200px;
}
.right{
    right: 0;
    width: 200px;
}
.main{
    margin: 0 200px ;
    background: green;
}

第三種方式 float + margin
.left{
    float:left;
    width:200px;
    background:red;
}
.main{
    margin:0 200px;
    background: green;
}
.right{
    float:right;
    width:200px;
    background:red;
}
複製程式碼

Css3有哪些新特性？

• 各種css選擇器
• 圓角border-radius
• 多列布局
• 文字效果
• 線性漸變
• 2D轉換
• 過渡transition
• 動畫animation
• flex佈局
• 旋轉transform
• 媒體查詢

瀏覽器如何解析Css選擇器？

css選擇器的解析是從右向左解析，為了避免對所有元素進行解析

overflow屬性解剖

- scroll：必定出現滾動條
- auto：子元素內容大於父元素時出現滾動條
- visible：溢位的內容出現在父元素之外
- hidden：溢位時隱藏
複製程式碼

全屏滾動的原理？需要哪些css屬性？

原理 類似於輪播圖，整體元素一直排列下去，假設有5個需要展示的全屏頁面，那麼高度將會是500%，但我們只能展示100%，剩下的內容可以通過transform進行Y軸定位，也可以通過margin-top實現

涉及css屬性 overflow:hidden | transition:all 1000ms ease

響應式設計是什麼？響應式設計的原理是什麼？如何相容低版本IE？

響應式設計 是指網站能夠相容多個終端，而不是為每一個終端特地去開發新的一個版本

原理 通過媒體查詢測試不同的裝置螢幕尺寸做處理

相容低版本IE，頁面頭部必須有meta宣告的viewport

<meta name=“viewport” content=“width=device-width，initial-scale=1.maximum-scale=1，user-scalable=no”>
複製程式碼

佈局題：自適應填補

有一個高度固定的div，裡面有兩個div，一個高度100px，另一個填補剩下的高度

方案一 外層div使用position:relative;,要求高度自適用的div使用position:absolute; top:100px; bottom:0; left:0

方案二 使用flex佈局方式，高度自適應的div使用flex:1

RGBA() 與 opacity 在透明效果上有什麼區別？

• opacity 作用於元素，以及元素內的所有內容的透明度
• rgba() 只作用於元素的顏色或者背景色（設定rgba透明的元素的子元素不會繼承透明效果）

px | em 有什麼區別?

px 和 em 都是長度單位
區別在於px的值是固定的，指定多少就是多少，而em的值是不固定的，並且em會繼承父級元素的字型大小


▲ 瀏覽器的預設字型高都是16px。
所以未經調整的瀏覽器都符合：1em=16px。那麼12px = 0.75em  10px = 0.625em
複製程式碼

如何實現元素在z軸上移動？

• translate3d(x,y,z)
• translateZ(z)

Css有哪些引入方式？ 通過link和@import引入有什麼區別？

Css引入方式有4種 內聯、內嵌、外鏈、匯入

外鏈link 除了可以載入css之外,還可以定義rss、rel等屬性，沒有相容性問題，支援使用javascript改變樣式

@import 是css提供的，只能用於載入css，不支援通過javascript修改樣式

▲ 頁面被載入的時候，link會被同時載入，而@import則需等到頁面載入完後再載入，可能出現無樣式網頁

圖形題：純Css建立一個三角形

原理 建立一個沒有高度和寬度的div，設定其中一條邊框的作為三角形，其他邊框的顏色應為透明

{
    width:0px;
    height:0px;
    border-top:10px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #000;
}
複製程式碼

display:none 與 visibility:hidden 的區別是什麼？

• display:none 隱藏對應的元素，在文件佈局中不再分配空間（導致重排）
• visibility:hidden 隱藏對應的元素，在文件佈局中保留原來的空間（導致重繪）

瀏覽器是如何解析Css選擇器？

Css選擇的解析是從右向左解析，能夠避免對所有元素進行解析

如何水平並垂直居中一張背景圖？

設定屬性 background-position:center;
複製程式碼

style 標籤寫在 body 後和 body 前有什麼區別？

頁面載入自上而下，當然是需要先載入樣式

寫在body標籤後，由於瀏覽器以逐行方式對HTML文件進行解析，當解析寫在尾部的樣式表會導致瀏覽器停止之前的渲染，等待載入且解析樣式表後才重新進行渲染，這樣可能導致留白現象（所以最好將style標籤寫在body前）

常見的Css相容性問題有哪些？

- 不同瀏覽器的標籤預設的padding/margin不同，通過初始化css樣式可以解決
    *{
        margin:0;
        padding:0px;
    }
- IE6雙邊距BUG
- 設定較小高度標籤（一般小於10px），在IE6,IE7中高度超出自己設定的高度
    通過設定overflow:hidden;或者設定行高line-height小於你設定的高度
- IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性
- Chrome中文介面下預設會將小於12px的文字強制為12px
    通過加入css屬性 -webkit-text-size-adjust：none;可以解決，或者使用transform中的縮放屬性
- 超連結訪問過後hover樣式就不出現，因為被點選訪問過的超連結樣式不再具有hover和active了
    解決方法是改變css屬性的排列屬性：L-V-H-A
    a:link{} → a:visited{} → a:hover{} → a:active{}
- IE下，event物件有x,y屬性，但是沒有pageX，pageY屬性，但沒有x，y屬性
    解決方式：通過條件
- png24位的圖片在IE6瀏覽器上出現背景，解決方案是做出PNG8
複製程式碼

Css優化，如何提高效能

• 避免過渡約束
• 避免後代選擇符
• 避免鏈式選擇符
• 使用緊湊的語法
• 避免不必要的名稱空間
• 避免不必要的重複樣式
• 使用具有語義的名字
• 避免使用 !important
• 儘可能地精簡規則
• 修復解析錯誤
• 避免使用多種型別選擇符
• 移除空的css規則
• 正確使用display屬性

inline後不應該使用width、height、margin、padding以及float；
inline-block後不應該使用float；
block後不應該使用vertical-align
複製程式碼

• 不濫用浮動
• 不濫用web字型
• 不宣告過多font-size
• 少使用id選擇器
• 不給h1-h6定義過多樣式
• 不重複定義h1-h6
• 值為0時不需要任何單位
• 標準化各種瀏覽器字首
• 遵守盒模型規則

Module One extra - HyperText Markup Language

文件解析型別

HTML存在兩種文件型別

• 怪異模型（預設）→ 瀏覽器按照自己的方式解析
• 標準模式 → 按照W3C標準

如何避免瀏覽器的怪異模式 - 通過宣告文件的解析型別 <!DOCTYPE html>

Meta標準是什麼？有哪些屬性值

Meta提供給頁面一些元資訊（名稱/鍵值），它有利於SEO

• 屬性值
  • name → 用於描述網站
  • http-equiv → 沒有name時，可以採用這個屬性的值（content-type,expires(期限),refresh,set-cookie,content屬性關聯到http請求頭）
  • content → 名稱/值 中的值，可以是任意有效字串
  • scheme → 用於指定要用來翻譯屬性值的方案

請講一講什麼是HTML語義化

• 首先，Html語義化可以是頁面更加結構化，提供了一系列具有結構意義的標籤，例如header,footer等，讓結構更加清晰，有利於瀏覽器的解析
• 其次，即使在沒有css樣式的情況下，頁面也會以一種文件結構來顯示，更加易於閱讀
• 由於搜尋引擎的爬蟲也會依賴於Html標記來確定上下文和各個關鍵字的權重，因此有利於SEO
• 最後，Html語義化更便於閱讀，維護和理解

常見的瀏覽器核心

• -webkit- → webkit核心（Chrome）
• -moz- → Gecko核心（fixfox）
• -o- → Opera核心（Opera)
• -ms- → Trident核心（IE）

簡單介紹下對瀏覽器核心的理解

瀏覽器核心主要分為兩部分：

• 渲染引擎：將程式碼轉化為頁面
• Js引擎：解析和執行JavaScript程式碼來實現頁面動態效果

Html5新增了哪些新特性？移除了哪些元素？

• Html5新增特性：
  • canvas
  • audio/video
  • 對本地離線儲存更好的執行
  • localStorage長期儲存資料，瀏覽器關閉後資料也不丟失（只能手動刪除）
  • sessionStorage在瀏覽器關閉後自動刪除
  • 語義化更好的標籤
  • 新的表單控制元件
  • 新的通訊技術（WebWorker,WebSocket)
• Html5移除了純表現型的元素，和對可用性具有負面影響的元素

由於IE6/7/8都支援document.createElement來建立元素，因此可以通過這個方法來讓瀏覽器相容Html5新標籤

Html5哪些標籤可以優化SEO

• title
• meta
• 語義化標籤 → header,footer,article,aside

defer/async 有什麼區別？

• defer 延遲載入 → 等到整個頁面都渲染結束（DOM結構完全生成，以及其他指令碼執行完）才會執行，多個defer會按指令碼出現的順序依次載入（渲染完載入）
• async 非同步載入 → 一旦載入完，渲染引擎就會停止載入，然後執行指令碼，指令碼執行完才繼續渲染（阻塞渲染），多個async不能保證載入順序（載入完就執行）

如何實現瀏覽器內多個標籤頁之間的通訊？

• 通過呼叫localStorage
• 使用cookie + setInterval

JavaScript請求一般情況下有哪些地方需要用到快取處理？

• DNS快取
• CDN快取
• 瀏覽器快取
• 伺服器快取

什麼是iframe？

iframe 是一種內聯框架，也是一種很常見的網頁嵌入方式

iframe的優缺點

• iframe優點
  • iframe能夠原封不動的把嵌入的網頁展示出來
  • 如果有多個網頁引用iframe,只需要修改iframe的內容
  • 如果遇到載入緩慢的第三方內容如圖示和廣告，可以由iframe來解決
• iframe缺點
  • 會產生很多頁面，不容易管理，同時造成onload阻塞
  • iframe框架結構有時讓人感到迷惑，使用者體驗感差
  • 程式碼結構變得複雜，影響搜尋引擎
  • iframe框架頁面會增加伺服器的http請求

Html 提供哪些 Api

• 全屏滾動 Fullscreen API
• 頁面可見性 Pge Visibility API
• 訪問攝像頭和麥克風 getUserMedia API
• 電池 Battery API
• 預載入網頁內容 Link prefetching