（1）垂直兩欄左邊固定 右邊自適應
//基本佈局
*{
margin: 0;
padding: 0;
}
.outer{
height: 200px;
}
.left{
background-color: gold;
height: 200px;
}
.right{
background-color: blue;
height: 200px;
}
</style>
<body>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
/* 浮動 */
.outer .left{
float: left;
width: 200px;
}
.outer .right{
width: auto;
margin-left: 200px;
}
/* flex */
.outer {
display: flex;
}
.outer .left{
/* 索取父元素剩餘空間 值越大索取越多 */
flex-grow: 0;
/* 收縮值默認爲1 */
flex-shrink: 0;
/* 設置元素寬度 */
flex-basis: 200px;
}
.outer .right{
/* flex 是 flex-grow、flex-shrink、flex-basis的縮寫 */
/* 1 1 auto */
flex: auto;
}
/* position */
.outer{
position: relative;
}
.outer .left{
position: absolute;
width: 200px;
}
.outer .right{
margin-left: 200px;
}
/* position again */
.outer{
position: relative;
}
.outer .left{
width: 200px;
}
.outer .right{
position: absolute;
left: 200px;
top: 0;
right: 0;
}
（2）三欄佈局：垂直三欄佈局，左右兩欄寬度固定中間自適應
基礎佈局
<style>
*{
margin: 0;
padding: 0;
}
.outer, .left, .middle ,.right{
height: 200px;
}
.left{
background: blueviolet;
}
.middle{
background: blue;
}
.right{
background: yellow;
}
</style>
<body>
<div class="outer">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
</body>
/* 左右分別設置絕對定位中間設置外邊距 */
.outer{
position: relative;
}
.outer .left{
position: absolute;
width: 100px;
}
.outer .right{
position: absolute;
width: 200px;
top: 0;
right: 0;
}
.outer .middle{
margin:0 200px 0 100px;
}
/* flex */
.outer{
display: flex;
}
.outer .middle{
flex: auto;
}
.outer .left{
flex: 0 0 100px;
}
.outer .right{
flex: 0 0 200px;
}
/* 浮動佈局，但html中middle要放到最後 */
.outer .left{
width: 100px;
float: left;
}
.outer .right{
width: 200px;
float: right;
}
.outer .middle{
margin: 0 200px 0 100px;
}
（3）聖盃佈局 和 雙飛翼佈局
和三欄佈局要求相同，不過中間列要寫在前面保證優先渲染。
1）兩側寬度固定，中間寬度自適應
2）中間部分在DOM結構上優先，以便先行渲染
3）允許三列中的任意一列成爲最高列
4）只需要使用一個額外的 /<div 標籤
<style>
*{
margin: 0;
padding: 0;
}
body{
min-width: 500px;
}
.header, .footer{
background-color: tomato;
}
.footer{
clear: both;
}
.outer, .left, .middle ,.right{
height: 200px;
/* margin-bottom: 5px; */
}
.left{
background: blueviolet;
}
.middle{
background: blue;
}
.right{
background: yellow;
}
/* 聖盃佈局 通過浮動和負邊距實現 */
.outer{
padding: 0 200px 0 100px;
}
.outer .middle{
width: 100%;
float: left;
}
.outer .left{
width: 100px;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.outer .right{
width: 200px;
float: left;
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
<body>
<div class="header">header</div>
<div class="outer">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
min-width: 500px;
}
.header, .footer{
background-color: tomato;
}
.footer{
clear: both;
}
.outer, .left, .middle ,.right{
height: 200px;
/* margin-bottom: 5px; */
}
.left{
background: blueviolet;
}
.middle{
background: blue;
}
.right{
background: yellow;
}
/* 雙飛翼佈局 middle在先 多一層div */
.outer .middle-wrapper{
width: 100%;
float: left;
}
.outer .middle{
margin: 0 200px 0 100px;
}
.outer .left{
width: 100px;
float: left;
margin-left: -100%;
}
.outer .right{
width: 200px;
float: left;
margin-left: -200px;
}
</style>
<body>
<div class="header">header</div>
<div class="outer">
<div class="middle-wrapper">
<div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
總結與思考
通過對聖盃佈局和雙飛翼佈局的介紹可以看出，聖盃佈局在DOM結構上顯得更加直觀和自然，且在日常開發過程中，更容易形成這樣的DOM結構,而雙飛翼佈局在實現上由於不需要使用定位，所以更加簡潔，且允許的頁面最小寬度通常比聖盃佈局更小。
其實通過思考不難發現，兩者在代碼實現上都額外引入了一個div標籤，其目的都是爲了既能保證中間欄產生浮動（浮動後還必須顯式設置寬度），又能限制自身寬度爲兩側欄留出空間。
從這個角度出發，如果去掉額外添加的div標籤，能否完成相同的佈局呢？答案是肯定的，不過這需要在兼容性上做出犧牲：
DOM結構
<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
1）使用calc()
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
width: calc(100% - 350px);
}
通過calc()可以十分方便地計算出center應該佔據的自適應寬度，目前calc()支持到IE9。
2.使用border-box
.column {
float: left;
}
#center {
padding-left: 200px;
padding-right: 150px;
box-sizing: border-box;
width: 100%;
}
使用border-box可以將center的整個盒模型寬度設置爲父元素的100%寬度，此時再利用padding-left和padding-right可以自動得到中間欄的自適應寬度。不過需要注意的是，由於padding是盒子的一部分，所以padding部分會具有中間欄的背景色，當中間欄高於側欄時，會出現中間欄背景色到側邊欄上去。
目前box-sizing支持到IE8。
3. 使用flex
這裏使用flex還是需要與聖盃佈局相同的DOM結構，不過在實現上將更加簡單：
<!-- DOM結構 -->
<div id="container">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
CSS代碼如下：
#container {
display: flex;
}
#center {
flex: 1;
}
#left {
flex: 0 0 200px;
order: -1;
}
#right {
flex: 0 0 150px;
}
（4）實現一個三角形（通過border）
*{
margin: 0;
padding: 0;
}
div{
width:0;
height: 0;
border-style: solid;
margin: 0 auto;
}
1）
/* 等腰直角三角形 */
.box{
border-width: 100px;
border-color: tomato transparent transparent transparent;
}
2）
/*等邊三角形 */
.box{
border-width: 100px 173px;
border-color: transparent tomato transparent transparent;
}
3）
/* 等腰三角形 */
.box{
border-width: 100px 80px;
border-color: transparent transparent tomato transparent;
}
//或者
div{
width:0;
height:0;
border:30px solid transparent;
border-bottom:30px solid #000;
}
4）
/* 其他 */
.box {
border-width: 100px 90px 80px 70px;
border-color: transparent transparent transparent tomato;
}
（5）實現一個自適應的圓
*{
margin: 0;
padding: 0;
}
.box{
//自適應
width: 30%;
padding-top: 30%;
margin :0 auto;
border: solid;
border-radius: 50%;
}
</style>
<body>
<div class="box"></div>
（6）實現文字溢出打點
//實現文字溢出打點
#test{
width:150px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/**解析：
*首先需設置將文本強制在一行內顯示，然後將溢出的文本通過overflow:hidden截斷，
*並以text-overflow:ellipsis方式將截斷的文本顯示爲省略號。
*/
（7）使用css實現一個寬高自適應的正方形
/* 相對於屏幕寬度的比例 */
div{
width: 30%;
height: 30vw;
background-color: rebeccapurple;
margin: 0 auto;
}
div{
width: 30%;
padding-top:30% ;
height: 0;
background-color: saddlebrown;
}
div{
width: 30%;
//觸發BFC
overflow: hidden;
background-color: yellowgreen;
}
div::after{
content: "";
display: block;
/* 相當於div的width */
margin-top: 100%;
}
（8）實現一個 1/4 圓、任意弧度的扇形
基本設置
<body>
<div style = "display: flex;justify-content: space-around;">
<div class="sector"></div>
</div>
</body>
/* 通過border和border-radius實現四分之一圓 */
.sector{
width: 0;
height: 0;
border: 100px solid;
border-radius: 50%;
border-color: turquoise tomato tan thistle;
}
/* 類似三角形的做法加上父元素 overflow: hidden; 也可以實現任意弧度圓 */
.sector{
width: 100px;
height: 200px;
border-radius: 100px 100px 0 0;
overflow: hidden;
}
.sector::after{
content: "";
display: block;
height: 0;
width: 0;
border: solid;
border-width: 100px 58px 0 0;
border-color: tomato transparent;
transform: translate(42px,0);
}
/* 通過 skewY 實現一個60°的扇形 */
.sector4 {
height: 100px;
width: 100px;
border-top-right-radius: 100px;
overflow: hidden;
}
.sector4::after {
content: '';
display: block;
height: 100px;
width: 100px;
background: tomato;
transform: skewY(-30deg);
transform-origin: left bottom;
}
（9）
一個元素先進行沿着y軸平移再繞着z軸旋轉和先繞着z軸旋轉再沿着y軸平移，最後的位置顯示相同嘛？
/* 先沿着y軸平移在繞x旋轉 */
.box{
position: absolute;
margin: 200px;
width: 100px;
height: 100px;
border: 1px solid black;
transform: translateY(100px) rotateZ(45deg);
}
.wrapper{
margin: 200px;
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
transform: rotateZ(45deg) translateY(100px);
}
（10）
display:none、visibility:hidden:、opacity:0之間的區別
display: none 徹底消失，render tree中也不存在（dom tree中存在）；可能會引起reflow（重排）
visibility: hidden 渲染爲空盒子，在render tree中存在；不會引起reflow；性能更好；也不會觸發事件
opacity: 0 將元素隱藏起來，也不會改變頁面佈局，但是會觸發點擊事件
（11）實現居中的四種方式
a. flex：主軸(justify-content)和交叉軸(align-items)均爲center
b· transform：（居中塊）採用相對佈局，top:50%,left:50%再加上transform: translate(-50%; -50%)實現水平垂直居中
c· margin負值：（居中塊）採用相對佈局 + top:50%,left:50% + margin-top: -height/2,margin-left: -width/2
d·絕對定位：父級節點相對定位，居中塊絕對定位而且top:0;left:0;right:0;bottom:0;+margin:auto;
（12）浮動會造成哪些問題，爲什麼要清除浮動
1，浮動造成父元素高度坍塌：浮動會脫離當前文檔流，父元素高度不會被撐開，計算父元素高度時不會加上浮動子元素的高度
2，浮動元素和非浮動元素重疊
//清除浮動利用僞元素的實現方式
.clearfix:before, .clearfix:after { content: ''; display: block; clear: both; }
（13）介紹一下css的盒子模型？盒模型分幾種類型？如何切換盒模型？
css盒子模型 又稱框模型(Box Model)，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
元素框的總高度=元素（element）的height + padding的上下邊距的值+ margin的上下邊距的值 ＋border的上下寬度 。
IE6混雜模式盒模型：最終顯示的寬或高爲設置width/height = content+padding*2+border*2
標準盒模型：最終顯示寬高爲width+border+padding
切換盒模型設置css3屬性box-sizing,將標準盒模型切換IE6混雜模式盒模型：box-sizing:border-box。
（14）transform和animation的區別？
transition屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本
Animation也是通過指定某一個屬性（如width、left、transform等）在兩個值之間如何過渡來
實現動畫的，與Transition不同的是，Animation可以通過keyframe顯式控制當前幀的屬性值，
而Transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈
活。另外一個區別是Animation通過模擬屬性值改變來實現動畫,動畫結束之後元素的屬性沒有變
化；而Transition確實改變了元素的屬性值，動畫結束之後元素的屬性發生了變化.
（15）前端頁面有哪三層構成，分別是什麼？作用是什麼？
答案：最準確的網頁設計思路是把網頁分成三個層次，即：結構層、表示層、行爲層。 網頁的結構
層由HTML或XHTML之類的標記語言負責創建。網頁的表示層由CSS負責創建。 CSS對“如何顯示有關
內容”的問題做出了回答。網頁的行爲層（負責回答“內容應該如何對事件做出反應”這一問題。這
是JavaScript語言和DOM主宰的領域。
（16）如何使連續的長字符串自動換行？
答案：#test{width:150px;word-wrap:break-word;}
解析：首先設置元素的固定寬度，然後設置文字超出顯示爲換行。word-wrap的break-word值允許單詞內換行
（17）box-shadow傳入參數分別代表的含義
1.X軸偏移量 2.Y軸偏移量 3.模糊程度 4.顏色
（18）元素設置display:inline-block屬性基於元素的哪條基準線對齊？如果我們想讓元素居中對齊如何設置？
基於元素的下基準線對齊，切換對齊方式我們可以利用vertical-align:middle;
（19）利用css3彈性盒子進行佈局，需要爲父級設置___a___屬性與屬性值，子元素默認呈行級元素排列，如果想讓子元素豎直排列，可以設置___b___屬性與屬性值。
a -- display:flex; b -- flex-direction:column;
（20）水平垂直居中
```javascript
<!DOCTYPE html>
<html>
<head>
<title>水平垂直居中</title>
<style type="text/css">
.outer {
height: 200px;
width: 200px;
background: tomato;
margin: 10px;
float: left;
position: relative;
}
.inner {
height: 100px;
width: 100px;
background: black;
}
/*
* 通過 position 和 margin 居中
* 缺點：需要知道 inner 的長寬
*/
.inner1 {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
/*
* 通過 position 和 margin 居中 (2
*/
.inner2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*
* 通過 flex 進行居中
*/
.outer3 {
display: flex;
justify-content: center;
align-items: center;
}
/**
* 通過 position 和 transform 居中
*/
.inner4 {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}
</style>
</head>
<body>
<div class="outer outer1">
<div class="inner inner1"></div>
</div>
<div class="outer outer2">
<div class="inner inner2"></div>
</div>
<div class="outer outer3">
<div class="inner inner3"></div>
</div>
<div class="outer outer4">
<div class="inner inner4"></div>
</div>
</body>
</html>
(21)清除浮動
<!DOCTYPE html>
<html>
<head>
<title>清除浮動</title>
<style type="text/css">
.outer {
width: 200px;
background: tomato;
margin: 10px;
position: relative;
}
.inner {
height: 100px;
width: 100px;
background: pink;
margin: 10px;
float: left;
}
/* 僞元素 */
.outer1::after {
content: '';
display: block;
clear: both;
}
/* 創建 BFC */
.outer2 {
overflow: hidden;
}
</style>
</head>
<body>
<div class="outer outer1">
<div class="inner"></div>
</div>
<div class="outer outer2">
<div class="inner"></div>
</div>
</body>
(23)導航欄
一個 div 內部放很多水平 div ，並可以橫向滾動。
（24）grid網格佈局
display:grid/inline-grid
grid-template-columns:100px 200px 200px//每一列列寬
grid-template-rows:100px 200px 200px //每一行行高
grid-template-columns:100px 1fr 1fr 1fr//剩餘三列平均分配大小
//行列之間的距離
js部分
1.類的繼承
（1）原型鏈繼承：無法實現多繼承
（2）構造繼承：多繼承，只能繼承父類實例的屬性方法，不能繼承原型上的屬性方法。（複製父類的屬性給子類）
（3）實例繼承，拷貝繼承
（4）組合繼承：通過父類構造器繼承父類的屬性並保留傳參的優點，將父類實例作爲子類原型，實現函數複用。優點：可以繼承實例的屬性/方法，也可以繼承原型的屬性/方法。
（5）寄生組合繼承（聖盃）
詳情移步：JS繼承
2.如何解決回調地獄
3.前端中的事件流
事件流是：html和js交互通過事件驅動實現的。
4.JS實現數組去重的方法
網絡部分
1.狀態碼
200：請求成功
301：永久重定向，新url會在定位響應頭給出，瀏覽器會自動連接到新的url。
302：臨時重定向，希望本次訪問使用新的url
303：請求對應的資源存在着另一個URL，使用get定向獲取請求資源。
403：沒有訪問權限。
404：請求的資源找不到。
503：服務器端無法響應。
2.跨域
跨域訪問資源，那些東西屬於資源？
JS文件，css文件，jpg，png等允許被跨域請求，src屬性的資源都是可以被跨域請求的，href資源大部分都是可以被跨域請求的。
哪些資源算跨域請求？
1.都斷接口的數據
2.其他域的cookie
3.其他域的緩存
什麼是其他的域？
頁面本身：有協議（http/https），域名，端口
要請求的數據：https://www.baidu.com:80
協議域名端口號有任意一個不一樣就算跨域。
跨域這個行爲，發生在哪裏？
即使跨域了（協議域名端口號不相同了）也可以發送資源，服務器可以正常處理接收返回數據，但是瀏覽器接收後會發現當前頁面的域和請求的域不一樣，就會判定爲跨域，我們的代碼在等待結果，但是因爲瀏覽器判定跨域了，所以不會把結果傳遞給我們。
跨域的處理方式：
①Jsonp：利用了<script>標籤不收同源策略限制。
jsonp發送的時候會帶上一個callback，結果返回的不是json，是callback的名+（+ json +）
jsonp跨域只能使用get方法，如果我們設置的是post方法，jq會自動轉爲get
問：是不是隻能使用get？設置的post都是轉爲get
答：不是。jq會先判斷是否同源，如果是同源設置的是什麼就是什麼，如果不是同源，無論設置的什麼都改成get。
<script>
$.ajax({
url:"xxx",
type:"get",
dataType:'jsonp',
success:function(){
console.log(data)
}
})
</script>
jsonp的原理
<script>
// jsonp原理：
// 1.判斷請求與當前頁面的域，是否同源，如果同源則發送正常的ajax。
// 2.如果不同源，生成一個script標籤
// 3.生成一個隨機的callback名字，創建一個名爲這個的方法。
// 4.設置script標籤的src，設置爲要請求的接口。
// 5.將callback作爲參數拼接在後面
// 後端部分：
// 1、後端接收到請求後，準備返回的數據
// 2.後端拼接到數據，將要返回的數據用callback的值和括號包裹起來。將內容返回
// 3.瀏覽器接收到內容，當做js代碼來執行，我們就接受到了
// 封裝如下
var $ = {
ajax:function(options){
var url = options.url;
var type = options.type;
var dataType = options.dataType;
// 判斷是否同源(協議，域名，端口號)
// 首先獲取目標url的域
var targetProtocol = "";//協議
var targetHost = '';//包含域名和端口
// 如果url不帶http那麼訪問的就是相對路徑，相對路徑同源的
if(url.indexof("http://") == 0 || url.indexof("https:// == 0")){
var targetUrl = new URL(url);
targetProtocol = targetUrl.protocol;
targetHost = targetUrl.host;
}else{
targetProtocol.location.protocol;
targetHost = location.host;
}
// 首先判斷是否jsonp
if(dataType == "jsonp"){
if(location.protocol == targetProtocol && location.host == targetHost){
// 同源，jsonp當做普通ajax做請求
}else{
// 不同源
// 隨機生成一個callback
var callback = "cb" + Math.floor(Math.random() * 1000000)
// 給window上添加一個方法
Window[callback] = options.success;
// console.log(Window.callback)
// 生成script標籤
var script = document.createElement('script');
if(url.indexof("?") > 0){
// 表示已經有參數了
}else{
// 表示沒有參數
script.src = url + "?callback" + callback
}
script.id = callback;
document.head.appendChild(script);
}
}
}
}
</script>
②CORS（跨域資源共享）:允許當前域的資源被其他域的資源請求訪問。
也就是後端設置：access-Control-Origin屬性支持跨域
當使用XMLHttpRequest發送請求時，瀏覽器如果發現違反了同源策略就會自動加上一個請求頭:origin,後端在接
受到請求後確定響應後會在Response Headers中加入一個屬性:Access-Control-Allow-Origin,值就是發起請求的源地址，瀏覽器得到響應會進行判斷Access-Control-Allow-Origin的值是否和當前的地址相同，只有匹配成
功後才進行響應處理。
現代瀏覽器中和移動端都支持CORS，IE下需要8+
③服務器跨域，服務器中轉代理
iframe（只能顯示不能控制）
前端向本地服務器發送請求，本地服務器代替前端再向服務器接口發送請求進行服務器間通信，本地服務器是個
中轉站的角色，再將響應的數據返回給前端。
3.Web前端應該從哪些方面來優化網站性能
1.靜態資源壓縮合並（JS/css代碼壓縮合並）
2.靜態資源緩存
3.使用CDN加載資源
4.css放在前面，js放在後面，懶加載
5.減少DOM操作
4，瀏覽器端存儲有哪些，並描述他們的區別。
cookie webStorage(localStorage sessionStorage)
①LocalStorage
保存的數據長期存在（特點：持久），下一次訪問該網站的時候，網頁可以直接讀取以前保存的數據。僅在客戶端使用，不和服務器進行通信。
可以作爲瀏覽器本地緩存方案。用來提升網頁首屏渲染速度（根據第一次返回，將一些不變得信息直接存儲在本地）
存入數據：locoalStorage.setItem("key","value");
讀取數據：locoalStorage.getItem("key");
<body>
<div id="name"></div>
<div id="gender"></div>
<script>
var name = localStorage.getItem("name");
var gender = localStorage.getItem("gender");
document.getElementById("name").innerHTML = name;
document.getElementById("gender").innerHTML = gender;
</script>
</body>
△因爲他的特點是持久，所以用它來存儲一些內容穩定的資源，比如圖片內容豐富的電商網站存儲圖片字符串。
②sessionStorage
sessionStorage保存的數據用於瀏覽器的一次會話，會話結束的時候（窗口關閉的時候），數據被清空；他的特點：即使是相同域名下的兩個頁面，只要他們不在同一個瀏覽器窗口中打開，他們的sessionStorage就無法共享；localStorage在所有窗口中是共享的，cookie也是在所有同源窗口中共享。除了保存期限的長短不同，SessionStorge的屬性方法和localStorage的完全一樣。
sassionStorage的特點：會話級別的瀏覽器存儲，5M左右，僅在客戶端使用，不和服務端進行通信，接口封裝良好。
所以sessionStorage可以有效的對錶單信息進行維護，比如刷新的時候，表單信息不丟失。只適用於當前會話，存儲生命週期和他同步的當前級別的會話，當你開啓新會話的時候，他也需要相應的更新或釋放。
sessionStorage 和localStorage的區別：
同：都保存在瀏覽器端且都遵循同源策略。
異：生命週期與作用域不同。
作用域：localStorage只要在相同的協議域名端口號下，就能夠讀取或者修改同一份localStorage數據。sessionStorage比localStorage嚴苛，還必須在同一個窗口下。
生命週期：localStorage是持久化的本地存儲，存儲在裏面的數據除非手動刪除否則不會過期。sessionStorage是臨時性的本地存儲，會話級別存儲，會話結束存儲內容釋放。
webStorage
鍵值對形式進行存儲，只能存儲字符串，想要得到對象就要對字符串進行解析，只能存儲少量的簡單數據。
④IndexedDB：
低級Api，客戶端存儲大量結構化數據。引用索引實現對數據的高能搜索，是一個運行在瀏覽器上的非關係型的數據庫。沒有存儲上限，不僅可以存儲字符串，還可以存儲二進制數據。
特點：鍵值對存儲。異步（localStorage的操作是同步的）異步是爲了防止大量數據讀寫，拖慢網頁。支持事務（只要有一步失敗，整個失誤就取消，數據庫回滾到事務發生之前的狀態，不存在只寫一部分數據的情況）。同源限制，每一個數據庫對應創建他的域名，網頁只能訪問同源下的數據庫。存儲空間大。支持二進制存儲。
他的操作是請求響應模式：
建立打開 IndexedDB ----window.indexedDB.open("testDB")
這條指令並不會返回一個 DB 對象的句柄，我們得到的是一個 IDBOpenDBRequest 對象，
而我們希望得到的 DB 對象在其 result 屬性中 除了 result，IDBOpenDBRequest 接口定義了幾個重要屬性:
onerror: 請求失敗的回調函數句柄 onsuccess:請求成功的回調函數句柄 onupgradeneeded:請求數據庫版本
變化句柄
<script>
function openDB(name) {
var request = window.indexedDB.open(name); //建立打開
IndexedDB request.onerror = function (e) {
console.log("open indexdb error");
};
request.onsuccess = function (e) {
myDB.db = e.target.result; //這是一個 IDBDatabase 對象，這就是 IndexedDB 對象
console.log(myDB.db); //此處就可以獲取到 db 實例 };
}
var myDB = { name: "testDB", version: "1", db: null };
openDB(myDB.name);
</script>
總結：
Web Storage 是 HTML5 專門爲瀏覽器存儲而提供的數據存儲機制，不與 服務端發生通信 IndexedDB 用於客戶端存儲大量結構化數據
5.說說get和post請求
請求方面：
1.GET會被瀏覽器主動緩存，POST不會，除非手動設置。
2.GET請求只能進行URL編碼，POST支持多重編碼方式。
3.GET請求參數會被完整保存在瀏覽器歷史記錄裏，POST中的參數不會保存。
4.GET比POST更不安全，因爲參數直接暴露在URL中。GET參數通過URL傳遞，POST放在request body中
6.一個頁面從輸入URL到頁面完成加載發生了什麼？
加載過程：
DNS解析域名爲IP地址，向這個IP的機器發送HTTP請求，服務器收到，處理並返回HTTP請求，瀏覽器得到返回內容。
渲染過程：
根據HTML結構生成DOM樹，CSS生成CSSOM樹，將DOM和CSSOM整合生成RenderTree，根據渲染數開始展示，遇到<script>的時候會執行並阻止渲染
7.TCP與UDP區別
1.TCP傳輸控制協議，UDP用戶數據報協議
2.TCP面向連接，UDP無連接
3,TCP提供可靠服務，傳送的數據無差錯不丟失不重複按序到達；UDP盡最大努力交付，不保證可靠。
4.TCP面向字節流，UDP面向報文。
5.TCP是點到點的，UDP是一對一，一對多，多對一
6.TCP首部開銷20字節，UDP8字節
7.TCP是全雙工可靠信道，UDP是不可靠信道
8.HTTP/HTTPS是什麼？
超文本傳輸協議，是TCP/IP協議的一個應用層協議，用於定義WEB瀏覽器和WEB服務器之間交換數據的過程。
HTTPS是在HTTP的基礎上加了SSL協議，SSL依靠證書來驗證服務器的身份，併爲瀏覽器和服務器之間通信加密。http是明文傳輸，https是具有安全性的ssl加密傳輸協議。http的連接很簡單，是無狀態的，HTTPS是由SSL+HTTP協議構建的可進行加密傳輸，身份驗證的網絡協議，比http安全。
9.重排（迴流）和重繪是什麼？什麼情況下會觸發？
瀏覽器會把HTML解析成DOM，把css解析成cssOM，然後他們合併產生rendertree，然後我們會知道所有節點的樣式，計算他們在頁面上的大小和位置，最後把節點繪製到頁面上。
迴流：就是渲染樹中部分或全部元素的尺寸，結構，或某些屬性發生變化的時候，瀏覽器重新渲染部分或全部文檔。頁面首次渲染，瀏覽器窗口大小發生改變，元素尺寸或位置發生改變，元素內容變化（文字數量或圖片大小等等），元素字體大小變化，添加或者刪除可見的DOM元素。
重繪：當頁面中元素樣式的改變並不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素並重新繪製它，這個過程稱爲重繪。
避免頻繁的樣式操作，最好一次性重寫style,或者一次性更改class,避免頻繁操作dom,對具有複雜動畫的元素使用絕對定位，使它脫離文檔流，否則會引起父元素及後續元素頻繁迴流。