复习题

cookie

Cookie是由服务器端生成的，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下Cookie），浏览器会将cookie以key/value 的形式保存在某个目录下的文本文件内，下一次请求同一网站时就发送该Cookie服务器（前提是浏览器设置Cookie）

为什么会有Cookie？

http是无状态协议 状态都是由Cookie来控制的

Cookie的特点
1.有生命周期
2.满足同源策略
3.内存大小收到限制（一般是4K左右）

生命周期：
我们可以通过设置cookie的Expires的值来设置一条Cookie信息的失效时间 默认是当浏览器关闭的时候失效
我们可以利用new Date() 的 setTime和getTime来设置失效时间

满足同源策略：
不同源的情况下，Cookie一样是无法传递的。但是我们会发现我们登录了百度账号之后，再邓丽百度知道或百度文库，账号都是登录状态，但是这几个网页之间的主机名是不同的。

这里就用到了我们前面跨域问题里提到的document.domain
这几个百度网页虽然不同源 但是他们都是.baidu.com主域下的子域，这种情况下骂我们只要把这几个页面的document.domain都设置成这个主域的名字，就可以实现跨域通信了
document.domain=‘baidu.com’

cookie在本地是可以被更改的 敏感数据不要放在Cookie里

现在我们可以封装一下Cookie的增删改查的函数：
function setCoolie(name, value, time) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + time);
document.cookie = name + ‘=’ + value + ‘;expires’ + oDate;
}
function getCookie(key) {
var arr = document.cookie.split(’;’);
for(var i = 0,len = arr.length; i < len; i ++) {
var temp = arr[i].split(’=’);
if (temp[i] == key) {
return temp[1];
}
}
}

本地存储 cookie localstorage sessionstorage
cookie存储数据不大于4k，过期失效；
localstorage和sessionstorage存储数据可以达到5M或更大，sessionstorage在当前浏览器关闭时失效，而localstorage会一直保持，作为持久数据

git

git从远端仓库获取和存放数据
git pull
git push

git add 从工作区推到缓存区
git commit 从缓存区推到仓库 形成一个快照

每次提交都会分配一个ID 根据ID回滚

git add . 把工作区的所有文件都推到缓存区

小公司 为了保证我们拿到的远程master是最新的 需要在merge到本地dev之前 加一步： 把远程仓库拉出来 再merge到远程master

大公司: 为了保证我们拿到的远程master是最新的 需要在merge到本地dev之前 加一步： 把远程仓库拉出来 再merge远程自己的远程分支
（修改之后可以@某人 给他留言什么的） 最后由项目主管人merge到主分支

用github搭建自己的网页：写代码想推倒github服务器 让
别人可以访问：
创建一个分支 这个分分支名必须叫gh-pages 然后从本地pull
文件上去
然后在浏览器url位置输入 自己的github.github.io/文件名

======================
/=1.html5现在有很多新标签，浏览器不支持怎么办========
document.createElement(e[i]);
使用Google的html5shiv包

// HTML语义化
web语义化的意思是指，通过HTML标记表示页面所包含的信息，包括HTML标签的语义化和CSS命名的语义化。HTML标签的语义化是指：
通过使用包含标签语义的标签，如h1-h6、strong，来恰当的表示文档的结构；CSS命名语义化是指：为html标签添加有意义的class和id名，
id补充未表达的语义。

  /为什么需要语义化：

  1.去掉样式后页面呈现清晰的结构
  2.盲人使用读屏器可以更好的阅读
  3.搜索引擎更好地理解页面，有利于收录
  4.使团队的项目可以持续的运作和维护

// DOCTYPE
doctype是什么呢？

        <!doctype>声明其实并不是一个html标签，它是一个告诉浏览器当前HTML版本的指令，现代浏览器的html布局引擎通过检查doctype决定
        使用怪异模式还是标准模式对文档进行渲染。

  HTML5新添标签
       一：
       非主体结构标签： 1.header  2.hgroup  3.footer
       二、主体结构标签

        1.article  2.section

+++ HTML5的新特性：

  ①用于绘画的canvas元素

  ②新媒体标签video和audio

  ③对本地离线储存的更好的支持：LocalStorage、SessionStorage

  ④新的标签，在上一篇文章都有介绍

  ⑤新的表单控件，比如calendar、date、time、email、url、search

  4.浏览器的支持：

  高版本的Safari、Chrome、Firefox和Opera都支持某些HTML5特性，IE9以上也支持部分HTML5。

Video元素
video顾名思义就是视频的意思，这个标签可以让HTML5页面播放视频，从而抛弃掉Flash。

video支持三种视频格式：Ogg，MPEG4，WebM

video标签的写法和普通的标签没什么不同：

这里的src属性就是我们的视频链接，同时行间的width和height属性可以定义视频元素的宽高，controls可以选择是否显示控制条，
如果不用浏览器自带的控制条的话，我们可以通过js代码和csshtml配合写一个好看的控制条。

一般来说video标签中间是不写内容的，但是有时候我们的一些视频格式浏览器不支持，可能就需要做兼容性的处理，让浏览器选择自己兼容的格式。

而这个兼容性的写法就是在video下加上source标签

video标签的一些属性：
autoplay 如果出现该属性，则视频在就绪后马上播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。

video对象的方法：

1.canPlayType() 检查浏览器能够播放指定的视频类型。

2.load() 重新加载视频

3.play() 开始播放视频

4.pause() 暂停当前播放的视频

Audio元素
audio元素和video元素基本的用法都是一样的，它同样支持三种播放模式：Ogg Vorbis，MP3，Wav

canvas:
一、canvas应用场景：

        1.游戏:很多页面H5游戏都是用canvas绘制出来的。

        2.图表

  二、如何使用canvas

              1.首先在html中创建一个canvas元素，告诉浏览器我要开始绘图了！

              <canvas width="500" height="500"></canvas>

              2.获得canvas元素

              var canvas =document.getElementById(‘myCanvas’);

              3.获得canvas的上下文

              var ctx = canvas.getContext(‘2d’);

              因为是在平面绘图，所以是2d而不是3d。

              • 这里需要区分两个对象：元素对象和上下文对象。

              • 元素对象是canvas元素，相当于我们的画布

              • 上下文对象时通过getContext(‘2d’)获取的对象，相当于我们的画笔

三、绘制图案

1.线段
moveTo——lineTo

  其中moveTo就是将画笔移动到某一个点，lineTo就是从刚才我们移动到的点画到另外一个点。

  不过canvas绘制还需要多两步：beginPath()、clothPath()，我们要告诉浏览器开始绘制路径和结束绘制路径。
  重点：

  1.fill和stroke方法都是作用在当前的所有子路径

  2.完成一条路径之后要开启另一条路径必须要beginPath()，否则会自动归于上一条路径，closePath倒不是必须的

2.矩形

  矩形也有三种方法：

  1.rect(x,y,dx,dy);

  2.fillRect(x,y,dx,dy);

  3.strokeRect(x,y,dx,dy)

  由于第一种没有给路径上色，所以我们一般使用后两种，第二个是绘制并填充矩形，第三个是绘制并描边。

3.弧形

  arc(x, y, r, 起始弧度,结束弧度,弧形的方向 ) 其中0是顺时针 1是逆时针

  arc方法将当前点和弧形和起点用一条直线连接

  arcTo(x1, y1, x2, y2, r)

6.渐变

createLinearGradient(x1, y1, x2, y2);线性渐变

• 解决模糊的方法： 有时候我们的canvas绘制出来的图片放到html里面之后会失真，出现模糊的现象，这个时候只要我们把画布的大小调大，然后再让到html中就不会出现模糊了。

由此我们可以看出来，canvas其实是位图，它会出现失真的现象。

svg
svg的全称叫做Scalable Vector Graphics，可缩放矢量图形，也就是说svg是矢量图，和canvas的位图不同，矢量图的缩放是不会失真的。

svg一般是用来做图表或者图表的icon，还有一些特效效果。svg
svg的全称叫做Scalable Vector Graphics，可缩放矢量图形，也就是说svg是矢量图，和canvas的位图不同，矢量图的缩放是不会失真的。

svg一般是用来做图表或者图表的icon，还有一些特效效果。

一、绘制
1.开始

        svg和canvas的另一个不同点在于：canvas需要在js中绘制，而svg只需要在html里面通过标签绘制即可。

        首先我们定义一个svg标签：

        <svg width="500px" height="500px"></svg>

        这里我们可以声明svg的宽高。
  2.画直线

        svg中画直线只需要用一个line标签即可：
  3.画矩形

        矩形是使用rect标签：
  6.画折线

        折线的标签式polyline：

二、viewBox
viewBox即是我们的可视区域，默认是和svg的大小一样，相当于给svg的元素设置一套坐标系

  <svg width="400" height="300" viewBox="0,0,40,30"></svg>

  当我们重新设置viewBox的时候，我们的整个画布大小就是viewBox所规定的区域，绘制完成之后会自动放大到svg的宽高然后放入文档中。

  这里注意最好使viewBox的大小和宽高是成比例的，否则会出现可视区域的空白。

  当viewBox和svg的宽高不成比例的时候，我们需要用preserveAspectRatio属性来进行选择：

  xMin xMid xMax ->x轴左中右对齐

  yMin yMid yMax ->y轴上中下对齐

  meet slice none -> 设置填充方式

九、requestAnimationFrame
requestAnimationFrame是制作动画很重要的一个函数，它的使用类似setTimeout，但是不需要指定间隔时间，只需要传入需要执行的函数f，
requestAnimationFrame会自动按照一秒60帧的频率去运行这个函数，从而达到流畅的体验，比setTimeoue效果还要好。

同时我们也需要用一个变量timer来保存requestAnimationFrame，然后动画结束之后消除timer即可，cancelAnimationFrame(timer)

不过requestAnimationFrame的兼容性还是存在一些问题的，所以我们可以封装一下
    
                    window.requestAnimFrame = (function(){
                    return window.requestAnimationFrame ||
                          window.webkitRequestAnimationFrame ||
                          window.mozRequestAnimationFrame ||
                          function( callback ){
                                window.setTimeout(callback, 1000 / 60);
                          };
                    })();

三、路径
路径是我认为svg里最万能的标签，因为在一中说的那些画线的方式，都可以用单一的路径标签来替代。

路径的指令有很多种，每一种指令都有自己的作用：

        1.M指令和L指令——moveTo、lineTo

        <path d = "M 10 10 L 20 10"/>

        首先移动到10,10坐标点，然后画到20,10点。注意这里都是大写的ML

        大写的ML是绝对坐标点的意思

        2.m指令和l指令

        <path d = "m 10 10 l 20 10" />

        小写的ml是相对坐标点的意思，即相对于上一个点移动的位置。

        3.H指令和V指令

        <path d="M20 20 H 90 V 90 H 20 L 20 20"/>

        H是horizontal的意思，即横向，V是vertical的意思，即纵向，这两个指令就是横向或者纵向走多少

        4.Z指令

        如果我们绘制完之后希望回到起点位置完成曲线的封闭，我们可以用L指令画会起点，但是这样有点麻烦，我们可以直接在最后加一个Z，
        这样路径就会自动回到原点了。

        5.A命令

        A命令就是canvas里的那个arc，画弧形用的，它有7个参数：

        rx ry x-axis-rotation large-arc-flag sweep-flag x y

        rx ry表示圆弧的x轴半径和y轴半径

        x-axis-rotation 圆弧相对x轴旋转角度，默认是顺时针，可以设置为负值

        large-arc-flag 大圆弧还是小圆弧，1表示大圆弧，0表示小圆弧

        sweep-flag 表示从起点到终点是顺时针还是逆时针，1表示顺时针，0表示逆时针

        x y表示终点坐标    

=========================
=数组方法=
栈和队列
1.队列先进先出，栈先进后出。
2.对插入和删除操作的"限定"：
栈是限定只能在表的一端进行插入和删除操作的线性表。
队列是限定只能在表的一端进行插入和在另一端进行删除操作的线性表。
3、操作方法：
队列操作的方法 shift unshift
栈操作 pop push
eg:
var list = [0,1,2]
shift():
删除数组的第一个元素,返回删除的值。这里是0
unshift(3,4):
把参数加载数组的前面，返回数组的长度。现在list中是3,4,0,1,2，返回值为5
pop():
删除数组的最后一个元素，返回删除的值。这里是2
push(3):
将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3，返回值为4
concat(3,4):
把两个数组拼接起来,返回一个数组副本，值为0,1,2,3,4
splice(index,howmany,item1,…,itemX):
howmany删除项目数量，item为添加的项目
sort():
是按照字符编码的顺序进行排序,中间加函数可实现乱序 里面传一个函数 a b a>b 看返回值 返回正值就调换顺序 返回负值不掉换
reverse():
方法用于颠倒数组中元素的顺序。
join():
方法用于把数组中的所有元素放入一个字符串。
toString():
方法可把数组转换为字符串，并返回结果。加radix，也可以转化成十进制

==字符串常见方法
charCodeAt(index):
方法返回一个整数，代表指定位置字符的Unicode编码。
fromCharCode(code1,code2…):
方法从一些Unicode字符串中返回一个字符串。
charAt(index):
方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。
slice(start,end):
方法返回字符串的片段。 算头不算尾。
substring(start,end):
方法用于提取字符串中介于两个指定下标之间的字符。算头不算尾。
substr(start,length):
方法返回一个从指定位置开始的指定长度的子字符串。
indexOf(substr,startIndex):
方法放回String对象内第一次出现子字符串位置。没有找到子字符串，则返回-1。
split(separator,limit):
将一个字符串分割为子字符串，然后将结果作为字符串数组返回。limit该值用来限制返回数组中的元素个数。
concat(string1,string2…):
方法返回字符串值，该值包含了两个或多个提供的字符串的连接。
search():
方法返回与正则表达式查找内容匹配的第一个字符串的位置。
toLowerCase()/toUpperCase():
改变字符串中的字母大小写

this的指向
1.谁调用指向谁
2.定时器那种指向window
3.call apply:
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。
对于第一个参数意义都一样，但对第二个参数：
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])
同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

原型、原型链、作用域、立即执行函数、闭包、继承、预编译
1.原型的定义：
原型是function对象的一个属性，它定义了构造函数制造出来的对象的公共祖先。
通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。
有了原型，原型还是一个对象，那么这个名为原型的对象自然还有自己的原型，
这样的原型上还有原型的结构就构成了原型链。

/注意:
1.绝大部分的对象最终都会继承自Object.prototype这个对象。
并不是所有的对象都有原型，undefined null也都没有原型。

当我们通过的一个对象改变了原型上引用值类型的属性的话，那么所有对象的这个属性的值都会随之更改.
但是对象并不能删除原型上的属性。
谁调用这个方法，这个方法中的this就指向这个调用它的对象。/

2.原型链

有了原型，原型还是一个对象，那么这个名为原型的对象自然还有自己的原型，这样的原型上还有原型的结构就构成了原型链。
当我们查找son上的属性的时候，如果son自身有属性，那么就打印出来，如果没有，就向上查找原型father，如果father上面还有这个属性，那么继续向上查找grandfoo，如果有就输出，如果没有就返回undefined。
这种链式的查询结构就叫做原型链。

