原地址：https://blog.csdn.net/Mr_JavaScript/article/details/84311068

1. flex布局：又叫做彈性布局

任何一個(gè)容器都可以指定flex布局，如display:flex 或 display:inline-flex

注意：設(shè)置了flex布局以后，子元素的float，clear，vertical-align屬性將失效

容器的屬性：

flex-direction flex-wrap flex-flow justify-content align-items align-content

2. js有哪些遍歷數(shù)組的方法

es5方法：

(1)for循環(huán)：通過(guò)下標(biāo)遍歷數(shù)組的每一項(xiàng)

(2)array.forEach(item, index, array)

(3) array.map(item, index, array => return 格式化數(shù)組)

(4) array.filter(item, index, array => return 過(guò)濾條件)

(5) array.every(((item, index, array)=>{ return //判斷條件 }))

如果每個(gè)元素都符合條件，則返回true，否則返回false；

6)array.some(((item, index, array)=>{ return //判斷條件 }))

只要有一個(gè)元素符合條件，就返回true，否則返回false；

7)array.reduce((prev,cur,index,array)=>{})

從左到右遍歷數(shù)組，并返回回調(diào)函數(shù)的值(應(yīng)用于求和，求冪等)；prev為上一輪函數(shù)執(zhí)行結(jié)果(previousResult)，cur為當(dāng)前值(currentValue)

8)array.reduceRight((prev,cur,index,array)=>{})

從右到左遍歷數(shù)組，并返回回調(diào)函數(shù)的值；

ES6方法：

1)for(let item of array){? //等到每個(gè)元素? }

for(let index of array.keys()) {? ?//keys()返回?cái)?shù)組的鍵(index)? }

for(let keyAndValue of array.entries()){? ?//entries()返回?cái)?shù)組的鍵值對(duì)(index:element)? }

2)array.find((value, index, array)=>{ return //條件 }

返回第一個(gè)符合條件的元素，如果沒(méi)找到返回undefined(找到第一個(gè)符合條件的元素，則停止遍歷)

3)array.findIndex((value, index, array)=>{ return //條件 }

返回第一個(gè)符合條件的元素下標(biāo)，如果沒(méi)找到則返回-1(找到第一個(gè)符合條件的元素，則停止遍歷)

3、箭頭函數(shù)的特性

1)箭頭函數(shù)是匿名函數(shù)，自身沒(méi)有this和arguments，它的this從上下文捕捉而來(lái)；

2)箭頭函數(shù)不能作為構(gòu)造函數(shù)，和 new 一起用就會(huì)拋出錯(cuò)誤；

3)箭頭函數(shù)沒(méi)有原型屬性(prototype)；

4)箭頭函數(shù)不能當(dāng)做Generator函數(shù),不能使用yield關(guān)鍵字；

5、MVVM模式介紹

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，其核心是提供對(duì)View 和 ViewModel 的雙向數(shù)據(jù)綁定，這使得ViewModel 的狀態(tài)改變可以自動(dòng)傳遞給 View，即所謂的數(shù)據(jù)雙向綁定。

beforeCreate() 創(chuàng)建組件

created() 創(chuàng)建完成

beforeMounte() 組件被掛載前

mounted() 組件掛載完成

beforeUpdate() 組件更新前

updated() 組件更新后

beforeDestory() 組件摧毀前

destoryed() 組件摧毀后

7、Vue數(shù)據(jù)雙向綁定原理

vue.js是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式實(shí)現(xiàn)數(shù)據(jù)雙向綁定，通過(guò)Object.defineProperty()來(lái)劫持各個(gè)屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，從而更新視圖層的數(shù)據(jù)。

vue的數(shù)組如何實(shí)現(xiàn)的雙向綁定

9、web緩存

http請(qǐng)求頭緩存

1)強(qiáng)制緩存：

第一次請(qǐng)求即把數(shù)據(jù)緩存起來(lái)，在緩存數(shù)據(jù)未失效的情況下，之后的請(qǐng)求都直接使用緩存數(shù)據(jù)。

緩存規(guī)則(header里配置) Cache-Control，參數(shù)：private(客戶端可以緩存)，public(客戶端和代理服務(wù)器都可緩存)，max-age=xxx 緩存時(shí)長(zhǎng)(s)，no-cache使用緩存前，再向服務(wù)器發(fā)送驗(yàn)證請(qǐng)求，no-store禁止緩存。

2)協(xié)商緩存：

第一次請(qǐng)求時(shí)拿到緩存數(shù)據(jù)和緩存標(biāo)識(shí)，再次請(qǐng)求時(shí)向服務(wù)器發(fā)送緩存標(biāo)識(shí)，服務(wù)器判斷緩存是否有效，若有效則返回304狀態(tài)碼，請(qǐng)求數(shù)據(jù)從緩存讀取，若無(wú)效則返回202，需要重新發(fā)送http請(qǐng)求數(shù)據(jù)。

緩存數(shù)據(jù)的修改時(shí)間(header里配置) Last-Modified(第一次請(qǐng)求) 數(shù)據(jù)最后修改時(shí)間，If-Modified-Since(再次請(qǐng)求)上次請(qǐng)求時(shí)的最后修改時(shí)間。

緩存標(biāo)識(shí)(header里配置)：Etag(第一次請(qǐng)求)由服務(wù)器生成的唯一標(biāo)識(shí)，If-None-Match(再次請(qǐng)求)第一次請(qǐng)求獲取的唯一標(biāo)識(shí)。

常用瀏覽器緩存

1)Cookie主要用于用戶信息的存儲(chǔ)，Cookie的內(nèi)容可以自動(dòng)在請(qǐng)求的時(shí)候被傳遞給服務(wù)器；

