• 标准盒模型： 总宽度=width margin border padding
• 怪盒模型： 总宽度=width margin
  • box-sizing :
    • content-box: width=内容宽度
    • padding-box(兼容性问题): width=内容宽度 padding(left,right)
    • border-box: width=内容宽度 padding(left,right) border(left,right)

• em： 相对于父元素字体大小的单位
• rem：相对于根元素字体大小的单位
• vw： 1vw 等于可视窗宽度的1%
• vh： 1vh 相当于可视窗高的1%

• Fixed,与浏览器窗口相比，固定定位脱离文档流；
• Relative,相对定位，相对于自己的起点移动，不脱离文档流；
• Absolute,绝对定位，与最近的定位元素相比，如果没有，则相对于，脱离文档流；
• Sticky,在跨越特定阈值之前，元素定位表现为相对定位 位，然后固定定位；
• Static:默认值，无定位，元素出现在正常流中(忽略 top, bottom, left, right或者 z-index 声明)。
• inherit:规定应当继承父元素position属性的值。

• display:none; 脱离文档流，不占用页面空间，会改变页面布局；
• visibility:hidden ；不会脱离文档流，不会改变页面布局，仍然占据页面空间；
• opacity:0.元素是隐藏的，但不会改变页面布局，如果元素绑定了一些事件，如click点击该区域也可以触发事件；
• input框的type=hidden,也可隐藏.

1. 定位 外边距

已知盒子已知，{ 
          position: absolute;  left: 50 % ;  top: 50 % ;  margin-left: -半宽;  margin-top: -身高一半; } 

2. flex 布局 设置x y 轴上元素的对齐

父级：{ 
          display: flex;    align - items: center;  justify - content: center; }  

3)定位 transform 已知盒子的高度和宽度

#container { 
           position: relative;   border: 1 px solid red;   width: 800 px;   height: 600 px;  } #center { 
           width: 100 px;   
       
        height
        : 
        100 px
        ; 
        background
        : blue
        ; 
        position
        : absolute
        ; 
        top
        : 
        50 
        % 
        ; 
        left
        : 
        50 
        % 
        ; 
        transform
        : 
        translate
        (
        -
        50 
        % 
        , 
        -
        50 
        % 
        )
        ; 
        } 
       

4)视窗居中(vh为视口单位)

#center{ 
         
	margin:50vh auto 0;
	transform: translate(-50%)
}

容器:{
	display: flex;
	flex-direction: row ;    //row-reverse|column|column-reverse; 主轴对齐方式
	justify-content: center; //flex-start|flex-end|space-between|space-evenly|space-around交叉轴对齐方式
	flex-wrap: nowrap;    //wrap|wrap-reverse;是否换行
	flex-flow: row wrap;   //flex-wrap+flex-direction
	align-item: normal;   // flex-start|flex-end|center|baseline|stretch(item无高)单个项目在交叉轴对齐方式
	aligin-content:stretch;//flex-start|flex-end|center|space-between|space-evenly|space-around //多行item在交叉轴的对齐方式 
}
项目:{
	order: number(- 0 +); //值越小排列越靠前
	align-self: auto;(继承align-item,无则=stretch)  //stretch|flex-start|flex-end|center|baseline
	flex-grow: 0;         //项目放大比例
	flex-shrink: 1;        //项目缩小比例
	flex-basis: auto;      //项目基础大小
	flex: 0 1 auto;       // auto(1 1 auto)|none(0 0 auto)    //flex-grow+flex-shrink+flex-basis
}

1. 使用带 clear:both属性的空元素
2. 浮动元素添加 overflow:hidden;(使用了BFC规则)
3. 使用伪元素选择器

div:after { 
         display: block; content: ‘ ’; clear: both; height:0; overflow:hidden}
 		div{ 
         zoom:1; }    /** 兼容ie触发hasLayout */ 

附:外边距溢出(上外边距溢出,下外边距溢出)处理办法:

• 前后添加table标签;
• 添加伪元素标签 :

after(或者:before){ 
        
	display:table,
	content:' '
} 

   格式化上下文,形成一个独立的渲染区域,规定了内部如何布局,并且这个区域的子元素不会影响到外面的元素,起重比较重要的布局规则有