3.作用域:
es5的作用域有全局作用域和函数作用域，es6中添加了块级作用域
函数作用域：
定义：变量（变量作用域又称为上下文）和函数生效（能被访问）的区域
JavaScript的函数是可以产生作用域的。

/注意：
如果在函数作用域里面声明变量没有用var的话，那么就声明了一个全局变量。
 同时，两个不同作用域（除了全局作用域）之间是不能互相访问的/

4.作用域链
由于函数可以互相嵌套，作用域之间自然也会产生互相嵌套的关系，这个时候就会产生作用域链。
当代码在一个环境中执行时，会创建变量对象的一个作用域链来保证对执行环境的有权访问的变量和函数的有序访问
作用域第一个对象始终是当前执行代码所在环境变量对象

5.立即执行函数
是解闭包的一个重要方法。但是注意闭包是没有办法解除的，
我们只能通过另一个新闭包来消除上一个闭包的影响。

定义：立即执行函数不需要被定义，直接执行，执行完毕之后直接释放。

6.闭包
闭包就是能够读取其他函数内部变量的函数.
不同作用域之间不能够互相访问，但是我们如果在一个函数内部再定义一个函数，并且这个内部函数与外部函数的变量有关联，
那么我们就可以通过返回这个内部的函数，然后来访问外部函数里面的变量。
这个函数返回了一个依赖于这个函数的新函数，也就是说这个没有被销毁的新函数的作用域链中还存在着
对原本函数的作用域的引用，就导致我们原本的函数的上下文不会被销毁，
我们称返回的这个新函数是原本函数的闭包函数。

/闭包的缺点：

1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，
所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。
解决方法是，在退出函数之前，将不使用的局部变量全部删除。/

7.继承
几种方式:
1.传统方式使用原型链继承 浪费继承了太多无用属性
2.构造函数
用call和apply 改变this指向
3.共享原型
就是父子构造函数一样
缺点：无法改变子类原型 要改只能改一个
4.圣杯模式
/原理： 函数的原型等于父级的原型 这样改变一个就不会改变父级属性
写一个新的中间的构造函数 把p的原型给f的原型 通过new一个f让他等于c的原型
共享一下f和p的原型 通过f构造出c的原型 共享原型有一个问题 构造出的对象可以改变原型上的方法
p=f C = new F/

    var inherit  = (function(){
    var F = function(){}
    return function(C,P){
        F.prototype = P.prototype;
        C.prototype = new F();
        C.prototype.constructor = C;
        C.prototype.uber = P.prototype;//最后再补充一下 构造完这些 我是由谁来的 就是P.prototype
        }
    }());

7(+).对象如何查看构造自身的构造函数
在prototype里面，有一个隐式的属性叫做constructor，这个属性记录的就是对象的构造器，里面存的就是构造函数。
console.log(oPerson.constructor); // Person();
深层克隆
function deepCopy(src,tar){
var tar= tar|| {} ;
for (var prop in src){
if (typeof (src[prop]) == ‘object’){
tar[prop] = (src[prop].constructor === Array ) ? [] : {};
deepCopy(src[prop],tar[prop]);
}else {
tar[prop] = src[prop];
}
}

    return tar;
}

8.预编译

预编译前奏
    1.imply global 暗示全局变量
    .如果任何变量未经声明就赋值使用，此变量就会为全局对象window所有，并且成为window对象的一个属性。
    2.一切声明的全局变量，都是window的属性。
    //区别在于：经过声明的全局变量不能通过delete操作来删除，但是未经声明的全局变量可以被删除

预编译时this指向window。
1.创建AO对象。
    首先第一步，创建一个AO对象（执行器上下文）。var AO = {};

2.寻找形参和变量声明，将变量和形参作为AO对象的属性名添加到对象中，值为undefined。值得注意的是，函数声明不叫变量。

3.将实参值和形参值相统一。这里因为属性名都已经存在了，所以直接赋值就可以了。

4.在函数体里面寻找函数声明，将函数名作为属性名，值为这个函数的函数体。

/注意：
函数在执行的前一刻会产生一个上下文，这个上下文就是Activeaction Object对象，简称AO对象。AO = {}
这个对象是空的，但是里面有一些我们看不到的却存在的隐式属性，比如this: window属性和arguments: [];属性/
这个对象用来存放一些属性和方法，这些属性和方法就按照前面的四步来产生。

JS异步加载
背景：
script标签的特点是会阻塞后面的DOM解析，只有当script标签下载完成并且全部执行完之后，浏览器才会继续解析DOM。
一旦网速不好，那么整个网站将等待js加载而不进行后续渲染。

html5标准引入了另一套异步加载js的方法
以前有一种写法是将script标签写在body的最后面，等在DOM全部解析完成之后才加载js。

1.js异步加载的三种方案：

a.defer异步加载

我们在script标签的行间写一个defer=“defer”或者直接写defer，就可以让这个script变成异步加载了。但是这种异步只是针对下载方面，
只有等DOMTree全部解析完成（不包括下载完里面的资源）后才会异步执行。而且这个方法只有IE和一些高版本的firefox和chrome可以用。

不过这一种方式可以在script标签里面写代码。

注意：IE6和IE7的异步加载最多只能有2个，当多余两个的时候必须等前两个加载完才会加载第三个。

所有defer的js代码都保证按照顺序执行。

b.async异步加载

async是asynchronous的缩写，它是html5的标准，下载完成之后就会立即异步执行，这种方法除了IE6-IE8其他的浏览器都好用

async的js代码不能保证是顺序执行的。

兼容性写法：

    直接写两个script标签，一个是defer，一个是async。
    但是这种方法有缺陷：IE高版本会加载两遍引起冲突，有些浏览器两个都没有会一个都加载不出来。
    所以我们就需要用async方法了

异步加载js不允许使用document.write这个方法。它会清除文档流，一旦执行就会把全部的标签都清除掉，包括自身的script标签。

c.w3c的标准规定：动态添加的script标签是异步的。

2.封装一个兼容性的异步加载js的函数

function asyncLoaded(url, callback){
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
if(script.readyState){//IE和高版本的chrome、firefox .readyState 对象的状态 非零是读取中
script.onreadystatechange = function(){
// onreadystatechange状态改变触发器
if(script.readyState = ‘loaded’ || script.readyState == ‘complete’){
script.onreadystatechange = null;
callback && callback();
}
}
}else{
script.onload = function(e){//Safari Chrome Opera Firefox
callback && callback();
}
}
script.src = url;
document.body.appendChild(script);
}

3.JS加载时间线（performace timing line）

1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。
2、遇到link外部css，创建线程加载，并继续解析文档。
3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
4、遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。
（异步禁止使用document.write()）,而defer是等DOMTree解析完成后才执行
5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
6、当文档解析完成，document.readyState = ‘interactive’。
7、文档解析完成后，所有设置有defer的脚本会按照顺序执行。（注意与async的不同,
但同样禁止使用document.write()）;
8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，
转化为事件驱动阶段。
9、当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，window
对象触发load事件。
10、从此，以异步响应方式处理用户输入、网络事件等

事件
事件是交互体验的核心功能

事件是每一个浏览器本来就有的，我们只是给相应的事件添加了一个回调函数。

1、拖拽事件
div.addEventListener(‘mousedown’, function (e){
var disX = e.clientX - parseInt(getStyle(this, ‘left’)),
disY = e.clientY - parseInt(getStyle(this, ‘top’));
document.addEventListener(‘mousemove’, mouseMove, false);
div.addEventListener(‘mouseup’, function (e) {
document.removeEventListener(‘mousemove’, mouseMove, false);
}, false);
}, false);

function mouseMove(e) {
    div.style.left = e.clentX - disX + 'px';
    div.style.top = e.clientY - disY + 'px';
}

2、绑定事件
1.句柄方式
虽然句柄方式的兼容性很好，但是一个元素的一种事件只能绑定一个函数。
事件监听就会把处理函数放入执行队列，等待js引擎来执行。

2.ele.addEventListener(type, handle, false)方法。
    一种事件可以绑定多个函数，但是同一个处理函数只能绑定一次。 IE9以下不兼容。
    第一个参数是事件类型，第二个参数是处理函数，第三个参数是是否捕获。

3.ele.attachEvent(‘on’ + type, handle)
    这个方法是IE独有的方法，一个事件同样可以绑定多个处理函数。
    当同一个函数绑定多次的时候，addEventListener是只执行一次，但是attachEvent会绑定几次执行几次。

    试题：使用原生js，addEventListener，为每一个li绑定一个点击事件，输出他们的顺序。
    这里就要注意这个题考察的不仅仅是绑定事件，更多的是闭包的运用。


    var $Li = document.getElementsByTagName('li');
    for (var i = 0, len = $Li.length; i < len; i++) {
    (function (n) {
        $Li[n].addEventListener('click', function () {
                console.log(n);
        },false);
    } (i))
}

3、事件处理程序的运行环境
1.句柄绑定方式中，函数里面的this指向元素本身。

2.addEventListener方式中，函数里面的this也是指向元素本身。

3.attachEvent中，函数里面的this指向的是window而不是元素本身，这算是IE的一个BUG。
针对这种情况，我们就需要把函数提取出来，然后在attachEvent的时候用call来改变函数内部this的指向。

    兼容性的事件绑定函数
    function attachEvent(ele, type, handle) {
        if (ele.addEventListener) {
            ele.addEventListener(type, handle, null);
        }else if (ele.attachEvent) {
            ele['temp' + type + handle] = handle;
            ele[type + handle] = function () {
                ele['temp' + type + handle].call(ele);
            };
            ele.attachEvent('on' + type, ele[type + handle]);
        }else {
            ele['on' + type] = handle;
        }
    }

IE的方法中我们用了一个匿名函数，这样这个函数就无法解除绑定了，因此可以优化成命名函数。

4、解除事件处理程序
1.句柄方式
ele.οnclick=null
这样很简单的就可以解除绑定的事件处理函数了。

2.ele.removeEventListener(type, handle, false)

针对的addEventListener的解除绑定。

但是这里要注意，只有命名函数才可以解除绑定，当绑定的函数是匿名函数的时候，是没有办法解除绑定的。


3.ele.detachEvent(‘on’ + type, handle)

针对IE的attachEvent的解除绑定。

也是同一个函数才可以解除绑定，匿名函数无法解除绑定


解除绑定事件
function remvoeEvent(ele, type, handle) {
      if(ele.removeEventListener) {
            ele.removeEventListener(type, handle, false);
      }else if (ele.detachEvent) {
            ele.detachEvent('on' + type, handle);
      }else {
            ele['on' + type] = null;
      }
}

5、事件处理模型——事件冒泡、事件捕获
1. 什么叫冒泡？

    在结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，子元素冒泡向父元素，结构上的自底向上。

    大部分事件都有事件冒泡现象，并且所有的浏览器都有事件冒泡。
    并不是所有的事件都有冒泡，focus、blur、change、submit、reset、select等方法就没有事件冒泡现象。

    addEventListener最后一个参数就是是否开始事件捕获，当我们填true的时候，就代表开启了事件捕获。只要开启了事件捕获，
    就不会冒泡了，如果不捕获的话，就遵循事件冒泡。因为addEventListener只有chrome有，因此事件捕获也只有chrome浏览器有。

    当事件冒泡和事件捕获同时存在的时候，事件冒泡和事件捕获的触发顺序则为：先捕获，再冒泡。

2.取消冒泡和阻止默认事件
     1.w3c标准方法：event.stopPropagation()
        IE9以及以下的版本不支持这个方法。

     2.event.cancelBubble = true
        这个属性是IE的，不过一些高版本的浏览器也有这个属性，只要让这个属性的值等于true，同样也可以取消事件冒泡。

        封装一个兼容性的取消事件冒泡的方法：


                function stopBubble(event) {
                    if(event.stopPropagation) {
                        event.stopPropagation();
                    }else {
                        event.cancelBubble = true;
                    }
                }

3.默认事件

    当我们在浏览器中点击右键，会弹出一个菜单，这就是一个默认事件contextmenu。还有a标签，即使我们不写跳转的页面，
    也会自动刷新页面，这也是一个默认事件。

    移动端的默认事件更多。

    默认事件有好的也有不好的，这就需要我们把不需要的默认事件阻止掉。


