css
table布局的缺点
1、Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)
2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)
3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)
5、Table会影响其内部的某些布局属性的生效(比如<td>里的元素的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;
400px;
}
.a{
200px;
background: aquamarine;
flex-shrink: 1;
}
.b{
background: azure;
200px;
flex-shrink: 1;
}
.c{
background: red;
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级，即以属性的方式直接写在行内。一般的验证码切换就有这样的机制
<a href="#" id="dom0" onclick="changeCaptcha();">
2、第二种方式：DOM1级，给元素添加属性（例：onclick），属性的值就是一个具体的函数（click事件类型绑定的处理函数）。这里就有一个问题，无法允许团队不同人员对同一元素监听同一事件但做出不用的响应。
<body> <div id="event">这是事件机制学习</div> <script> var div=document.getElementById('event'); // 甲程序猿 div.onclick=function(){ console.log('甲要红背景'); div.setAttribute('style', 'background: #ff0000'); }; // 乙程序猿 div.onclick=function(){ console.log('乙要黄背景'); div.setAttribute('style', 'background: #ffff00'); }; </script> </body>
这里面出现的问题：无法给同一个元素绑定多个相同的事件，然而在web开发中，这个是非常普遍的一个应用。
3、DOM2级，对主流浏览器来说，使用addEventListener和removeListener方法，它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。若最后的布尔值不填写，则和false效果一样。这里它支持同一dom元素注册多个同种事件，还有新增了捕获和冒泡的概念。
<body> <div id="event">这是事件机制学习</div> <script> var div=document.getElementById('event'); div.addEventListener('click', function(){ console.log('这是DOM2级，甲绑定事件的的响应'); }); div.addEventListener('click', function(){ console.log('这是DOM2级，乙绑定事件的的响应'); }); </script> </body>
它也有问题：兼容性，IE8对此自定义了两个自己的方法attachEvent和detachEvent方法。同时，需要注意IE在这里是‘onclick’。
div.attachEvent('onclick', function(){
console.log('这是DOM2级，IE绑定事件的的响应');
});
那么为了保持浏览器兼容性问题，我们还需要自己封装一个简单的函数去实现事件的绑定。同时，由于attachEvent()方法中的this指向window(下面会有说明)，所以需要对this进行显式修改。
<body>
<div id="event">这是事件机制学习</div>
<script>
var div=document.getElementById('event');
function reponseCode(){
console.log('这是封装的绑定事件');
}
// 事件的绑定机制
function addHandle(obj, type, handle){
if(obj.addEventListener){
obj.addEventListener(type, handle，false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type, function(event) {
return handler.call(target, event);
});
}else{
obj['on'+type]=handle;
}
}
addHandle(div, 'click', reponseCode);
</script>
</body>
移除事件绑定：通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序时使用的参数相同。这意味着，addEventListener()添加的匿名函数将无法移除。同理attachEvent()和detachEvent();
无效代码：
<div id="box" style="height:30px;200px;background-color:pink;"></div> <script> box.addEventListener("click",function(){ this.innerHTML += '1' },false); box.removeEventListener('click',function(){ this.innerHTML += '1' },false); </script>
有效代码：
<div id="box" style="height:30px;200px;background-color:pink;"></div> <script> var handle = function(){ this.innerHTML += '1' }; box.addEventListener("click",handle,false); box.removeEventListener('click',handle,false); </script>
说完上面绑定事件的几种方式，这里还要指出一点，即事件处理程序中的this所指
<div id="box" style="height:100px;300px;background-color:pink;" onclick = "console.log(this)">//<div> </div> <div id="box" style="height:100px;300px;background-color:pink;"></div> <script> box.onclick= function(){ console.log(this);//<div> } </script> <div id="box" style="height:100px;300px;background-color:pink;"></div> <script> box.addEventListener('click',function(){ console.log(this);//<div> }); </script> <div id="box" style="height:100px;300px;background-color:pink;"></div> <script> box.attachEvent('onclick',function(){ console.log(this);//window }); </script>
与其他三个事件处理程序不同，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 旧版本中的队头阻塞问题，极大的提高传输性能。
单页面应用中index.html的缓存问题 https://blog.csdn.net/slw632915651/article/details/89520845?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
vue
vue diff算法浅析https://segmentfault.com/a/1190000018342558#item-2
同名的执行顺序
computer，props，data，method