内部box垂直放置,计算BFC的高度时,浮动元素也参与计算,

• 触发BFC的规则有根元素,
  • 浮动元素;
  • position为absolute或flex的元素;
  • display:inlink-block,table-cell,tab-caption,flex,inline-flex;
  • overflow不为visible的元素;

• link 属于html标签,而@import是css提供的页面被加载时,link会同时被加载，而@import 引用的css会等到页面加载结束后加载.
• link 是 html 标签，因此没有兼容性,而@import 只有 IE5 以上才能识别.link 方式样式的权重高于@import 的.

   Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件
才能改变属性，而 animation 不需要触发任何 事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to， 
而 animation 可以一帧一帧的。

     display: table的css声明能够让一个html元素和它的子节点像table元素一样,使用基于表格的css布局,能够轻松的定义一个单元格的边界,
 背景等样式,而不会产生因为使用了table那样的制表标签导致的语义化问题.
     之所以现在淘汰了table系表格元素,是因为用div+css编写出来的文件比table编写出来的文件小,而且table必须在页面完全加载后才显示,
 div则是逐行显示,table的嵌套太多,没有div简洁

• block(块级元素),单独成行,可以设置宽高,margin/padding水平垂直都有效
• inline(行内块元素),宽高无效,margin垂直方向无效,padding水平垂直都有效
• inline-block(行内块,),宽高有效,margin/padding水平垂直都有效
• img元素同时属于替换元素,所有的替换元素都是行内元素input/textarea/select/object

• 重排(几何属性引起的):DOM的变化影响到了元素的几何属性,并且页面中其他元素的几何属性可能会受到影响,浏览器需要重新计算元素的集合属性,页面中其他元素的集合属性可能受到了影响,浏览器需要重新构造renderTree渲染树的过程.
• 重绘(可能是几何也可能是非几何引起的):浏览器将重新构造的渲染树渲染到屏幕上的过程.
• 引起的原因:

1. 添加或删除可见的DOM元素;
2. 元素尺寸的变化;
3. 浏览器页面初始化;
4. 浏览器窗口大小发生改变;

• 减少重排重绘

1. 不在布局信息改变时做DOM查询;
2. 使用csstext,className一次性改变属性;
3. 使用fragment;
4. 对于多次重排的元素(如动画),使用绝对定位脱离文档流,时期不影响其他元素

  渲染线程分别为main thread 和compositor thread,如果 CSS动画只改变transform和opacity,这时整个CSS动画得以在compositor thread 完成
(而JS动画则会在main thread ,然后触发compositor 进行下一步操作),特别注意的是如果改变transform和opacity是不会layout(重排)或者paint(重绘)的.

• 区别:
  1. 功能覆盖面,JS比CSS大;
  2. 实现/重构难度不一,CSS3比JS更加简单,性能调优方向固定;
  3. 对帧速表现不好的低版本浏览器,CSS3可以做到自然降级;
  4. CSS动画有天然事件支持;5)CSS3有兼容性问题;

• 原始类型: 数值型/字符串型/布尔型/未定义型/null
• 引用类型: 对象

• 可以检测 Number String boolean undefined object Function
• 不能返回: Array Date 不一定:RegExp(返回Object)
• 检测null返回object,检测Promise返回Function

同步：指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程 异步：指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。

1. 直接声明 function 函数名(参数列表){ 函数体; return 返回值} 问题: 会被声明提前！ 解决:用赋值的方式就不会被声明提前。
2. 赋值方式 var函数名=function (参数列表){ 函数体; return 返回值} 优势: 不会被声明提前
3. 用new var 函数名=new Function(“参数1”,“参数2”,…,“函数体;…”)

• 原型:每一个函数都有一个prototype属性,这个属性指向函数的原型对象;
• 原型链: proto 这是每个对象(除null外)都会有的属性,叫做__proto__,这个属性会指向改对象的原型;这种链式指向结构叫;做原型链;
• 原型是一个对象,是用Object构造函数生成的,Object.prototype没有原型,Object.prototype.proto===null;

Object的原型为Object.prototype
Object.prototype.__proto__=null // Object的原型的原型是null
Array.prototype.XXX=