4.阻止默认事件

        1.return false
            我们只要在处理函数最后写上 return false就可以阻止默认事件了,这种写法只能用在句柄方式绑定的事件上。

        2.e.preventDefault()
             这是w3c标准的阻止默认事件的方法，句柄也同样可以使用。不过IE9以下不兼容。

        3.e.returnValue = false
            这个是IE的方法，事件源对象上的属性returnValue代表是否有默认事件，直接返回false就可以阻止
            默认事件了。现在高版本的浏览器也有这个属性。

        封装一个兼容性的阻止默认事件的方法
        function cancelHandler(event) {
            if(event.preventDefault) {
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        }

6、事件对象
在IE中，系统不会把事件对象传到方法中，因此我们的参数e或者event在IE中是不好用的，IE会把事件对象传递到window.event上，
所以当我们使用事件对象的时候，就要写兼容性的写法：

            var event = e || window.event;

7、事件委托及拓展
1.事件源对象
我们现在有一个ul，下面有十万个li，当我们给父级的ul添加第一个点击事件之后，由于事件冒泡的存在，不论我们点击哪一个li都会
调用父级的点击事件处理函数，这个时候触发父级ul的点击函数的那个li就被称之为事件源对象。

    event.target 是火狐的获取事件源对象

    event.srcElement 是IE的获取事件源对象

    chrome两种都有

2.事件源对象的时候也需要写兼容性写法


    oUl.addEventListener('click', function (e) {
        //获取事件对象
        var event = e || window.event;
        //获取事件源对象
        var tar = event.target || event.srcElement;
            console.log(tar);
        }, false);

/注意：我们利用事件源对象和事件冒泡来处理的方式就叫做事件委托。/

3.什么是事件委托：
    通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，
    然而你却加到别人身上来做，完成这个事件。
    事件委托就是把事件绑定到父级上，利用事件冒泡，点击子集就会触发父级上的方法 有个好处就是 不用一个一个给子集绑定事件
   // css3动画效果的时候 鼠标移进去 让一个方块变小
    也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

4.事件委托的好处：

    1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。

    2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。

    3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

    4.事件委托很好地利用了"事件冒泡"。当点击子元素，根据"事件冒泡"，该子元素的父级元素捕获了该次点击事件，并触发自己的方法。

5.模型将事件处理流程分为三个阶段：
一、事件捕获阶段，
二、事件执行阶段，
三、事件起泡阶段。

  /  事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
  /  事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

  自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，
  则表示采用事件捕获，若是false，则表示采用事件冒泡。

  ele.addEventListener('click',doSomething2,true)
        true=捕获
        false=冒泡


6.传统绑定事件方式
    在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

    ele.onclick = doSomething2

    /IE浏览器
    如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，
    它提供了另一个函数attachEvent。

    ele.attachEvent("onclick", doSomething2);

    附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

    /事件的传播是可以阻止的：
    • 在W3c中，使用stopPropagation（）方法
    • 在IE下设置cancelBubble = true；
    在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
    /3.阻止事件的默认行为，例如click <a>后的跳转~
    • 在W3c中，使用preventDefault（）方法；
    • 在IE下设置window.event.returnValue = false;
    /4.不是所有的事件都能冒泡，例如：blur、focus、load、unload，

7.果你将监听器安放到它们的父元素上呢？你如何能知道是那个子元素被点击了？

    简单：当子元素的事件冒泡到父ul元素时，你可以检查事件对象的target属性，捕获真正被点击的节点元素的引用。
    下面是一段很简单的JavaScript代码，演示了事件委托的过程：

        // 找到父元素，添加监听器...
        document.getElementById("parent-list").addEventListener("click",function(e) {
            // e.target是被点击的元素!
            // 如果被点击的是li元素
            if(e.target && e.target.nodeName == "LI") {
                // 找到目标，输出ID!
                console.log("List item ",e.target.id.replace("post-")," was clicked!");
            }
        });

    第一步是给父元素添加事件监听器。当有事件触发监听器时，检查事件的来源，排除非li子元素事件。如果是一个li元素，
    我们就找到了目标！如果不是一个li元素，事件将被忽略。这个例子非常简单，UL和li是标准的父子搭配。让我们试验一些差异比较大的元素搭配
    。假设我们有一个父元素div，里面有很多子元素，但我们关心的是里面的一个带有”classA” CSS类的A标记：

    // 获得父元素DIV, 添加监听器...
    document.getElementById("myDiv").addEventListener("click",function(e) {
        // e.target是被点击的元素
        if(e.target && e.target.nodeName == "A") {
            // 获得CSS类名
            var classes = e.target.className.split(" ");
            // 搜索匹配!
            if(classes) {
                // For every CSS class the element has...
                for(var x = 0; x < classes.length; x++) {
                    // If it has the CSS class we want...
                    if(classes[x] == "classA") {
                        // Bingo!
                        console.log("Anchor element clicked!");

                        // Now do something here....

                    }
                }
            }

        }
    });

上面这个例子中不仅比较了标签名，而且比较了CSS类名。虽然稍微复杂了一点，但还是很具代表性的。
比如，如果某个A标记里有一个span标记，则这个span将会成为target元素。这个时候，我们需要上溯DOM树结构，找到里面是否有一个 A.classA 的元素。

脚本化CSS
读写CSS样式
每一个dom元素都有一个属性style，dom.style里面存放的这个元素的行间样式，我们可以通过这个属性来读写元素的行间样式。

1.我们碰到float这样的关键字属性的时候，前面要加一个css前缀。

float—>cssFloat

2.复合属性必须拆解

border: 1px solid red;

这种属性是不允许出现的，只能写border-width、border-color、border-style。

3.当css中的样式是用“-”连接起来的时候，我们要变成小驼峰式写法。

background-color —> backgroundColor;

这个属性只能读写行间样式，我们写在css的样式是不能获取的，因此我们通过这个属性加样式的时候要注意权重值问题。

同时，我们在js中写样式只能往行间写，永远也写不到css文件里面。

window上面有一个方法叫做getComputedStyle可以来获取元素的计算样式，也就是css样式。
window.getComputedStyle(ele. null);
//这里的样式是取优先级最高的，不只是行间样式，所有的只要是表现出来的样式都可以获取出来。
同时，返回的计算样式的值都是绝对值，没有相对单位。

// 第一个参数是我们要获取的元素。第二个参数是一个字符串，代表我们是否要获取这个元素上面的某一个伪元素，
如果不的话，就填写null，否则就填写要获取的这个元素的哪一个伪元素。

//但是很遗憾的是IE8以及以下的版本不兼容这个方法,IE8有一个特殊的样式currentStyle。
dom.currentStyle也会返回一个样式表，和上面的基本一样，唯一的区别在于返回的计算样式的值不是经过转换的绝对值，而是我们写什么值就会返回什么值

function getStyle(obj, prop, fake) {
    var fake = fake || null;
    if(obj.currentStyle) {
        return obj.currentStyle[prop];
    }else {
        return window.getComputedStyle(obj, fake)[prop];
    }
}

脚本化样式表

在document上有一个属性叫做styleSheets，这个属性储存了一个html文档所有的css样式表的集合，我们可以来操作style标签，
不过在实际中基本是用不到的

+++++++++经典题++++++++++
14： 如何将数组去重说说你的思路
Array.prototype.unique = function () {
var len = this.length,
arr = [],
obj = {};
for (var i = 0; i < len; i++) {
if (!obj[this[i]]) {
obj[this[i]] = 1;
arr.push(this[i]);
}
}
return arr;
}
用一个空数组和空对象以及一个循环就可实现
当我们数组中的这个数据出现过一次之后，我们就在obj中将这个元素的值的位置标记成1，后面如果出现相同的属性值，因为这个位置已经是1了，
所以就不会添加到新数组里面，从而达到了去重的效果。

模块化开发
1.模块化开发定义：
模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。也就是说
，把一个巨大的系统代码，被整合优化分割成逻辑性很强的模块，这些模块的特点是高内聚，低耦合所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

2.前端采用模块化开发，使得开发体验大大增强，摆脱了很多需要人力去做且容易出错的点，使得代码管理更加清晰、规范。主要表现为以下几点：

减少命名冲突，消除全局变量
一个模块一个文件，组织更清晰
依赖自动加载，按需加载
其中文件按需加载，依赖自动管理，使得更多精力去关注模块代码本身，开发时不需要在页面上写一大堆script引用，一个require初始化模块就搞定。
不需要每增加一个文件，还要到HTML或者其他地方添加一个script标签或文件声明。

3.前端模块化规范标准

CommonJs (Node.js)
AMD (RequireJS)
CMD (SeaJS)

1.CommonJs

    CommonJS是服务器模块的规范，Node.js采用了这个规范。根据CommonJS规范，一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，
    在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。

2.AMD (RequireJS)

    由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，因此CommonJS规范比较适用。但是，
    如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。

3.CMD (SeaJS)

    CMD规范和AMD类似，都主要运行于浏览器端，写法上看起来也很类似。主要是区别在于模块初始化时机，AMD中只要模块作为依赖时，就会加载并初始化，而CMD中，
    模块作为依赖且被引用时才会初始化，否则只会加载

/注意：
兼容AMD、CMD及非模块化
    很多时候如果我们引用第三方组件时，并没有采用模块化开发，通常我们自己需要包装一下或通过模块加载器的shim插件支持模块化引用依赖。现在很多第三方库已
    经默认支持AMD规范的引用，根据以上模块定义规范，开放给第三方使用的组件能兼容不同的规范/

4.模块化开发上线部署

压缩
合并
更新版本
1.压缩
    不能直接压缩：因为模块加载器在分析模块的依赖时，会先将模块的工厂函数factory.toString()，然后通过正则匹配require局部变量，这样意味着不能直接
    通过压缩工具进行压缩，若require这个变量被替换，加载器与自动化工具将无法获取模块的依赖。

2.合并
    不能直接合并：我们在开发时，通过是省略模块的ID的，如果多个模块直接合并成一个文件，这样加载器无法区分不同模块了。

    所以采用模块化开发上线部署时，压缩前通常通过工具先提取依赖，这样require就可以当做普通变量直接压缩了，同时也不再需要加载器分析提取依赖，对于
    提升性能也是蛮有好处的。合并前同样也需要借助工具先提取各个模块的ID，然后才能按照合并配置进行合并。

5.FIS的集成解决方案

用过fis的同学都知道，采用fis开发，整体过程相当顺畅，对于前端开发、性能、部署各方面的问题基本都考虑到了，内置的小巧mod.js加载器，就是一个特别轻量的模块加载器，不需要做依赖分析，fis强大的编译能力已经提前提取了依赖关系并生成jsmap.json。已经前置依赖了，一个轻量的加载器足足够了，
编译的同时自动修改新生成的版本号，整个过程在fis下轻松完成。

6.语言扩展能力 (less, coffee, jade…)
前端模板预编译
xss自动转义 无段手动干预
多域名支持，动态切换
编译后自动修改版本号 (包括图片的引用)
线上本地调试功能 ……

IE6兼容问题
IE6的兼容性问题：

1、IE6怪异解析之padding与border算入宽高
原因：未加文档声明造成非盒模型解析
解决方法：加入文档声明<!doctype html>

2、IE6在块元素、左右浮动、设定marin时造成margin双倍（双边距）
解决方法：display:inline

3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。
1）字体大小为奇数之边框高度少1px
解决方法：字体大小设置为偶数或line-height为偶数
2）line-height，文本垂直居中差1px
解决方法：padding-top代替line-height居中，或line-height加1或减1
3）与父标签的宽度的奇偶不同的居中造成1px的偏离
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

4、内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden

5、line-height默认行高bug
解决方法：line-height设值

6、行标签之间会有一小段空白
解决方法：float或结构并排(可读性差，不建议)

7、标签高度无法小于19px
解决方法：overflow: hidden;

8、左浮元素margin-bottom失效
解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签
margin- bottom，即(margin-bottom与float不同时作用于一个标签)

9、img于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

10、li之间会有间距
解决方法：float: left;

11、块元素中有文字及右浮动的行元素，行元素换行
解决方法：将行元素置于块元素内的文字前

12、position下的left，bottom错位
解决方法：为父级(relative层)设置宽高或添加*zoom:1

13、子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative

以下是补充：上面要先看

1、终极方法：条件注释
<!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]-->
<!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中加载css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺点是在IE浏览器下可能会增加额外的HTTP请求数。

2、CSS选择器区分
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。

复制代码代码如下:

/* IE6 专用 */
.content {color:red;}
/* 其他浏览器 */
div>p .content {color:blue;} -->

3、PNG半透明图片的问题
虽然可以通过JS等方式解决，但依然存在载入速度等问题，所以，这个在设计上能避免还是尽量避免为好。以达到网站最大优化。
4、IE6下的圆角
IE6不支持CSS3的圆角属性，性价比最高的解决方法就是用图片圆角来替代，或者放弃IE6的圆角。

5、IE6背景闪烁
如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存，每次触发hover的时候都会重新加载，可以用JavaScript设置IE6缓存这些图片：

复制代码代码如下:

document.execCommand("BackgroundImageCache",false,true);

6、最小高度
IE6 不支持min-height属性，但它却认为height就是最小高度。解决方法：使用ie6不支持但其余浏览器支持的属性!important。

复制代码代码如下:

#container {min-height:200px; height:auto !important; height:200px;}

7、最大高度

复制代码代码如下:

//直接使用ID来改变元素的最大高度
var container = document.getElementById('container');
container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
//写成函数来运行
function setMaxHeight(elementId, height){
var container = document.getElementById(elementId);
container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
}
//函数示例
setMaxHeight('container1', 200);
setMaxHeight('container2', 500);

8、100% 高度
在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得先给html和body定义height:100%;。

9、最小宽度
同max-height和max-width一样，IE6也不支持min-width。

复制代码代码如下:

//直接使用ID来改变元素的最小宽度
var container = document.getElementById('container');
container.style.width = (container.clientWidth < width) ? "500px" : "auto";
//写成函数来运行
function setMinWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
}
//函数示例
setMinWidth('container1', 200);
setMinWidth('container2', 500);

10、最大宽度

复制代码代码如下:

//直接使用ID来改变元素的最大宽度
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
//写成函数来运行
function setMaxWidth(elementId, width){
var container = document.getElementById(elementId);
container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
}
//函数示例
setMaxWidth('container1', 200);
setMaxWidth('container2', 500);

11、双边距Bug
当元素浮动时，IE6会错误的把浮动方向的margin值双倍计算。个人觉得较好解决方法是避免float和margin同时使用。

12、清除浮动
如果你想用div(或其他容器)包裹一个浮动的元素，你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性（除了auto值）才能将浮动元素严实地包裹。

复制代码代码如下:

#container {border:1px solid #333; overflow:auto; height:100%;}
#floated1 {float:left; height:300px; width:200px; background:#00F;}
#floated2 {float:right; height:400px; width:200px; background:#F0F;}
更多：http://www.twinsenliang.net/skill/20090413.html

13、浮动层错位
当内容超出外包容器定义的宽度时，在IE6中容器会忽视定义的width值，宽度会错误地随内容宽度增长而增长。
浮动层错位问题在IE6下没有真正让人满意的解决方法，虽然可以使用overflow:hidden;或overflow:scroll;来修正， 但hidden容易导致其他一些问题，scroll会破坏设计；JavaScript也没法很好地解决这个问题。所以建议是一定要在布局上避免这个问题发 生，使用一个固定的布局或者控制好内容的宽度（给内层加width）。

14、躲猫猫bug
在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。
解决方法很简单：
1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>
2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

15、绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

16、3像素间距bug
在IE6中，当文本(或无浮动元素)跟在一个浮动的元素之后，文本和这个浮动元素之间会多出3像素的间隔。
给浮动层添加 display:inline 和 -3px 负值margin
给中间的内容层定义 margin-right 以纠正-3px

17、IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义z-index，有些情况下还需要定义position:relative。

18、Overflow Bug
在IE6/7中，overflow无法正确的隐藏有相对定位position:relative;的子元素。解决方法就是给外包容器.wrap加上position:relative;。

19、横向列表宽度bug
如果你使用float:left;把<li>横向摆列，并且<li>内包含的<a>（或其他）触发了 hasLayout，在IE6下就会有错误的表现。解决方法很简单，只需要给<a>定义同样的float:left;即可。

