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

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

任何一個容器都可以指定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)：通過下標(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 過濾條件)

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

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

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

只要有一個元素符合條件，就返回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){? //等到每個元素? }

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

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

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

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

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

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

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

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

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

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

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

5、MVVM模式介紹

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，其核心是提供對View 和 ViewModel 的雙向數(shù)據(jù)綁定，這使得ViewModel 的狀態(tài)改變可以自動傳遞給 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ù)雙向綁定，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)，從而更新視圖層的數(shù)據(jù)。

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

9、web緩存

http請求頭緩存

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

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

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

2)協(xié)商緩存：

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

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

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

常用瀏覽器緩存

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

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

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

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

10、web跨域方式

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

跨域方式：

1)JSONP，通過

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

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

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

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

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

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

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

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

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

1.暴力解法。

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

2.使用棧。

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

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

3.遍歷鏈表記錄長度。

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

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

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

4.哈希表法。

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

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

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

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

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

15.?怎么判斷兩個對象相等？

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

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

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

1、減少HTTP請求數(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、把腳本放在頁面底部 歡迎補(bǔ)充。。。

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

使用命名空間。

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

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

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

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

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

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

function deepClone(obj) {

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

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

for (key in obj) {

if (obj.hasOwnProperty(key)) {

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

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

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

} else {

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

objClone[key] = obj[key];

}

}

}

}

return objClone;

}

// 測試代碼

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. 請求頭 響應(yīng)頭

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

總結(jié)

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

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