2)LocalStorage的數(shù)據(jù)將一直保存在瀏覽器內(nèi)，直到用戶清除瀏覽器緩存數(shù)據(jù)為止；

3)SessionStorage的其他屬性同LocalStorage，只不過(guò)它的生命周期同標(biāo)簽頁(yè)的生命周期，當(dāng)標(biāo)簽頁(yè)被關(guān)閉時(shí)，SessionStorage也會(huì)被清除；

4)IndexDB主要用在前端有大容量存儲(chǔ)需求的頁(yè)面上，例如，在線編輯瀏覽器或者網(wǎng)頁(yè)郵箱。

10、web跨域方式

同源策略：協(xié)議，域名，端口三者中有一個(gè)不同就算跨域。

跨域方式：

1)JSONP，通過(guò)

2)CORS “跨域資源共享”(Cross-origin resource sharing)，它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求。分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求；(瀏覽器自動(dòng)完成)

3)WebSocket(網(wǎng)絡(luò)通信協(xié)議)，不受同源的限制，可在客戶端和服務(wù)器端之間雙向通信；(客戶端可以向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器也可以向客戶端發(fā)送請(qǐng)求，而http只能由客戶端向服務(wù)器發(fā)送請(qǐng)求，不能反過(guò)來(lái))

4)postMessage()，H5新增的跨域通信方法。應(yīng)用場(chǎng)景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)互通信息；

5)Hash，原理：Hash的改變，頁(yè)面不會(huì)刷新。應(yīng)用場(chǎng)景：A 通過(guò)iframe或frame嵌入了跨域的頁(yè)面 B，A與B間可以通過(guò)hash通信。(A和B的domain相同)

12、大數(shù)的加減乘除

1)使用插件：如bignumber.js、bigInteger.js

13.?判斷兩個(gè)單鏈表是否相交及找到第一個(gè)交點(diǎn)

如果兩個(gè)單鏈表有共同的節(jié)點(diǎn)，那么從第一個(gè)共同節(jié)點(diǎn)開始，后面的節(jié)點(diǎn)都會(huì)重疊，直到鏈表結(jié)束。

因?yàn)閮蓚€(gè)鏈表中有一個(gè)共同節(jié)點(diǎn)，則這個(gè)節(jié)點(diǎn)里的指針域指向的下一個(gè)節(jié)點(diǎn)地址一樣，所以下一個(gè)節(jié)點(diǎn)也會(huì)相交，依次類推。所以，若相交，則兩個(gè)鏈表呈“Y”字形。如下圖：

1.暴力解法。

從頭開始遍歷第一個(gè)鏈表，遍歷第一個(gè)鏈表的每個(gè)節(jié)點(diǎn)時(shí)，同時(shí)從頭到尾遍歷第二個(gè)鏈表，看是否有相同的節(jié)點(diǎn)，第一次找到相同的節(jié)點(diǎn)即第一個(gè)交點(diǎn)。若第一個(gè)鏈表遍歷結(jié)束后，還未找到相同的節(jié)點(diǎn)，即不存在交點(diǎn)。時(shí)間復(fù)雜度為O(n^2)。這種方法顯然不是寫這篇博客的重點(diǎn)。。。不多說(shuō)了。

2.使用棧。

我們可以從頭遍歷兩個(gè)鏈表。創(chuàng)建兩個(gè)棧，第一個(gè)棧存儲(chǔ)第一個(gè)鏈表的節(jié)點(diǎn)，第二個(gè)棧存儲(chǔ)第二個(gè)鏈表的節(jié)點(diǎn)。每遍歷到一個(gè)節(jié)點(diǎn)時(shí)，就將該節(jié)點(diǎn)入棧。兩個(gè)鏈表都入棧結(jié)束后。則通過(guò)top判斷棧頂?shù)墓?jié)點(diǎn)是否相等即可判斷兩個(gè)單鏈表是否相交。因?yàn)槲覀冎?#xff0c;若兩個(gè)鏈表相交，則從第一個(gè)相交節(jié)點(diǎn)開始，后面的節(jié)點(diǎn)都相交。

若兩鏈表相交，則循環(huán)出棧，直到遇到兩個(gè)出棧的節(jié)點(diǎn)不相同，則這個(gè)節(jié)點(diǎn)的后一個(gè)節(jié)點(diǎn)就是第一個(gè)相交的節(jié)點(diǎn)。