20、列表阶梯bug
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发，我们本意是要做一个横向的列表(通常 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。解决办法就是给<li>定义float:left;而非子元素<a>，或者 给<li>定义display:inline;也可以解决。

21、垂直列表间隙bug
当我们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。
解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定 义高宽、使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

22、IE6中的:hover
在IE6中，除了(需要有href属性)才能触发:hover行为，这妨碍了我们实现许多鼠标触碰效果，但还是有一些法子是可以解决它的。最好是不要用:hover来实现重要的功能，仅仅只用它来强化效果。

23、IE6调整窗口大小的 Bug
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：给body定义position:relative;就行了。

24、文本重复Bug
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。

ie6在CSS方面的兼容性问题有哪些

1. 在IE6元素浮动，如果宽度需要内容撑开，就给里面的块元素加浮动。

2. IE6下最小高度问题：在IE6下元素高度小于19px的时候，会被当作19px处理。解决方案：给元素加 overflow:hidden。

3. border：1px dotted #000: 1px dotted 在IE6下不支持
解决方案：切背景平铺

4. margin传递：解决方案：a.父级或自己浮动;
b.给元素加 overflow:hidden;zoom:1;

5. 在IE6下父级有边框的时候，子元素的margin值消失。解决方案：触发父级haslayout(haslayout触发：zoom:1)

6. IE6下的双边距bug：在IE6下，块元素有浮动和横向的margin值，横向的margin值会被放大成两倍。解决方案：display:inline。

7. 在IE6、7下li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。解决方案：a.给li加浮动;
b.给li加vertical-align:top ;

8. 当IE6下最小高度问题和li的间隙问题共存时给li加vertical-align:top 和浮动。

9. IE6下当一行子元素占有的宽度子和和父级的宽度相差超过3px,或有不满行状态的时候，margin-bottom就会失效。解决方案：无 （自己注意避免）。

10. IE6下文字溢出BUG： 产生原因：子元素和父级宽度相差小于3px,或两个浮动元素之间有注释或内嵌元素。解决方案：用DIV把注释或内嵌元素包起来。

11. 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会失效。解决方案：给定位元素外面包DIV。

12. 在IE6、7下，子元素有相对定位的话，父级的overflow包不住自己元素。解决方案：给父级加相对定位。

13. 在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差。解决方案：无（自己注意避免）。

14. 在IE6、7下输入类型的表单控件上下各有1px的间隙。解决方案：加浮动。

15. 在IE6、7下输入类型的表单控件加border:none无效。解决方案：重置背景。

16. 在IE6、7下输入类型的表单控件输入文字的时候，背景图片会跟着移动。解决方案：把背景加给父级。

17. IE6下PNG不透明：解决方案：引入JS文件（DD_belatedPNG_0.0.8a.js）， 使用语法<script>DD_betatedPNG.fix('PNG图片所在块ID或CLSS名（如#div1，.class2）').


18. 样式优先级：默认<类型<class<id<style(行间)<important 在IE6后面再加一条同样的样式，会破会掉important的作用，会按照默认的优先级顺序来走.

============================
封装一个自己的jquery：
(function () {

    cQuery = function () {
        return new cQuery.prototype.xxx();
    }

    cQuery.prototype = {
        xxx : function () {}
    }

window.$ = window.cQuery = cQuery;这行语句不能放第一行，因为一开始cQuery是undefined

    var xxx = cQuery.prototype.xxx;
    var cQuery;
    xxx.prototype = cQuery.prototype;
}())

    // (function (global, factory) {
    //     if () {

    //     } else {
    //         factory(global, noGlobal);
    //     }
    // } (typeof window !== "undefined" ? : window : this, function (window, noGlobal) {

    // }))

    // $(): 什么是jquery对象，它是怎么生成对象？
    // $ = ?
    // if (!noGlobal) {
    //     window.jQuery = window.$ = jQuery;
    //     在window上有一个属性jQuery，把接口放到全局，
    // }

    // $()调用init构造方法-->$() --> init(),而init这个构造函数是定义在$的原型上的
    // $本来就是一个函数，函数就会有原型，最后又将init的prototype指向了$的prototype
    // 这就使得init它New出来的对象可以使用$原型上定义的方法


    jQuery = function (select, context) {
        return new jQuery.fn.init(selector, context);
    }

    在8000多行那里：
        1.$('#id') $('.class') $('.class', 'ul') $('li', 'ul') $('<div></div>')
        2.$('<li>1</li><li>2</li><li>3</li>') $('<div>demo')
        $(DOMElement)
        $(function () {})
        4.$(jQueryObj)--> $($('div'))
    

        创建一个标签的时候，如果后面跟着json格式的数据，json里的属性就会变成div上的特性
       3. $('<div></div>', {html: 123, tittle: 234})--><div tittle="234">123</div>


       //rquickExpr = /^$/以什么开头以什么结尾这样可以限制字符串的长度
                rquickExpr = /^()$/第几个括号代表第几个正则子表达式
                /^(?:     \s*(<[\w\W]+>)[^>]      |       #([\w-]*))$/
                        \s*只要有空格就行0-n                这个匹配'#demo' '#demo-abc'
                        (<[\w\W]+>):\w\W代表全集 1-n个，
                        即匹配的是'<jfkdsljfio>jfsjk',
                        除了'<jfkdsljfio>jfsjk>'这个   <>后面可以跟任意除了‘>’它的字符
                        这里是匹配'<div>demo'  这里会把demo忽略掉  直接生成div
                        ？：忽略此表达式   所以这里的第一个子表达式不是大的括号的内容
                        而是(<[\w\W]+>)[^>]

    $(null) $(undefined) $("")
    init = jQuery.fn.init = function (select, context, root) {
        //这里有一大堆if-else用来选择$执行（执行或创建）的是什么
        if (!selector) {
            //如果是空的   就返回空数组
            return this;
        }
        //rootjQuery = jQuery(document)
        root = root || rootjQuery;
        if (是否是字符串) {
            //1、2、3、都是字符串类型

            if ('<div/>') {
                //'<div/>'判断是不是创建标签
                match = [null, '<div><div/>', null]
                match = [null, '<li>1</li><li>2</li><li>3</li>', null]
            } else () {
                match = rquickExpr.exec(selector);
                // exec返回类数组  0位存的是匹配的整体结果  之后的，这里是用
                // index来存匹配到的子表达式的开头位置在整体匹配结果的
                // 哪个位置

              1. 如果匹配的是'<div>demo'  则
                match = null;
                match = ['<div>demo', '<div>', null]
              2.如果是'#demo'
              则match = ['#demo', null, 'demo']
            }

            if (match && (match[1] || !context)) {
                //这里匹配的是干净的id   或创建形式的'<div>' || '<div></div>'
                //match除了id的情况  第[1]位都有值  有id就不用上下文 因为id是唯一标识
                //不用通过上下文查找
                if (match[1]) {
                    //非id情况
                    context = context instanceof jQuery ? context[0] : context;
                    //上面这个语句是判断$('<li>', document)
                    //由于jq里面也有自己的ducument  所以这里需要区分
                    //能调用creatElement的是document
                    jQuery.merge()
                    $.parseHTML --> return arr  类数组  每一位都是原生dom
                    会把每一字符串元素节 点当做dom解析   

                    注意   这里写script标签的时候要在'/'前面加转义字符  不然parseHTML会把它当做上面的那个标签的闭合
                    var str = '<li>1</li><li>2</li><li>3</li><script><\/script>'
                    $.parsrHTML(strm, document, true);
                    true这个参数是为了让script标签能作用上
                    
                    当前的document
                    因为有可能有几个页面  也就是有几个document 
                    如iframe下有window   window下有document 
                    则可以这样写$.parsrHTML(strm, iframe[0].document);



                    if (rsinggleTag.test([match[1]]) && jQuery.isPlainObject(context))
                    判断是不是单标签                      判断是不是对象字面量  JQuery的静态方法  看context是不是json形式

                    //('<div></div>', {html: 123, tittle: 234})
                } else {
                    //id情况
                }
            } else if () {

            } else {

            }









        } else if (判断是否是domElement)  {
            
        } else if (是否是function) {

        }
        if (判断是不是里面又放了JQuery对象)


    }

    
    加入现在页面里有单个li:

    $('li').css('background-color', 'red')
    // 相当于var obj = this = {}
    于是：
    this = {
        "0":{DOMElement li},
        "1":{DOMElement li},
        "2":{DOMElement li},
        "length" : 3
    }
    到这里会进行一个循环   遍历类数组的元素  挨个加颜色
    在执行循环的时候是这样的：
    for (var i = 0; i < this.length; i ++) {
        //类数组的遍历的时候  可以用对对象的obj[属性名]
        this[i].style.backgroundColor = 'red';
    }
    所以$('li').get(0) --> $('li')[0]


    正则表达式匹配创建标签   id  

    // $() =>  return new jjQuery.prototype.init(selector, context);
    // 返回新的对象，这个对象上有很多方法可以调用

    // init = jQuery.prototype.init = function (select, context, root) {
    //     //...
    // }

    // 共享原型 使得  init构造出来的对象能调用它上面的方法
    // init.prototype = jQuery.prototype

    // jQuery.fn = jQuery.prototype


    // 最后返回的是jQuery

    // jquery压缩的时候单词会被压缩替换    所以JQuery有很多关键字需要被替换
    // 就有了var document = window.document

    (function (window) {         
        cQuery = function () {
            return new cQuery.prototype.xxx();
        }
       
        cQuery.prototype = {
            xxx : function () {},
            abc : function () {
                alert('a');
            }
        }
        var xxx = cQuery.prototype.xxx;
        var cQuery;
       // 因为cQuery 是个函数，也就是引用值（这些变量都指向同一个地址），所以连续赋值是可以的，
        window.$ = window.cQuery = cQuery;
        
        
        xxx.prototype = cQuery.prototype;

    } (window));


    juqery的support方法和浏览器嗅探差不多   用userAgent判断浏览器版本号  
    navigator上有个嗅探，可以根据他判断浏览器是哪个版本

    $().abc()

    console.log($);

    get: function (num) {
        return num != null ? 
        // this是jQuery对象
        (num < 0 ? this[num + this.length] : this[num]) :
        slice call(this);
    }




   
   







        在搜关键字   ：  匹配关键字   然后拿到后台匹配

jQuery是一个非常优秀的js库
89千行的代码  重在封装思想  使用方法会用就可以现查现用

zepto从jQuery演变过来的


jQuery和zepto事件处理不同   zepto用touch    布局不一样  不能定宽  因为分辨率和宽度
不同

jquery的插件有很多

API:


//参数写selector   和css选择器一样
$()

jquery精髓   链式调用

如何实现链式调用   （核心是jq的prototype = xxx.prototype）
利用sizzle匹配dom元素   变成一个对象  对象才能调用方法

jQuery.prototype.init = function () {
    this = {};
    //sizzle匹配js原生dom

    //然后用merge  把对象和dom拼到一起   变成类数组
}

var $Li = document.getElementById('li');

1.$()-->css  selector
2.$($Li)  --> 原生dom
3.$(null/undefinded)
4.$(selector, context)  如$('li', 'ul')找ul下的li
5.$($())   方jq对象
6.$(function () {})  这个是在模拟DocumentLoaded：dom刚加载完成就会触发（图片资源等可能还没下载）

7.$(document).ready()  这时promise()上的方法


容错处理也做的很好

jq特有选择器：
$('li:odd')奇数选择器
$('li:even')奇数选择器
$('li:first')
$('li:last')奇数选择器
$('li:eq(1)')选择第几个就选第几个
$('li').eq(1)    也行
get(2)和eq(2)也是获取dom  get 会把选中的元素编程原生的dom　

过滤方法：
    // 1.fiter()  过滤   filter

    用法一：$('li').filter('.active')   选中除了.active的Li
    用法二： $('li').filter(function () {
        //返回true的都保留  false的则过滤掉
        return true;
        //保留索引为3的倍数的li
        return index % 3 === 0;
    }).css('background','red')
    　　

//has():
$('li').has('ul').css('background', 'black')  选中有ul的li

//is
判断选择的dom是不是你想要的dom

$('li').is(function () {
    //这里的this是当前执行到的li   判断当前li下有没有ul
    return $('ul', this)
})

$('ul', this)   this是当前的执行上下文


//find()  向下查找
$('ul').find('li').find('ul').css('....')


//原生innerHTML
var $Ul = document.getElementsByTagName('ul')[0];
$Ul.innerHTML = 'lalal'/'<div></div>'

//jq html():
选中只能选一个  赋值赋一组

$('innerUl').find('li').html(function (index) {
    //函数里返回什么   li 就添加什么
    return index + 'cst';
})


attr()函数主要依赖的是Element对象的getAtrribute()  和setAtrribute()两个方法

1.prop()函数主要依赖的是JS中原生的对象属性获取和设置的方法  ： 添加的属性是元素的特性时
才会映射到dom上

2.setAtrribute()  则添加什么属性都映射到dom上

属性和特性的区别：特性能映射到dom上


    jq认为：attribute的checked、select、disabled就表示该属性初始状态的值
    property的checked、selected、disable才表示改属性实时状态值（值为true或undefined）

===================================

同源策略，所谓同源，是指只有在域名、协议名、端口号都相同。不同源的客户端脚本在没有明确授权的情况下，是不能够读写对方的资源的。

只有满足同源的脚本才可以获取资源，虽然这样确实保证了网络上的安全性，但是另一方面又限制了资源之间的互相利用，比如我们的AJAX，
AJAX也是通过url来获取数据，同样也会受到同源策略的限制。

22： 跨域都有什么方法
JSONP的工作原理：利用script标签的src属性没有跨域限制的漏洞来达到与第三方的通讯的目的。不仅如此，
凡是有src属性的标签都不受同源策略的影响。
1.flash 现在已经不用了
2.服务器代理中转
3.JSONP
4.ifame + document.domain
5.ifame + window.name
6.iframe + location.hash
7.HTML5的POSTMessage方法

jsonp的缺点
1.优点
1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。
我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染
同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。
2.缺点
2.1它只支持GET请求而不支持POST等其它类型的HTTP请求
2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？
所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

三次握手：
1.先发送一个带有SYN标志的数据包给对方，
2.接受端收到后会回传一个带有SYN/ACK标志的数据包来表示传达确认信息，
3.最后发送端再回传一个带有ACK标志的数据包，代表握手结束

	HTTP状态码   HTTP报文信息   HTTP首部字段
		1.HTTP状态码：用来描述返回的请求结果，记住状态码，我们可以知道是正确的处理了请求还是出现了错误，状态码响应类别一共有五种，
			比如200；数字中的第一位指响应类别，后两位无分类。

		五种类别分别为：             原因短语：
		1XX(信息性状态码)            接受的请求正在处理 不常见
		2XX(成功状态码)					 请求正常处理完毕
		3XX(重定向状态码)				 需要进行附加操作已完成请求
		4XX(客户端错误状态码)			 服务器无法请求类别
		5XX(服务器错误状态码)			 服务器处理请求出错


		HTTP状态码一共有60多种，经常使用的大概14种
		2XX 成功：(1)200 ok  客户端请求在服务器端正常处理
		(2)204 No Content  请求成功但没有资源可以返回
		(3)206 Partial Content  表示客户进行了范围请求，而服务器成功执行了这部分的GET请求  首部字段中有content-rage意思是客户端进行了范围请求
		3XX 重定向：(1)301 Moved Permanently  永久性重定向
		(2)302 Found  临时性重定向
		(3)303 See Other  请求的对应资源存在着另一个URI，应使用GET方法定向获取请求的资源
		(4)304 Not Modified  资源已找到，但是未符合要求
		(5)307 Temporary Redirect  临时重定向
		4XX 客户端错误：(1)400 Bad Request请求报文存在语法错误
		(2)401 Unauthorized  发送的请求需要通过HTTP认证的认证信息。如果之前请求过一次，则表示用户认证失败
		(3)403 Forbidden  不允许访问该资源
		(4)404 Bad Request  服务器上没有该资源
		5XX 服务器错误：(1)500 Internal Server Error服务器端在执行请求时发生错误
		(2)503 Service Unavailable  服务器暂时处于超负载或正在停机维护，无法处理请求

=====================================

MVC模式的意思是，软件可以分为三个部分：

    视图（View）：用户界面

    控制器（Controller）：业务逻辑

    模型（Model）：数据保存

各部分的通信方式：

    View传送指令到Controller

    Controller完成业务逻辑之后，要求Model改变状态

    Model将新的数据发送到View，用户得到反馈

    三者之间是一个三角关系，并且所有的通信都是单向的。

    互动模式：

    接受用户指令时，MVC可以分成两种方式，一种是通过View接受指令，传递给Controller，另一只是直接通过Controller接受指令。

React的原理和背景

    React中最重要的就是引入了虚拟DOM的机制。

    在Web开发中，我们总需要把变化的数据实时反映到页面的UI上，改变UI就需要操作DOM，而复杂又频繁的DOM操作通常是性能产生瓶颈的原因，
    因此React引入了虚拟DOM的机制：在客户端js实现了一套DOM API。

    基于React进行开发时，所有的DOM构造都是通过虚拟DOM进行的，每当数据发生变化时，React都会进行重新构建整个虚拟DOM树，然后React将
    当前整个虚拟DOM树和上一次的DOM树进行比较，得到DOM结构哪里发生了变化，然后仅仅将需要变化的部分在浏览器上进行更新。

    这个算法叫做Diff算法，这是一种基于红黑树的算法，它会计算虚拟DOM到实际渲染DOM结构的最少步骤。

    而且React能够批处理虚拟DOM的刷新，在一个事件循环内的两次数据变化都会合并。比如在极短的时间内，一个节点先从A变成B，再从B变回A，
    那么React会认为UI没有发生变化。

    尽管每一次都需要构造完整的DOM树，但是因为虚拟DOM是内存数据，性能极高，因而能达到提高性能的目的。并且在保证性能的同时，开发者将不
    再需要关注某个数据的变化如何更新到一个或者多个具体的DOM元素上，值需要关心在一个数据状态下，整个界面是如何渲染的。

MVC的思想是让我们做到视图数据控制器的分离，而组件化的思想让我们做到UI功能模块之间的分离。

	24： 说说react的优点和生命周期*************************************
		1.React速度很快

			React中最重要的就是引入了虚拟DOM的机制。
			基于React进行开发时，所有的DOM构造都是通过虚拟DOM进行的，每当数据发生变化时，React都会进行重新构建整个虚拟DOM树，
			然后React将当前整个虚拟DOM树和上一次的DOM树进行比较，得到DOM结构哪里发生了变化，然后仅仅将需要变化的部分在浏览器上进行更新。
			这个算法叫做Diff算法，这是一种基于红黑树的算法，它会计算虚拟DOM到实际渲染DOM结构的最少步骤。
		2.跨浏览器兼容

			虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

		3.模块化
			为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
			每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。







	组件生命周期******************************************************************
			生命周期共提供了10个不同的API。
			1.getDefaultProps

			作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
			2.getInitialState

			作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。
			3.componentWillMount

			在完成首次渲染之前调用，此时仍可以修改组件的state。
			4.render

			必选的方法，创建虚拟DOM，该方法具有特殊的规则：
			只能通过this.props和this.state访问数据
			可以返回null、false或任何React组件
			只能出现一个顶级组件（不能返回数组）
			不能改变组件的状态
			不能修改DOM的输出
			5.componentDidMount

			真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
			在服务端中，该方法不会被调用。
			6.componentWillReceiveProps

			组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
				componentWillReceiveProps: function(nextProps) {
					if (nextProps.bool) {
						this.setState({
							bool: true
						});
					}
				}
			7.shouldComponentUpdate

			组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
			在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用
			8.componentWillUpdate

			接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
			9.componentDidUpdate

			完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
			10.componentWillUnmount

组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

====================

less的优点 与sass的区别
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。

less主要是为了模块化迭代速度快
sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护
sass里封装了好多方法，可以直接拿去作为微型js来用

==============

//绑定事件函数
			function addEvent(ele, type, handle){ //事件 类型 函数名
				if(ele.addEventListener){//主流浏览器
					ele.addEventListener(type, handle, false);// 捕获由父元素捕获到子元素  冒泡所有的都有
				}else if(ele.attachEvent){//ie
					ele['temp' + type + handle] = handle;
					ele[type + handle] = function(){ //先把函数保存出来 名字就是temp + type + handle
						ele['temp' + type + handle].call(ele);//改变一下this的指向
					}
					ele.attachEvent('on' + type, ele[type + handle]); //添加绑定事件
				}else{
					ele['on' + type] = handle; //on 只能绑定一次 绑定多次进行覆盖
				}
			}
			//解除事件绑定
			function removeEvent(ele, type, handle){
				if(ele.removeEventListener){//w3c标准
					ele.removeEventListener(type, handle, false); //是否事件捕获

				}else if (ele.detachEvent){//ie
					ele.detachEvent('on' + type, handle);
					//handle --> ele[type + handle];
				}else{
					ele['on' + type] = null;
				}
			}



//		11： 请封装一下insertafter方法
		document.getElementById("myList").insertBefore(newItem,existingItem);


		insertBefore() //方法在您指定的已有子节点之前插入新的子节点。
			Element.insertAfter = function (targetNode, afterNode) {
            var nextSib = afterNode.nextElementSibling;
            if(this.children.length <= 1 || !nextSib) {
                this.appendChild(targetNode);//如果后面没有元素了 在父级添加子元素
            }else {
                this.insertBefore(targetNode, nextSib);//在下一个元素节点前边添加
            }
        }

//取消冒泡
function stopBubble(e) {

    // 如果提供了事件对象，则这是一个非IE浏览器

    if ( e && e.stopPropagation ) {

        // 因此它支持W3C的stopPropagation()方法

        e.stopPropagation();

    } else {

        // 否则，我们需要使用IE的方式来取消事件冒泡

        window.event.cancelBubble = true;

    }

}

//取消默认事件

function cancelHandler(event){
	if(event.preventDefault){
		event.preventDefault();
	}else if(event.returnValue){
		event.returnValue = false;
	}
}
//获取元素属性

function getStyle(obj, propStyle) {

	if(obj.currentStyle) {

		return obj.currentStyle[propStyle];

	}else{

		return window.getComputedStyle(obj, false)[propStyle];//第二个参数 是看他伪元素

	}

}


//异步加载JS

function asyncLoaded(url, callback){
	var script = document.createElement('script');
	script.type = "text/javascript";

	//先判断是否在IE里面执行
	if(script.readyState){ 	//0 1 2 3
		script.onreadystatechange = function () { //监听onreadystatechange
			if(script.readyState == "complete" || script.readyState == "loaded") {//说明已经完成加载 说明src已经请求到了
				script.onreadystatechange = null; //执行完就把监听事件取消 也是效率问题 一直监听的话会耗性能
				callback();
			}
		}
	}else{ //否则执行 onload
		script.onload = function () {//Chrome Safari Opera Firefox
			script.onload = null;
			callback();
		}
	}//写在后面 网速比代码速度还快 就不会执行call back
	script.src = "tools.js";
	document.body.appendChild(script);
}
asyncLoaded("tools.js", function () {
	console.log(/*填写要执行的函数*/);
});

//ajax
function ajax(method,url,data,success){
	var xhr = null;
	try {
		xhr = new XMLHttpRequest();
	} catch (e) {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}

	if (method == "get" && data) {
		url += "?" + data;
	}

	xhr.open(method,url,true);

	if (method == "get") {
		xhr.send();
	}else{
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(data);
	}

	xhr.onreadystatechange = function() {

		if ( xhr.readyState == 4 ) {
			if ( xhr.status == 200 ) {
				success(xhr.responseText);
			} else {
				alert('出错了,Err：' + xhr.status);
			}
		}

	}
}

6.//圣杯模式
//原理： 函数的原型等于父级的原型 这样改变一个就不会改变父级属性
 写一个新的中间的构造函数 把p的原型给f的原型 通过new一个f让他等于c的原型
  共享一下f和p的原型 通过f构造出c的原型  共享原型有一个问题  构造出的对象可以改变原型上的方法
  p=f  C = new F

var inherit  = (function(){
	var F = function(){}
	return function(C,P){
		F.prototype = P.prototype;
		C.prototype = new F();
		C.prototype.constructor = C;
		C.prototype.uber = P.prototype;//最后再补充一下 构造完这些 我是由谁来的 就是P.prototype
	}
}());


7.//封装ajax
function ajax(method,data,url,success){
	var xhr = null;
	try{
		xhr = new XMLHttpRequest();
	}catch(e){
		xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
	if(method == "get" && data){
		xhr.send();
	}else{
		xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
		xhr.send(data);
	}
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				success(xhr.responseText);
			}else{
				alert('wrong' + xhr.status);
			}
		}
	}
}

