1净赴、從輸入url到瀏覽器呈現(xiàn)頁(yè)面中間經(jīng)歷了什么躲查？
在輸入url的時(shí)候酌心，會(huì)進(jìn)行本地歷史記錄和標(biāo)簽頁(yè)的查詢(xún)，提供模糊查詢(xún)效果
瀏覽器查找當(dāng)前URL是否存在緩存蚤霞，并比較緩存是否過(guò)期
HTTP緩存有多種規(guī)則酗失，根據(jù)是否需要向服務(wù)器重新發(fā)起請(qǐng)求來(lái)分類(lèi)，將其分為強(qiáng)制緩存昧绣，對(duì)比緩存规肴。
強(qiáng)制緩存：判斷HTTP首部字段：Expires 和 cache-control。
Expires是一個(gè)絕對(duì)時(shí)間滞乙，即服務(wù)器時(shí)間奏纪。瀏覽器檢查當(dāng)前時(shí)間，如果還沒(méi)到失效時(shí)間就直接使用緩存文件斩启。但是該方法存在一個(gè)問(wèn)題：服務(wù)器時(shí)間與客戶(hù)端時(shí)間可能不一致
cache-control中的max-age保存了一個(gè)相對(duì)時(shí)間序调。例如Cache-Control: max-age = 484200，表示瀏覽器收到文件后兔簇，緩存在484200s內(nèi)有效发绢。 如果同時(shí)存在cache-control和Expires硬耍，瀏覽器總是優(yōu)先使用cache-control。
對(duì)比緩存：通過(guò)HTTP的 last-modified（最新-改進(jìn)）边酒，Etag字段進(jìn)行判斷经柴。
last-modified 表示請(qǐng)求的URL（資源）最后一次更新的時(shí)間。下一次瀏覽器請(qǐng)求資源時(shí)就發(fā)送if-modified-since字段墩朦。服務(wù)器用本地Last-modified時(shí)間與if-modified-since時(shí)間比較坯认，如果不一致則認(rèn)為緩存已過(guò)期并返回新資源給瀏覽器；如果時(shí)間一致則發(fā)送304狀態(tài)碼氓涣，讓瀏覽器繼續(xù)使用緩存牛哺。
Etag：資源的實(shí)體標(biāo)識(shí)（哈希字符串），當(dāng)資源內(nèi)容更新時(shí)劳吠，Etag會(huì)改變引润。服務(wù)器會(huì)判斷Etag是否發(fā)生變化，如果變化則返回新資源痒玩，否則返回304淳附。DNS解析URL對(duì)應(yīng)的IP
首先查詢(xún)本地host文件是否有對(duì)應(yīng)地址的一個(gè)映射關(guān)系，如果沒(méi)有找到蠢古，會(huì)查找本地DNS解析器緩存奴曙，如果還是沒(méi)有找到則會(huì)查找本地DNS服務(wù)器，最后迭代查詢(xún)便瑟，按根域服務(wù)器庫(kù)（.com,.cn,.vip,.top...）->頂級(jí)域(com)->->第二層域子域（baidu.com）,最后根據(jù)baidu.com的域名找到相應(yīng)的IP缆毁，返回給瀏覽器。根據(jù)IP建立TCP連接（三次握手）
瀏覽器用這個(gè)IP地址與服務(wù)器建立TCP連接到涂，如果用的是HTTPS，還有完成TLS / SSL的握手颁督。
第一次握手： 建立連接時(shí)践啄，客戶(hù)端發(fā)送syn包（syn=j）到服務(wù)器，并進(jìn)入等待服務(wù)器確認(rèn)的狀態(tài)沉御；
第二次握手： 服務(wù)器收到syn包屿讽，必須確認(rèn)客戶(hù)端的syn（ack=j+1），同時(shí)自己根據(jù)syn生成一個(gè)ACK包吠裆，此時(shí)服務(wù)器進(jìn)入等待狀態(tài)伐谈；
第三次握手： 客戶(hù)端收到服務(wù)器的ACK包，向服務(wù)器發(fā)送確認(rèn)试疙，此包發(fā)送完畢诵棵，客戶(hù)端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手祝旷。發(fā)送HTTP請(qǐng)求
在建立好連接以后呢履澳，構(gòu)造HTTP請(qǐng)求嘶窄，在構(gòu)造請(qǐng)求的過(guò)程中，要填充少量至HTTP頭部服務(wù)器解析請(qǐng)求返回結(jié)果
然后通過(guò)這個(gè)TCP連接發(fā)起HTTP請(qǐng)求距贷，當(dāng)服務(wù)器收到這個(gè)HTTP請(qǐng)求以后柄冲，返回給瀏覽器以HTTP頁(yè)面作為包體的HTTP響應(yīng)。瀏覽器解析結(jié)果并渲染頁(yè)面
根據(jù)html代碼生成DOM樹(shù) 忠蝗，在解析到外部的css和js文件時(shí)现横，向服務(wù)器發(fā)起請(qǐng)求下載資源，如果是CSS代碼會(huì)在下載的同時(shí)進(jìn)行解析阁最，如果是JS代碼會(huì)阻塞頁(yè)面加載戒祠，根據(jù)CSS代碼生成OM樹(shù)，然后生成layout樹(shù)（重排）闽撤，生成painting樹(shù)（重繪）得哆，然后生成渲染樹(shù)。關(guān)閉TCP連接（四次揮手）
第一次握手是瀏覽器發(fā)完數(shù)據(jù)哟旗，然后發(fā)送FIN請(qǐng)求斷開(kāi)連接贩据。
第二次握手是服務(wù)器向客戶(hù)端發(fā)送ACK，表示同意闸餐。
第三次握手是服務(wù)器可能還有數(shù)據(jù)向?yàn)g覽器發(fā)送饱亮，所以向?yàn)g覽器發(fā)送ACK同時(shí)也發(fā)送FIN請(qǐng)求，是第三次握手舍沙。
第四次握手是瀏覽器接受返回的ACK近上，表示數(shù)據(jù)傳輸完成。
相關(guān)鏈接：
輸入url至呈現(xiàn)頁(yè)面過(guò)程
三次握手
四次揮手
2拂铡、js基本數(shù)據(jù)類(lèi)型
Number壹无、String、Boolean感帅、undefined斗锭、object、symbol失球、bigInt岖是、Null
js基本數(shù)據(jù)類(lèi)型
3、typeof返回類(lèi)型
number实苞、 string豺撑、boolean、 undefined黔牵、object聪轿、symbol、bigint荧止、function
typeof NaN == 'number'
4屹电、最大安全值和最大值
Number.MAX_SAFE_INTEGER 進(jìn)行運(yùn)算不會(huì)丟失精度
Numebr.MAX_VALUE js能表示的最大值
5阶剑、this的綁定規(guī)則
顯示綁定 call、apply危号、bind
隱式綁定 obj對(duì)象的屬性為函數(shù)時(shí)牧愁，內(nèi)部指向obj
默認(rèn)綁定 函數(shù)內(nèi)部的this默認(rèn)指向window
new綁定
this的綁定規(guī)則
6、call外莲、bind猪半、apply
改變this指向的方法
call參數(shù)為列表、apply為數(shù)組偷线、立即執(zhí)行
bind為等待狀態(tài)
Math.max.call(null, 1,3,5,2,4)
Math.max.apply(null, [1,3,5,2,4])
7声邦、promise
創(chuàng)建對(duì)象
let p1 = function(){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('成功1乏奥！')
},1000)
})
}
let p2 = function(){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('成功2！')
},1000)
})
}
let p3 = function(){
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('成功3亥曹！')
},1000)
})
}
鏈?zhǔn)讲僮?/strong>
p1().then((data)=>{
console.log(data)
return p2()
}).then((data)=>{
console.log(data)
return p3()
}).then((data)=>{
console.log(data)
})
race函數(shù)
Promise.race([p1(),p2(),p3()]).then((data)=>{
console.log(data) //[p1,p2,p3]
}).catch((err)=>{
console.log(err)
})
all函數(shù)
Promise.all([p1(),p2(),p3()]).then((data)=>{
console.log(data) //p1
})
8邓了、觀察者模式
class Event{
constructor(){
this.list = []
}
subscrible(type, handler){
if(this.list[type]){
this.list[type].push(handler)
}else{
this.list[type] = [handler]
}
}
unSubscrible(type, handler){
if(this.list[type]){
let index = this.list[type].indexOf(handler)
this.list[type].splice(index, 1)
}
}
publish(type){
if(this.list[type]){
this.list[type].forEach((item)=>{
item()
})
}
}
}
let event = new Event()
function load(index){
console.log('load')
}
function click1(index){
console.log('click')
}
function click2(index){
console.log('click')
}
event.subscrible('load', load)
event.subscrible('click', click1)
event.subscrible('click', click2)
event.publish('load')
event.publish('click')
9、發(fā)布訂閱模式
class Dog{
call(){
console.log('汪汪')
}
}
class Pubsub{
constructor(){
this.list = []
}
subscrible(call){
this.list.push(call)
}
publish(){
this.list.forEach((item)=>{
item()
})
}
}
let pubsub = new Pubsub()
class Thief{
constructor(){
this.list = []
}
action(){
pubsub .publish()
}
}
let thief = new Thief()
let dog1 = new Dog()
let dog2 = new Dog()
pubsub .subscrible(dog1.call)
pubsub .subscrible(dog2.call)
thief.action()
10媳瞪、eventLoop （堆骗炉、棧、隊(duì)列）
1蛇受、先執(zhí)行主線(xiàn)程（包含執(zhí)行棧和堆）
2句葵、遇到宏隊(duì)列（macrotask）放到宏隊(duì)列（macrotask）
3、遇到微隊(duì)列（microtask）放到微隊(duì)列（microtask）
4兢仰、主線(xiàn)程執(zhí)行完畢（執(zhí)行棧Stack被清空） （棧內(nèi)存出棧后自動(dòng)銷(xiāo)毀）
5乍丈、執(zhí)行微隊(duì)列（microtask），微隊(duì)列（microtask）執(zhí)行完畢
6把将、執(zhí)行一次宏隊(duì)列（macrotask）中的一個(gè)任務(wù)诗赌，執(zhí)行完畢 （宏任務(wù)有可能產(chǎn)生微任務(wù)）
7、執(zhí)行微隊(duì)列（microtask）秸弛，執(zhí)行完畢
8、依次循環(huán)...
11洪碳、宏任務(wù)和微任務(wù)
macroTask
setTimeout递览、setInterval 、setImmediate瞳腌、I/O绞铃、UI Rendering
microTask
Process.nextTick（Node獨(dú)有）、Promise嫂侍、Object.observe(廢棄)儿捧、MutationObserver
執(zhí)行順序
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
}).then((data) => {
console.log(data);
})
setTimeout(() => {
console.log(6);
})
console.log(7);
12荚坞、閉包
- 模擬私有變量，在函數(shù)外部間接訪(fǎng)問(wèn)函數(shù)內(nèi)部的變量
- 私有變量一直保存在內(nèi)存中菲盾，不被銷(xiāo)毀
- 內(nèi)部變量不會(huì)污染全局命名空間
- 閉包在處理速度和內(nèi)存消耗方面對(duì)腳本性能具有負(fù)面影響
let count = (function(){
let sum = 10
function change(x){
return sum += x
}
return change
})();
console.log(count(10)) //20
13颓影、js 事件冒泡和事件捕獲
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞順序：捕獲階段=>目標(biāo)階段=>冒泡階段
匿名函數(shù)事件綁定無(wú)法刪除
//事件綁定
dom.addEventListener('click', fn, false) // 默認(rèn)為 false（冒泡） true（捕獲）
dom.removeEventListener('click', fn, false)
dom.attachEvent('onclick', fn) //IE
dom.detachEvent('onclick', fn) //IE
//阻止冒泡和捕獲
event.cancelBubble=true;
event.stopPropagation()
//阻止默認(rèn)事件傳播
event.preventDefault()
window.event.returnValue = false;
14懒鉴、addEventListener 和 attachEvent 區(qū)別
- attachEvent 為IE下的事件綁定函數(shù),不支持捕獲
- attachEvent 指向 window, 有內(nèi)存泄漏問(wèn)題诡挂，全局作用域中運(yùn)行 addEventListener 指向obj，依附于元素的作用域中運(yùn)行
- 都可以綁定多個(gè)事件處理函數(shù)临谱，同一個(gè)事件處理函數(shù)可以綁定多次
15璃俗、事件委托
利用冒泡的原理，把事件加到父級(jí)上悉默，觸發(fā)執(zhí)行效果城豁。
1、提高性能抄课，不需要為每個(gè)子元素添加事件處理函數(shù)
2唱星、新添加的元素也可以通過(guò)之前的事件進(jìn)行觸發(fā)
3、事件基于冒泡剖膳，對(duì)于不冒泡的事件不觸發(fā)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<ul>
<li class="li1" data-url="1111">11</li>
<li class="li2" data-url="2222">22</li>
<li class="li3" data-url="3333">33</li>
<li class="li4" data-url="4444">44</li>
</ul>
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName('ul')[0].addEventListener('click', function(e){
console.log(e)
if(e.stopPropagation){
e.stopPropagation()
}else{
e.cancelBubble = true
}
console.log(e.toElement.dataset.url) ///1111 2222
}, false)
</script>
</html>
16魏颓、（本地緩存）請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別吱晒？
Web Storage有兩種形式：
LocalStorage（本地存儲(chǔ)）和sessionStorage（會(huì)話(huà)存儲(chǔ)）甸饱。
這兩種方式都允許開(kāi)發(fā)者使用js設(shè)置的鍵值對(duì)進(jìn)行操作，在在重新加載不同的頁(yè)面的時(shí)候讀出它們仑濒。這一點(diǎn)與cookie類(lèi)似叹话。
- 與cookie不同的是：Web Storage數(shù)據(jù)完全存儲(chǔ)在客戶(hù)端，不需要通過(guò)瀏覽器的請(qǐng)求將數(shù)據(jù)傳給服務(wù)器墩瞳，因此相比cookie來(lái)說(shuō)能夠存儲(chǔ)更多的數(shù)據(jù)驼壶，大概5M左右。
- LocalStorage和sessionStorage功能上是一樣的喉酌，但是存儲(chǔ)持久時(shí)間不一樣热凹。LocalStorage：瀏覽器關(guān)閉了數(shù)據(jù)仍然可以保存下來(lái)，并可用于所有同源（相同的域名泪电、協(xié)議和端口）窗口（或標(biāo)簽頁(yè)）般妙；sessionStorage：數(shù)據(jù)存儲(chǔ)在窗口對(duì)象中，窗口關(guān)閉后對(duì)應(yīng)的窗口對(duì)象消失相速，存儲(chǔ)的數(shù)據(jù)也會(huì)丟失碟渺。
注意：sessionStorage 都可以用localStorage 來(lái)代替，但需要記住的是突诬，在窗口或者標(biāo)簽頁(yè)關(guān)閉時(shí)苫拍，使用sessionStorage 存儲(chǔ)的數(shù)據(jù)會(huì)丟失芜繁。 - 使用 local storage和session storage主要通過(guò)在js中操作這兩個(gè)對(duì)象來(lái)實(shí)現(xiàn)，分別為window.localStorage和window.sessionStorage. 這兩個(gè)對(duì)象均是Storage類(lèi)的兩個(gè)實(shí)例绒极，自然也具有Storage類(lèi)的屬性和方法
- localstorage是瀏覽器多個(gè)標(biāo)簽共用的存儲(chǔ)空間骏令，所以可以用來(lái)實(shí)現(xiàn)多標(biāo)簽之間的通信(ps：session是會(huì)話(huà)級(jí)的存儲(chǔ)空間，每個(gè)標(biāo)簽頁(yè)都是單獨(dú)的）集峦。
17伏社、簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解。
HTML語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化塔淤，結(jié)構(gòu)更清晰摘昌，便于對(duì)瀏覽器、搜索引擎解析高蜂；
即使在沒(méi)有樣式CSS的情況下也能以一種文檔格式顯示聪黎，并且是容易閱讀的；
搜索引擎的爬蟲(chóng)也依賴(lài)于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重备恤，有利于SEO集侯；
使閱讀源代碼的人更容易將網(wǎng)站分塊夭委，便于閱讀、維護(hù)和理解。
18生闲、Html語(yǔ)義化標(biāo)簽
<ul> <li> <title> <mark> <h1> <small> <strong>
新增 <header> <nav> <aside> <footer> <section> <article> <main>
19瘫镇、你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
- 漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面汞斧，保證最基本的功能瞪浸，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶(hù)體驗(yàn)沉噩。
（一開(kāi)始保證最基本的功能捺宗，再改進(jìn)和追加功能）
- 優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容川蒙。
（一開(kāi)始就構(gòu)建完整的功能蚜厉，再針對(duì)低版本瀏覽器進(jìn)行兼容。）
20畜眨、前端需要注意哪些 SEO
使用title昼牛、description、keywords屬性及合理的描述
語(yǔ)義化標(biāo)簽讓搜索引擎更好的理解文章結(jié)構(gòu)
img標(biāo)簽添加alt屬性
不使用iframe標(biāo)簽
服務(wù)器渲染康聂，頁(yè)面內(nèi)容盡量不要使用js輸出
頁(yè)面內(nèi)容盡可能靠前匾嘱，搜索引擎抓取有長(zhǎng)度限制，保證抓取到內(nèi)容
21早抠、html5 有哪些新特性
拖拽釋放(Drag and drop) API
語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻、視頻 API(audio,video)
畫(huà)布(Canvas) API
地理(Geolocation) API
本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)撬讽，瀏覽器關(guān)閉后數(shù)據(jù)不丟失蕊连；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
表單控件悬垃，calendar、date甘苍、time尝蠕、email、url载庭、search
新的技術(shù) webworker, websocket, Geolocation
22看彼、link和@import的區(qū)別：
- 從屬關(guān)系區(qū)別
@import是 CSS 提供的語(yǔ)法規(guī)則，只有導(dǎo)入樣式表的作用囚聚；link是HTML提供的標(biāo)簽靖榕，不僅可以加載 CSS 文件，還可以定義 RSS顽铸、rel 連接屬性等茁计。 - 加載順序區(qū)別
加載頁(yè)面時(shí)，link標(biāo)簽引入的 CSS 被同時(shí)加載谓松；@import引入的 CSS 將在頁(yè)面加載完畢后被加載星压。 - DOM可控性區(qū)別
可以通過(guò) JS 操作 DOM ，插入link標(biāo)簽來(lái)改變樣式鬼譬；由于 DOM 方法是基于文檔的娜膘，無(wú)法使用@import的方式插入樣式。
23优质、防抖函數(shù)
//非立即執(zhí)行版本
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
//立即執(zhí)行版本
function debounce(func,wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
}
24竣贪、節(jié)流函數(shù)
//時(shí)間戳 立即執(zhí)行版本
function throttle(func, wait) {
let previous = 0;
return function() {
let now = Date.now();
let context = this;
let args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
}
}
//定時(shí)器 非立即執(zhí)行版本
function throttle(func, wait) {
let timeout;
return function() {
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
25、常見(jiàn)狀態(tài)碼
100 Continue 繼續(xù)
200 OK 正常返回信息
201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請(qǐng)求盆赤，但尚未處理
301 Moved Permanently 請(qǐng)求資源被永久移動(dòng)到新位置
302 Found 請(qǐng)求資源臨時(shí)性重定向
303 See Other 臨時(shí)性重定向贾富，且總是使用GET請(qǐng)求新的url
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)
307 Temporary Redirect 臨時(shí)重定向牺六。與302類(lèi)似颤枪。使用GET請(qǐng)求重定向
400 Bad Request 服務(wù)器無(wú)法理解的請(qǐng)求格式，客戶(hù)端不應(yīng)當(dāng)嘗試使用相同的內(nèi)容發(fā)起請(qǐng)求
401 Unauthorized 請(qǐng)求未授權(quán)
403 Forbidden 禁止訪(fǎng)問(wèn)
404 Not Found 找不到與URL相匹配的資源
500 Internal Server Error 服務(wù)器端錯(cuò)誤
502 Bad Gateway
503 Service Unavailable 服務(wù)器暫時(shí)無(wú)法處理請(qǐng)求
26淑际、let var const 區(qū)別
- var可以聲明提前畏纲、let不能
- var可以重復(fù)定義、let不能
- let 是塊級(jí)作用域 和 var函數(shù)作用域
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
console.log(a[1]()) //1
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function() {
console.log(i);
};
}
console.log(a[1]()) //10
//var 聲明變量是全局的只有一個(gè)i春缕，一直在發(fā)生改變盗胀，所有最終數(shù)組函數(shù)打印的都是同一個(gè)數(shù)
- 特別的for循環(huán)中，循環(huán)體和內(nèi)部 i 不是同一個(gè)作用域
for(let i = 0; i<3;i++){
let i =1
console.log(i) // 1 1 1
}
- const 定義的變量并非全部不能修改
定義的變量包含基本變量和引用變量锄贼，引用變量不能修改地址 票灰，但是可以修改內(nèi)容 - let在聲明 變量之前 不能使用，成為暫時(shí)性死區(qū)
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
- typeof 也不是 百分百安全的操作
typeof x; // ReferenceError
let x;
console.log(typeof x) //undefiend
27、堆內(nèi)存和棧內(nèi)存
- 變量分為基本類(lèi)型和引用類(lèi)型
- 基本類(lèi)型包括 Undefined屑迂、Null浸策、Boolean、Number 和String惹盼， 引用類(lèi)型包括Object
- 基本類(lèi)型是存放在棧內(nèi)存中庸汗，引用類(lèi)型是存在于堆內(nèi)存中
- 基本類(lèi)型在當(dāng)前執(zhí)行環(huán)境結(jié)束時(shí)銷(xiāo)毀（出棧即銷(xiāo)毀），而引用類(lèi)型不會(huì)隨執(zhí)行環(huán)境結(jié)束而銷(xiāo)毀手报，只有當(dāng)所有引用它的變量不存在時(shí)這個(gè)對(duì)象才被垃圾回收機(jī)制回收（V8 垃圾回收）蚯舱。
- 對(duì)于引用數(shù)據(jù)類(lèi)型是，將變量保存在棧內(nèi)存中掩蛤，指針指向堆內(nèi)存地址枉昏，多以在使用的時(shí)候是先在棧內(nèi)存中找到，然后尋找相應(yīng)的堆地址
- 變量全局在整個(gè)應(yīng)用的生命周期中從一打開(kāi)就處于整個(gè)執(zhí)行棧的最底層盏档，所以難以釋放對(duì)于垃圾回收的不利凶掰，也是少用全局變量的重要原因。
- 棧內(nèi)存和棧數(shù)據(jù)結(jié)構(gòu) 與 堆內(nèi)存和堆數(shù)據(jù)結(jié)構(gòu)是兩種東西蜈亩，但是機(jī)制類(lèi)似
28懦窘、深拷貝、淺拷貝
如果B復(fù)制了A稚配，當(dāng)我們改變A的值時(shí)畅涂，如果B也發(fā)生了變化那就說(shuō)明是淺拷貝，反之就是深拷貝道川。
var a = 1;
var b = a;
b = 2;
console.log(a); // a = 1
var obj1 = { a: 1, b: 2 };
var obj2 = obj1;
obj2.a = 3;
console.log(obj1.a); // obj1.a = 3
// 變量保存引用類(lèi)型午衰，只能保存到一個(gè)引用地址，變量與堆內(nèi)存不直接綁定冒萄！
// obj1 和 obj2 都保存了同一個(gè)引用地址臊岸，指向同一個(gè)堆內(nèi)存，所以堆內(nèi)存改變會(huì)一起改變
var obj1 = { a: 1 };
var obj2 = obj1;
obj1 = null;
console.log(obj2); // obj2 = { a: 1 }
// 雖然前面 obj1尊流、obj2 都保存了堆內(nèi)存地址帅戒，但后面只有 obj1 把保存的值改成null，所以并不影響 obj2 保存的引用地址指向堆內(nèi)存崖技。
//序列化和反序列化
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
let a=[0, 1, [2, 3], 4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a); // [1, 1, [1, 3], 4]
console.log(b); // [0, 1, [2, 3], 4]
//迭代遞歸實(shí)現(xiàn)深拷貝
function deepClone(oldobj){
let newObj = oldObj instanceof Array ? [] : {};
for(let key in oldobj){
if(typeof oldobj[key] === 'object'){
newObj[key] = deepClone(oldObj[key])
}else{
newObj[key] = oldObj[key]
}
}
return newObj
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);
29逻住、垃圾回收
JS的垃圾回收機(jī)制是為了防止內(nèi)存泄漏，就是間歇的不定期的尋找到不再使用的變量迎献，并釋放掉他們所指向的內(nèi)存瞎访。
- 基礎(chǔ)類(lèi)型基本用完就回收
- 引用類(lèi)型 當(dāng)所有的引用對(duì)象都被回收，才被銷(xiāo)毀
30吁恍、類(lèi)型判斷
- typeof
typeof 1 // "number"
typeof 'a' // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof Symbol() // "symbol"
typeof 42n // "bigint"
可以識(shí)別基本數(shù)據(jù)類(lèi)型扒秸，不能識(shí)別引用類(lèi)型
- instanceof
不能識(shí)別基本數(shù)據(jù)類(lèi)型播演，但是可以識(shí)別引用數(shù)據(jù)類(lèi)型object（除了null）、array鸦采、function
console.log(bool instanceof Boolean);// false
console.log(num instanceof Number);// false
console.log(str instanceof String);// false
console.log(und instanceof Object);// false
console.log(nul instanceof Object);// false
console.log(arr instanceof Array);// true
console.log(obj instanceof Object);// true
console.log(fun instanceof Function);// true
console.log(s1 instanceof Symbol);// false
- constructor
null宾巍、undefined沒(méi)有construstor方法，因此constructor不能判斷undefined和null渔伯。
console.log(bool.constructor === Boolean);// true
console.log(num.constructor === Number);// true
console.log(str.constructor === String);// true
console.log(arr.constructor === Array);// true
console.log(obj.constructor === Object);// true
console.log(fun.constructor === Function);// true
console.log(s1.constructor === Symbol);//true
- object.property.toString.call
Object.prototype.toString.call(999) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(Symbol()) // "[object Symbol]"
Object.prototype.toString.call(42n) // "[object BigInt]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(true) // "[object Boolean]
Object.prototype.toString.call({a:1}) // "[object Object]"
Object.prototype.toString.call([1,2]) // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
Object.prototype.toString.call(function(){}) // "[object Function]"
31、hasOwnProperty 和 in
hasOwnProperty 只能獲取對(duì)象自身屬性肄程、in可以獲得原型鏈上的屬性
function Fn() {
this.age = 'wm'
}
Fn.prototype.sex = '女'
var obj = new Fn()
// 實(shí)例化對(duì)象會(huì)繼承構(gòu)造函數(shù)里的屬性和方法
console.log(obj.hasOwnProperty('age')) // true
console.log(Fn.prototype.hasOwnProperty('age')) //false
console.log(obj.hasOwnProperty('sex')) // false
32锣吼、前端有哪些安全問(wèn)題以及解決辦法
- XSS(Cross Site Scripting, 跨站腳本攻擊)
XSS攻擊全稱(chēng)跨站腳本攻擊（Cross-Site Scripting），為區(qū)別CSS蓝厌，在安全領(lǐng)域叫做XSS玄叠。攻擊者通過(guò)在目標(biāo)網(wǎng)站上注入惡意腳本并運(yùn)行，獲取用戶(hù)的敏感信息如 Cookie拓提、SessionID等读恃，影響網(wǎng)站與用戶(hù)數(shù)據(jù)安全。
例如：留言板提交頁(yè)面跳轉(zhuǎn)代碼代态，惡意劫持流量
辦法： - CSRF(Cross-site request forgery, 跨站請(qǐng)求偽造)
CSRF（Cross-site request forgery）跨站請(qǐng)求偽造寺惫，攻擊者盜用受害人身份，以受害人的名義發(fā)送惡意請(qǐng)求蹦疑。 其本質(zhì)是重要操作的所有參數(shù)都是可以被攻擊者猜測(cè)到的西雀，攻擊者只有預(yù)測(cè)出URL的所有參數(shù)與參數(shù)值，才能成功地構(gòu)造一個(gè)偽造的請(qǐng)求歉摧；反之艇肴，攻擊者將無(wú)法攻擊成功。
例如：登錄網(wǎng)站以后叁温，同時(shí)登陸了第三方危險(xiǎn)網(wǎng)站再悼，token信息被竊取，并偽造請(qǐng)求膝但。
設(shè)置同源檢測(cè) - SQL注入
通過(guò)Web應(yīng)用接口注入SQL語(yǔ)法冲九，破壞原有SQL結(jié)構(gòu)，達(dá)到攻擊行為锰镀。 如果網(wǎng)站存在注入漏洞娘侍，相當(dāng)于將數(shù)據(jù)庫(kù)直接暴露在攻擊者面前 根據(jù)注入位置及方式不同分分為POST注入、GET注入泳炉、cookie注入憾筏、盲注、延時(shí)注入花鹅、搜索注入氧腰、base64注入等
對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)，敏感字符進(jìn)行轉(zhuǎn)義 - 暴力破解
增加密碼復(fù)雜度
限制嘗試次數(shù)
33、彈性盒模型
- display:flex;設(shè)置彈性布局
- flex-direction屬性 決定主軸的方向（即項(xiàng)目的排列方向）
- flex-wrap 屬性古拴，定義子元素是否換行顯示
- flex-flow是屬性flex-direction和flex-wrap的簡(jiǎn)寫(xiě)方式箩帚，默認(rèn)值為row nowrap；
- justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式黄痪。
- align-items屬性定義項(xiàng)目在交叉軸（側(cè)軸）上如何對(duì)齊紧帕。
- align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式。對(duì)于單行子元素桅打，該屬性不起作用是嗜。
- order屬性定義項(xiàng)目的排列順序。數(shù)值越小挺尾，排列越靠前鹅搪，默認(rèn)為0。
- flex-grow屬性定義項(xiàng)目的放大比例遭铺，默認(rèn)為0丽柿，即如果存在剩余空間，也不放大魂挂。
- flex-shrink屬性定義了項(xiàng)目的縮小比例甫题，默認(rèn)為1，即如果空間不足锰蓬，該項(xiàng)目將縮小幔睬。
- align-self屬性定義子項(xiàng)，允許和其他子項(xiàng)以不同的方式進(jìn)行排列
34芹扭、面試問(wèn)題
- 項(xiàng)目的背景是什么麻顶；
- 當(dāng)前項(xiàng)目的目的是什么；
- 在開(kāi)發(fā)過(guò)程中舱卡，你的角色是什么辅肾；
- 在開(kāi)發(fā)過(guò)程中有遇到過(guò)什么樣的難題；
- 遇到這些問(wèn)題轮锥，你都是如何進(jìn)行解決的矫钓；
- 項(xiàng)目完成之后，取得了哪些成果舍杜；
35新娜、vue2.0響應(yīng)式原理
原理
vue.js 采用數(shù)據(jù)劫持結(jié)合發(fā)布-訂閱模式,通過(guò) Object.defineproperty 來(lái)劫持各個(gè)屬性的 getter進(jìn)行依賴(lài)收集和setter進(jìn)行派發(fā)更新,在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者,觸發(fā)響應(yīng)的監(jiān)聽(tīng)回調(diào)
缺點(diǎn)
- 基于Object.defineProperty，不具備監(jiān)聽(tīng)數(shù)組的能力既绩，需要重新定義數(shù)組的原型來(lái)達(dá)到響應(yīng)式概龄。
- Object.defineProperty 無(wú)法檢測(cè)到對(duì)象屬性的添加和刪除 。
- 由于Vue會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行g(shù)etter/setter轉(zhuǎn)化饲握，所有屬性必須在data對(duì)象上存在才能讓Vue將它轉(zhuǎn)換為響應(yīng)式私杜。
- 深度監(jiān)聽(tīng)需要一次性遞歸蚕键，對(duì)性能影響比較大。
36衰粹、vue3.0響應(yīng)式原理
改進(jìn)
- 基于Proxy和Reflect锣光，可以原生監(jiān)聽(tīng)數(shù)組，可以監(jiān)聽(tīng)對(duì)象屬性的添加和刪除铝耻。
- 不需要一次性遍歷data的屬性誊爹，可以顯著提高性能。
- 因?yàn)镻roxy是ES6新增的屬性瓢捉，有些瀏覽器還不支持,只能兼容到IE11 替废。
- Vue3.0基于Proxy來(lái)做數(shù)據(jù)的劫持代理，可以原生支持到數(shù)組的響應(yīng)式泊柬，不需要重寫(xiě)數(shù)組的原型，還可以直接支持新增和刪除屬性诈火， 比Vue2.x的Object.defineProperty更加的清晰明了兽赁。
let data = {
name: "zhangsan",
age: 20
};
const handler = {
get: function (target, key, receive) {
// 只處理本身(非原型)的屬性
const ownKeys = Reflect.ownKeys(target)
if (ownKeys.includes(key)) {
console.log('get', key) // 監(jiān)聽(tīng)
}
const result = Reflect.get(target, key, receive)
return result
},
set: function (target, key, val, reveive) {
// 重復(fù)的數(shù)據(jù)，不處理
const oldVal = target[key]
if (val == oldVal) {
return true
}
const result = Reflect.set(target, key, val, reveive)
console.log(result)
return result
},
// 刪除屬性
deleteProperty: function (target, key) {
const result = Reflect.deleteProperty(target, key)
return result
}
};
data = new Proxy(data, handler);
data.name = 'lisi'
console.log(data.name)
37冷守、MVC和MVVM
- mvc 中 Controller演變成 mvvm 中的 viewModel
- mvvm 通過(guò)數(shù)據(jù)來(lái)驅(qū)動(dòng)視圖層的顯示而不是節(jié)點(diǎn)操作刀崖。
- mvc中Model和View是可以直接打交道的，造成Model層和View層之間的耦合度高拍摇。而mvvm中Model和View不直接交互亮钦，而是通過(guò)中間橋梁ViewModel來(lái)同步
- mvvm主要解決了:mvc中大量的DOM 操作使頁(yè)面渲染性能降低，加載速度變慢充活，影響用戶(hù)體驗(yàn)蜂莉。
38、vue特點(diǎn)
- 入門(mén)難度低
- 虛擬dom
- 雙向綁定
- 插件化
- 輕量級(jí)
- 數(shù)據(jù)結(jié)構(gòu)分離
- 數(shù)據(jù)驅(qū)動(dòng)
- vue2.0不支持IE8及以下 和 vue3.0不支持IE11及以下
39混卵、vue3.0有哪些改進(jìn)
- 采用了 Proxy,拋棄了object. defineProperty
Vue2.x中的響應(yīng)式實(shí)現(xiàn)正是基于defineProperty中的descriptor映穗，對(duì) data 中的屬性做了遍歷 + 遞歸，為每個(gè)屬性設(shè)置了 getter幕随、setter蚁滋。
這也就是為什么 Vue 只能對(duì) data 中預(yù)定義過(guò)的屬性做出響應(yīng)的原因，在Vue中使用下標(biāo)的方式直接修改屬性的值或者添加一個(gè)預(yù)先不存在的對(duì)象屬性是無(wú)法做到setter監(jiān)聽(tīng)的赘淮，這是defineProperty的局限性辕录。對(duì)于數(shù)組添加對(duì)七種數(shù)組操作的方法進(jìn)行了監(jiān)聽(tīng)，分別是: push梢卸、pop走诞、shift、unshift低剔、sort速梗、reverse肮塞、splice函數(shù)
Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”姻锁，外界對(duì)該對(duì)象的訪(fǎng)問(wèn)枕赵，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制位隶，可以對(duì)外界的訪(fǎng)問(wèn)進(jìn)行過(guò)濾和改寫(xiě)拷窜。 - 虛擬dom新增了靜態(tài)節(jié)點(diǎn)和動(dòng)態(tài)節(jié)點(diǎn)
Vue2.x 中的虛擬dom是進(jìn)行全量的對(duì)比。
Vue3.0 中新增了靜態(tài)標(biāo)記（PatchFlag）：在與上次虛擬結(jié)點(diǎn)進(jìn)行對(duì)比的時(shí)候涧黄，值對(duì)比帶有patch flag的節(jié)點(diǎn)篮昧，并且可以通過(guò)flag 的信息得知當(dāng)前節(jié)點(diǎn)要對(duì)比的具體內(nèi)容化。 - 靜態(tài)提升
Vue2.x : 無(wú)論元素是否參與更新笋妥，每次都會(huì)重新創(chuàng)建懊昨。
Vue3.0 : 對(duì)不參與更新的元素，只會(huì)被創(chuàng)建一次春宣，之后會(huì)在每次渲染時(shí)候被不停的復(fù)用酵颁。
40、生命周期函數(shù)
- beforeCreate：是new Vue()之后觸發(fā)的第一個(gè)鉤子月帝，在當(dāng)前階段data躏惋、methods、computed以及watch上的數(shù)據(jù)和方法都不能被訪(fǎng)問(wèn)嚷辅。
- created：在實(shí)例創(chuàng)建完成后發(fā)生簿姨，當(dāng)前階段已經(jīng)完成了數(shù)據(jù)觀測(cè)，也就是可以使用數(shù)據(jù)簸搞，更改數(shù)據(jù)扁位，在這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù)∪疗梗可以做一些初始數(shù)據(jù)的獲取贤牛，在當(dāng)前階段無(wú)法與Dom進(jìn)行交互，如果非要想则酝，可以通過(guò)vm.$nextTick來(lái)訪(fǎng)問(wèn)Dom殉簸。
- beforeMount：發(fā)生在掛載之前，在這之前template模板已導(dǎo)入渲染函數(shù)編譯沽讹。而當(dāng)前階段虛擬Dom已經(jīng)創(chuàng)建完成般卑，即將開(kāi)始渲染。在此時(shí)也可以對(duì)數(shù)據(jù)進(jìn)行更改爽雄，不會(huì)觸發(fā)updated蝠检。
- mounted：在掛載完成后發(fā)生，在當(dāng)前階段挚瘟，真實(shí)的Dom掛載完畢叹谁，數(shù)據(jù)完成雙向綁定饲梭，可以訪(fǎng)問(wèn)到Dom節(jié)點(diǎn)，使用$refs屬性對(duì)Dom進(jìn)行操作焰檩。
- beforeUpdate：發(fā)生在更新之前憔涉，也就是響應(yīng)式數(shù)據(jù)發(fā)生更新，虛擬dom重新渲染之前被觸發(fā)析苫，你可以在當(dāng)前階段進(jìn)行更改數(shù)據(jù)兜叨，不會(huì)造成重渲染。
- updated：發(fā)生在更新完成之后衩侥，當(dāng)前階段組件Dom已完成更新国旷。要注意的是避免在此期間更改數(shù)據(jù)，因?yàn)檫@可能會(huì)導(dǎo)致無(wú)限循環(huán)的更新茫死。
- beforeDestroy：發(fā)生在實(shí)例銷(xiāo)毀之前跪但，在當(dāng)前階段實(shí)例完全可以被使用，我們可以在這時(shí)進(jìn)行善后收尾工作，比如清除計(jì)時(shí)器。
- destroyed：發(fā)生在實(shí)例銷(xiāo)毀之后黄娘，這個(gè)時(shí)候只剩下了dom空殼账嚎。組件已被拆解，數(shù)據(jù)綁定被卸除雄卷，監(jiān)聽(tīng)被移出搓蚪，子實(shí)例也統(tǒng)統(tǒng)被銷(xiāo)毀。
- activated: 包含在keep-alive中的組件在進(jìn)行調(diào)用的時(shí)候丁鹉，會(huì)被存放在緩存隊(duì)列中妒潭，再次調(diào)用的時(shí)候通過(guò)activated函數(shù)進(jìn)行更新。
- deactivated: 與activated組件相反揣钦，在調(diào)用其他tab組件時(shí)當(dāng)前會(huì)調(diào)用當(dāng)前組件的deactivated函數(shù)
- errorCaptured：當(dāng)捕獲一個(gè)來(lái)自子孫組件的錯(cuò)誤時(shí)被調(diào)用雳灾。此鉤子會(huì)收到三個(gè)參數(shù)：錯(cuò)誤對(duì)象、發(fā)生錯(cuò)誤的組件實(shí)例以及一個(gè)包含錯(cuò)誤來(lái)源信息的字符串冯凹。此鉤子可以返回 false 以阻止該錯(cuò)誤繼續(xù)向上傳播谎亩。
41、為什么組件的data必須是一個(gè)函數(shù)
一個(gè)組件可能在很多地方使用宇姚，也就是會(huì)創(chuàng)建很多個(gè)實(shí)例匈庭，如果data是一個(gè)對(duì)象的話(huà)，對(duì)象是引用類(lèi)型浑劳，一個(gè)實(shí)例修改了data會(huì)影響到其他實(shí)例阱持，所以data必須使用函數(shù)，為每一個(gè)實(shí)例創(chuàng)建一個(gè)屬于自己的data魔熏，使其同一個(gè)組件的不同實(shí)例互不影響衷咽。
42鸽扁、組件之間是怎么通信的
- 父子組件通信
父組件 -> 子組件：prop
子組件 -> 父組件：on / emit - 兄弟組件通信
Event Bus：每一個(gè)Vue實(shí)例都是一個(gè)Event Bus，都支持emit镶骗，可以為兄弟組件的實(shí)例之間new一個(gè)Vue實(shí)例桶现，作為Event Bus進(jìn)行通信。
- Vuex：將狀態(tài)和方法提取到Vuex卖词，完成共享
43巩那、說(shuō)一下什么是Virtual DOM
Virtual DOM 是 DOM 節(jié)點(diǎn)在 JavaScript 中的一種抽象數(shù)據(jù)結(jié)構(gòu)，之所以需要虛擬DOM此蜈，是因?yàn)闉g覽器中操作DOM的代價(jià)比較昂貴即横，頻繁操作DOM會(huì)產(chǎn)生性能問(wèn)題。虛擬DOM的作用是在每一次響應(yīng)式數(shù)據(jù)發(fā)生變化引起頁(yè)面重渲染時(shí)裆赵，Vue對(duì)比更新前后的虛擬DOM东囚，匹配找出盡可能少的需要更新的真實(shí)DOM，從而達(dá)到提升性能的目的战授。
44页藻、diff算法介紹
- 在新老虛擬DOM對(duì)比時(shí)
- 首先，對(duì)比節(jié)點(diǎn)本身植兰，判斷是否為同一節(jié)點(diǎn)份帐，如果不為相同節(jié)點(diǎn)，則刪除該節(jié)點(diǎn)重新創(chuàng)建節(jié)點(diǎn)進(jìn)行替換
- 如果為相同節(jié)點(diǎn)楣导，進(jìn)行patchVnode废境，判斷如何對(duì)該節(jié)點(diǎn)的子節(jié)點(diǎn)進(jìn)行處理，先判斷一方有子節(jié)點(diǎn)一方?jīng)]有子節(jié)點(diǎn)的情況(如果新的children沒(méi)有子節(jié)點(diǎn)筒繁，將舊的子節(jié)點(diǎn)移除)
- 比較如果都有子節(jié)點(diǎn)噩凹，則進(jìn)行updateChildren，判斷如何對(duì)這些新老節(jié)點(diǎn)的子節(jié)點(diǎn)進(jìn)行操作（diff核心）毡咏。
- 匹配時(shí)驮宴，找到相同的子節(jié)點(diǎn)，遞歸比較子節(jié)點(diǎn)
- 在diff中呕缭，只對(duì)同層的子節(jié)點(diǎn)進(jìn)行比較堵泽，放棄跨級(jí)的節(jié)點(diǎn)比較，使得時(shí)間復(fù)雜從O(n^3)降低值O(n)恢总，也就是說(shuō)落恼，只有當(dāng)新舊children都為多個(gè)子節(jié)點(diǎn)時(shí)才需要用核心的Diff算法進(jìn)行同層級(jí)比較。
45离熏、computed 和 watch 有什么區(qū)別及運(yùn)用場(chǎng)景?
- computed 計(jì)算屬性 : 依賴(lài)其它屬性值,并且 computed 的值有緩存,只有它依賴(lài)的屬性值發(fā)生改變,下一次獲取 computed 的值時(shí)才會(huì)重新計(jì)算 computed 的值佳谦。
- watch 偵聽(tīng)器 : 更多的是「觀察」的作用,無(wú)緩存性,類(lèi)似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào),每當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作。
46滋戳、for循環(huán)中key的作用是什么钻蔑？
在對(duì)節(jié)點(diǎn)進(jìn)行diff的過(guò)程中啥刻，判斷是否為相同節(jié)點(diǎn)的一個(gè)很重要的條件是key是否相等，如果是相同節(jié)點(diǎn)咪笑，則會(huì)盡可能的復(fù)用原有的DOM節(jié)點(diǎn)可帽。所以key屬性是提供給框架在diff的時(shí)候使用的，而非開(kāi)發(fā)者窗怒。
47映跟、vue渲染過(guò)程
- parse 函數(shù)解析 template,生成語(yǔ)法樹(shù)
- optimize 函數(shù)優(yōu)化靜態(tài)節(jié)點(diǎn),diff 算法會(huì)直接跳過(guò)靜態(tài)節(jié)點(diǎn),從而減少比較的過(guò)程
- generate 函數(shù)生成 render 函數(shù)字符串
- 調(diào)用 new Watcher 函數(shù),監(jiān)聽(tīng)數(shù)據(jù)的變化,Render 函數(shù)執(zhí)行生成 vnode 對(duì)象
- 調(diào)用 patch 方法,對(duì)比新舊 vnode 對(duì)象,通過(guò) DOM diff 算法,添加、修改扬虚、刪除真正的 DOM 元素
48努隙、聊聊 keep-alive 的實(shí)現(xiàn)原理和緩存策略
keep-alive包含的組件在使用的時(shí)候，會(huì)根據(jù)組件 ID 和 tag 生成緩存 Key,并在緩存對(duì)象中,再次使用的時(shí)候會(huì)直接取出并更新key值辜昵，
在 this.cache 對(duì)象中存儲(chǔ)該組件實(shí)例并保存 key 值,之后檢查緩存的實(shí)例數(shù)量是否超過(guò) max 的設(shè)置值,超過(guò)則shift第一個(gè)
LRU 緩存淘汰算法
LRU（Least recently used）算法根據(jù)數(shù)據(jù)的歷史訪(fǎng)問(wèn)記錄來(lái)進(jìn)行淘汰數(shù)據(jù),其核心思想是“如果數(shù)據(jù)最近被訪(fǎng)問(wèn)過(guò),那么將來(lái)被訪(fǎng)問(wèn)的幾率也更高”荸镊。
49、SSR有了解嗎堪置？原理是什么躬存？
在客戶(hù)端請(qǐng)求服務(wù)器的時(shí)候，服務(wù)器到數(shù)據(jù)庫(kù)中獲取到相關(guān)的數(shù)據(jù)舀锨，并且在服務(wù)器內(nèi)部將Vue組件渲染成HTML岭洲，并且將數(shù)據(jù)、HTML一并返回給客戶(hù)端坎匿，這個(gè)在服務(wù)器將數(shù)據(jù)和組件轉(zhuǎn)化為HTML的過(guò)程钦椭，叫做服務(wù)端渲染SSR。
50碑诉、使用SSR的好處：
- 有利于SEO：其實(shí)就是有利于爬蟲(chóng)來(lái)爬你的頁(yè)面，因?yàn)椴糠猪?yè)面爬蟲(chóng)是不支持執(zhí)行JavaScript的侥锦，這種不支持執(zhí)行JavaScript的爬蟲(chóng)抓取到的非SSR的頁(yè)面會(huì)是一個(gè)空的HTML頁(yè)面进栽，而有了SSR以后，這些爬蟲(chóng)就可以獲取到完整的HTML結(jié)構(gòu)的數(shù)據(jù)恭垦，進(jìn)而收錄到搜索引擎中快毛。
- 白屏?xí)r間更短：相對(duì)于客戶(hù)端渲染，服務(wù)端渲染在瀏覽器請(qǐng)求URL之后已經(jīng)得到了一個(gè)帶有數(shù)據(jù)的HTML文本番挺，瀏覽器只需要解析HTML唠帝，直接構(gòu)建DOM樹(shù)就可以。而客戶(hù)端渲染玄柏，需要先得到一個(gè)空的HTML頁(yè)面襟衰，這個(gè)時(shí)候頁(yè)面已經(jīng)進(jìn)入白屏，之后還需要經(jīng)過(guò)加載并執(zhí)行 JavaScript粪摘、請(qǐng)求后端服務(wù)器獲取數(shù)據(jù)瀑晒、JavaScript 渲染頁(yè)面幾個(gè)過(guò)程才可以看到最后的頁(yè)面绍坝。特別是在復(fù)雜應(yīng)用中，由于需要加載 JavaScript 腳本苔悦，越是復(fù)雜的應(yīng)用轩褐，需要加載的 JavaScript 腳本就越多、越大玖详，這會(huì)導(dǎo)致應(yīng)用的首屏加載時(shí)間非常長(zhǎng)把介，進(jìn)而降低了體驗(yàn)感。
51蟋座、盒子模型和怪異盒子
box-sizing:border-box; 怪異盒模型
box-sizing:content-box; 標(biāo)準(zhǔn)盒模型
52拗踢、清除浮動(dòng)
- 父級(jí)元素設(shè)置overflow:hidden;
元素溢出無(wú)法顯示 - 在最后一個(gè)浮動(dòng)標(biāo)簽后，新加一個(gè)標(biāo)簽蜈七，給其設(shè)置clear：both秒拔；
添加無(wú)意義標(biāo)簽，語(yǔ)意化差 - 使用after偽元素清除浮動(dòng)（推薦使用）
.clearfix:after{
/* 設(shè)置添加子元素的內(nèi)容是空 */
content: '';
/* 設(shè)置添加子元素為塊級(jí)元素 */
display: block;
/* 設(shè)置添加的子元素的高度0 */
height: 0;
/* 設(shè)置添加子元素看不見(jiàn) */
visibility: hidden;
/* 設(shè)置clear:both */
clear: both;
}
53飒硅、es6
- promise
- acync砂缩、await
- 箭頭函數(shù)
沒(méi)有this指向，沒(méi)有arguments參數(shù)三娩，可以使用rest(...)剩余運(yùn)算符庵芭，不能作為構(gòu)造函數(shù)，沒(méi)有原型屬性雀监，不能作為Generator函數(shù)双吆，不能使用yield關(guān)鍵字 - 解構(gòu)賦值
let [a, b, c] = [1, 2, 3];
let [a, ...b] = [1, 2, 3];
let { type, name, value = true } = node;
- var、let会前、const
- map和set
map和set是es6新定義的一種數(shù)據(jù)結(jié)構(gòu),都可以用forEach和for...of遍歷
map類(lèi)似于字典的一種數(shù)據(jù)結(jié)構(gòu)好乐，任何類(lèi)型的數(shù)據(jù)都可以為鍵
var map = new Map([['XiaoMing', 99], ['XiaoHong', 66]]);
map.set("XiaoHong",66);
map.get("XiaoHong");
map.has("XiaoHong");
map.delete("XiaoHong")
set集合無(wú)重復(fù)
let set = new Set([1,2,3,4,5,4,3,2,1])
console.lg(set) // Set(5) {1, 2, 3, 4, 5}
set.add(6)
set.clear()
set.delete(2)
set.has(2)
- symbol
54、移動(dòng)端適配方案
- viewport（scale=1/dpr）
- rem
- flex
- vm/vh
1瓦宜、vw：1vw等于視口寬度的1%蔚万。
2、vh：1vh等于視口高度的1%临庇。
55反璃、history和hash實(shí)現(xiàn)原理
- hash路由在地址欄URL上有#
- hash路由支持低版本的瀏覽器，而history路由是HTML5新增的API
- hash的特點(diǎn)在于它雖然出現(xiàn)在了URL中假夺，但是不包括在http請(qǐng)求中淮蜈，所以對(duì)于后端是沒(méi)有一點(diǎn)影響的，所以改變hash不會(huì)重新加載頁(yè)面已卷，所以這也是單頁(yè)面應(yīng)用的必備梧田。
- history運(yùn)用了瀏覽器的歷史記錄棧，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法柿扣，它們提供了對(duì)歷史記錄進(jìn)行修改的功能
- history的這種模式需要后臺(tái)配置支持肖方。比如：當(dāng)我們進(jìn)行項(xiàng)目的主頁(yè)的時(shí)候，一切正常未状，可以訪(fǎng)問(wèn)俯画，但是當(dāng)我們刷新頁(yè)面或者直接訪(fǎng)問(wèn)路徑的時(shí)候就會(huì)返回404，那是因?yàn)樵趆istory模式下司草，只是動(dòng)態(tài)的通過(guò)js操作window.history來(lái)改變?yōu)g覽器地址欄里的路徑艰垂，并沒(méi)有發(fā)起http請(qǐng)求，但是當(dāng)我直接在瀏覽器里輸入這個(gè)地址的時(shí)候埋虹，就一定要對(duì)服務(wù)器發(fā)起http請(qǐng)求猜憎，但是這個(gè)目標(biāo)在服務(wù)器上又不存在，所以會(huì)返回404
- 解決報(bào)錯(cuò)需要nginx配置
location / {
try_files $uri $uri/ /index.html;
}
56搔课、new一個(gè)函數(shù)胰柑，都會(huì)發(fā)生什么？
- 創(chuàng)建一個(gè)新對(duì)象爬泥；
- 將構(gòu)造函數(shù)的作用域賦給新對(duì)象柬讨；
- 執(zhí)行構(gòu)造函數(shù)中的代碼
- 返回新對(duì)象
57、實(shí)現(xiàn)new方法
function _new(fn, ...arg) {
const obj = Object.create(fn.prototype);
const result = fn.apply(obj, arg);
return result instanceof Object ? result : obj;
}
function Student(name){
this.name = name
}
let obj = new Student('sgr')
console.log(obj)
let student = _new(Student, 'sgr')
console.log(student)
58袍啡、vue雙向綁定
let obj = {}
let val = ''
Object.defineProperty(obj, 'name', {
get(){
console.log('get')
return val
},
set(newValue){
console.log('set')
val = newValue
document.getElementById('input').value=val
return val
}
})
obj.name
obj.name = 22
function change(){
val = document.getElementById('input').value
console.log(val)
}
59踩官、同源
相同協(xié)議、域名境输、端口
60蔗牡、跨域
- JSONP跨域
客戶(hù)端和服務(wù)端約定好一個(gè)函數(shù)名，當(dāng)我請(qǐng)求文件的時(shí)候嗅剖，服務(wù)端返回一段 JavaScript辩越。這段 JavaScript 調(diào)用了我們約定好的函數(shù)，并且將數(shù)據(jù)當(dāng)做參數(shù)傳入
function dosomething(response){
console.log('The responsed data is: '+response.data);
//處理獲得的Json數(shù)據(jù)
}
<script src="http://www.example.com/data/?callback=dosomething"></script>
- window.name+iframe來(lái)進(jìn)行跨域
window的name屬性特征：name 值在不同的頁(yè)面（甚至不同域名）加載后依舊存在信粮，所以可以通過(guò)iframe標(biāo)簽將數(shù)據(jù)頁(yè)面加載到當(dāng)前頁(yè)面獲取黔攒，數(shù)據(jù)頁(yè)面的window.name
<script>
function getData(){
//iframe載入data.html頁(yè)面會(huì)執(zhí)行此函數(shù)
var ifr = document.getElementById("iframe");
ifr.onload = function(){
//這個(gè)時(shí)候iframe和a.html已經(jīng)處于同一源，可以互相訪(fǎng)問(wèn)
var data = ifr.contentWindow.name;
//獲取iframe中的window.name蒋院，也就是data.html中給它設(shè)置的數(shù)據(jù)
alert(data);
}
ifr.src = 'b.html';//這里的b.html為隨便一個(gè)頁(yè)面，只要與a.html同源就行莲绰，目的是讓a.html能夠訪(fǎng)問(wèn)到iframe中的東西欺旧，否則訪(fǎng)問(wèn)不到
}
</script>
<iframe id = "iframe" src = "cnblogs.com/data.html" style = "display:none" onload = "getData()"></iframe>
- 通過(guò)document.domain+iframe來(lái)跨子域
不設(shè)置主域是訪(fǎng)問(wèn)不到的
// a.html
<iframe src = "http://script.a.com/dir/b.html" id="iframe" onload = "loLoad()"></iframe>
<script>
document.domain = "a.com";//設(shè)置成主域
function loLoad(){
var iframe = document.getElementById("iframe");
var win = iframe.contentWindow;
//在這里就可以操作b.html
var doc = win.document;//這里獲取iframe中的document對(duì)象
var name = win.name;//這里獲取window對(duì)象的name屬性
}
</script>
// b.html
<script>
document.domain = "a.com";
</script>
- cors跨域
服務(wù)器在響應(yīng)的header中設(shè)置Access-Control-Allow-origin為*，即可允許所有域名的跨域訪(fǎng)問(wèn)蛤签。
61辞友、性能優(yōu)化
- 減少 HTTP 請(qǐng)求
- 使用服務(wù)端渲染
- 靜態(tài)資源使用 CDN
- 將 CSS 放在文件頭部，JavaScript 文件放在底部
- 使用字體圖標(biāo) iconfont 代替圖片圖標(biāo)
- 壓縮文件
- 圖片優(yōu)化
1）圖片延遲加載
2）響應(yīng)式圖片
3）圖片壓縮
4）CSS3 效果代替圖片
5）精靈圖 - 使用事件委托
- 降低 CSS 選擇器的復(fù)雜性
瀏覽器讀取選擇器，遵循的原則是從選擇器的右邊到左邊讀取 - 使用 flexbox
- 減少內(nèi)存泄漏
閉包的使用称龙，全局變量的使用 - 減少重排重繪
當(dāng)改變 DOM 元素位置或大小時(shí)留拾，會(huì)導(dǎo)致瀏覽器重新生成渲染樹(shù)，這個(gè)過(guò)程叫重排鲫尊。
當(dāng)重新生成渲染樹(shù)后痴柔，就要將渲染樹(shù)每個(gè)節(jié)點(diǎn)繪制到屏幕，這個(gè)過(guò)程叫重繪疫向。
重排會(huì)導(dǎo)致重繪咳蔚，重繪不會(huì)導(dǎo)致重排 。 - link代替import
- 減少dom操作
- 避免css表達(dá)式
- 防抖和節(jié)流函數(shù)
- 數(shù)據(jù)扁平化管理
- 列表的滾動(dòng)窗口
- 本地緩存
- 按需加載資源
- 使用負(fù)載均衡方案
62搔驼、webpack性能優(yōu)化
- 路由懶加載
- image-webpack-loader
- vender.js過(guò)于大 谈火，進(jìn)行拆分
由于webpack打包后的js過(guò)大，以至于在加載資源時(shí)間過(guò)長(zhǎng)舌涨。所以將文件打包成多個(gè)js文件糯耍，在需要的時(shí)候按需加載。 - 引入 三方組件庫(kù)過(guò)大的話(huà)囊嘉，可以進(jìn)行按需加載
- web前端項(xiàng)目温技，靜態(tài)資源放在cdn上比較多，gzip的壓縮是非常必要的哗伯，它直接改變了js文件的大小荒揣，減少兩到三倍。
nginx: 開(kāi)啟gzip和緩存 - 服務(wù)器緩存
63焊刹、繼承
- 原型鏈繼承
核心：父類(lèi)實(shí)例作為子類(lèi)原型
優(yōu)點(diǎn)：1：復(fù)用了父類(lèi)構(gòu)造函數(shù)方法
缺點(diǎn)：1：不能向父類(lèi)構(gòu)造函數(shù)方法傳參, 2：子類(lèi)實(shí)例共享父類(lèi)構(gòu)造函數(shù)引用屬性
function Parent(name){
this.name = name || 'parent'
this.arr = [1]
}
Parent.prototype.say = function(){
console.log('hello')
}
function Child(like){
this.like = like
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
let boy1 = new Child()
let boy2 = new Child()
//優(yōu)點(diǎn)1：復(fù)用了父類(lèi)構(gòu)造函數(shù)方法
console.log(boy1.say === boy2.say) //true
//缺點(diǎn)1：不能向父類(lèi)構(gòu)造函數(shù)方法傳參
console.log(boy1.name, boy2.name) // parent parent
//缺點(diǎn)2：子類(lèi)實(shí)例共享父類(lèi)構(gòu)造函數(shù)引用屬性
boy1.arr.push(2)
console.log(boy2.arr) //[1,2]
- 構(gòu)造函數(shù)繼承
核心：借用父類(lèi)構(gòu)造函數(shù)方法來(lái)增強(qiáng)子類(lèi)實(shí)例
優(yōu)點(diǎn)：1：子類(lèi)實(shí)例可以強(qiáng)父類(lèi)傳參系任，2：子類(lèi)實(shí)例不共享父類(lèi)引用屬性，3：可實(shí)現(xiàn)多繼承（通過(guò)多個(gè)call或者apply繼承多個(gè)父類(lèi)）
缺點(diǎn)：1：父類(lèi)方法不能復(fù)用（相當(dāng)于每次創(chuàng)建實(shí)例都重新創(chuàng)建了一次方法）, 2：不能繼承子類(lèi)原型上的方法
function Parent(name){
this.name = name
this.arr = [1]
this.say = function(){
console.log('hello')
}
}
function Child(name, like){
Parent.call(this,name)
this.like = like
}
let boy1 = new Child('Jhon', 'Apple')
let boy2 = new Child('Mary', 'Orange')
//優(yōu)點(diǎn)1：可以向父類(lèi)構(gòu)造函數(shù)傳參
console.log(boy1.name, boy2.name) //Jhon Mary
//優(yōu)點(diǎn)2：子類(lèi)不共享父類(lèi)構(gòu)造函數(shù)的引用屬性
boy1.arr.push(2)
console.log(boy2.arr) //[1]
//缺點(diǎn)1：方法不能復(fù)用
console.log(boy1.say === boy2.say) //false
//缺點(diǎn)2：不能繼承父類(lèi)原型上的方法
Parent.prototype.walk = function(){
console.log('walk')
}
console.log(boy1.walk) //undefined
- 組合繼承
核心：通過(guò)調(diào)用父類(lèi)構(gòu)造方法繼承父類(lèi)屬性并保存?zhèn)鲄⒌膬?yōu)點(diǎn)虐块，通過(guò)父類(lèi)的實(shí)例作為子類(lèi)的原型復(fù)用方法
優(yōu)點(diǎn)：1：創(chuàng)建子類(lèi)實(shí)例俩滥，可以向父類(lèi)傳參，2：原型方法實(shí)現(xiàn)復(fù)用贺奠，3：不共享父類(lèi)構(gòu)造函數(shù)的引用屬性
缺點(diǎn)：1：調(diào)用了兩次父類(lèi)構(gòu)造函數(shù)的方法
//組合繼承
function Parent(name){
this.name = name
this.arr = [1]
}
Parent.prototype.say = function(){
console.log('hello')
}
function Child(name, like){
Parent.call(this, name) //第二次調(diào)用父類(lèi)構(gòu)造函數(shù)方法
this.like = like
}
Child.prototype = new Parent() //第一次調(diào)用父類(lèi)構(gòu)造函數(shù)方法
Child.prototype.constructor = Child
let boy1 = new Child('John', 'Apple')
let boy2 = new Child('Mary', 'Orange')
//優(yōu)點(diǎn)1：可以向父類(lèi)構(gòu)造函數(shù)傳參
console.log(boy1.name, boy2.name) // John Mary
//優(yōu)點(diǎn)2：可以復(fù)用父類(lèi)原型上的方法
console.log(boy1.say === boy2.say) //true
//優(yōu)點(diǎn)3：不共享父類(lèi)構(gòu)造函數(shù)引用屬性
boy1.arr.push(2)
console.log(boy2.arr) //[1]
//缺點(diǎn)1：調(diào)用了兩次父類(lèi)構(gòu)造函數(shù)
- 組合繼承優(yōu)化
function Parent(name){
this.name = name
this.arr = [1]
}
Parent.prototype.say = function(){
console.log('hello')
}
function Child(name, like){
Parent.call(this, name)
this.like = like
}
//通過(guò)Object.create把Parent.prototype進(jìn)行復(fù)制一份霜旧，1.避免調(diào)用 2.深度拷貝不會(huì)共享屬性
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
let boy1 = new Child('John', 'Apple')
let boy2 = new Child('Mary', 'Orange')
let parent = new Parent('Label')
//優(yōu)點(diǎn)1：可以向父類(lèi)構(gòu)造函數(shù)傳參
console.log(boy1.name, boy2.name) // John Mary
//優(yōu)點(diǎn)2：可以復(fù)用父類(lèi)原型上的方法
console.log(boy1.say === boy2.say) //true
//優(yōu)點(diǎn)3：不共享父類(lèi)構(gòu)造函數(shù)引用屬性
boy1.arr.push(2)
console.log(boy2.arr) //[1]
//父類(lèi)實(shí)例指向父類(lèi)原型
console.log(boy1.constructor, boy2.constructor, parent.constructor)
64、原型鏈
在js中萬(wàn)物皆對(duì)象儡率，任何對(duì)象都會(huì)有一個(gè)__proto__屬性,當(dāng)訪(fǎng)問(wèn)一個(gè)對(duì)象的某個(gè)屬性時(shí)挂据，會(huì)先在這個(gè)對(duì)象本身屬性上查找，如果沒(méi)有找到儿普，則會(huì)去它的proto隱式原型上查找崎逃，即它的構(gòu)造函數(shù)的prototype，如果還沒(méi)有找到就會(huì)再在構(gòu)造函數(shù)的prototype的proto中查找眉孩，這樣一層一層向上查找就會(huì)形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)个绍，我們稱(chēng)為原型鏈勒葱。
65、0.1 + 0.2 === 0.3 嘛巴柿？為什么凛虽？
10進(jìn)制整數(shù)轉(zhuǎn)化為2進(jìn)制，除2取余
10進(jìn)制小數(shù)轉(zhuǎn)化為2進(jìn)制广恢，乘2取整
0.1和0.2都是無(wú)限循環(huán)凯旋，截取52位，0舍1入（類(lèi)似4舍5入）
0.2+0.7 = 0.899999999999
66袁波、v-show和v-if指令的共同點(diǎn)和不同點(diǎn)瓦阐？
答: 共同點(diǎn)：都能控制元素的顯示和隱藏；
不同點(diǎn)：實(shí)現(xiàn)本質(zhì)方法不同篷牌，v-show本質(zhì)就是通過(guò)控制css中的display設(shè)置為none睡蟋，控制隱藏，只會(huì)編譯一次枷颊；v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素戳杀，若初始值為false，就不會(huì)編譯了夭苗。而且v-if不停的銷(xiāo)毀和創(chuàng)建比較消耗性能信卡。
67、如何獲取dom?
答：ref="domName" 用法：this.$refs.domName
68题造、單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)
答：?jiǎn)雾?yè)面應(yīng)用（SPA）傍菇，通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用，瀏覽器一開(kāi)始要加載所有必須的 html, js, css界赔。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中丢习。但在寫(xiě)的時(shí)候，還是會(huì)分開(kāi)寫(xiě)（頁(yè)面片段）淮悼，然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入咐低，單頁(yè)面的頁(yè)面跳轉(zhuǎn)，僅刷新局部資源袜腥。多應(yīng)用于pc端见擦。
多頁(yè)面（MPA），就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面羹令，頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新
單頁(yè)面的優(yōu)點(diǎn)：
用戶(hù)體驗(yàn)好鲤屡，快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面福侈，基于這一點(diǎn)spa對(duì)服務(wù)器壓力較芯评础；前后端分離癌刽；頁(yè)面效果會(huì)比較炫酷（比如切換頁(yè)面內(nèi)容時(shí)的專(zhuān)場(chǎng)動(dòng)畫(huà)）役首。
單頁(yè)面缺點(diǎn)：
不利于seo；導(dǎo)航不可用显拜，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)衡奥、后退。（由于是單頁(yè)面不能用瀏覽器的前進(jìn)后退功能远荠，所以需要自己建立堆棧管理）矮固；初次加載時(shí)耗時(shí)多；頁(yè)面復(fù)雜度提高很多譬淳。
69档址、vue常用修飾符
- stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡邻梆；
- prevent：等同于JavaScript中的event.preventDefault()守伸，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件浦妄，而不停止事件的進(jìn)一步傳播）尼摹；
- capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)剂娄；
- self：只會(huì)觸發(fā)自己范圍內(nèi)的事件蠢涝，不包含子元素；
- once：只會(huì)觸發(fā)一次阅懦。
- passive：滾動(dòng)時(shí)候觸發(fā)
- sync
70和二、get和post的區(qū)別
- GET與POST都有自己的語(yǔ)義，不能隨便混用耳胎。
- 對(duì)參數(shù)的數(shù)據(jù)類(lèi)型惯吕，GET只接受ASCII字符，而POST支持多種編碼方式场晶。
- 參數(shù)傳輸：GET請(qǐng)求的參數(shù)在URL中混埠，POST請(qǐng)求是在請(qǐng)求的body里。
71诗轻、vuex
- state 全局狀態(tài)
- getters 緩存屬性
- mutations 同步函數(shù)钳宪，修改狀態(tài)，commit
- actions 異步函數(shù)扳炬，更新 mutations吏颖，dispatch
- modules 模塊分割
72、async恨樟、await半醉、generator
// promise版本 版本自執(zhí)行函數(shù)
function run (Generator) {
var hw = Generator();
const next = (query)=>{
var aa = hw.next(query)
if(!aa.done){
aa.value.then(next)
}else{
return true
}
}
next()
}
function* fib(max) {
var t,
a = 0,
b = 1,
n = 0;
while (n < max) {
yield a;
[a, b] = [b, a + b];
n ++;
}
return;
}
var f = fib(5);
console.log(f.next()); // {value: 0, done: false}
console.log(f.next()); // {value: 1, done: false}
console.log(f.next()); // {value: 1, done: false}
console.log(f.next()); // {value: 2, done: false}
console.log(f.next()); // {value: 3, done: false}
console.log(f.next()); // {value: undefined, done: true}
- await 必須放在async function中
- await 是 async wait的簡(jiǎn)寫(xiě)，await會(huì)將代碼放入promise中劝术，執(zhí)行完畢之后缩多，返回resolve(data), 并將之后的代碼放入then函數(shù)中
- 轉(zhuǎn)換 await 為 yield 呆奕、轉(zhuǎn)換 async 為 Generator
- async await 實(shí)際上是由 generator + yield 控制流程 + promise 實(shí)現(xiàn)回調(diào)
- 利用generator遍歷器生成器函數(shù)的分段執(zhí)行 ，只有在遍歷器對(duì)象 執(zhí)行next方法之后交出了控制權(quán) 衬吆，在完成后 callback || promise.then()里面調(diào)用下一次next的時(shí)候又繼續(xù)恢復(fù)控制權(quán)這個(gè)功能來(lái)實(shí)現(xiàn)的
73梁钾、webpack常用的一些模塊以及功能
- style-loader：將CSS添加到DOM的內(nèi)聯(lián)樣式標(biāo)簽style里
- css-loader：允許將CSS文件通過(guò)require的方式引入销睁，并返回CSS代碼
- less-loader：處理less
- sass-loader：處理sass
- postcss-loader：用postcss來(lái)處理CSS
- file-loader：分發(fā)文件到output目錄并返回相對(duì)路徑
- url-loader 和 file-loader 類(lèi)似仔拟，但是當(dāng)文件小于設(shè)定的limit時(shí)可以返回一個(gè)Data Url
- html-minify-loader：壓縮HTML文件
- babel-loader：把ES6文件轉(zhuǎn)換成ES5文件
- webpack-dev-server: 開(kāi)發(fā)時(shí)使用，靜態(tài)服務(wù)器硼补，并且有熱更新等功能冒嫡。
- compression-webpack-plugin： 生產(chǎn)環(huán)境時(shí)可選擇讓代碼壓縮gzip.
- html-webpack-plugin : 生成index.html 并自動(dòng)注入打包后的js css 等
- definePlugin： 可以生成配置常量拇勃。編譯時(shí)就有的常量。
- extract-text-webpack-plugin： 提取使用文件的css 組成一個(gè)或多個(gè)css 文件孝凌。
- uglifyjs-webpack-plugin： 刪除警告方咆，壓縮代碼等。
74蟀架、常用的設(shè)計(jì)模式有哪些
- 單例模式
- 工廠(chǎng)模式
- 觀察者模式
- 發(fā)布訂閱模式
- 代理人模式
75峻呛、不使用比較運(yùn)算符，計(jì)算出較大值
max = （a+b+Math.abs(a-b)）/2
min = （a+b-Math.abs(a-b)）/2
76辜窑、如果上一層就是根root了钩述，em和rem等價(jià)么？
等價(jià)
77穆碎、websocket
const socket = new WebSocket('ws://localhost:8080');
//方法
socket .send("Hello server!"); //發(fā)送數(shù)據(jù)
socket .close(); //關(guān)閉鏈接
//事件函數(shù) open message error close
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
socket.addEventListener('message', function (event) {
console.log('Message from server ', event.data);
});
socket.addEventListener('error', function (event) {
console.log('Message from server ', event.data);
});
socket.addEventListener('close', function (event) {
console.log('Message from server ', event.data);
});
//屬性
事件綁定等價(jià)于屬性函數(shù)執(zhí)行 操作
socket.onclose = function (event) {
console.log('Message from server ', event.data);
}
78牙勘、重排重繪
- 重繪不一定需要重排，重排必然會(huì)導(dǎo)致重繪
- 重繪是在一個(gè)元素的外觀被改變所觸發(fā)的瀏覽器行為所禀，瀏覽器會(huì)根據(jù)元素的新屬性重新繪制方面，使元素呈現(xiàn)新的外觀。
- 導(dǎo)致重排色徘，增加恭金、刪除節(jié)點(diǎn)，改變?cè)匚恢霉硬摺⒊叽?/li>
- 批量修改dom可以先讓父級(jí)元素脫離文檔流横腿，然后進(jìn)行添加批量dom元素，然后在進(jìn)行顯示斤寂，脫離文檔流增刪元素耿焊，不會(huì)引起回流
- 文檔片段是一個(gè)輕量級(jí)的document對(duì)象，它設(shè)計(jì)的目的就是用于更新遍搞，移動(dòng)節(jié)點(diǎn)之類(lèi)的任務(wù)罗侯，而且文檔片段還有一個(gè)好處就是，當(dāng)向一個(gè)節(jié)點(diǎn)添加文檔片段時(shí)溪猿，添加的是文檔片段的子節(jié)點(diǎn)群钩杰，自身不會(huì)被添加進(jìn)去纫塌。
不同于第一種方法，這個(gè)方法并不會(huì)使元素短暫消失造成邏輯問(wèn)題讲弄。
79护戳、HTML5的離線(xiàn)儲(chǔ)存怎么使用
Web App是通過(guò)瀏覽器來(lái)訪(fǎng)問(wèn)的，其中web app中的一些資源并不經(jīng)常改變垂睬，不需要每次都向服務(wù)器發(fā)送請(qǐng)求。通過(guò)把需要離線(xiàn)緩存儲(chǔ)的文件列在一個(gè)manifest配置文件中抗悍。這樣在離線(xiàn)情況下也可以使用app驹饺。
<html manifest="sample.appcache">
在服務(wù)器添加mime-type text/cache-manifest
80、原生ajax過(guò)程
var xhr = new XMLHttpRequest();
xhr.open(‘get’,’http://www.example.com’);
xhr.send();
xhr.onload = function () {
//xhr.responseText 獲取服務(wù)器端的響應(yīng)數(shù)據(jù)
console.log(xhr.responseText);
}
81缴渊、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)
- localStorage
在一個(gè)標(biāo)簽頁(yè)調(diào)用localStorage.setItem(name,val)保存數(shù)據(jù)localStorage.removeItem(name)刪除數(shù)據(jù)的時(shí)候會(huì)觸發(fā) 'storage'事件赏壹。
在另外一個(gè)標(biāo)簽頁(yè)監(jiān)聽(tīng)document對(duì)象的storage事件，在事件event對(duì)象屬性中獲取信息
window.onstorage = (e) => {console.log(e)}
window.addEventListener('storage', (e) => console.log(e))
- websocket
多標(biāo)簽頁(yè)面鏈接同一個(gè)服務(wù)器衔沼，當(dāng)發(fā)送數(shù)據(jù)給服務(wù)器的時(shí)候蝌借，服務(wù)器作為轉(zhuǎn)接將數(shù)據(jù)發(fā)送給其他標(biāo)簽頁(yè)面。 - sharedWorker
82指蚁、線(xiàn)程,進(jìn)程
- 線(xiàn)程是可以進(jìn)行運(yùn)算調(diào)度的最小單元菩佑，進(jìn)程是擁有獨(dú)立的內(nèi)存單元
- 一個(gè)進(jìn)程可以包含多個(gè)線(xiàn)程，不同進(jìn)程間數(shù)據(jù)不能共享
- 線(xiàn)程在執(zhí)行過(guò)程中凝化，需要協(xié)作同步稍坯。不同進(jìn)程的線(xiàn)程間要利用消息通信的辦法實(shí)現(xiàn)同步。
83搓劫、href與src的區(qū)別
- href 標(biāo)識(shí)超文本引用瞧哟，用在 link 和 a 等元素上，href 是引用和頁(yè)面關(guān)聯(lián)枪向，是在當(dāng)前元素和引用資源之間建立聯(lián)系勤揩。
- src 表示引用資源，表示替換當(dāng)前元素秘蛔，用在img陨亡，script，iframe 上深员，src 是頁(yè)面內(nèi)容不可缺少的一部分数苫。
84、斷點(diǎn)續(xù)傳原理
一個(gè)大文件辨液，可以將其切割成適當(dāng)?shù)男∥募凹保峤唤o后臺(tái)，再由后臺(tái)合并成大文件滔迈。
- 化整為零止吁，可以防止文件上傳中斷而導(dǎo)致整個(gè)文件都需要重新上傳的杯具問(wèn)題被辑。
- 分成小文件，可以利用ajax的多線(xiàn)程敬惦，同時(shí)提交多個(gè)小文件盼理，從而提升上傳速度。
85俄删、怎么實(shí)現(xiàn)兩個(gè)大整數(shù)的相乘宏怔，說(shuō)下思路
一般涉及到大整數(shù)，都需要考慮通過(guò)數(shù)組或者字符串來(lái)模擬算術(shù)運(yùn)算畴椰。我們通過(guò)數(shù)組來(lái)表示兩個(gè)數(shù)字a臊诊、b（這里從左往右需要從個(gè)位數(shù)到最高位），這里的相乘只需要理解一點(diǎn)：a的每一位a[i]乘以b的每一位b[j]斜脂，我們可以先將其放在結(jié)果中的result[i+j]中抓艳。這是模擬運(yùn)算的過(guò)程。剩下的只需要將result中每一位大于9的進(jìn)行進(jìn)位即可帚戳。
function dazhenghsuAdd(str1,str2){
str1=str1.split('').reverse();
str2=str2.split('').reverse();
let result=[];
for(let i=0;i<str1.length;i++){
for(let j=0;j<str2.length;j++){
result[i+j]=result[i+j]||0;//如果result[i+j]是undefined則將其變?yōu)?
result[i+j]+=parseInt(str1[i])*parseInt(str2[j]);
}
}
let temp;
for(let k=0;k<result.length;k++){
if(result[k]>9){
temp=Math.floor(result[k]/10);
result[k]=result[k]%10;
result[k+1]=result[k+1]||0;
result[k+1]+=temp;
}
}
return result.reverse().join('');
}
86玷或、cookie與session
- 數(shù)據(jù)存放位置不同：
cookie數(shù)據(jù)存放在客戶(hù)的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上片任。 - 安全程度不同：
cookie不是很安全偏友，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙,考慮到安全應(yīng)當(dāng)使用session。 - 性能使用程度不同：
session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上对供。當(dāng)訪(fǎng)問(wèn)增多约谈，會(huì)比較占用你服務(wù)器的性能,考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用cookie犁钟。 - 數(shù)據(jù)存儲(chǔ)大小不同：
單個(gè)cookie保存的數(shù)據(jù)不能超過(guò)4K棱诱，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie，而session則存儲(chǔ)與服務(wù)端涝动，瀏覽器對(duì)其沒(méi)有限制迈勋。
87、undefined 和 null 區(qū)別
- 都是基本的數(shù)據(jù)類(lèi)型
- 語(yǔ)義上：未定義醋粟，空對(duì)象
- boolean：false, false
- Number：NaN, 0
- typeof：undefined, object
88靡菇、eval
-
eval()是一個(gè)危險(xiǎn)的函數(shù)， 它使用與調(diào)用者相同的權(quán)限執(zhí)行代碼米愿。如果你用eval()運(yùn)行的字符串代碼被惡意方（不懷好意的人）修改厦凤，您最終可能會(huì)在您的網(wǎng)頁(yè)/擴(kuò)展程序的權(quán)限下，在用戶(hù)計(jì)算機(jī)上運(yùn)行惡意代碼育苟。更重要的是较鼓，第三方代碼可以看到某一個(gè)eval()被調(diào)用時(shí)的作用域，這也有可能導(dǎo)致一些不同方式的攻擊。相似的Function就不容易被攻擊博烂。 -
eval()通常比其他替代方法更慢香椎，因?yàn)樗仨氄{(diào)用 JS 解釋器，而許多其他結(jié)構(gòu)則可被現(xiàn)代 JS 引擎進(jìn)行優(yōu)化禽篱。
89畜伐、iframe有那些缺點(diǎn)？
- 優(yōu)點(diǎn)：
1）iframe能夠把嵌入的網(wǎng)頁(yè)原樣展現(xiàn)出來(lái)躺率；
2）跨域 - 缺點(diǎn)：
1）iframes阻塞頁(yè)面加載玛界，影響網(wǎng)頁(yè)加載速度
2）嵌入其他頁(yè)面、增加資源請(qǐng)求
3）爬蟲(chóng)無(wú)法解讀頁(yè)面悼吱，影響seo
91慎框、nexttick
在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候舆绎，這個(gè)操作都應(yīng)該放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。
先更新數(shù)據(jù)们颜，后更新視圖節(jié)點(diǎn)吕朵，用于解決數(shù)據(jù)已經(jīng)賦值，但是進(jìn)行dom操作的時(shí)候拿到的還是之前的值
92窥突、require.js
- 首先努溃，加載的時(shí)候，瀏覽器會(huì)停止網(wǎng)頁(yè)渲染阻问，加載文件越多梧税，網(wǎng)頁(yè)失去響應(yīng)的時(shí)間就會(huì)越長(zhǎng)；
- 其次称近，由于js文件之間存在依賴(lài)關(guān)系第队，因此必須嚴(yán)格保證加載順序,依賴(lài)性最大的模塊一定要放到最后加載，當(dāng)依賴(lài)關(guān)系很復(fù)雜的時(shí)候刨秆，代碼的編寫(xiě)和維護(hù)都會(huì)變得困難凳谦。
//IE不識(shí)別async屬性，需要添加 defer
<script src="js/require.js" defer async="true" data-main="js/main"></script>
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
//main.js
require(['math'], function (math){
alert(math.add(1,1));
});
93衡未、CommonJs
一個(gè)單獨(dú)文件就是一個(gè)模塊尸执，通過(guò)require方法來(lái)同步加載要依賴(lài)的模塊，然后通過(guò)extports或則module.exports來(lái)導(dǎo)出需要暴露的接口缓醋。
- 優(yōu)點(diǎn)：服務(wù)器端模塊重用如失，NPM中模塊包多，有將近20萬(wàn)個(gè)送粱。
- 缺點(diǎn)：加載模塊是同步的褪贵，只有加載完成后才能執(zhí)行后面的操作，也就是當(dāng)要用到該模塊了抗俄，現(xiàn)加載現(xiàn)用竭鞍，不僅加載速度慢板惑，而且還會(huì)導(dǎo)致性能、可用性偎快、調(diào)試和跨域訪(fǎng)問(wèn)等問(wèn)題冯乘。Node.js主要用于服務(wù)器編程，加載的模塊文件一般都存在本地硬盤(pán)晒夹，加載起來(lái)比較快裆馒，不用考慮異步加載的方式，因此,CommonJS規(guī)范比較適用丐怯。然而喷好，這并不適合在瀏覽器環(huán)境，同步意味著阻塞加載读跷，瀏覽器資源是異步加載的梗搅，因此有了AMD CMD解決方案。
- 實(shí)現(xiàn)：服務(wù)器端的 Node.js效览；Browserify无切，瀏覽器端的 CommonJS 實(shí)現(xiàn)，可以使用 NPM 的模塊丐枉，但是編譯打包后的 文件體積可能很大哆键；modules-webmake，類(lèi)似Browserify瘦锹，還不如 Browserify 靈活籍嘹；wreq，Browserify 的前身弯院；
94辱士、AMD
- 優(yōu)點(diǎn)：在瀏覽器環(huán)境中異步加載模塊；并行加載多個(gè)模塊听绳；
- 缺點(diǎn)：開(kāi)發(fā)成本高识补，代碼的閱讀和書(shū)寫(xiě)比較困難，模塊定義方式的語(yǔ)義不順暢辫红；不符合通用的模塊化思維方式凭涂，是一種妥協(xié)的實(shí)現(xiàn)；
- 實(shí)現(xiàn)：RequireJS贴妻； curl切油；
95、CMD
- 優(yōu)點(diǎn)：依賴(lài)就近名惩，延遲執(zhí)行 可以很容易在 Node.js 中運(yùn)行澎胡；
- 缺點(diǎn)：依賴(lài) SPM 打包，模塊的加載邏輯偏重；
- 實(shí)現(xiàn)：Sea.js 攻谁；coolie
96稚伍、calc, support, media各自的含義及用法？
- @support主要是用于檢測(cè)瀏覽器是否支持CSS的某個(gè)屬性戚宦，其實(shí)就是條件判斷个曙，如果支持某個(gè)屬性，你可以寫(xiě)一套樣式受楼，如果不支持某個(gè)屬性垦搬，你也可以提供另外一套樣式作為替補(bǔ)。
@supports (display: flex) { div { display: flex; }}
- calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值艳汽。 calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算猴贰；
width: calc(100% - 100px);
- @media 查詢(xún)，你可以針對(duì)不同的媒體類(lèi)型定義不同的樣式河狐。
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
97米绕、頁(yè)面渲染html的過(guò)程？
- 瀏覽器解析html源碼馋艺，然后創(chuàng)建一個(gè) DOM樹(shù)栅干。在DOM樹(shù)中并行請(qǐng)求 css/image/js。
- 瀏覽器解析CSS代碼丈钙，計(jì)算出最終的樣式數(shù)據(jù)非驮。構(gòu)建CSSOM樹(shù)交汤。
- DOM Tree + CSSOM--> 渲染樹(shù)（rendering tree） --> layout樹(shù)（重排） --> painting樹(shù)（重繪） 雏赦。渲染樹(shù)和DOM樹(shù)有點(diǎn)像，但是是有區(qū)別的芙扎。
DOM樹(shù)完全和html標(biāo)簽一一對(duì)應(yīng)星岗，但是渲染樹(shù)會(huì)忽略掉不需要渲染的元素，比如head戒洼、display:none的元素等俏橘。 - 一旦渲染樹(shù)創(chuàng)建好了，瀏覽器就可以根據(jù)渲染樹(shù)直接把頁(yè)面繪制到屏幕上圈浇。
98寥掐、如何中斷ajax請(qǐng)求？
一種是設(shè)置超時(shí)時(shí)間讓ajax自動(dòng)斷開(kāi)磷蜀，另一種是手動(dòng)停止ajax請(qǐng)求召耘，其核心是調(diào)用XML對(duì)象的abort方法，ajax.abort()
99褐隆、解構(gòu)賦值是深拷貝還是淺拷貝
基礎(chǔ)類(lèi)型深拷貝污它，引用類(lèi)型淺拷貝
100、css3新增
transition:all 2s ;
transform:translate(100px, 100px);
transform:rotate(30deg, 30deg);
transform:skew(100px, 100px);
transform:scale(1.2, 1.2);
animation:myfirst 3s;
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
101、點(diǎn)擊穿透
手機(jī)端判斷是否是雙擊行為衫贬，瀏覽器會(huì)進(jìn)行300ms延遲操作德澈，如果沒(méi)有第二次點(diǎn)擊，則視為點(diǎn)擊操作
touchStart=>touchMove=>touchEnd=>click
因?yàn)?00ms延遲的原因固惯，如果點(diǎn)擊已經(jīng)關(guān)閉彈窗梆造，延遲執(zhí)行了click，就會(huì)多執(zhí)行一次click事件缝呕，這個(gè)過(guò)程就叫 點(diǎn)擊穿透
preventDefault()
102澳窑、Function Object
Function instanceof Object;//true
Object instanceof Function;//true
Object.prototype = null
Function.prototype.proto===Object.prototype
Function.constructor==Function
Object.constructor==Function
103、vue文檔
104供常、vuex文檔
105摊聋、sass文檔
(sass官方文檔)[https://www.sass.hk/docs/]
106、字符串栈暇、數(shù)組麻裁、map、集合函數(shù)
107源祈、算法與數(shù)據(jù)結(jié)構(gòu)
108煎源、git
109、restful
110香缺、webpack調(diào)試 手销、打包、測(cè)試
111图张、同步锋拖、異步和阻塞、非阻塞
A煮開(kāi)水
- 水壺放到火上祸轮，等水燒開(kāi)（同步阻塞）
- 水壺放到火上兽埃，看電視 ，時(shí)不時(shí)（輪詢(xún)）查看水是否燒開(kāi)适袜，（同步非阻塞）
- 響水壺放到火上柄错，等著水燒開(kāi)，水燒開(kāi)發(fā)出響聲（異步阻塞）
- 響水壺放到火上苦酱，看電視售貌，水燒開(kāi)的響聲，得到開(kāi)水（異步非阻塞）
同步/異步主要針對(duì)C端
阻塞/非阻塞主要針對(duì)S端
同步IO和異步IO的區(qū)別就在于：數(shù)據(jù)訪(fǎng)問(wèn)的時(shí)候進(jìn)程是否阻塞疫萤！
阻塞IO和非阻塞IO的區(qū)別就在于：應(yīng)用程序的調(diào)用是否立即返回颂跨！
112、瀏覽器線(xiàn)程
- 瀏覽器中有三個(gè)常駐的線(xiàn)程给僵，分別是JS引擎毫捣，界面渲染详拙，事件響應(yīng)。由于這三個(gè)線(xiàn)程同時(shí)要訪(fǎng)問(wèn)DOM樹(shù)蔓同，所以為了線(xiàn)程安全饶辙，瀏覽器內(nèi)部需要做互斥：當(dāng)JS引擎在執(zhí)行代碼的時(shí)候，界面渲染和事件響應(yīng)兩個(gè)線(xiàn)程是被暫停的斑粱。所以當(dāng)JS出現(xiàn)死循環(huán)弃揽，瀏覽器無(wú)法響應(yīng)點(diǎn)擊，也無(wú)法更新界面则北。
- http請(qǐng)求線(xiàn)程不能操作Dom
- 定時(shí)器線(xiàn)程
113矿微、worker對(duì)象
執(zhí)行http請(qǐng)求線(xiàn)程，不與js主線(xiàn)程
//index.js
var worker = new Worker("data.js");
//接受數(shù)據(jù)
worker.onmessage = function(){
console.log(event.data)
};
document.getElementById('ale').addEventListener('click',()=>{
alert(1)
},false)
//用于關(guān)閉worker線(xiàn)程
worker.terminate();
//data.js
var i = 0
setInterval(()=>{
i++
postMessage(i)
},1000)
114尚揣、異步處理機(jī)制
console.log(1);
setTimeout(e => {
console.log(2);
}, 0)
setTimeout(e => {
console.log(3);
}, 0)
new Promise((resolve, reject) => {
console.log(4);
resolve();
}).then(e => {
console.log(5);
})
setTimeout(e => {
console.log(6);
new Promise((resolve, reject) => {
console.log(7);
resolve();
})
.then(e => {
console.log(8);
})
})
//1 4 5 2 3 6 7 8
115涌矢、nodejs中的異步處理機(jī)制
階段總覽
- timers : setTimeout、setInterval
- I/O callbacks : 執(zhí)行幾乎所有異常的close回調(diào)快骗，由timer和setImmediate執(zhí)行的回調(diào)娜庇。
- idle,prepare: 只用于內(nèi)部
- poll : 獲取新的I/O事件，node在該階段會(huì)適當(dāng)?shù)淖枞?/li>
- check : setImmediate的回調(diào)被調(diào)用
- close callbacks: e.g socket.on(‘close’,…);
- 每個(gè)階段執(zhí)行完畢都會(huì)執(zhí)行nexttick和promise
116方篮、實(shí)現(xiàn)一個(gè)add函數(shù)
add(1,2,3)(4)(5,6)
function add(...args){
let sum = args.reduce((prev, cur)=>{return prev + cur}, 0)
function add2(...args2){
return add(sum, ...args2)
}
add2.toString = function(){
return sum
}
return add2
}
//console.log(add(1,2,3)(4)(5,6)) //21
117名秀、強(qiáng)緩存與協(xié)商緩存
- 直接使用本地的緩存，不用跟服務(wù)器進(jìn)行通信（200）
-
expires
一個(gè)未來(lái)時(shí)間藕溅，代表請(qǐng)求有效期匕得，沒(méi)有過(guò)期之前都使用當(dāng)前請(qǐng)求。 -
cache-control
no-cache：這個(gè)很容易讓人產(chǎn)生誤解巾表，使人誤以為是響應(yīng)不被緩存汁掠。實(shí)際上no-cache是會(huì)被緩存的，只不過(guò)每次在向客戶(hù)端（瀏覽器）提供響應(yīng)數(shù)據(jù)時(shí)攒发，緩存都要向服務(wù)器評(píng)估緩存響應(yīng)的有效性调塌。
no-store：這個(gè)才是響應(yīng)不被緩存的意思晋南。
pubilc：任何情況下都緩存（即使是HTTP認(rèn)證的資源）
private：只能被終端用戶(hù)的瀏覽器緩存惠猿，不允許CDN等中繼緩存服務(wù)器對(duì)其緩存
缺點(diǎn)：
Last-Modified/If-Modified-Since 精確到秒，1s內(nèi)多次更改無(wú)法識(shí)別
部分文件有可能是定期（或周期）生成负间，不需要重新進(jìn)行獲取偶妖，但是Last-Modified/If-Modified-Since會(huì)認(rèn)為發(fā)生了改變
- 至少與服務(wù)器通信一次，判斷瀏覽器是否能直接使用本地緩存（304）
- Last-Modified/If-Modified-Since（兩個(gè)都是時(shí)間格式字符串）
- Etag/If-None-Match（標(biāo)識(shí)符字符串）
與 Last-Modified/If-Modified-Since 不同的是政溃，返回 304 時(shí)趾访，
ETag 還是會(huì)重新生成返回至瀏覽器。
118董虱、瀏覽器緩存有哪些
- http緩存是基于HTTP協(xié)議的瀏覽器文件級(jí)緩存機(jī)制扼鞋。
- websql這種方式只有較新的chrome瀏覽器支持申鱼，并以一個(gè)獨(dú)立規(guī)范形式出現(xiàn)
- indexDB 是一個(gè)為了能夠在客戶(hù)端存儲(chǔ)可觀數(shù)量的結(jié)構(gòu)化數(shù)據(jù)，并且在這些數(shù)據(jù)上使用索引進(jìn)行高性能檢索的 API
- Cookie一般網(wǎng)站為了辨別用戶(hù)身份云头、進(jìn)行session跟蹤而儲(chǔ)存在用戶(hù)本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）
- Localstoragehtml5的一種新的本地緩存方案捐友，目前用的比較多，一般用來(lái)存儲(chǔ)ajax返回的數(shù)據(jù)溃槐，加快下次頁(yè)面打開(kāi)時(shí)的渲染速度
- Sessionstorage和localstorage類(lèi)似匣砖，但是瀏覽器關(guān)閉則會(huì)全部刪除，api和localstorage相同昏滴，實(shí)際項(xiàng)目中使用較少猴鲫。
- application cache 是將大部分圖片資源、js谣殊、css等靜態(tài)資源放在manifest文件配置中
- cacheStorage是在ServiceWorker的規(guī)范中定義的拂共，可以保存每個(gè)serverWorker申明的cache對(duì)象
- flash緩存 這種方式基本不用，這一方法主要基于flash有讀寫(xiě)瀏覽器端本地目錄的功能
119姻几、http和https的區(qū)別
120匣缘、vue中觀察者模式的體現(xiàn)
data發(fā)生變化觸發(fā)監(jiān)聽(tīng)函數(shù)執(zhí)行
發(fā)布者 監(jiān)聽(tīng)者
事件點(diǎn)擊dom觸發(fā)事件綁定函數(shù)執(zhí)行回調(diào)
發(fā)布者 監(jiān)聽(tīng)者
121、1px問(wèn)題
由于不同的手機(jī)有不同的像素密度導(dǎo)致的鲜棠。如果移動(dòng)顯示屏的分辨率始終是普通屏幕的2倍肌厨，1px的邊框在devicePixelRatio=2的移動(dòng)顯示屏下會(huì)顯示成2px，所以在高清瓶下看著1px總是感覺(jué)變胖了
許多博客都是這么解釋的豁陆，實(shí)際上不是的
設(shè)計(jì)稿如果是750px像素的1px柑爸，在375px的邏輯像素設(shè)備上顯示1px的時(shí)候只需要0.5px，然而css本身最小像素是1px盒音，所以感覺(jué)變寬了
- 在ios8+中當(dāng)devicePixelRatio=2的時(shí)候使用0.5px
p{
border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
p{
border:0.5px solid #000;
}
}
- transform
transform: scaleY(0.5);
- 圖片填充背景
- box-shadow模擬邊框
- viewport + rem 實(shí)現(xiàn)
122表鳍、面向?qū)ο蟮撵o態(tài)方法
- 面向?qū)ο箪o態(tài)方法是直接在class中進(jìn)行定義的，可以通過(guò)類(lèi)型直接進(jìn)行調(diào)用祥诽，不能通過(guò)實(shí)例調(diào)用譬圣，不能繼承。普遍來(lái)說(shuō)都是一些工具類(lèi)方法（Array.isArray()）或者一些原始值（Date.now()）
- 實(shí)例方法是通過(guò)實(shí)例進(jìn)行調(diào)用的雄坪，可繼承 厘熟，通過(guò)原型隊(duì)形進(jìn)行定義虾标。
- 在java中class是一等公民坤候，在一些需要調(diào)用函數(shù)帖蔓，但是又不需要實(shí)例化的情況下恕刘，引入了靜態(tài)方法的概念箩艺，在js中函數(shù)是一等公民镀层，所以實(shí)際上根本不需要引入靜態(tài)方法俘侠，靜態(tài)方法更像定義了一些全局方法酌泰，唯一的效果個(gè)人理解就是有了前綴购撼，更利于理解和記憶跪削，和盡可能的避免全局變量環(huán)境的一個(gè)污染
123谴仙、es6一些概念性的東西
作用域
上下文
124、垃圾回收的一些實(shí)例
125碾盐、import狞甚、export、require廓旬、defined
126哼审、深拷貝和淺拷貝的實(shí)現(xiàn)
127、單行文本居中孕豹、多行文本居左
128涩盾、彈性盒子container中有三個(gè)元素，前兩個(gè)居左励背，第三個(gè)居右
129春霍、inject、provide函數(shù)
130叶眉、vue傳值方式址儒？
props on()
children
attr
131、eventBus
132衅疙、vue初始化頁(yè)面閃動(dòng)問(wèn)題莲趣？
webpack、vue-router
v-cloak css:[v-cloak]:display:none
133饱溢、字符串?dāng)?shù)組轉(zhuǎn)為數(shù)字?jǐn)?shù)組
['1','2','3'].map(Number) // [1, 2, 3]
['1','2','3'],map(parseInt) // [1, NaN, NaN]
parseInt(str, radix)
//函數(shù)接收兩個(gè)參數(shù), 默認(rèn)傳遞item喧伞，index參數(shù)，radix為基數(shù)绩郎，轉(zhuǎn)換按照radix進(jìn)制潘鲫，所以str每一項(xiàng)不能大于或等于radix否則NaN，當(dāng)index為0時(shí),按照字符串0開(kāi)頭以十進(jìn)制返回
134肋杖、for...of 和 for...in 區(qū)別
- for-of 遍歷的是值溉仑，for-in遍歷的是key
- for-of 無(wú)法遍歷 不可迭代對(duì)象(obj)
可迭代對(duì)象包括: Array，Map状植，Set浊竟，String，TypedArray浅萧，arguments等等
可通過(guò)return逐沙、break哲思，進(jìn)行中斷和關(guān)鍵字continue洼畅； - for...in...遍歷對(duì)象也會(huì)遍歷原型對(duì)象上的屬性，需要hasOwnProperty進(jìn)行過(guò)濾
135棚赔、Object對(duì)象
136帝簇、v-deep
如果不使用scoped屬性改公共組件的樣式會(huì)被污染到全局,但設(shè)置scoped屬性的話(huà)徘郭，直接覆蓋樣式會(huì)不生效。
vue組件中使用第三方組件庫(kù)丧肴，需要在這個(gè)組件中定制樣式又不想影響其他地方使用此第三方組件的樣式残揉。
用deep選擇器，可以穿透scoped但又不會(huì)污染全局樣式芋浮。
137抱环、觸發(fā)冒泡和不能觸發(fā)冒泡的方法有哪些
138、Proxy
139纸巷、 mixin 的缺陷
140镇草、數(shù)字不能直接當(dāng)作對(duì)象使用
10.toString(2) // 出錯(cuò)：SyntaxError
2..toString(); // 第二個(gè)點(diǎn)號(hào)可以正常解析
2 .toString(); // 注意點(diǎn)號(hào)前面的空格
(2).toString(); // 2先被計(jì)算
let a = new Map();
a[1] = 2
console.log(a.1) // SyntaxError
console.log(a[1]) // 2
141、http各個(gè)版本的區(qū)別
- http1.0：
- 每次TCP連接只能發(fā)送一個(gè)請(qǐng)求瘤旨，當(dāng)服務(wù)器響應(yīng)后就會(huì)關(guān)閉這次連接梯啤，不支持 keep-alive，只有g(shù)et方法存哲，只能發(fā)送純文本
- http1.1：
- 引入了持久鏈接因宇，TCP連接默認(rèn)不關(guān)閉，可以被多個(gè)請(qǐng)求復(fù)用;
- 加入了管道機(jī)制祟偷，允許多個(gè)請(qǐng)求同時(shí)發(fā)送察滑，增加了并發(fā)性；
- 一個(gè)TCP連接可以傳送多個(gè)回應(yīng)修肠，勢(shì)必區(qū)分?jǐn)?shù)據(jù)包是哪一個(gè)回應(yīng)的杭棵。這就是Content-length字段的作用，聲明本次回應(yīng)的數(shù)據(jù)長(zhǎng)度氛赐；
- 新增了請(qǐng)求方式PUT魂爪、PATCH、OPTIONS艰管、DELETE等滓侍；
- 客戶(hù)端請(qǐng)求的頭信息新增了Host字段，用來(lái)指定服務(wù)器的域名牲芋；
- 使用Content-Length字段的前提條件是撩笆，服務(wù)器發(fā)送回應(yīng)之前，必須知道回應(yīng)的數(shù)據(jù)長(zhǎng)度缸浦。對(duì)于一些很耗時(shí)的動(dòng)態(tài)操作來(lái)說(shuō)夕冲，服務(wù)器要等到所有操作完成，才能發(fā)送數(shù)據(jù)裂逐，更好的處理方法是歹鱼，產(chǎn)生一塊數(shù)據(jù)，就發(fā)送一塊卜高，分塊傳輸編碼弥姻；
- 支持文件斷點(diǎn)續(xù)傳南片，RANGE:bytes，HTTP/1.0每次傳送文件都是從文件頭開(kāi)始庭敦，即0字節(jié)處開(kāi)始疼进。RANGE:bytes=XXXX表示要求服務(wù)器從文件XXXX字節(jié)處開(kāi)始傳送，斷點(diǎn)續(xù)傳秧廉。即返回碼是206（Partial Content）
- http2.0：
- 二進(jìn)制協(xié)議
一個(gè)徹底的二進(jìn)制協(xié)議伞广，頭信息和數(shù)據(jù)體都是二進(jìn)制 - 多工
一個(gè)連接里，客戶(hù)端和瀏覽器都可以同時(shí)發(fā)送多個(gè)請(qǐng)求或回應(yīng)疼电，而且不用按照順序一一對(duì)應(yīng)赔癌，避免了"隊(duì)頭堵塞"，采用多路復(fù)用的技術(shù)澜沟，數(shù)量級(jí)的一個(gè)提升 - 頭信息壓縮
HTTP 協(xié)議不帶有狀態(tài)灾票，每次請(qǐng)求都必須附上所有信息。所以茫虽，請(qǐng)求的很多字段都是重復(fù)的刊苍，比如Cookie和User Agent，一模一樣的內(nèi)容濒析，每次請(qǐng)求都必須附帶正什，這會(huì)浪費(fèi)很多帶寬，也影響速度号杏。
一方面婴氮，頭信息使用gzip或compress壓縮后再發(fā)送；另一方面盾致，客戶(hù)端和服務(wù)器同時(shí)維護(hù)一張頭信息表主经，所有字段都會(huì)存入這個(gè)表，生成一個(gè)索引號(hào)庭惜，以后就不發(fā)送同樣字段了罩驻，只發(fā)送索引號(hào)，這樣就提高速度了护赊。 - 服務(wù)器推送
HTTP/2 允許服務(wù)器未經(jīng)請(qǐng)求惠遏，主動(dòng)向客戶(hù)端發(fā)送資源，這叫做服務(wù)器推送骏啰，適合加載靜態(tài)資源
-
總結(jié)
HTTP/0.9：功能撿漏节吮，只支持GET方法，只能發(fā)送HTML格式字符串判耕。
HTTP/1.0：支持多種數(shù)據(jù)格式透绩，增加POST、HEAD等方法，增加頭信息渺贤，每次只能發(fā)送一個(gè)請(qǐng)求（無(wú)持久連接）
HTTP/1.1：默認(rèn)持久連接雏胃、請(qǐng)求管道化请毛、增加緩存處理志鞍、增加Host字段、支持?jǐn)帱c(diǎn)傳輸分塊傳輸?shù)取?br> HTTP/2.0：二進(jìn)制分幀方仿、多路復(fù)用固棚、頭部壓縮、服務(wù)器推送
142仙蚜、react 和 vue 對(duì)比
- 相同點(diǎn)
- 都使用了虛擬dom
- 提供了響應(yīng)式和組件化的視圖組件
- 提供了路由和全局狀態(tài)管理庫(kù)
- 不同點(diǎn)
- react 當(dāng)組件的狀態(tài)發(fā)生變化時(shí)此洲，會(huì)以該組件為根，重新渲染整個(gè)組件子樹(shù)委粉。避免不必要的子組件的重渲染呜师，需要在所有可能的地方使用
PureComponent，或是手動(dòng)實(shí)現(xiàn)shouldComponentUpdate方法贾节。同時(shí)你可能會(huì)需要使用不可變的數(shù)據(jù)結(jié)構(gòu)immutable來(lái)使得你的組件更容易被優(yōu)化汁汗。Vue 中組件的依賴(lài)是在渲染過(guò)程中自動(dòng)追蹤的 - react 所有的組件的渲染功能都依靠
JSX。JSX 是使用 XML 語(yǔ)法編寫(xiě) JavaScript 的一種語(yǔ)法糖栗涂。
vue是在 .vue文件中將 html知牌、css、js分別劃分了一塊區(qū)域斤程，組合到一起角寸，用各自的處理方式。 - react元素都是
immutable不可變的忿墅。當(dāng)元素被創(chuàng)建之后扁藕，你是無(wú)法改變其內(nèi)容或?qū)傩缘摹Ｒ粋€(gè)元素就好像是動(dòng)畫(huà)里的一幀疚脐，它代表應(yīng)用界面在某一時(shí)間點(diǎn)的樣子纹磺。更新界面的唯一辦法是創(chuàng)建一個(gè)新的元素，然后將它傳入 ReactDOM.render() 方法亮曹。
vue 數(shù)據(jù)直接修改橄杨，響應(yīng)式。 - react是單向數(shù)據(jù)流照卦。
vue的依賴(lài)追蹤是通過(guò) Object.defineProperty 把data對(duì)象的屬性全部轉(zhuǎn)為 getter/setter來(lái)實(shí)現(xiàn)的式矫；當(dāng)改變數(shù)據(jù)的某個(gè)屬性值時(shí)，會(huì)觸發(fā)set函數(shù),獲取該屬性值的時(shí)候會(huì)觸發(fā)get函數(shù)役耕，通過(guò)這個(gè)特性來(lái)實(shí)現(xiàn)改變數(shù)據(jù)時(shí)改變視圖采转；也就是說(shuō)只有當(dāng)數(shù)據(jù)改變時(shí)才會(huì)觸發(fā)視圖的改變，反過(guò)來(lái)在操作視圖時(shí)，只能通過(guò)DOM事件來(lái)改變數(shù)據(jù)故慈，再由此來(lái)改變視圖板熊，以此來(lái)實(shí)現(xiàn)雙向綁定。 - react本身察绷，是嚴(yán)格的view層干签，MVC模式
vue 是MVVM模式的一種方式實(shí)現(xiàn)
雖然沒(méi)有完全遵循 MVVM 模型，Vue 的設(shè)計(jì)無(wú)疑受到了它的啟發(fā)拆撼。因此在文檔中經(jīng)常會(huì)使用 vm (ViewModel 的簡(jiǎn)稱(chēng)) 這個(gè)變量名表示 Vue 實(shí)例容劳。
143、tcp 和 udp
144闸度、bebal 原理
145竭贩、tcp 握手和揮手
146、promise.all方法
疑問(wèn)1：如果第一個(gè)報(bào)錯(cuò)莺禁，后面的會(huì)執(zhí)行嗎留量，返回什么？
static all (list) {
return new MyPromise((resolve, reject) => {
/**
* 返回值的集合
*/
let values = []
let count = 0
for (let [i, p] of list.entries()) {
// 數(shù)組參數(shù)如果不是MyPromise實(shí)例哟冬，先調(diào)用MyPromise.resolve
this.resolve(p).then(res => {
values[i] = res
count++
// 所有狀態(tài)都變成fulfilled時(shí)返回的MyPromise狀態(tài)就變成fulfilled
if (count === list.length) resolve(values)
}, err => {
// 有一個(gè)被rejected時(shí)返回的MyPromise狀態(tài)就變成rejected
reject(err)
})
}
})
}
回答：會(huì)返回報(bào)錯(cuò)信息楼熄，后面的不會(huì)執(zhí)行。代碼可以看出來(lái)柒傻，全部成功執(zhí)行完孝赫，才會(huì)執(zhí)行resolve函數(shù)，只要有一個(gè)報(bào)錯(cuò)就會(huì)執(zhí)行reject函數(shù)
別走红符，還有后續(xù)吶······
本文只是我個(gè)人的知識(shí)點(diǎn)整理青柄，日后還會(huì)不斷的進(jìn)行補(bǔ)充，工作中遇到的知識(shí)點(diǎn)如果不及時(shí)記錄過(guò)后很有可能會(huì)被遺忘预侯。如果小伙伴們還能想到其他vue前端面試題致开，歡迎在評(píng)論區(qū)留言，分享是種美德萎馅，謝謝你的貢獻(xiàn)双戳。
0k
