css
table布局的缺点
1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)
2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)
3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)
5、Table会影响其内部的某些布局属性的生效(比如
里的元素的height:100%)(这会限制你页面设计的自由性。)flex布局
flex-grow和flex-shrink
1、flex-grow(默认0)：当子元素没设置width时，子元素会按比例平分父元素设置的宽度，当子元素设置了width，如
ul{display:flex;justify-content:space-between;width:1000px;
}.a{width:200px;background:aquamarine;flex-grow:1;
}.b{background:azure;width:200px;flex-grow:1;
}.c{background:red;width:100px;flex-grow:8;
}
则将计算剩余的宽度也就是500px，按flex-grow的比例分给子元素得出a b c 的宽度分别为250 250 500；
2、flex-shrink(默认1)：shrink的计算跟grow有所不同，他的计算是将width*flex-grow一起；
ul{
display: flex;
justify-content: space-between;
width: 400px;
}
.a{
width: 200px;
background: aquamarine;
flex-shrink: 1;
}
.b{
background: azure;
width: 200px;
flex-shrink: 1;
}
.c{
background: red;
width: 100px;
flex-shrink: 4;
}
整行缺少宽度 200+200+100-400=100；a的占比是200*1，b的占比是200*1，c的占比是100*4，分别是 1 1 2，所以最终a b c 的宽度分别是175 175 50，如果父元素由400缩小到300，则a b c 分别是 150 150 0.但当c中如果有文字撑开则另算
js
事件的绑定方式
1、DOM0级，即以属性的方式直接写在行内。一般的验证码切换就有这样的机制
2、第二种方式：DOM1级，给元素添加属性(例：onclick)，属性的值就是一个具体的函数(click事件类型绑定的处理函数)。这里就有一个问题，无法允许团队不同人员对同一元素监听同一事件但做出不用的响应。
这是事件机制学习
vardiv=document.getElementById('event');//甲程序猿
div.οnclick=function(){
console.log('甲要红背景');
div.setAttribute('style','background: #ff0000');
};//乙程序猿
div.οnclick=function(){
console.log('乙要黄背景');
div.setAttribute('style','background: #ffff00');
};
这里面出现的问题：无法给同一个元素绑定多个相同的事件，然而在web开发中，这个是非常普遍的一个应用。
3、DOM2级，对主流浏览器来说，使用addEventListener和removeListener方法，它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。若最后的布尔值不填写，则和false效果一样。这里它支持同一dom元素注册多个同种事件，还有新增了捕获和冒泡的概念。
这是事件机制学习
vardiv=document.getElementById('event');
div.addEventListener('click',function(){
console.log('这是DOM2级，甲绑定事件的的响应');
});
div.addEventListener('click',function(){
console.log('这是DOM2级，乙绑定事件的的响应');
});
它也有问题：兼容性，IE8对此自定义了两个自己的方法attachEvent和detachEvent方法。同时，需要注意IE在这里是‘onclick’。
div.attachEvent('onclick', function(){
console.log('这是DOM2级，IE绑定事件的的响应');
});
那么为了保持浏览器兼容性问题，我们还需要自己封装一个简单的函数去实现事件的绑定。同时，由于attachEvent()方法中的this指向window(下面会有说明)，所以需要对this进行显式修改。
var div=document.getElementById('event');functionreponseCode(){
console.log('这是封装的绑定事件');
}//事件的绑定机制
functionaddHandle(obj, type, handle){if(obj.addEventListener){
obj.addEventListener(type, handle，false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type, function(event) {returnhandler.call(target, event);
});
}else{
obj['on'+type]=handle;
}
}
addHandle(div,'click', reponseCode);
移除事件绑定：通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。这意味着，addEventListener()添加的匿名函数将无法移除。同理attachEvent()和detachEvent();
无效代码：
box.removeEventListener('click',function(){this.innerHTML+= '1'},false);
有效代码：
varhandle= function(){this.innerHTML+= '1'};
box.addEventListener("click",handle,false);
box.removeEventListener('click',handle,false);
说完上面绑定事件的几种方式，这里还要指出一点，即事件处理程序中的this所指
//
console.log(this);//
}
console.log(this);//
});
console.log(this);//window
});
与其他三个事件处理程序不同，IE事件处理程序的this指向window，而非被绑定事件的元素。
http
http 1/2的介绍
在 HTTP/1 中，每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：
第一个：串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。(注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输)
第二个：连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。
HTTP/2的多路复用就是为了解决上述的两个性能问题。
在 HTTP/2 中，有两个非常重要的概念，分别是帧(frame)和流(stream)。
帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。
多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。
vue
同名的执行顺序
computer，props，data，method
)
