複習3

5、任務隊列

js單線程：由它的功能決定的。

任務隊列：  同步任務/ 異步任務：

事件循環：

      1.全部的同步任務會在主線程執行，造成執行棧。

       2.主線程以外會有一個任務隊列，只要異步任務有了運行結果，就在任務隊列中放置一個時間。

       3.一旦執行棧中的執行完了，系統去讀取任務隊列，對應的異步任務結束等待，進入執行棧開始執行

       4.不斷重複上述三個步驟。

任務又分爲宏任務和微任務：

宏任務:script/setTimeout/setInterval。。。宏任務隊列能夠有多個。

微任務:new Promise.then(回調)，process，nextTick。。。只有一個微任務隊列。

【注】先微任務再宏任務

經典題目，判斷console.log哪一個先輸出。

7、ajax原理

第一步、建立xmlHttpRequest對象

第二步、向服務器發送請求

xmlhttp.open('GET',url,true);//true是否異步；post須要多加一個設置請求頭setrequestheader

xmlhttp.send();

第三步、執行回調，在回調函數中進行相應的操做

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4&&xmlhttp.status==200){

 console.log(xmlhttp.response)

}

}

readyState：0請求未初始化1服務器鏈接已創建2請求已接受3請求處理中4請求已完成且相應已就緒。

status：ask.zol.com.cn/x/7240319.h…

（2）get 和 post區別

都是http請求方式，區別是：

get是請求，post提交數據；get數據量小，post大；get能夠緩存，post不能夠；get放在地址欄中，post放在包體相對於get安全一些。

9、css3（重點再看一遍整理）

（1）新特性

        1.新增選擇器：：nth-child   :not

        2.邊框圓角：border-radius：左上角順時針；box-shadow

        3.背景與漸變：background-image、

        4.transition過分：transition-duration

        5.transform變換：

        6.動畫：@keyframes 動畫名{ 10%:{},50%{}...}  

            animation： animation-name：動畫名| animation-duration持續時間| animation-timing-function過渡類型| animation-delay動畫延遲時間| animation-iteration-count循環次數| animation-direction方向| animation-fill-mode結束狀態最後一幀forwards

（2）css3寫動畫

<style>
#div1{
width:200px;
height:200px;
background:red;
transition:width 2s ease 2s; 哪一個屬性過分|執行時間|運動方式|延遲時間
}
#id:hover{
 width:800px;
}
</style>
<div id="div1"></div>複製代碼

animate寫

animation：name duration timing-function delay iteration-count direction fill-mode
animation: run  3s linear 2s 2;
@keyframes run{
 50%{width:800px;}
 100%{width:500px;}
}複製代碼

（3）彈性盒模型flex：www.ruanyifeng.com/blog/2015/0…

父元素：display:flex

              flex-direction:row|row-reverse|column|column-reverse

                                   橫左-右|橫向相反|縱上-下|縱相反

              align-item:flex-start|flex-end|center|baseline|stretch(拉伸)縱軸垂直對齊方式

              justify-content：flex-start|flex-end|center|space-between|space-around  橫軸垂直對齊方式

子元素：flex：份數（剩餘空間的百分比）

(4)水平垂直居中的方式

（5）經常使用的css3屬性

10、移動端

（1）兼容性問題：

         手機適配問題：實現自適應/響應式設計實現的方式    響應式佈局@media|100%佈局，彈性盒模型|等比縮放rem

         tap點透問題（解決方法）。。等針對不一樣系統會有不一樣的bug

         蘋果手機的1px邊框的問題：解決1.背景圖片實現2.經過transform：scale（0.5）實現，把border給元素的before或者after等僞類，而後讓僞類利用css3縮放實現。

（2）px em rem 區別：px是相對於設備的物理尺寸/em相對於父元素的font-size/rem是相對於根元素的font-size

11、es6

（1）新特性

（2）let：

沒有變量提高：

console.log(a);//undefined
var a=10;複製代碼

console.log(b);//會報錯，由於let沒有變量提高
let b=20;複製代碼

不一樣重複命名：

let b=20;
let b=30;//baocuo複製代碼

塊級做用域：

//es5全局做用域和函數做用域
function(){
  x=10;//沒有用var聲明默認也會變成全局的變量；用var聲明就是函數做用域了
}
//es6新增塊級做用域，只要是{}內部的都是塊級做用域，let只在內部有效複製代碼

暫時性死區：

let c=10;
function fn2(){
 console.log(c);
}
fn2();//10


let c=10;
function fn2(){
 console.log(c);
c=30;
console.log(c)
}
fn2();//10 30


let c=10;
function fn2(){
 console.log(c);
var c=30;
console.log(c)
}
fn2();//undefined 30
let c=10;
function fn2(){
 console.log(c);
let c=30;
console.log(c)
}
fn2();//報錯，由於let那個做用域中沒有變量提高，不容許同名變量進來複製代碼

（3）const（上面let的四點也具備）

聲明常量，基本數據類型值不變不可改的，可是對象是能夠的，若是不想讓它改須要object.freeze()

（4）箭頭函數

let a=()=>{};

 <ul>        <li>111</li>        <li>222</li>        <li>333</li>    </ul>    <script>    var ali=document.getElementsByTagName("li");
//普通函數中的this是調用時的this    // for(var i=0;i<ali.length;i++){    //    ali[i].onclick=function(){    //        setTimeout(function(){    //            console.log(this);    //        },1000)    //    }    // }    // //箭頭函數的this指向父做用域的this,聲明時候的this    // for(var i=0;i<ali.length;i++){    //    ali[i].onclick=function(){    //        setTimeout(()=>{    //            console.log(this);    //        },1000)    //    }    // }    //bind指的是綁定事件的this    for(var i=0;i<ali.length;i++){       ali[i].onclick=function(){           setTimeout((function(){               console.log(this);           }).bind(this),1000)       }    }    </script>複製代碼

var obj={        name:'lz',        age:20,        say:()=>{            setTimeout(()=>{                console.log(this);//指向window            },1000)        }    }    obj.say();複製代碼

箭頭函數和普通函數還有其餘區別：箭頭函數不能用作構造函數即不能new且沒有arguments類數組（arguments.callee調用本身f）

（5）...rest

let a=(x,...rest)=>{
console.log(rest);//[2,3]
}
a(1,2,3)複製代碼

（6）promise

（7）generator

（8）async await

上述三個都是同步流程表達異步操做。

async函數是generator的語法糖

<script>    async function timeout() {        return new Promise(resolve=>{            setTimeout(resolve,2000)        })    }    async function asyncPrint(value){        console.log('函數執行',new Date().toTimeString());        await timeout();        console.log('延遲時間',new Date().toTimeString());    }    asyncPrint('hello async')    </script>複製代碼

12、前端性能優化：