14： 如何将数组去重说说你的思路
			Array.prototype.unique = function () {
		      var len = this.length,
		      arr = [],
		      obj = {};//因为对象里的属性值是不重复的 把原来数组的每一个值拿出来分别看对象里面有没有 没有的话往对象里添加属性
		      for (var i = 0; i < len; i++) {
		            if (!obj[this[i]]) {//判断对象里有没有这个属性  有的话不操作 没有的话添加
		                  obj[this[i]] = 1;//不能等于i  等于i 的话没办法去重undefined 0
		                  arr.push(this[i]);
		            }
		      }
		      return arr;
			}


9.//深度克隆 大概我理解的  原始值直接拷贝  引用值进一步拷贝 判断是不是对象还是数组
function deepClone(parent,child){
	var  child = child || {},//有的话就等于child 没有就给一个空对象
	     toStr = Object.prototype.toString, //为了判断对象还是数组
	     arrStr = ['object Array'];
	     for( var prop in parent){
	     	if(parent.hasOwnProperty(prop)){ //判断他不在原型链上的话
	     		if(typeof(parent[prop]) == "object"){ //不是原始值的话
     			child[prop] = (toStr.call(paret[prop]) == arrStr)?[]:{};//是数组 返回空数组  是对象返回空对象
     			deepClone(parent[prop],child[prop]);//递归调用 把当前的孩子节点继续递归调用
	     		}else{//判断是原始值
	     			child[prop] = parent[prop];
	     		}
	     	}
	     }
}
数组的
先string  然后再parse 返回一个新数组

牛逼的方法  json.parse(json.stringify[arr]);

百度
1.首先问了项目(音乐播放器)
2.position属性值 6
3.水平垂直居中
4.三列布局
5.清除浮动
6.margin合并 触发bfc
7.事件委托 时间冒泡 事件捕获
8.深度克隆
9.数组方法
10.二分排序

（七）人人车
1.轮播图
2.贪吃蛇
3.request
4.get post 区别
5.是否了解es6
6.盒子垂直水平居住
7.本地储存
8.jQuery
9.说出你知道的框架

（八）
1.读过jquery源码 读它的目的 有什么收获 学到什么东西
2.jquery提供集中绑定事件的方法
3.jsonp的缺点
1.优点
1.1它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
1.2它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
1.3在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。
这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据，
至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，
你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。
2.缺点
2.1它只支持GET请求而不支持POST等其它类型的HTTP请求
2.2它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
2.4缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，
即它返回的javascript的内容被人控制的。那么结果是什么？
所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…
所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。
4.同源策略
同源策略，所谓同源，是指只有在域名、协议名、端口号都相同。
5.访问ip地址也会跨域吗
需要跨域 是否符合同源策略
6.清除浮动流的方法 为什么要清除浮动流
加一个p标签 添加伪元素 触发bfc的方式来清除浮动
（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
7.绑定事件函数
8.数组删除特定元素的方法 splice
9.介绍自己 怎么学习技术 在哪学习

（九）
1.css3 html5 jsonp
2.BOM(Browser Object Module)浏览器对象模型
BOM对象包括：Window、History、Navigator、Screen和Location
3.Navigator
navigator.userAgent是我们经常使用的属性，它可以返回客户端的代理值。用这个我们就可以判断当前用户使用的是pc端还是移动端，是什么浏览器。
4.Screen
screen.availHeight/availWidth 可以查看除了window任务栏之外的屏幕的高度和宽度。
screen.height/width 返回显示器的屏幕的高度和宽度。不过这个兼容的较少。
screen.deviceXDPI/deviceYDPI返回显示屏幕每英寸的水平/垂直点数，即分辨率。DPI越高，分辨率越高。
5.History
history.length 可以返回当前窗口查看过的网页记录的数量，即浏览历史的长度。
history.back() 可以让浏览器进入到下一个历史页面。
history.forward() 可以让浏览器返回到上一个历史页面。
history.go() 这个方法有一个参数，当参数是正数的时候，前进到下一个历史页面，当是负数的时候，回退到上一个历史页面。即前两个的综合方法
Location
location.host 可以返回当前的主机名和当前的URL端口号。比如百度就返回www.baidu.com
location.search 设置或返回从问好开始的URL（查询部分）
location.hash 可以跳转到相应的id的元素的位置，和a标签的锚点功能差不多。可以配合css3的:target一起使用改变元素的样式。
location.reload() 方法可以重新加载当前页面

（十）
1.基本数据类型
undefined null boolean string number
2.引用数据类型
object array date RegExp function
3.BOM对象包括：Window、History、Navigator、Screen和Location
4.git的简单操作有哪些？
http://www.cnblogs.com/ys-ys/p/5493153.html
git init 在目录中创建新的git仓库
git clone 拷贝一个 Git 仓库到本地
git add 命令可将该文件添加到缓存
git status 以查看在你上次提交之后是否有修改
git diff 来查看执行 git status 的结果的详细信息
git commit 将缓存区内容添加到仓库中
git reset HEAD 命令用于取消已缓存的内容
git branch开启一个新的分支
git checkout切换到分支上
git rm删除文件
git push 将暂存区的文件提交到远程仓库
git pull 将远程仓库的修改拉取到本地

（十一）百度二面
1.你对前端性能优化有什么了解？
我当时用高性能JavaScript答的，但她会问细节
详见博客，渡一公众号
2.问了promise和三个状态值，答上了，但她问我promise用来解决什么问题？
详见博客 pending resolve reject 用回调函数解决异步的问题
3.像淘宝一样要展现很多图片怎么办？
雪碧图（精灵图） 懒加载（瀑布流）
如果每一个icon都是一个单独的图片，分别发送请求会请求十次，网络消耗很大，这时候用雪碧图把每一个icon搞成一张图片，只访问这一张
base64方法，fis3内置功能 url（…/img/a.png?__inline）可以直接把图片转换为base64，放到background-image中 打包进css文件
4.图片除了url以外怎么加载？base64
5.iconfont？好像阿里巴巴开发的一个什么东西
6.完美适配里面相关的知识
http://www.html-js.com/article/3041?from=message&isappinstalled=1
参考这个吧 我按着这个基本都答上了 老哥(手动@思彤哥) 很稳
7.react
8.你了解模块化开发吗？
amd cmd
9.跨域 主要问了jsonp
10.用过canvas么？用canvas做了什么？有什么优点？
哆啦A梦=.=
优点：可以导出成具体的图片然后用base64转码，绘图方便，
11.用css3的时候动画卡了怎么解决？
transform: transition3d(0, 0, 0);
transform: translateZ(0);
这两个属性可以开启GPU加速模式
然而面试官问我为什么，你知道原理么？
这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画的时候从CPU转向GPU。
我是这么答的不知道对不对。。。

