泉州网站制作哪个好微,国际新闻稿件,无锡微网站开发,推荐几个安全免费的网站csstable布局的缺点1、Table要比其它html标记占更多的字节。(延迟下载时间#xff0c;占用服务器更多的流量资源。)2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度#xff0c;让用户等待更久的时间。)3、Table里显示图片时需要你把单个、有逻辑性的图片切成…csstable布局的缺点1、Table要比其它html标记占更多的字节。(延迟下载时间占用服务器更多的流量资源。)2、Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度让用户等待更久的时间。)3、Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度增加页面加载时间增加HTTP会话数。)4、在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦。)5、Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)(这会限制你页面设计的自由性。)flex布局flex-grow和flex-shrink1、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 5002、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;}整行缺少宽度 200200100-400100a的占比是200*1b的占比是200*1c的占比是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事件类型绑定的处理函数)。这里就有一个问题无法允许团队不同人员对同一元素监听同一事件但做出不用的响应。这是事件机制学习vardivdocument.getElementById(event);//甲程序猿div.οnclickfunction(){console.log(甲要红背景);div.setAttribute(style,background: #ff0000);};//乙程序猿div.οnclickfunction(){console.log(乙要黄背景);div.setAttribute(style,background: #ffff00);};这里面出现的问题无法给同一个元素绑定多个相同的事件然而在web开发中这个是非常普遍的一个应用。3、DOM2级对主流浏览器来说使用addEventListener和removeListener方法它们都接受3个参数要处理的事件名、作为事件处理程序的函数和一个布尔值。最后的布尔值参数如果是true表示在捕获阶段调用事件处理程序如果是false表示在冒泡阶段调用事件处理程序。若最后的布尔值不填写则和false效果一样。这里它支持同一dom元素注册多个同种事件还有新增了捕获和冒泡的概念。这是事件机制学习vardivdocument.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 divdocument.getElementById(event);functionreponseCode(){console.log(这是封装的绑定事件);}//事件的绑定机制functionaddHandle(obj, type, handle){if(obj.addEventListener){obj.addEventListener(type, handlefalse);}else if(obj.attachEvent){obj.attachEvent(ontype, function(event) {returnhandler.call(target, event);});}else{obj[ontype]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而非被绑定事件的元素。httphttp 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同名的执行顺序computerpropsdatamethod
