前言

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

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

總結面試題涉及的知識點是對本身的一個提高，也但願能夠幫助到同窗們，在2020年會有一個更好的競爭能力。html

Module One - Cascading Style Sheets

'流'概念

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

盒模型

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

盒模型能夠分爲兩種：css3

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

Css中默認的盒模型是W3C盒模型，二者間的轉換能夠經過設置屬性box-sizing來轉換web

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）是一個獨立的容器，決定了該容器中的內容應該如何進行定位，以及與其餘容器之間的相互做用。canvas

一個頁面是有多個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

重整旗鼓，2019自結前端面試小冊【CSS + HTML】

前言