JSON是JS对象的一种表现方式，即以js对象的数据格式表现出来的字符串

• 将JSON字符串转换成JSON对象(反序列化) JSON.parse()
• 将JSON对象转换成JSON字符串(序列化) JSON.stringify()

for(var i=0;i<5;i++){ 
        
	setTimeout(function(){ 
        
    	console.log(i);
	},0)
}

怎么打印 0 1 2 3 4 var改为let

• 闭包：既重用变量，又保护变量不被污染的一种机制。
• 特性：闭包是用外层函数包裹受保护的变量和内层函数对象，外层函数将内层函数对象返回到外部，使用者调用外层函数，获得返回的内层函数
• 影响：由于闭包时，变量的值都保存到内存中，会导致页面加载时内存消耗很大
• 解决：使用完释放闭包，变量赋值为null //Symbol

1）修饰器 @ decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

1）async、await
使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性,async 用于申明一个 function 是异步的，			   而 await 用于等待一个异步方法执行完

async await 是用来解决异步的，async函数是Generator函数的语法糖 　　使用关键字async来表示，在函数内部使用 await 来表示异步;async函数返回一个 Promise 对象，可以使用then方法添加回调函数;当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句; 　　async较Generator的优势： 　　（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样 　　（2）更好的语义。async 和 await 相较于 * 和 yield 更加语义化　　 （3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值 　　（4）返回值是Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用

1. 可迭代对象(具有iterable接口的对象) Str,Array,Set(集合),Map(映射),arguments(类数组对象),NodeList等DOM集合类型; Object默认不具备iterable接口(不能使用for of遍历)
2. 支持可迭代协议的原生语言特性 For of/数组解构/扩展操作符/Array.from()/创建集合/创建映射/ promise.all/promise.race/yield*操作符
3. 以闭包形式创建的迭代器也实现了iterable接口,也可用于需要迭代的场景

• […“abcd”] = [“a”,“b”,“c”,“d”] //字符串解构
• Str.Startwith(searchstring,str,start)//字符串匹配,返回布尔值
• Str.chartAt() //返回指定位置的字符
• Str.substr(start,length) //长度截取,返回值截取的字符串
• Str.substring(start,stop) //下标截取,不包含stop,stop非负,返回新的字符串,start=stop,返回空串;start>stop,截取之前交换参数;start<0||stop<0,start||stop=0
• Str.slice(start,end) //下标截取,不包含end,end可负,返回新的字符串
• Str.concat() //拼接字符串,返回新字符串
• Str.split() //以指定分隔符将字符串切割成数组
• Str.trim()|trimLeft()|trimRight()//创建副本,删除字符串(前后|左|右)空格,返回副本
• Str.indexOf(str,start) //查找字符串,返回第一个匹配字符的位置或-1,start可选参数
• Str.laseIndexOf() //indexOf从左向右查询,lastIndexOf从右向左查询
• Str.toLowerCase() //字符串全部转小写
• Str.toUpperCase() //字符串全部转大写
• Str.replace(str1,str2) //替换字符串
• Str.includes(str,start) //检索整个字符串,start为起始位置(可选参数)
• Str.startWith(str,start) //左侧开始检索,start为起始位置(可选参数)
• Str.endWith(str,start) //右侧开始检索,start为起始位置(可选参数)
• Str.repeat(count) //将字符串复制count次返回
• Str.padStart(sumlength,copystr)//扩充字符串至指定长度,头部填充(可选,默认空格)
• Str.padEnd(sumlength,copystr) //扩充字符串至指定长度,尾部填充(可选,默认空格)

附,slice/substr/substring参数为负规则;

• slice()将两个负参数当成其与当前字符串长度相加参数;
• substr()第一个参数为负当成其与字符串长度相加参数,第二个负参数转换为0;
• substring()将所有负参数转换为0

• Object.assign(target,…source) //将源对象上可枚举属性拷贝到目标对象上,返回目标对象
• Object.create(proto,[properitiesobject])//创建一个拥有指定原型与属性的对象
• Object.entries(obj) //var obj={name:dong,age:10}=>[[name,dong],[age,10]]
• Object.keys(obj) //var obj={name:dong,age:10}=>[name,age]
• Object.values(obj) //var obj={name:dong,age:10}=>[dong,10]
• Object.is(value1,value2) //判断两个值(任何类型都可以)为否为同一个值