（十二）百度
1.栈和队列的区别
2.数组方法中哪些方法是进行栈操作和队列操作
3.数组的各种方法
4.html中的meta标签都有那些r
5.移动端的适配问题 viewport
6.了解css3属性
7.display position 清除浮动
8.h5 audio标签是在移动端和pc端什么区别
移动端浏览器大部分是禁用video和audio的autoplay功能，并且，很多移动浏览器也不支持首次js调用play方法进行播放
9.闭包
10.this指向问题 call和apply区别
11.响应式布局的了解
11.ajax 跨域
12.jsonp原理
13.getpost区别 怎么判断
14.jsonp为什么能实现本地数据上传
15.http协议流程 三次握手 四次挥手 响应报文请求报文区别 状态码
16.请求头有什么
请求方法 请求URL HTTP协议以及版本
响应头
报文协议以及版本（HTTP） 状态码以及状态描述

（十三）百度
1.自我介绍
2.贪吃蛇 如何写食物 键盘事件
3.轮播图为什么用jq写
4.ajax
5.怎么学习
6.移动端适配(弹性盒子)
7.position
8.怎么算两个日期有多少天
不用gettime()
9.绑定事件
10.时间冒泡事件捕获有什么区别
11.怎么样阻止默认事件怎么封装
12.百度搜索框 用jsonp，说下写的过程，详见博客

（十四）滴滴出行一面（电话）：50minutes
1.说说css的权重问题，说一说通配符选择器。
（这个小意思，背下来就可以了，聊到通配符选择器的时候，说一下一般用来初始化css啊，再跟他扯一扯为什么要初始化啦♪(^∇*)浏览器默认8px的margin啦，列表的小圆点_(≧▽≦)/等等）
2.封装过哪些兼容性的函数
（我一脸懵逼啊，要是问问具体的我还能答一点，突然把主动权给我了，直接让我说，我估计面试官也确实不知道该从哪里入手，就问了个开放性的。我脑子告诉运转啊，只想到了组织默认时间，想到这个之后，我又想到了阻止冒泡，然后又是事件源对象等等）
3.事件冒泡、事件捕获、事件源对象、事件委托
（成哥讲得好啊 ，不多说，把上课讲得复述一遍perfectO(∩_∩)，讲到事件代理的时候，我给他讲了扫雷的例子）
4.说一说清楚浮动的方法，为什么要清除浮动：
Wrapper::after {
Content: ‘’;
Clear: both;
Display: block;
}
但是ie6/ie7没有伪元素
Wrapper {
*zoom：1
会问你知道为什么这么做可以清楚浮动，了解底层原理吗
}
（问到ie的时候，就问我，你知道为什么这样做吗？又是一阵尴尬，平时就这么用，我哪里知道，或者知道但是早就忘了啊，我就很谦虚的说不是很了解，然后面试官就给你巴拉巴拉一阵指点江山，我只需认可就行）
5.知道http吗，一般发送网络请求的方式（get和post），说说两者的区别
（因为自己学网络，问道这个问题还得意了一下，跟面试官嘚瑟了一下，但是也确实不知道该怎么答，就给他讲了http的发展历史，然后就是get和post，简单的说了一下区别，然后又问我具体访问的机制（这是人问的问题吗）我就说是头部，反正就是不会，然后他又吧啦吧啦，静静听就好）
6.Canvas和svg做过图表是什么，做过什么项目吗？
（说实话，问到这个的时候，我是真的忘了，模棱两可，讲了彤哥带我们做的那个app图表，他看我不熟，也没多问）
7.说一说闭包。
（装逼的时候来了。首先就想到了jquery，稍微说了一下jquery的封装思想，讲讲对待闭包的优势和劣势，指出应当避免，再给他举个闭包的例子）
8.你是网络工程专业的，平时应该没有前端方面的课，你是怎么解除到这一块的，平时又是怎么学习的？
（这个问题其实就是成哥讲得那个，你是不是自学的问题，肯定要讲故事，希望大家想一个不重复的故事）
9.你有什么问题可以问问我？
（这个就是推崇他，肯定要请他指点指点江山啊，谦虚一下嘛，给人留个好的印象）
面试官对我的总结就是，html和css掌握的还是可以的，但是对于为什么这方面还是不够深入，尤其是搞技术的，我们不仅要知道怎么做，还要知道为什么！
（说的确实都是自己身上的缺点，所以的确要好好听一听，对下一轮面试有很大的帮助）
最后面试官对我印象还不错，给我留了电话，说有问题可以找他，期待进入下一轮面试。2016/11/10 19:00

（十五）
1.这一行写不写对页面有什么影响
2.标准模式 混杂模式 不写h5的一些标签会失效
3.闭包
4.原型链
5.继承方式
6.call与apply区别
7.数组的方法
8.css3新增属性 transform都有哪些
9.h5新增结构标签
10.setimeout(function(){},0),先执行括号里面的函数 还是先执行外部代码
先执行外部代码再执行函数，因为js是单线程语言
11.react webpack 的优点
12.display属性
13.position属性
14.css选择器权重
15.盒模型都有哪些
16.多列布局都有哪些方式
17.for of循环
18.es6的方法 可以避免双子节字符的bug，详见博客
19.你用canvas和svg都做过什么
20.canvas的使用方法
21.栈和队列的区别
22.数组方法中哪些方法是进行栈操作和队列操作
push pop为栈操作
shift unshift为队列操作
23.数组的各种方法
24.html中的meta标签
25.wise端 spider端

（十六）滴滴面试
1.你是lsf同学么？ 不，我不是，你打错了，不好意思
2.来来来，说说你都做过什么项目？（说完讲两句，印象深刻的地方多说一直说）
3.哎呦？知乎邀请组件你提到了react？redux？那聊聊吧你分别了解多少，redux扮演什么角色？（阮一峰说过redux是将军）
3.关于兼容你知道什么？
4.xmlhttprequest ie没有可咋整？
5.你还看过jq源码是吧？你告诉告诉我ajax他里面整个随机数是嘎哈用的？（同原生js封装的ajax里面的时间戳）
6.来你给我讲讲轮播图吧，我看看你真会假会
7.啥是闭包
8.给我讲讲三栏布局
9.line-height 110%和1.1啥区别？？？？（一个是相对于父级fontsize，一个是相对自己fontsize的）
基本就这些
相对于各种框架滴滴更重视基础，感觉把jq源码视频和轮播图视频好好看三遍比较克滴滴。

（十七）
1.常见的数据类型
2.arr[3] = 1 打印arr.length = 4 稀松数组
3.position的值有哪些
4.盒模型
5.CSS选择符有哪些，哪些属性可以继承
6.介绍一下ajax
7.’‘I am a student’'分割成单词
8.常见的排序算法 实现一个快速排序接口
9.函数如何访问外部变量的
10.函数如何从外部访问到内部变量
11.prototype工作原理
12.前端页面由那几层构成 分别是什么 作用是什么？
13.ECMAscript和javascript有什么联系？
14.如何处理移动端 PC端页面兼容问题？

---

（十八）百度一面
1.几种基本数据类型
2.如何判断是不是数组
3.原型继承都有哪些形式
4.说一说对事件的了解
5.动态创建一个标签插入另一个标签
6.选择出dom有哪些形式
7.settimeout设置为0有什么作业？用来异步实现操作
8.addEventListener第三个参数的作用
9.封装ajax post和get区别
10.跨域方法有哪些
11.jsonp原理
12.本地存储形式
13.cookie的原理 如何设置cookie 是不是跨域的(domain来实现)
14.css3动画有那几种
15.css3动画卡顿怎么办
16.display-flex可以实现什么功能
17.css选择器
18.响应式布局
二面
1.对模块化的理解 播放器如何写成模块化
2.webpack理解
3.es5哪个方法实现了继承 了不了解freeze
4.linux的基本命令 如何查看一个文件夹下的js
5.后台会不会 他认为node.js太难
6.正则表达式 验证用户名 以字母开头中间可以数字下划线 6-20个字符

（十九）百度 85/100 知识面比较广 回答比较满意 灵机应变 沟通顺利 通过
1.git用过吗？git pull , git push
2.less有什么好处？便于管理, class命名不会冲突
3.less和sass有什么区别，为什么使用less？
4.为什么选择webpack？方便，注册，loader
5.react和vue的差别和优势？react的虚拟dom渲染更快，diff需要更新的dom，组件化。
6.ajax实现jsonp方法？实现方法很多，原生方法理解比较清楚
7.ajax运行的流程？讲了大致实现原理
8.css盒子模型？两种盒模型
9.移动端的适配？媒体查询，viewpoint
10.position？答得比较全
11.清除浮动？比较满意
12.js绑定的函数？adddEventListener attachEvent
13.smarty模板？具体没用过
14.http状态码？404 403 200 302
15.css实现三列布局？讲解了两种实现方法
提问？如何提高自己的技术水平？百度工作流程？

附：百度某部门题库
js
1.跨域的解决方法
2.前端性能优化方案
3.用过什么库或者框架，Jquery,backone,undercore,sizzle,anguler,sea.js
4.做过什么项目，在项目中遇到什么问题，怎么解决的
5.数组的各种split，splice,shift,unshift,trim等等处理方法
6.数组的一般常见算法，诸如去重，排序（倒叙，顺序），排序的方法（快速，插入，二分–用js实现）
7.js操作dom，创建，删除，添加，复制，insertBefore，appendChild
8.js继承方式–对象冒充，call()，apply()，混合方法，原型继承
9.js面向对象–工厂方式，this指向及何时this会改变
10.事件绑定addEventListener/attachEvent,事件委托event.srcElement/event.target,时间冒泡，事件捕获
11.编写原生Ajax
12.post和get区别
13.http协议基本码 100-500都是什么
14.jquery使用优化，选择器优化，变量缓存，函数绑定优化，请求优化
15.XHR攻击，XSS攻击
16.原生js实现手势操作
css
1.css3和html5新属性和标签
2.盒模型
3.块元素和行内元素的区别有哪些
4.浏览器的渲染模式
5.CSS-position的属性，大致十多种，常见的absolute reletive fixed static以及区别
6.CSS-float的清除方法，大致八种，设置高度，overfloat：hidden/auto，添加clear：both 添加clearfix类 父元素浮动
7.CSS左边自适应，右边固定宽度
8.移动端适配方案flexible和rem
9.webp格式理解-图片解决方案
10.用过fis3吗，平时用的构建
html
1.html标签的语义化理解
2.html种mate标签的各种属性 keywords description expries refer
3.ls本地储存使用方法

---

（一）百度糯米
1.canvas和svg有什么区别？
canvas和svg都允许在浏览器中创建图形
SVG: 1) : 是一种XML描述性2D图形语言
2) : 每一个元素都是可用的，可以为摸一个元素添加javascript时间处理器
3) : 每一个被绘制的图形均视为对象，如果SVG对象属性发生变化，浏览器能自动重现图形 适合大型区域渲染的应用 例如谷歌地图 不适合游戏应用
Canvas：1) ： 通过javascript来绘制2D图形 逐像素进行渲染 依赖分辨率 不支持事件处理
2) ： 一旦图形绘制完成将不会继续得到浏览器的关注。如果位置发生变化，整个场景也需要重新绘制
3) ： 比较弱的文本渲染能力 适合图像密集型的游戏 其中许多对象都会被频繁重绘
4) ： 可以以.png .jpg格式保存图像
png越放大越清晰 是无损画质 因图片较大 不适合web开发
jpg越放大越模糊
2.storage和cookie区别？
cookie优点
1.通过良好的编程，控制保存在cookie种的session对象大小
2.在cookie中存放不敏感的数据或者控制cookie生命周期，使之不会永久有效 ，被盗也不会有损失
cookie缺点
1.受长度数量的限制，每一个domain只能存放20条cookie，每个cookie长度不能超过4KB
2.安全性较差，被拦截的话会获得所有session信息
h5中web stroage由两种存储方式：sessionstroage 和 localstorage
sessionstorage：用于本地存储一个会话中的数据，只有在同一会话的页面才能访问而且会话结束随之销毁
localstorage：持久化本地存储，除非主动删除，数据永远不会过期
区别：storage是为了增大容量存储设计。cookie大小受限，每次请求新页面cookie都会被发送过去，cookie需要指定作用域，不可以跨域调用，
cookie作用是与服务器进行交互，作为http规范存在，storage只为本地存储数据而生。
webstorage一些操作方法：setItem，getItem，removeItem
3.浏览器的渲染机制：
1.Create/Update DOM And request css/image/js：浏览器请求HTML代码后.在生成DOM最开始的阶段(bytes->characters).并行发起css image js请求
2.Create/Updata Render CSSOM：CSS文件下载完成，开是构建CSSOM
3.Create/Updata Render Tree : 所有CSS文件下载完成后，CSS构建结束，和DOM一起生成Render Tree
4.Layout：通过Render Tree 浏览器已经知道网页有哪些节点，各个节点CSS定义以及他们的从属关系，计算出每个节点屏幕中的位置
5.Painting：根据Layout，按照算出来的规则，通过显卡，把内容画到屏幕上
以上五个步骤，前三步都有Create/Updata是因为DOM，CSSOM，Render Tree可能在第一次Painting后多次更新，比如JS修改了DOM，CSS
Layout和Painting也会被重复执行，除了DOM，CSSOM更新原因外，图片下载完成后也需要调用Layout和Painting来更新网页
4.如何清除浮动？
1.在父级元素内容里添加一个p标签。p标签里面添加p{ clear：both } 因为p标签可以看到上面的浮动元素 而wrapper看不到里面的浮动元素
2.添加伪元素，即便没有内容也要加content属性。display改为block。 在父级上加一个clear。(ie6 ie7清除浮动)触发haslayout即可和bfc一样 *zoom：1;
ie6为_zoom：1;
3.触发bfc：overflow:hidden/auto;
display:inline-block/table-cell/table-caption;
position:absolute/fixed;
5.什么是react，为什么要学react？
Facebook由于不满MVC(Model View Controller 类似于一个工具箱)的复杂而开发的一款JS库, 以某种方式组织代码，使其更加可预测，构建那些数据会随时
间改变的大型应用。React不是一个MVC框架 不是用模板 响应式更新简单。
React主要原理：Virtual Dom（虚拟）
传统的web应用，操作DOM一般是直接更新的，但是我们知道DOM更新通常是比较昂贵的。React为了尽可能减少对DOM操作，提供了一种虚
拟DOM来代替DOM，一个轻量级的DOM就是React抽象出来的一个对象，通过虚拟DOM更新真实的DOM。React有一个diff算法(红黑树算法)
更新Virtual Dom并不能马上影响真实DOM，React等到时间循环结束，然后利用这个diff算法， 计算出最小的步骤更新真实DOM
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react react react-dom
优点：1）利用diff算法 计算出实际渲染dom的最少步骤，把虚拟dom和上一次的dom进行比较，仅仅将变化的部分更新到浏览器上，因为虚拟dom是内存数据
性能极高，能达到提高性能的目的
2）组件化，将UI每一个功能相对独立的模块定义成组件，将小的组件组合嵌套成打的组件，完成UI整体构建
6.CSS选择器？
1.id选择器 2.class选择器 3.标签选择器 4.通配符选择器 5.属性选择器[id]{}有id属性的标签被选择出来 6.父子选择器(派生选择器) div p {} 这里权重值相加不能
超过四层 7.直接子元素选择器div>strong 8.并列选择器 div和p标签都有一个class 使用div.class 9.分组选择器 span， div ， p{}
！important 10000
行间 1000
id 100
class 属性 伪类 10
标签 伪元素 1
通配符 0
7.ajax delay源码是什么？
delay：核心部分就是setTimeout，jquery源码里涉及到一些出列，入列的问题，自行阅读
ajax：感兴趣的可以去飞翔博客上读，这里写一些方法作为提示
Ajax两个对象：newXMLHttpRequest()，newActiveXObject(’‘Microsoft.XMLHttp’’);
对象方法：open(‘method’ , ‘url’ , ‘ture’)建立对服务器的调用，其中method参数为get和post，第三个参数是表示同步还是异步
send(data) 向服务器发送请求
setRequestHeader(‘label’, ‘value’)把指定首部设置为提供值，一般用来设置数据发送格式(‘Content-Type’ , ‘application/x-www-form-urle’)
Ajax原理：简单的说就是通过XMLHttpRequest()对象向服务器端发送异步请求，从服务器端获取数据后，用javascript来操作DOM而更新页面
Ajax流程：1).创建对象：window.XMLHttpRequest() 或者 ActiveXObject(‘Microsoft.XMlHttp’);
2).创建与服务器的连接和调用：open() , send() 其中url需要加上当前时间戳
3).实时监听对象的改变：xhr.readyState===4 && xhr.status ==200为了防止数据返回过快导致监听失效 监听一般写在open和send之间
post和get区别：get资源类型为主动或者被动（主动，数据类型为文本（文本或者二进制，数据量不超过255字符（没限制）
数据作为url一部分在浏览器地址栏中可见（不可见），数据可以在浏览器的URL历史中缓存（没缓存）
jquery源码：构建jsonp回调函数时候用到一个独一无二的函数名，jsc = now()；
ajax请求时候可能会有缓存文件，这里ts = now()，放置取浏览器的本地缓存，这两个时间戳有面试会问到

