复习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、前端性能优化：