• obj.hasOwnproperty(propertyname) //检测对象是是否包含某个属性
• obj.isPrototypeof(obj2) //检测对象是否是另一个对象的原型
• Obj.prototypeIsEnumerable(propertyname)//判断对象给定属性是否可以被for-in枚举
• Obj.toLocalString() //返回对象的字符串表示,返回与本地环境一致(如时间,带AM,PM)
• Obj.toString() //返回对象的字符串表示
• Obj.valueOf() //返回对象对应的字符串,数值,布尔值表示

• Array.concant(otherArr) //传入元素或数组,合并至数组上,返回值为新的数组

• Array.slice(start,end) //剪切数组(不含end),返回值为剪切之后的元素

• Array.toString() //数组元素转字符转拼接逗号返回,返回值为拼接元素字符串

• Array.indexOf()|lastIndexOf() //返回第一个匹配到的元素在数组中的位置或-1

• Array.includes() //查找元素,返回布尔值

• Array.valueOf(); //返回Array对象的返回值 附:如果数组中某一项是null或者undefined,数组的 toString()/toLocalString()/join()/valueOf()返回的结果中会议空字符串表示

• Array.from(); //将可迭代对象转化为数组,返回值为新数组

• Array.of(); //使用new Array()创建数组,只有一个number类型参数时会创建一个[empty × 3]空数组,使用of可避免

• arr.keys()|values()|entries() //返回数组索引|元素|索引/元素对的迭代器(配合from转化为数组实例) eg:Array.from(arr.keys())->[1,2,3]->[0,1,2]

• Array.forEach //将数组执行传进的函数,没有返回值

• Array.map //将数组按照传进函数执行,返回新数组,没有改变原数组

• Array.filter //将所有的元素进行判断,将满足条件的元素作为一个新数组返回

• Array.every //对所有元素进行判断,返回布尔值,全部满足返回true

• Array.some //对所有元素进行判断,返回布尔值,存在满足返回true

• Array.reduce //将所有元素调用传入函数,返回值为最后结果

• Array.find //将所有元素按照测试函数进行查找,返回值为满足条件的第一个元素

• Array.findIndex //将所有元素按照测试函数进行查找,返回值为第一个满足元素下标

• Array.join() //将数组以指定方式切割为字符串;
• Array.splice() //删除,插入,替换数组元素;返回值为被删除的元素,没有则为空数组删:[start,length]/插:[start,0,要插入的元素]/替换:[start,1,要插入的元素]
• Array.reverse() //反转数组的顺序,返回值为重新排序的数组;
• Array.sort() //排序,返回值为排序后的新数组
• Array.push() //数组末尾推入元素,返回值为新数组长度
• Array.pop() //末尾删除,返回值为被删除的元素
• Array.shift() //头部删除,返回值为被删除的元素
• Array.unshift() //头部添加,返回值为新数组的长度
• Array.fill() //按照指定规则填充数组,返回值为填充后的数组
• Array.copyWithin() //按照指定规则复制自身片段填充自身指定位置,返回改变后数组

• forEach：定义：用于调用数组的每个元素，并将元素传递给回调函数
  • 缺点：
    • 不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据
    • 方法不能使用break，continue语句跳出循环,或者使用return从函数体返回
    • 对于空数组不会执行回调函数
  • 优点：便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率
• for in：定义：用于循环遍历数组或对象属性，for in循环里面的index是string类型的，代码每执行一次，就会对数组的元素或者对象的属性进行一次操作
  • 缺点：
    • 某些情况下，会出现随机顺序的遍历，
    • 因为里面的值是string类型，所以增加了转换过程，因此开销较大
  • 优点：可以遍历数组的键名，遍历对象简洁方便