3.遍歷鏈表記錄長(zhǎng)度。

同時(shí)遍歷兩個(gè)鏈表到尾部，同時(shí)記錄兩個(gè)鏈表的長(zhǎng)度。若兩個(gè)鏈表最后的一個(gè)節(jié)點(diǎn)相同，則兩個(gè)鏈表相交。

有兩個(gè)鏈表的長(zhǎng)度后，我們就可以知道哪個(gè)鏈表長(zhǎng)，設(shè)較長(zhǎng)的鏈表長(zhǎng)度為len1,短的鏈表長(zhǎng)度為len2。

則先讓較長(zhǎng)的鏈表向后移動(dòng)(len1-len2)個(gè)長(zhǎng)度。然后開始從當(dāng)前位置同時(shí)遍歷兩個(gè)鏈表，當(dāng)遍歷到的鏈表的節(jié)點(diǎn)相同時(shí)，則這個(gè)節(jié)點(diǎn)就是第一個(gè)相交的節(jié)點(diǎn)。

4.哈希表法。

既然連個(gè)鏈表一旦相交，相交節(jié)點(diǎn)一定有相同的內(nèi)存地址，而不同的節(jié)點(diǎn)內(nèi)存地址一定是不同的，那么不妨利用內(nèi)存地址建立哈希表，如此通過(guò)判斷兩個(gè)鏈表中是否存在內(nèi)存地址相同的節(jié)點(diǎn)判斷兩個(gè)鏈表是否相交。具體做法是：遍歷第一個(gè)鏈表，并利用地址建立哈希表，遍歷第二個(gè)鏈表，看看地址哈希值是否和第一個(gè)表中的節(jié)點(diǎn)地址值有相同即可判斷兩個(gè)鏈表是否相交。

我們可以采用除留取余法構(gòu)造哈希函數(shù)。

構(gòu)造哈希表可以采用鏈地址法解決沖突。哈希表沖突指對(duì)key1 != key2，存在f(key1)=f(key2)，鏈地址法就是把key1和key2作為節(jié)點(diǎn)放在同一個(gè)單鏈表中，這種表稱為同義詞子表，在哈希表中只存儲(chǔ)同義詞子表的頭指針，如下圖：

14. 一行代碼實(shí)現(xiàn)數(shù)組去重？

[...new Set([1,2,3,1,'a',1,'a'])]

15.?怎么判斷兩個(gè)對(duì)象相等？

最開始的思路是遍歷來(lái)判斷，但是最后好像沒(méi)有說(shuō)清楚，查了下，好像可以轉(zhuǎn)換為字符串來(lái)判斷。

JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false

16.?項(xiàng)目做過(guò)哪些性能優(yōu)化？

1、減少HTTP請(qǐng)求數(shù)

2、減少DNS查詢

3、使用CDN

4、避免重定向

5、圖片懶加載

6、減少DOM元素?cái)?shù)量

7、減少DOM操作

8、使用外部JavaScript和CSS

9、壓縮JavaScript、CSS、字體、圖片等

10、優(yōu)化CSS?Sprite

11、使用iconfont

12、字體裁剪

13、多域名分發(fā)劃分內(nèi)容到不同域名

14、盡量減少iframe使用

15、避免圖片src為空

16、把樣式表放在 中

17、把腳本放在頁(yè)面底部 歡迎補(bǔ)充。。。

17.?模塊化開發(fā)是怎么做的？

使用命名空間。

18.?Vue router 跳轉(zhuǎn)和 location.href 有什么區(qū)別？

router是hash改變location.href是頁(yè)面跳轉(zhuǎn)，刷新頁(yè)面

19.?Set 和 Map 數(shù)據(jù)結(jié)構(gòu)

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set它類似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。

ES6提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值(包括對(duì)象)都可以當(dāng)作鍵。也就是說(shuō)，Object結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)。

20. 實(shí)現(xiàn)一個(gè)deepclone函數(shù)

function deepClone(obj) {

let objClone = Array.isArray(obj) ? [] : {};

if (obj && typeof obj === "object") {

for (key in obj) {

if (obj.hasOwnProperty(key)) {

//判斷ojb子元素是否為對(duì)象，如果是，遞歸復(fù)制

if (obj[key] && typeof obj[key] === "object") {

objClone[key] = deepClone(obj[key]);

} else {

//如果不是，簡(jiǎn)單復(fù)制

objClone[key] = obj[key];

}

}

}

}

return objClone;

}

// 測(cè)試代碼

let a = [1, 2, [1,5], 4],

b = deepClone(a);

a[0] = 2;

a[2][0] = 5;

console.log(a, b);

21. diff比較方式

22. vuex

23. cookie

24. computed methods watch

25. css js預(yù)加載

26. 實(shí)現(xiàn)繼承的幾種方式

27. 原型 原型鏈

28. 事件循環(huán)

29. 數(shù)組方法

30. 請(qǐng)求頭 響應(yīng)頭

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的iframe懒加载_前端常见问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。