（二）
1.谈一谈面向对象
面向对象：是把构成问题事物分解成个各个对象，建立对象的目的不是为了完成一个步骤，而是为了描述某个食物在整个解决问题的步骤中的行为。
面向过程：是分析出解决问题所需要的步骤，然后用函数一步一步实现，使用时候依次调用
面向对象的三个基本特征：封装，继承，多态
封装：把客观事物分装成抽象的类，把自己的数据和方法只让可信的类或者对象操作，封装保持了程序良好的独立性，使程序维护容易
继承：指让某个类型的对象获得另一个类型的对象的属性和方法，继承性很好的解决了软件的可重用性
多态性：一个相同实例的方法在不同情形有不同表现形式，针对不同对象的具体操作不同，但是通过一个公共类，那些操作可以通过相
同方式予以调用
2.一个页面如何看出来是html5还是html4的？
文档申明：第一行如果是：就是html5，否则不是
3.数组的深度克隆？
arr.concat()：连接两个或者多个数组
4.h5音乐播放器如何兼容手机不通尺寸？

meta标签属性：name：用于描述页面 参数：keywords（关键字），description（描述内容），viewport（移动端视口），以及generator（网页制作软
件），author（作者），robots（搜索引擎爬虫索引方式），renderer（双核浏览器渲染方式）copyright（版权）等等
http-equiv：相当于http文件头作用 参数：content-Type（设置字符集），X-UA-Compatible（采取何种版本渲染的当前页面）
expires（文件到期日期），refresh（自动更新），set-Cookie（cookie设定）
5.js封装过的一些函数？
1).遍历元素节点树 retChild()：childNodes遍历所有子节点，查看其所有子节点的nodeType是否为1，为1调用hasChildNodes()检测是否他有子节点，递归
2).返回e的第n层父节点：n为0直接返回该元素，遍历每一层元素，ele = ele.parentNodes 最后return e
3).返回e的第n个兄弟元素节点，n为正，返回后面的兄弟节点，n为正，返回前面的，n为0，返回自己：
n > 0 : while(e&&n!=0) -> if(n > 0) -> if(e.nextElementSibling) -> e = e.nextElementSibling(ie加一条nodeType = 1的判断 e = e.nextSibling)
n-- 最后 return e
n < 0 : nextElementSibiling 换成 previousElement n++ 最后return e if(n ===0){return e}
4).实现children功能：Element.prototype上编程 childNodes找到所有子节点，定义一个obj，里面定义push方法（Array.prototype.push）遍历所有子节点
如果nodeType=1 把该节点push到obj 最后返回obj
5).封装是否含有元素子节点的方法:Element.prototype上编程 childNodes找到所有子节点 遍历一边查看nodeType是否为1 是就返回true 否则false
6).获取元素样式：getStyle(obj, prop, fake) obj.currentStyleprop window.getComputedStyle(obj,fake)[prop] fake参数为true和false(伪元素)
7).查看元素几何尺寸：getBoundingClientRect();
6.jquery和js原生那个用的多？ 熟悉什么说什么
7.this?
ele.onclick = function(){
setTimeout(function(){
alert(this)
},1000)
}
这里的this默认指向window 谁调用指向谁
call(obj, 1, 2)；
apply(obj, [1 , 2])；都可以改变this指向，call参数一个一个传，apply是数组形式传
new操作符也会改变this指向：new关键词会创建一个空对象，自动调用apply方法，将this指向这个空对象，这样函数内部的this会被这个空对象替代
8.事件冒泡和事件捕获？IE下的捕获？：
事件冒泡：子元素冒泡向父元素，结构自底向上。focus，blue，change，submit，reset，select等方法没有冒泡
事件捕获：父元素捕获至子元素，结构上自顶向下，addEventListener最后一个参数填true时，捕获开启，开启捕获后就不会冒泡了 顺序是先捕获后冒泡
IE上有一个类似捕获的方法：domEle.setCapture();调用方法后 页面后续操作全部归于domEle上，调用releaseCapture()来释放捕获
取消冒泡：e.stopPropegation(）w3c标准方法 event.cancelBubble = true IE方法
取消默认事件：preventDefalut(），returnValue = false IE方法 a标签中协议限定符www.baidu.com同理
9.事件委托和事件源对象？
事件委托：在父级上绑定addEventListener事件，由于冒泡，子元素会调用父元素方法，称为事件委托
event.target() 火狐方法，event.srcElement() IE方法，事件委托优点不需要循环所有子节点绑定事件，有新的子元素添加不需要重新绑定
事件源对象：时间冒泡之后，哪一个对象触发了该事件，这个对象就是事件源对象
10.集中跨域？就是跨域，详情见飞翔博客（三十一）
1).Flash：很久之前的方法 不做考虑
2).服务器代理中转：服务器不受同源策略的影响，把所有资源放在服务器上，让后让服务器上的网页获取这些资源
3).iframe+document.domain：主域相同，子域不同的情况下使用。页面的domain默认值等于window.location.hostname，缺点：一个网页被攻击
另外一个站点就会引起安全漏洞，操作繁琐一个页面引入多个iframe，并且他们必须都设置相同的domain
4).iframe+location.hash：利用location.hash来传值，改变hash不会刷新页面，
缺点：数据直接暴露在url中，数据长度和类型都有限制
5).iframe+window.name：和location.hash方法差不多，主页面有一个iframe，通过修改
6).HTML5中postMessage：h5中有一种功能就是跨文档消息传输 getMessageHTML.postMessage(message,targetOrigin);
getMessageHTML是我们对于谣接受信息的页面引用，可以是iframe的contentWindow，window.open的返回值
targetOrigin是用于限制getMessageHTML的 填*的时候不做限制
7).Jsonp：原理：Web页面上调用js文件不收跨域影响，凡是具有src属性标签都不受同源策略的影响，正是这个特性，我们把资源放到script标签里的
src里面，把数据放到服务器上，并且是json形式（js很容易操作json）
script标签中src属性的格式是’url+参数’，比如 url？cd=doJSON，cd是我们和后台协商好的类似于形参的东西，是一个留给我们写处理函数
接口，doJSON就是我们事先定义好的函数，也就是回调函数，所有数据会以参数的形式传递给该函数
json是一种数据格式，jsonp是一种约定俗成的非正式传输协议
11.使用的jsonp是封装的还是jq的？
jq里操作jsonp的语句为 jsonp:’‘callback’’//传递给请求处理程序或者页面的，用以获得jsonp回调函数名作为参数一般默认callback
jsonpcallback:’‘handler’’//自定义jsonp回调函数名，默认为jq自动生成的随机函数名，也可以写’？’,jq自动为你处理
success:function(json){alert（’‘json.xxx’’）}
如果不写处理函数handler，也可以运行成功，因为jq在处理jsonp形式的ajax时候，自动生成回调函数并把数据取出来供
success属性方法调用
12.除css3外的盒模型?
盒模型有margin部分，而盒子不算margin部分
1).w3c标准盒模型：盒子大小是width+padding+border，width不包含padding和border
2).IE混杂盒模型：盒子大小是width-padding-border，width包含padding和border
弹性盒子：给父级设置display:flex，父元素就变成一个弹性盒子 flex是一个复合属性包括flex-grow，flex-shrink，flex-basis
容器上的属性：flex-direction：row | row-reverse | column | column-reverse 即项目排列方向
flex-wrap：nowrap | wrap | wrap-reverse 定义如何换行
flex-flow：为前两个的简写形式，值有两个 中间空格分割
justify-content：flex-start | flex -end | center | space-between | space-around 在主轴上的对齐方式
align-items：flex-start | flex-end | center | baseline | stretch 在交叉轴上如何对齐
项目上的属性：order：排列顺序 数值越小越靠前
flex-grow：放大比例 默认为了0 空间过大 也不填充
flex-shrink：缩小比例 默认为1 空间不足自动缩小
flex-basis：计算主轴是否有多余空间，如果设置成xxxpx，则项目占据固定空间
flex：上面三个的简写 默认值 0 1 auto

13.经常浏览的博客？
阮一峰，廖雪峰，追梦子，刘飞翔

（三）百度
1.盒模型 box-sizing？
见（二）-12
2.react + redux?
见（一）-5

3.position？
absolute：绝对定位，相对于最近有定位的父级进行定位，没有就相对于浏览器定位
relative：相对定位，保留原来位置，相对于最近有定位的父级进行定位
fixed：相对于视口进行定位
static：默认值
center：以定位祖先元素中心点为参考，在其容奇中垂直水平居中
page：
sticky：relactive和fixed的合体，滚动到屏幕外表现如fixed
4.rem?
px：相对长度单位，px是相对于显示器屏幕分辨率而言
em：相对长度单位，相对于当前对象的文本字体尺寸，未被设置则相对于浏览器默认字体尺寸，em会继承父级字体大小
rem为元素设定字体大小时，仍然是相对大小，相对的是html根元素 一般html的font-size：62.5% = 10px 一般为了方便计算 其他方法和em一样用
5.amd cmd commonJS?
都是为了js加载模块而生，使得加载模块时能够更好的组织和管理
amd：可以实现异步加载依赖模块，并且会提前加载 ，和CommonJS基本一样，amd调换一下调用方法也可以实现同步加载，在requestJS在推广产生的
define（id？，dependenices？，factory）；第一个参数表示模块标识，第二个参数当前模块的依赖，第三个参数需要进行实例化的方法或对象
cmd：cmd标准更倾向于在使用中的依赖，seajs推广时候产出的，cmd中一个模块就是一个文件格式就是define（factory）
require作为第一个参数，用来获取其他模块提供的接口
export作为第二个参数，又来向外提供模块接口
module第三个参数，存储了当前模块相关联的属性方法 moudle.id 作为模块的唯一标识 module,uri 模块的绝对路径 module.exports 模块接口
区别：对于依赖的模块,AMD提前执行，CMD是延迟执行
AMD依赖前置，CMD依赖就近
AMD的API一个当多个用，CMD职责单一
6.css3 三列布局？
flex布局：左侧部分 order:-1；flex : 0 0 200px，中间部分 flex:1 自动填充，右侧部分 flex:0 0 200px;
column：把count设置为3 也可以实现三栏布局，类似于报纸
其他方法：
绝对定位：左右两侧position定位，中间部分margin-left 和 margin-right都设为左右栏的宽
负外边距：所有元素float：left，左侧元素 margin-left：-100%，中间元素 margin：0 200px，右侧元素 margin-left：-200px;
7.闭包？
一个新函数的作用域上保存着对原本函数作用域的引用，进而产生了闭包
解决闭包方法：立即执行函数
8.原性链？
原型是function对象的一个属性，他定义了构造函数构造出来的对象的公共祖先，通过构造函数产生对象可以继承该原型的属性和方法，原型也是对象
构造函数创建对象时候隐式创建this对象，this中一个默认属性叫做_proto_，这个属性就是指向对象的原型
原型上还有原型的结构叫原性链，绝大部分原型都继承自Object.prototype即为原性链上的终点 object.create(null)可以构造没有原型的对象
继承：构造函数直接继承：通过祖父构造出父亲，父亲构造出儿子，这样的方法继承太多没用的属性方法
共享原性：a.prototype = b.prototype 无法改变儿子的原型，要改两个都改了
圣杯模式：中间引入F来沟通P和C 五句话
function F (){} ，F.prototype = P.prototype，C.prototype = new F()，C.prototype.constructor = C ，C.prototype,uber = P
9.es6 promise 浏览器不兼容es6怎么办？
下载babel 可以把ES6语法翻译成ES5
promise：
10.响应式布局？
iphone4以上使用了retina屏，分辨率极高但屏幕较小，在这样笑的物理显示界面打开一个页面，再用极高的分辨率来显示，导致所有元素小的可怜，所以
采取响应式布局
媒体查询语法：@media screen and (max-width: 768px){在里面添加文字等样式，文字以rem配合作为单位}，同时再head标签里写上meta一大串
11.数组去重？
遍历数组中的所有值，如果对象里没有名为这个值的属性，把数组的这个值当成属性名添加到对象里，值赋为1，最后return arr
12.call，apply？
（一）-2
13.本地存储 cookie localstrage sessionstroage？
（二）-7

（四）
1.自我介绍？
2.react的作用优点，和vue的区别？
3.为什么用webpack？
4.盒模型？
5.position？
6.rem？
7.取消事件冒泡？
8.绑定事件？
9.git从远端仓库获取和存放数据？
10.清除浮动 ：after这个方法从哪里来的？
11.ajax？
12.jsonp？
13.三列布局有哪些方法？
14.移动端怎么判断左划右划？
15.zepto？
简化版的Jquery，
16.less优点，与sass区别？
17.快速排序？
18.http返回代码有那些意思?