• for of: 定义：(可遍历map，array,set string等)用来遍历数据(迭代具有iterator接口的可迭代对象),遍历对象可通过转化为数组(Object.keys或Object.values)
  • 优点：
    • 避免了for in的所有缺点，可以使用break,continue和return，
    • 不仅支持数组的遍历，还可以遍历类似数组的对象，支持字符串的遍历最简洁，最直 接的遍历数组的语法支持map和Set对象遍历
  • 缺点：
    • 不适用于处理原有的原生对象（原生对象是一个子集，包含一些在运动 过程中动态创建的对象）

    Promise对象是CommonJS工作组提出的一种规范,每一个异步任务返回一个Promise对象,改对象有一个then方法,允许指定回调函数;
用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

romise的状态,实例化,捕错,异步方法?

• Promise共有三种状态,等待(pending),已完成(resolved,又称fulfilled),已拒绝(rejected);
• then方法(实例的方法)接收两个参数,第一个参数是成功的回调(pending–>fulfilled调用),第二个参数是失败的回调(pending–>rejected调用),then可以接受另一个promise传入,也接受一个”类then”的对象或方法,即thenable对象;
• catch(实例的方法)相当于.then(null,rejection),当then中没有传入rejection时,错误会冒泡进入catch函数中,若传入rejection则错误会被rejection捕获,而且不会进入catch,此外,then中的回调函数中发生的错误只会在下一级的then中被不会,不会影响promise的状态.
• all方法(构造函数Promise的方法)提供了执行异步操作的功能,all接收一个数组,数组参数为需要执行异步操作的所有方法,里面的值最终都算返回Promise对象,数组内异步操作都执行完毕之后才会进入到then里面.
• race方法(构造函数Promise的方法)与all方法相反,谁先执行完毕谁先进入race的回调,之后的将不再进入race的回调.
• Promise.none//所有promise被拒绝即完成,
• Promise.any//一个promise被完成即完成,
• Promise.first//第一个promise完成,忽略后续拒绝和完成,
• Promise.last//和first相反
• Promise回调链,promise能够在回调函数里面使用return和throw,所以在then中可以return出一个promise对象或者其他值,也可以throw出一个错误对象,如果没有return ,将默认返回undefined,之后的then中的回调参数接收到的将是undefined; Promise的优缺点?
• 优点:
  • 将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数,避免了毁掉地狱;
  • promise对象提供了统一的接口,使得异步操作更加容易;
• 缺点:
• promise无法取消,一旦新建就会立刻执行,无法中途取消;
• 若果不设置回调函数,promise内部抛出的错误,不会反映到外部;
• 处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是完成) Promise 中reject 和 catch 处理上有什么区别
• reject是用来抛出异常,catch(相当于.then(null,rejection))是用来处理异常;
• reject是Promise 的方法，而 catch 是 Promise 实例的方法;
• reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调,会进入catch;网络异常（比如断网），会直接进入catch而不会进入then的第二个回调 三个promise,A,B,C串行执行;

    A.then(B).then(B).then(C).catch(...)  //promise 
   (async ()=> { 
        await A();await B();await C();})()  //async/await 

1. 普通函数调用，this 指向window;
2. 构造函数调用，this 指向实例对象;
3. 对象方法调用，this 指向该方法所属的对象;
4. 事件绑定中调用，this 指向绑定事件的对象;
5. 定时器函数中调用，this 指向window;
6. 箭头函数,this指向父作用域的this,不是调用时的this

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。
箭头函数不能作为构造函数，不能使用new

1. new操作符创建了一个空对象,这个对象原型指向构造函数的prototype;
2. 执行构造函数;
3. 返回对象

• 深拷贝：基本数据类型 栈内存 内存空间
  • 1. 循环遍历递归
  • 2. JSON对象的parse和stringify
• 浅拷贝：引用数据类型 堆内存 指向地址
  • Object.assign()

• toString()是各种类型数据的方法,null和undefiend类型没有toString()方法
• String()转型函数,始终会返回表示相应类型的字符串,其使用时会判断类型数据是否有toString()方法,有则使用toString()方法进行返回,如果是null和undefiend则返回null和unde
• toString()无法转换null和undifiend类型

1. B.prototype = A.prototype(地址相同)
2. B.prototype = new A({})(函数和声明的变量都赋值了)
3. C(){};C.prototype = A.prototype;B.prototype = new C()() (地址不同,也不继承不需要属性)
4. for(var key in A.prototype){ B.prototype[key] = A.prototype[key] }

