web前端知识点太多_web前端常见知识点
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
總結
以上是生活随笔為你收集整理的web前端知识点太多_web前端常见知识点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode 1051. 高度检查器
- 下一篇： LeetCode 933. 最近的请求次