web前端常见知识点

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;
    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级，即以属性的方式直接写在行内。一般的验证码切换就有这样的机制

<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;width: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;width: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;width:300px;background-color:pink;"
     onclick = "console.log(this)">//<div>
</div>

<div id="box" style="height:100px;width:300px;background-color:pink;"></div>
<script>
    box.onclick= function(){
        console.log(this);//<div>
    }
</script>

<div id="box" style="height:100px;width:300px;background-color:pink;"></div>
<script>
    box.addEventListener('click',function(){
        console.log(this);//<div>
    });
</script>

<div id="box" style="height:100px;width: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

vuex原理 https://www.jianshu.com/p/d95a7b8afa06

posted @ 2020-03-03 21:51 破晓儿阅读(654) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

破晓儿

web前端常见知识点

css

table布局的缺点

js

http

http 1/2的介绍

公告