• Macrotask:主程序,setTimeout,setInterval,setImmediate,I/O,UIrendering;
• Microtasks:process.nextTick,Promise.then,Object.observe,MutationObserver;

• 在javascript中任务执行时,同步任务会交由主线程来执行,其余任务交由其他模块对应线程来执行,模块线程执行完后将对应结  	果放至任务队列中供主线程提取结果,主线程在执行完同步任务后从任务队列中拿出任务执行结果;任务队列分为macrotasks和microtasks,在任务队列中,每执行一个macrotask任务,会将其对应的microtask所有任务执行完毕,然后再执行下一个macrotasks与其对应的microtasks,依次循环,这种循环执行的方式被称为事件循环或事件轮询;
  

补充:了解调用任务的API,schedule()在当前tick末尾添加任务,job loop可无限循环

• 3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段
  • 捕获阶段：在事件对象到达事件目标之前，事件对象必须从window经过目 标的祖先节点传播到事件目标。这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
  • 目标阶段：事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标，该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
  • 冒泡阶段：事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。

• w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

• 减少DOM访问次数
• 多次访问同一DOM，应该用局部变量缓存该DOM
• 尽可能使用querySelector，而不是使用获取HTML集合的API
• 注意重排和重绘
• 使用事件委托，减少绑定事件的数量

• 客户端本地存储 webstorge
• 特定的域名下 cookie

  sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，
否则数据是永远不会过期的。 

使用精灵图/css,js文件的压缩打包/图片懒加载(减少首屏请求次数)/audio,video的preload:none/代码优化

• 代码优化:

1. 减少DOM操作,用变量缓存DOM元素,减少DOM重排,重绘
2. 代码异步编写,减少同步代码阻塞后续执行
3. css选择器优化,多使用使用class选择器,减少标签选择器的使用,减少使用id选择器,减少选择器前缀(选择器从右向左查找,前缀多,查询时间长)
4. 避免CSS表达式
5. 减少冗余代码,提高复用率,“高内聚低耦合”
6. 避免使用eval(),执行消耗大,代码压缩后容易出现代码执行错话问题
7. 减少闭包使用(占用内存,内存泄漏)
8. 事件委托
9. 使用css3动画代替js动画
10. 避免一次循环过多数据,避免while导致的死循环
11. CSS放在header中,JS放在body尾部(先呈现页面,再让用户执行操作)
12. 在CSS中减少对滤镜的使用

1. DNS解析
2. TCP连接
3. 发送请求
4. 接收请求
5. 断开连接

• 附:三次握手

1. B确认自己可以接受到A的报文段
2. A确认B可以接收到自己发的报文段,并且自己可以接受到B的报文段
3. B确认A可以接收到自己发送的报文段

• MVVM即Model-View-ViewModel的简写。 数据模型-视图-视图模型
• 数据模型（Model）指的是数据层。
• 视图(View)指的是所看到的页面,视图层。 视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁 一是将数据模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。 实现的方式是：数据绑定。 二是将视图(View)转化成数据模型(Model)，即将所看到的页面转化成后端的数据。 实现的方式是：DOM 事件监听。 这两个方向都实现的，我们称之为数据的双向绑定。

• MVC是DOM操作 渲染效率低
• MVVM通过监听数据的变化，响应到页面上

    首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据    	    后，想把数据传递给父组件。可以采用emit方法。

1. props+emit 父传子 方法名=参数 props:[方法名] 子传父 this.$emit(方法名,参数) @方法名=函数名
2. Vuex this.$store.state.参数
3. EventBus vue.prototype.EventBus=new Vue() //Vue原型对象注入EventBus事件车 EventBus. e m i t ( 事件名 , 参数 ) / / A 组件中触发事件车对应函数 , 进行参数传递 E v e n t B u s . emit(事件名,参数) //A组件中触发事件车对应函数,进行参数传递 EventBus. emit(事件名,参数)//A组件中触发事件车对应函数,进行参数传递EventBus.on(事件名,事件处理函数)) //B组件设置事件以及事件处理函数

  router-link to=路径+参数
  this.router.push(路径+参数)
  this.$route.query.参数   地址栏?后的参数
  this.$route.params.参数  地址栏/后的参数