HTML
一募逞、BFC 塊級格式化上下文：里面的元素不會影響外面的元素。
- 一個BFC區(qū)域只包含其子元素娜膘，不包括子元素的子元素
- BFC區(qū)域需要一定的條件:該元素設(shè)置浮動腕够、定位级乍、彈性布局等
- 不同的BFC區(qū)域之間是相互獨(dú)立的
二、移動端點(diǎn)擊300ms延遲
- fastclick插件：是在檢測到touchend事件的時候帚湘，會通過DOM自定義事件立即出發(fā)模擬一個click事件玫荣，并把瀏覽器在300ms之后的click事件阻止掉。ios會首次觸發(fā)不生效客们、需要二次觸發(fā)
- touchStart配合touchend，記錄的值進(jìn)行對比判斷
三材诽、meta viewport 為了防止用戶縮放前端頁面-適配移動端頁面底挫、 meta元數(shù)據(jù)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />
四、@import 和link引入 css
- @import先加載HTML脸侥、后加載CSS
- link先加載CSS建邓、后加載HTML rel="stylesheet" 連接的類型 樣式表
五、src和href的區(qū)別
- href指定網(wǎng)絡(luò)資源的位置睁枕，建立和當(dāng)前元素之間的連接
- src僅僅嵌入當(dāng)前資源到當(dāng)前文檔元素定義的位置
六官边、偽類和偽元素的區(qū)別
- 是否創(chuàng)建新元素；偽類 添加特殊效果外遇，單冒號注簿；偽元素 雙冒號
- 偽類選擇器： a:link\a:visited\a:hover\a:active等
七、圣杯和雙飛翼布局：三欄布局跳仿；左右固定寬度诡渴，中間寬度自適應(yīng)
- 利用margin的負(fù)值、配合float進(jìn)行布局菲语；（中間盒子的左右margin或者父盒子左右padding）
- flex：父盒子設(shè)置flex妄辩，兩側(cè)設(shè)置 flex:0;flex-basic: 固定寬度惑灵。
八、漸進(jìn)增強(qiáng)眼耀、優(yōu)雅降級
- 漸進(jìn)增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面英支，保證最基本的 功能。
- 優(yōu)雅降級：一開始就開始構(gòu)建完整的功能哮伟，然后針對低版本瀏覽器進(jìn)行兼容干花。
七、常見瀏覽器兼容性：
- 瀏覽器種類多澈吨，內(nèi)核種類多把敢，對于CSS3的部分屬性不能完全兼容。 條件注釋谅辣、選擇器前綴法
八修赞、重排（回流）、重繪
- 重排：當(dāng)元素的位置和尺寸大小桑阶，瀏覽器需要重新計算元素的幾何屬性柏副，像添加和刪除DOM、元素尺寸改變蚣录。
- 重繪：一個元素的外觀發(fā)生變化割择，但是沒有改變布局，重新把元素外觀繪制出來的過程萎河。
- transform：不重排荔泳、不重繪。合成屬性虐杯，會創(chuàng)建一個合成層玛歌，在合成層上渲染。
九擎椰、檢測是否為數(shù)組支子； 原型鏈
- Object.prototype.toString.call() [object Array]
- Array.isArray() 、instanceof：判斷該對象是誰的實(shí)例 达舒、 typeof
十值朋、typeof和instanceof
- typeof是一個操作符，用來檢測給定變量的數(shù)據(jù)類型巩搏；原理數(shù)據(jù)底層機(jī)制昨登，二進(jìn)制判斷
- instanceof是通過JavaScript原型繼承機(jī)制
十一、閉包 -
- 有權(quán)訪問另一個函數(shù)作用域中變量的函數(shù)
- 應(yīng)用場景：函數(shù)防抖（在事件被觸發(fā)N秒后再執(zhí)行回調(diào)贯底，如果在這時間內(nèi)又被觸發(fā)篙骡，則重新計時）
function debounce(fn, delay) {
let timer = null
return function () {
if (timer) {
clearTimeOut(timer)
timer = setTimeOut(fn, delay)
} else {
timer = setTimeOut(fn, delay)
}
}
} // 短時間內(nèi)大量觸發(fā)同一事件，只會執(zhí)行一次函數(shù) 且肯定會執(zhí)行
function throttle(fn, delay) {
let flag = true
return function() {
if (!flag) {
flag = false
}
flag = false
setTimeOut(() => {
fn()
flag = true
}, delay)
}
} // 短時間內(nèi)大量觸發(fā)同一事件，只會執(zhí)行一次糯俗，規(guī)定時間內(nèi)再次觸發(fā)會阻止執(zhí)行（技能冷卻）
- 其他應(yīng)用場景： input搜索事件尿褪，頁面resize事件。
十二得湘、原型和原型鏈
- 構(gòu)造函數(shù)
- 每個對象都有一個
__proto__屬性杖玲，并且指向它的prototype原型對象 - 每個構(gòu)造函數(shù)都有一個prototype原型對象，prototype原型對象里的constructor指向構(gòu)造函數(shù)本身
- prototype對象相當(dāng)于特定類型所有實(shí)例對象都可以訪問的公共容器
十三淘正、EventLoop
- JS是單線程的摆马，為了防止一個函數(shù)執(zhí)行時間過長阻塞后面的代碼，所以會先將同步代碼壓入執(zhí)行棧中鸿吆，依次執(zhí)行囤采，將異步代碼推入異步隊(duì)列。
十四惩淳、new操作符的作用
- 內(nèi)存中創(chuàng)造一個空對象
- this指向這個內(nèi)存中的空對象
- 根據(jù)定義的鍵值和傳入的參數(shù)蕉毯，依次給這個空對象添加上鍵值對
- 返回這個新的對象
十五、Promise
// 手寫Promise
十六思犁、computed和watch
- computed：簡化模塊代碼代虾，所依賴的屬性未變化時，直接去緩存激蹲，緩存是基于它們 的響應(yīng)式依賴進(jìn)行緩存的棉磨。
- watch：需要數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時。
- 使用場景：computed：當(dāng)一個屬性受多個屬性影響的時候学辱。watch：當(dāng)一條數(shù)據(jù)影響多個數(shù)據(jù)的時候
十七乘瓤、v-for中的key的作用
- 為了更高效的對比虛擬DOM中每個節(jié)點(diǎn)是否是同一個節(jié)點(diǎn)，唯一標(biāo)識策泣。
- Vue判斷兩個節(jié)點(diǎn)是否為相同時衙傀，主要是根據(jù)兩者的Key和元素類型等，若無key則會認(rèn)為是兩個相同的節(jié)點(diǎn)着降，會造成大量的dom更新操作差油。
18拗军、父子組件通信
- props任洞、自定義事件$emit、Ref发侵、provide和inject等
19交掏、雙向數(shù)據(jù)綁定
- vue實(shí)例創(chuàng)建時，會對data中的屬性進(jìn)行遍歷刃鳄，通過Object.defineProtety轉(zhuǎn)換為getter和setter且在內(nèi)部追中相關(guān)依賴盅弛，在屬性被訪問和修改的時通知變化。
20、nextTick：在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)挪鹏。在修改數(shù)據(jù)之后使用$nextTick见秽，則可以在回調(diào)中獲取更新后的DOM。
21讨盒、keep-alive的實(shí)現(xiàn)：實(shí)現(xiàn)組件的緩存
Vue.js內(nèi)部將DOM節(jié)點(diǎn)抽象成一個個的VNode節(jié)點(diǎn)解取，keep-alive組件的緩存也是基于虛擬節(jié)點(diǎn)的而不是直接存儲DOM結(jié)構(gòu)。它將滿足條件的組件在cache對象中緩存起來返顺，在需要重新渲染的時候再將vnode節(jié)點(diǎn)從cache對象取出并渲染禀苦。（include、exclude配置屬性）
router中 添加 meta： keepAlive標(biāo)識
<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 這里是會被緩存的視圖組件 --> </router-view> </keep-alive>
22遂鹊、vuex振乏、vue-router實(shí)現(xiàn)原理
- vuex：狀態(tài)管理庫
- state單一狀態(tài)樹，getter秉扑、mutation顯示提交更改state
- Action提交mutation慧邮，可以包含任意異步操作
- module（當(dāng)應(yīng)用變的龐大復(fù)雜，拆分store為具體的module模塊）
23邻储、vue中的diff算法和patch方法
- patch：補(bǔ)丁赋咽，Vue更新時的patch算法，就是通過打補(bǔ)丁的形式充分利用原有的dom進(jìn)行增加吨娜，刪除和移動操作脓匿，從而避免重新創(chuàng)建大量的dom操作，進(jìn)一步提升性能宦赠。
- diff算法過程就是調(diào)用patch函數(shù)陪毡；只能是同級比較。
- 虛擬dom：是將真實(shí)dom的數(shù)據(jù)抽取出來勾扭，以對象的形式模擬樹形結(jié)構(gòu)毡琉。
- diff算法觸發(fā)過程： Vue的雙向綁定，是通過重置Object.defineProperty中的get和set方法進(jìn)行數(shù)據(jù)劫持妙色，進(jìn)而觸發(fā)修改視圖操作桅滋。所以當(dāng)數(shù)據(jù)發(fā)生改變時，set方法會調(diào)用Dep.notify通知訂閱者watcher身辨，訂閱者就會調(diào)用patch方法給真實(shí)的dom打補(bǔ)丁丐谋，更新響應(yīng)的視圖。
24煌珊、Vue的性能優(yōu)化
- 第三方模塊按需引入号俐、防抖、節(jié)流定庵、v-if替代v-show吏饿、圖片路由懶加載踪危、異步組件
25、瀏覽器從輸入url到渲染頁面
- 網(wǎng)絡(luò)：構(gòu)建請求猪落、查找強(qiáng)緩存贞远、DNS域名解析、建立TCP連接（三次握手）笨忌、發(fā)送HTTP請求
- 瀏覽器解析：解析html構(gòu)建DOM樹兴革、解析CSS構(gòu)建CSS樹、樣式計算蜜唾、生成布局樹
- 瀏覽器渲染：建立圖層樹杂曲、顯示器顯示內(nèi)容、斷開連接（四次揮手）
26袁余、http和https區(qū)別
- 默認(rèn)端口擎勘、安全性（明文傳輸、加密傳輸協(xié)議）
- http的連接無狀態(tài)的颖榜，https協(xié)議是ssl+http協(xié)議構(gòu)建的可進(jìn)行加密傳輸棚饵、身份認(rèn)證網(wǎng)絡(luò)協(xié)議。
27掩完、get和post區(qū)別
- post更安全噪漾、數(shù)據(jù)更大、發(fā)送數(shù)據(jù)類型較多且蓬、速度較慢欣硼、用于修改和寫入數(shù)據(jù)
- get 回退時是無害的，而post會再次提交請求
28恶阴、三次握手诈胜、四次揮手
- 多一次握手的必要性：防止已失效的請求報文突然又傳到了服務(wù)端而產(chǎn)生連接的誤判。
- 四次揮手：即中止TCP連接冯事，需要客戶端和服務(wù)端總共發(fā)送四個包確認(rèn)連接的斷開焦匈。
- 多一次揮手：a:在請求連接時，服務(wù)端在收到建立連接請求的syn報文后昵仅，把a(bǔ)ck和syn放在一個報文里發(fā)送給客戶端缓熟。 b:關(guān)閉連接，當(dāng)收到對方的fin報文時摔笤，僅代表對方不再發(fā)送數(shù)據(jù)但還能接收數(shù)據(jù)够滑，我們也未必把全部數(shù)據(jù)都發(fā)給了對方，所以我們可以立即close籍茧，也可以發(fā)送一些數(shù)據(jù)給對方版述，再發(fā)送fin報文給對方表示同意關(guān)閉連接梯澜。因此我們的ack和fin一般會分開發(fā)送寞冯。
- ACK: 確認(rèn)序號有效渴析；SYN：建立一個新的連接；FIN：釋放一個鏈接
29吮龄、http如何實(shí)現(xiàn)緩存：強(qiáng)緩存俭茧、協(xié)商緩存
- 強(qiáng)緩存：Expirse（過期時間）、Cache-Control（no-cache）協(xié)商緩存
- 瀏覽器會根據(jù)請求的信息判斷漓帚，強(qiáng)緩存是否命中母债，如果命中則直接使用資源，否則尝抖，根據(jù)頭信息向服務(wù)器發(fā)送請求毡们，使用協(xié)商緩存，如果命中昧辽，則服務(wù)去器不返回資源衙熔，瀏覽器直接使用本地資源的副本，若不命中搅荞，則瀏覽器返回最新的資源給瀏覽器红氯。
30、輸入url后http請求的完整過程
- 建立TCP連接 - 發(fā)送請求行 - 發(fā)送請求頭 - 到達(dá)服務(wù)器（發(fā)送狀態(tài)行） - 發(fā)送響應(yīng)頭 - 發(fā)送響應(yīng)數(shù)據(jù) - 斷TCP連接
31咕痛、跨域方式
- jsonp：利用script標(biāo)簽沒有跨域限制痢甘，缺點(diǎn)：只支持get請求
- CORS（設(shè)置Access-Control-Allow-Origin: 指定可訪問資源的域名）
32、瀏覽器的本地存儲：cookie茉贡、sessionStorage塞栅、localStorage
- 都是保存在瀏覽器、且同源
- 不同點(diǎn)：
- 存儲大小限制腔丧、作用域不同
- cookie：在瀏覽器和服務(wù)器間來回傳遞（4K）构蹬；其他僅在本地(5M);
33、常見的webpack loader
- File-loader悔据、image-loader庄敛、url-loader、css-loader科汗、sass-loader藻烤、style-loader
34、javascript的繼承方式
-
原型鏈繼承：子類型的原型為父類型的一個實(shí)例對象
// 父 function Father(name) { this.name = name || 10 } Father.prototype.sayHi = function() { conosle.log('sayHi') } // 子 function Son() {} Son.prototype = new Father() Son.prototype.sayHello = function() { console.log('sayHello') } let son = new Son() son.sayHi() // 'sayHi' son.sayHello() // 'sayHello' son.name // 10 Object.getPrototypeOf(son) === son.__proto__ === Son.prototype -
ES6中的Class繼承
// 父類 class Father { constructor(age) { this.age = age } sayHi() { console.log('sayHi')} } // 子類 class Son extends Father{ constructor(name, age) { super(age) this.name = name } sayHello() { console.log('sayHello')} } let son = new Son('xsk', 18) son.name // 'xsk' son.age // 18 son.sayHi() // 'sayHi' son.sayHello() // 'sayHello'
35头滔、call怖亭、apply和bind的區(qū)別
- call和apply改變this指向；call的性能好一點(diǎn)坤检；省去了第二個參數(shù)解構(gòu)賦值
- bind原理：返回一個函數(shù)兴猩，另外兩個立即執(zhí)行
36、淺拷貝早歇、深拷貝
- JSON的弊端：序列化的結(jié)果會把函數(shù)或者undefined丟失; NaN倾芝、Infinity和-Infinity序列化后的值會變?yōu)閚ull; 值有時間對象會轉(zhuǎn)為字符串形式讨勤；有RegExp、Error對象晨另，結(jié)果為空對象潭千。
- 弊端2：構(gòu)造函數(shù)實(shí)例的對象，拷貝后會丟棄對象constructor借尿；對象中存在循環(huán)引用的情況也無法實(shí)現(xiàn)正確的深拷貝刨晴。
