前言
近期參加面試的伙伴比較多一些原因最近也參加了幾家公司的面試，發(fā)現(xiàn)有很多基礎性的東西掌握程度還是不夠，故此想總結(jié)一下最近面試遇到的問題，希望能為在準備面試的的小伙伴盡一些綿薄之力，主要說的是一些我面試當中問到的一些問題，說的不對的地方請小伙伴們即使指正出來，或者有其他的看法也可以一起探討。
新增了一些語義化的標簽例如：header,fotter,nav,main
新增圖像：canvas svg
新增媒體標簽： audio video
2.什么是盒模型W3C標準盒模型，屬性width,height包含content,不包含border和padding
IE盒模型，屬性width,height包含content,border,padding
3.css居中元素說一下我比較常用的的幾種
使用position布局
postion: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
使用flex布局
display: flex;
align-items: center;
justify-content: center;
知道寬高的情況下使用position布局
postion: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
主要是不同手機的dpi不同會導致這個問題。解決辦法：
看手機是否支持0.5px的邊框，并且dpi大于等于2，會用到js判斷比較復雜，這里不做實現(xiàn)。使用背景圖，修改顏色麻煩，需要換圖。圓角需要特殊處理。偽類元素加transform實現(xiàn)，個人經(jīng)常使用。
.border {
position: relative;
border:none;
}
.border:after {
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
border新增border-img, border-raius新增盒陰影box-shadow，文字陰影 text-shadowbackground新增background-image，background-size background-repeat媒體查詢
6.rem em px區(qū)別px相對長度單位，相對于顯示器屏幕分辨率來的em相對長度單位，相對于當前對象內(nèi)文本的字體尺寸來的，值不固定，會繼承父級元素字體的大小，未經(jīng)調(diào)整瀏覽器：16px = 1em。假如父元素為2em，子元素為2em字體實際大小為4emrem是css3新增的相對單位，使用rem為元素設置大小時，是相對大小，相對的是html根元素，修改根元素就可以調(diào)整所有字體大小，還可以避免字體大小逐層復合的連鎖反應，未經(jīng)調(diào)整瀏覽器：16px = 1rem。
7.詳細說下BFCBFC塊級格式上下文，是頁面上一個獨立的容器，容器內(nèi)的子元素不會影響到外邊的元素，垂直方向邊距重疊，計算高度是浮動元素也會計算BFC觸發(fā)：根元素（html），浮動元素（float不為none），絕對定位元素（position為absolute和fixed）,行內(nèi)塊元素（display為inline-block），overflow值不為visible，彈性元素（display為flex）應用場景：設置元素為BFC防止浮動高度塌陷，避免外邊距重疊8.重繪和回流
簡單的一句話就是：回流必引起重繪，重繪不會引起回流，回流比重繪更耗性能。回流：當元素的尺寸結(jié)構(gòu)和某個屬性發(fā)生改變時，瀏覽器重新渲染部分或全部文檔的過程。會發(fā)生回流的操作：瀏覽器窗口發(fā)生改變，元素位置和大小發(fā)生改變，元素內(nèi)容發(fā)生改變，對可見的dom進行添加或者刪除，查詢某些屬性或調(diào)用某些方法（clientWidth,offsetWidth, scrollWidth,scrollTo等等）重繪：改變元素的樣式不影響在文檔流的位置（color,background-color）瀏覽器把新的樣式重新賦給元素并繪制css避免：避免設置多層內(nèi)聯(lián)樣式，避免使用css表達式（ealc）,將動畫放在position的屬性上（absolute, fixed），避免使用table布局。js避免：避免重復操作樣式（定義一個class并一次修改class屬性），避免頻繁操作dom(創(chuàng)建一個documentFragment，在它上邊操作dom，最后添加的文檔中)，避免頻繁讀取引起重繪/回流的值（可以使用變量緩存）。
二、JS1.js基本類型和引用類型基本類型：Boolean Null Number String Undefined Symbol BigInt引用類型：Object
2.作用域分為：全局作用域（定義在函數(shù)外部的變量）和局部作用域（定義在函數(shù)內(nèi)部的變量），每個函數(shù)在被調(diào)用時都會創(chuàng)建一個新的域。ECMAScript 6引入了let和const關(guān)鍵字，利用let和const可以形成塊級作用域。塊語句（if, switch, for, while）不會創(chuàng)建新的作用域，定義的變量保存在已經(jīng)存在的作用域中，let和const支持在局部作用域塊語句中聲明
if (true) {
var a = 1;
let b = 2;
const c =3;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
console.log(c) // Uncaught ReferenceError: c is not defined
作用域鏈：作用域鏈是在變量對象之后創(chuàng)建的，作用域鏈用于解析變量，當變量被解析時，javascript先從代碼嵌套的最內(nèi)層開始找，如果內(nèi)層沒有找到，會轉(zhuǎn)到上一層父級作用域查找，直到找到該變量
3.閉包它允許函數(shù)訪問局部作用域之外的數(shù)據(jù)，閉包有自己的作用域鏈，父級作用域鏈和全局作用域鏈。
function a() {
var b = 3;
return function() {
console.log(b)
}
}
a()() // 3
localStorage有效期為永久，sessionStorage有效期為窗口關(guān)閉同源文檔可以修改并讀取localStorage的值，sessionStorage只允許同一個窗口下的文檔訪問用法：
localStorage.setItem('a', 1); // storge a->1
localStorage.getItem('a'); // return value of a
localStorage.removeItem('a'); // remove a
localStorage.clear(); // remove all data
cookie是瀏覽器儲存少量數(shù)據(jù)，cookie會自動在瀏覽器和服務器之間傳輸，可以通過path和domain配置，頁面同目錄和子目錄都可以訪問
document.cookie = 'a=1; path=/'; // 創(chuàng)建當前頁面的cookie
var a = document.cookie; // 讀取cookie 返回格式key=value; key1=value1;
document.cookie = 'a=2; path=/'; // 修改值，會把以前的值覆蓋
document.cookie = "a=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //刪除cookie
9k字 | Promise/async/Generator實現(xiàn)原理解析
6.宏任務和微任務首先你要知道Javascript是單線程語言，Event Loop是JavaScript的執(zhí)行機制微任務和宏任務都屬于異步任務，屬于同一個隊列，主要區(qū)別是他們執(zhí)行的順序，開始執(zhí)行宏任務的時候，宏任務執(zhí)行完畢之后會看有沒有微任務，如果有的話執(zhí)行微任務，沒有接著下一個執(zhí)行宏任務。在當前微任務沒有執(zhí)行完畢，是不會執(zhí)行下一個宏任務的，而微任務又在宏任務之前執(zhí)行
console.log(1)
setTimeout(() => {
console.log(5)
},0)
new Promise(resolve => {
resolve()
console.log(2)
}).then(() => {
console.log(4)
})
console.log(3)
// 打印出1，2，3，4，5
宏任務：setTimeout, setInterval, requestAnimationFrame微任務 Promise.then catch finally
7.節(jié)流和防抖節(jié)流：高頻事件觸發(fā)n秒內(nèi)執(zhí)行一次，如果這個時間點內(nèi)觸發(fā)多次函數(shù)，只有一次生效。
function throttle(fn) {
var flag = true
return function() {
if (!flag) return;
flag = false;
setTimeout(function () {
fn()
flag = true
}, 1000)
}
}
防抖：高頻事件觸發(fā)n秒之后執(zhí)行，如果n秒之內(nèi)再次被觸發(fā)，重新記時。
function debounce(fn) {
var timeout = null;
return function() {
clearTimeout(timeout)
timeout = setTimeout(function (){
fn()
}, 1000)
}
}
最直觀的區(qū)別get把參數(shù)包含在URL中，post通過request body傳遞參數(shù)，相對于get比較安全get請求URL傳參有長度限制，post沒有g(shù)et在瀏覽器回退是無害的，post會再次提交請求get請求會被瀏覽器主動緩存，post不會get和post報文格式不同get請求是冪等性的，而post請求不是（新增和刪除數(shù)據(jù)一般不用post請求就是這個原因）
9.Js的事件委托是什么，原理是什么通俗點說將元素事件委托給他的父級或者更外級來處理事件委托是利用冒泡機制來實現(xiàn)的（事件冒泡：事件由具體的元素接受，然后逐漸向上傳播到不具體的節(jié)點）
// 每個列表點擊彈出內(nèi)容
// 不使用事件委托需要給每個列表添加點擊事件（消耗內(nèi)存，不靈活，添加動態(tài)元素時需要重新綁定事件）這里不做介紹
<ul id="myLink">
<li id="1">aaa</li>
<li id="2">bbb</li>
<li id="3">ccc</li>
</ul>
// 使用事件委托（減少內(nèi)存占用，提升性能，動態(tài)添加元素無需重新綁定事件）
var myLink = document.getElementById('myLink');
myLink.onclick = function(e) {
var e = event || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'li') {
alert(target.id + ':' + target.innerText);
}
};