（五）
1.说一下css选择器的优先级(百度)？
2.说一下position都有哪些，并详细的说说他们之间的区别？
3.如果position设置成absolute属性该元素的display属性会变成什么？
4.把一个元素设置float属性他会产生浮动，说说怎么去除浮动？
5.说说触发bfc的几种方式？
6.为什么给父级元素设置overflow属性会去除浮动，具体说说内部机制？
7.说说常见的将元素垂直水平居中的方法？
8.关于伪元素你了解多少，请说出五个常用的伪元素，那么伪类呢？也请说出五个常用的伪类？
9.如果我想向父级元素插入子元素都有什么办法？
10.请封装一下insertafter方法？
11.你了解给元素绑定事件和解绑事件么，如果了解请封装兼容性的绑定事件？
12.关于变量有基本值和引用值你知道么？ 都哪些是基本值，那些是引用值 他们的存储方式是怎样的？
13.如何将数组去重说说你的思路？
14.编程我们一般喜欢面向对象，说说你对面向对象的理解吧？
15.setInterval的内部指针指向哪里(setInterval无论怎样this都指向window，强制改变this指向会导致定时器无效)？
16.网络的都有哪些基本层 各层的的协议都是什么 各层的数据传输是怎样的？
17.http数据不是百分百准确的，如果数据发生错误该怎么解决？
18.说一下AJAX？
19.跨域都有什么方法？
20.说说webpack优点？
21.说说react的优点和生命周期？

（六）
1.position？
2.数组常见的方法？
h4: reverse() : 数组倒序
sort() : 数组乱序
push() : 在数组最后一位添加数据
pop() : 删除数组最后一位数据
shift() : 删除数组第一位数据
unshift() : 在数组第一位添加数据
concat() : 拼接两个数组(也可以克隆) 返回的是一个以逗号相隔的数组 [1,2],[2,3],[1,2,3,4]
splice(1，2，3) ; 剪切 第一个参数指从第几位开始 第二个参数指剪切的长度 第三个参数指剪切进去的数组
h5: forEach() : 让数组从头到尾遍历一边 改变原数组
map() : 遍历一边返回一个值 不改变原数组
filter() : 过滤 数组中每一个元素都会调用一次 根据里面定义的方法 返回ture的元素添加到一个新数组里 返回出来
every() : 如果每一个元素经过方法返回的都是true 最后返回true
some() : 如果一些元素经过方法返回true 最后返回true
reduce() reduceRight() : 将数组元素进行组合 有两个参数 第一个参数是方法 第二个参数是初值 参数中数组只有一个元素没有初值返回该值 有一个空数组并给定一个初值，返回初值 都不会调用函数
3.字符串常见的方法？
4.封装过的函数？
5.浏览器可能出现的bug？
6.html5的一些方法？
7.ajax和七种跨域？
8.css3？

================================
// 性能优化
前端优化的途径有很多，大致可以分为两类：页面级优化和代码级优化。

    页面级优化有减少HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等等。

    代码级优化有Js种DOM操作优化、Css选择符优化、图片优化以及HTML结构优化等等。

1.页面级优化
2.代码级优化

//页面级优化:
//<----1.减少HTTP请求数 (最重要最有效)----->
一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个漫长而复杂的过程。
由于浏览器进行并发请求的请求数都是有上限的，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，
会给用户造成网站速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条一直在加载。

       // 减少HTTP请求数的途径主要有一下几个：

            /（1）从设计实现层面简化页面

            如果我么你的页面和百度搜索的页面一眼简单，那么也就不需要什么优化操作了。因此保持页面简洁、减少资源的使用是最直接的。

            /（2）合理设置HTTP缓存

            缓存的力量是强大的，恰当的设置缓存可以大大减少HTTP请求
            怎样才算是合理的设置？原则很简单：能缓存越多越久越好。
            例如：很少变化的图片资源就可以直接通过HTTP Header中的Expires设置一个很长的过期头；
            变化不频繁而又可能会变的资源可以使用Last-Modified来做请求验证。尽可能的让资源能够在缓存中待的更久。

            /（3）资源合并与压缩

            如果可以的话，尽可能的将外部脚本、样式进行合并，尽可能地合并为一个。另外，CSS、Js、Image都可以用相应的工具
            进行压缩，压缩后往往能节省不少空间。或者使用Webpack等前端工程化工具来进行代码的压缩和去重。

            /（4）CSS Sprites 雪碧图

            雪碧图又叫做精灵图，我们可以把网站中需要用到的一些icon，全部放到一个图片资源中，然后通过改变位置来
            获取需要的图片，这样合并CSS图片，就可以大幅度减少HTTP请求数了。

           / (5). Inline Images
        　　使用 data: URL scheme的方式将图片嵌入到页面或 CSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。
            如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。使用在 CSS中的图片则更为理想一些。

           / (6). Lazy Load Images（自己对这一块的内容还是不了解） 懒加载

这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。
对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，
假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
有啊首页 曾经的做法是在加载的时候把第一屏之后的图片地址缓存在 Textarea标签中，待用户往下滚屏的时候才 “惰性” 加载。

            /（6）瀑布流

            其实懒加载并不能减少HTTP请求数，他只是可以减少页面刚加载的时候的HTTP请求数，总数是不变的。
            对于图片而言，在页面刚加载的时候可能只加载第一屏的图片，随着用户的滚动才会继续加载后面的图片资源，
            这种瀑布流的加载方式就可以有效提高性能。

   // 2.将外部脚本放在底部
        前文有谈到，浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，
        例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。
        如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，
        在 这里有比较详细的介绍 (这里是译文和 更详细的例子 )，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

   // 3.并发执行inline脚本
        使用 script元素的defer 属性(存在兼容性问题和其他一些问题，例如不能使用 document.write)、使用setTimeout ，此外，
        在HTML5中引入了 Web Workers的机制，恰恰可以解决此类问题。

   // 4.懒加载
        只需要在需要资源的时候才加载资源，不需要的时候就不加载资源。

    // 5. 将 CSS放在 HEAD中

如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，
用户体验比较糟糕。除此之外，有些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

           / Js 与 css 懒加载
            把js放到整个页面的底部， 另一个方法是在script 标签上加一个 defer属性 保证让浏览器把脚本下载出来后，
            然后等到页面渲染完毕再执行。（参考权威指南 js时间线）
            Css文件用link标签加载 是阻塞状态的，我们可以使用loadCss 小工具库来进行异步css文件加载，但是有一个问题是
            ，全部异步加载css ，页面最开始呈现出的只是单纯的html ,不是很好看 所以我们要选定一个关键的css文件，
             用critical 工具来自动提取压缩关键的css. （百度自行查看使用方法）


   // 8.减少不必要的HTTP跳转

        对于以目录形式访问的HTTP链接，很多人都会忽略链接最后是否带’/’，加入你的服务器对此区别对待的话，那么你也需要注意了，
        这其中很可能隐藏了301跳转，增加了多余请求。

   // 9.避免重复的资源请求

    这种情况主要是由于在模块化开发时，我们的不同模块之间可能有相同的部分，导致资源的重复请求。

二、代码级优化

 //1.DOM

    DOM操作应该是脚本中最耗性能的一类操作
/（1）HTMLCollection（HTML收集器，返回的是一个数组的内容信息）
    因为是这个集合并不是一个静态的集合，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个 查询从而更新查询结果。
    所谓的“访问集合”包括读取集合的length属性、访问集合中的元素。

/（2）Reflow&Repaint
    减少页面的重绘和重排。

//2.慎用with
    with会改变作用域链，有可能导致我们的作用域链变长，导致查询性能下降。

//3.避免使用eval和Function
    每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作
    —— 通常比简单的函数调用慢 100倍以上。

// 4.减少作用域链查找
如果在循环中需要访问非本作用域下的变量的时候，请遍历之前用局部变量缓存的变量，并在遍历结束之后重写这个缓存变量

//5.数据访问

    js中对直接量和局部变量的访问时最快的，对对象属性以及数组的访问需要更大的开销，当出现下面的情况的时候，建议将数据放入局部变量：

    /（1）对任何对象属性的访问超过1次

    /（2）对任何数组成员的访问次数超过1次

    另外，要尽可能的减少对对象以及数组的深度查找。

//6.字符串拼接

    字符串的拼接尽可能少的使用“+”，这种方式的效率是十分低下的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接的结果赋
    值给新变量。

    建议使用的是先转化为数组，然后通过数组的join方法来连接成字符串。不过由于数组也有一定的开销，因此就需要权衡一下，当拼接的字符串比
    较少的时候，可以考虑用“+”的方式，比较多的时候就需要考虑用数组的join方法了。

+++++++++++重绘重排++++++++++++++++++++
重绘和重排:

页面有三个树：DOMTree、CSSTree、renderTree。（实际上多于三个），renderTree上有两个规则：repaint和reflow，重绘和重排。

repaint是元素自身的位置和宽高不变，只改变颜色的之类的属性而不会导致后面的元素位置的变化的时候，renderTree发生的动作。

reflow是元素自身的位置或者宽高改变了从而导致的整个页面的大范围移动的时候，renderTree发生的动作。

所以我们在DOM操作的时候，要尽量避免重排。

==========================
//1.你了解移动端适配问题嘛 yddsp=========

1.meta标签
2.rem vw vh
3.弹性盒子

meta viewport 中有6个通用属性：

width 设置layout viewport的宽度 正整数或字符串 'width-device'
initial-scale 设置页面的初始缩放值，数字或小数
minimum-scale 允许用户的最小缩放值 数字或小数
maximum-scale 允许用户的最大缩放值 数字或小数
height 设置layout viewport 的高度，这个属性很少用到
user-scaleabel 是否允许用户进行缩放 'no'或‘yes’ 还有2个需要特别注意的两个属性

2.
是以document.documentElement(即html标签)的font-size为基准的，举例说明：

html的font-size：10px
那么1rem = 10px

vw: 将视口宽度分成100份 width：100vw 表示铺满视口宽度
vh： 将视口高度分成100份..................

3.“弹性盒子”

这是我认为css3中最重要的一部分。我们在移动端开发的时候，由于手机的大小都各不相同，
所以我们的元素不能定宽，要用弹性盒子来按照百分比分配元素的宽度。
我们给父级的display设置成flex之后，就让父元素变成了一个弹性盒子，里面的子元素都可以使用flex属性了。
这个时候，所有的元素会自动变成一行，因为加上display：flex之后还会默认加上一个flex-wrap：nowrap，即不换行，
这个时候如果子元素的总宽度大于父元素的宽度，就会压缩子元素，让它们可以在父级容器中排成一行。
如果改成wrap值，那么超过容器的宽度之后就会换行了。

flex属性是一个复合属性,它包括flex-grow、flex-shrink、flex-basis
flex-grow: 按比例分配剩余空间。
flex-shrink:设置收缩比例，多出盒子的部分按照比例的大小去掉相应的大小，比例越大，削减的越多
flex-basis:伸缩基准值。该属性设置元素的宽度，如果同时出现了width和该属性，那么会覆盖掉width属性的值。
           子元素的宽度尽可能按照basis来，如果基准值相加大于容器的宽度，那么由下面的公式分配宽度给子元素：
           basis/(basis的总和) * 容器的宽度
justify-content:center  align-items:center
         这两个属性同时在父级中设置的时候，会让子元素在父级中水平垂直居中，
         其中justify-content是设置水平方向，align-item是设置垂直方向。

      /注意:flexbox布局和原来的布局是两个概念，部分css属性在flexbox盒子里面不起作用，eg：float， clear， column,vertical-align 等等

//2.媒体查询 mtcx====================
媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。
Media Queries（媒体查询）是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。
作为CSS3规范的一部分，媒体查询扩展了media属性

1.设置Meta标签
  首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
2.引入方式
    <Link media="screen"></Link>
    @import URL（） screen
    @media
3."Media所有参数汇总"
    以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：
    width:浏览器可视宽度。
    height:浏览器可视高度。
    device-width:设备屏幕的宽度。
    device-height:设备屏幕的高度。
    orientation:检测设备目前处于横向还是纵向状态。
    aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
    device-aspect-ratio:检测设备的宽度和高度的比例。
    color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
    color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
    monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
    resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
    grid:检测输出的设备是网格的还是位图设备。

//3.meta 标签都有啥 metabq===============

/meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。
/这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
    meta标签共有两个属性，分别是http-equiv属性和name属性。
    1.name属性  主要用来描述网页 网页的关键词，叙述
    	有以下几种参数:
        <meta name="keywords"content="xxx"/>说明：用于告诉搜索引擎，你网页的关键字。
        <meta name="description"content="xxxx"/> 用于告诉搜索引擎，你网站的主要内容
        <meta name="viewport" content="width=device-width, initial-scale=1"/>常用于设计移动端网页
        <meta name="robots" content="none"/> 定义搜索引擎爬虫的索引方式
                说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all
                           / 1.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
                           / 2.noindex : 搜索引擎不索引此网页。
                           / 3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
                           / 4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
                           / 5.index : 搜索引擎索引此网页。
                           / 6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
        <meta name="author"content="Lxxyx,841380530@qq.com"/>说明：用于标注网页作者举例

        <meta name="renderer" content="webkit"/> //默认webkit内核
        <meta name="renderer" content="ie-comp"/> //默认IE兼容模式
        <meta name="renderer" content="ie-stand"/> //默认IE标准模
        说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面

  2.http-equiv属性 相当于http的文件头作用
        有以下几种参数:

        (设定网页字符集)(推荐使用HTML5的方式)
        <meta   http-equiv="content-Type"charset="utf-8"/>说明：用于设定网页字符集，便于浏览器解析与渲染页面
        说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
        <meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT"/>说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。
        <meta http-equiv="Set-Cookie" content="name, date"/> //格式 说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
        <meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"/> //具体范例
        <meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"/> //自动刷新并指向某页面 说明：网页将在设定的时间内，自动刷新并调向设定的网址

        cache-control(指定请求和响应遵循的缓存机制)
        用法1.
        说明：指导浏览器如何缓存某个响应以及缓存多长时间。
       举例:
       <meta http-equiv="cache-control" content="no-cache"/>
        共有以下几种用法：
           / no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
           / no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
           / public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
           / private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
           / maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
          参考链接：HTTP缓存
        /用法2.(禁止百度自动转码)
       说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。举例：

        <meta http-equiv="Cache-Control" content="no-siteapp"/>

// 4.响应式布局======

Web设计应该做到根据不同设备环境自动响应及调整。
当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，

利用媒体查询进行实现 meta标签 rem 弹性盒子
//5.=========移动端判断左划还是右划=

/ 好像说判断上下滑动只要判断页面的可视区域距离页面的顶端距离在滑动过程中是变大了还是变小了即可
/ 所以我感觉左右应该是一样的
/ 另一种想法是判断触点移动的差值

原理：
    第一，当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY；第二，当触发touchmove事件时，
     在获取此时手指的横坐标moveEndX和纵坐标moveEndY
    touchmove的最后坐标减去touchstart的起始坐标，X的结果如果正数，则说明手指是从左往右划动；X的结果如果负数，
    则说明手指是从右往左划动；Y的结果如果正数，则说明手指是从上往下划动；Y的结果如果负数，则说明手指是从下往上划动。

    这再逻辑上没有任何问题。但在实际操作中，手指的上下滑动其实是很难直上直下的，只要稍微有点斜，就会被X轴的判断先行接管。
    增加的判断，在判断横纵坐标的差值的基础上，再判断一下他俩的绝对值哪个大哪个小就可以。判断哪个的差值比较大。

======================
轮播图里面涉及到兼容性问题以及多种思路实现轮播 感觉比较有意思

1.可以通过改变left值改变div的坐标 或者直接改变div的颜色 这里是改坐标
2.平移轮播图