iframe懶加載_前端常見問題

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

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

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

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

容器的屬性：

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

2. js有哪些遍歷數組的方法

es5方法：

(1)for循環：通過下標遍歷數組的每一項

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

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

(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)=>{})

從左到右遍歷數組，并返回回調函數的值(應用于求和，求冪等)；prev為上一輪函數執行結果(previousResult)，cur為當前值(currentValue)

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

從右到左遍歷數組，并返回回調函數的值；

ES6方法：

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

for(let index of array.keys()) {? ?//keys()返回數組的鍵(index)? }

for(let keyAndValue of array.entries()){? ?//entries()返回數組的鍵值對(index:element)? }

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

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

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

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

3、箭頭函數的特性

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

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

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

4)箭頭函數不能當做Generator函數,不能使用yield關鍵字；

5、MVVM模式介紹

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。

beforeCreate() 創建組件

created() 創建完成

beforeMounte() 組件被掛載前

mounted() 組件掛載完成

beforeUpdate() 組件更新前

updated() 組件更新后

beforeDestory() 組件摧毀前

destoryed() 組件摧毀后

7、Vue數據雙向綁定原理

vue.js是采用數據劫持結合發布者-訂閱者模式的方式實現數據雙向綁定，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調，從而更新視圖層的數據。

vue的數組如何實現的雙向綁定

9、web緩存

http請求頭緩存

1)強制緩存：

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

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

2)協商緩存：

第一次請求時拿到緩存數據和緩存標識，再次請求時向服務器發送緩存標識，服務器判斷緩存是否有效，若有效則返回304狀態碼，請求數據從緩存讀取，若無效則返回202，需要重新發送http請求數據。

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

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

常用瀏覽器緩存

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

2)LocalStorage的數據將一直保存在瀏覽器內，直到用戶清除瀏覽器緩存數據為止；

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

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

10、web跨域方式

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

跨域方式：

1)JSONP，通過

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

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

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

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

12、大數的加減乘除

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

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

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

因為兩個鏈表中有一個共同節點，則這個節點里的指針域指向的下一個節點地址一樣，所以下一個節點也會相交，依次類推。所以，若相交，則兩個鏈表呈“Y”字形。如下圖：

a028f3f6dac4

1.暴力解法。

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

2.使用棧。

我們可以從頭遍歷兩個鏈表。創建兩個棧，第一個棧存儲第一個鏈表的節點，第二個棧存儲第二個鏈表的節點。每遍歷到一個節點時，就將該節點入棧。兩個鏈表都入棧結束后。則通過top判斷棧頂的節點是否相等即可判斷兩個單鏈表是否相交。因為我們知道，若兩個鏈表相交，則從第一個相交節點開始，后面的節點都相交。

若兩鏈表相交，則循環出棧，直到遇到兩個出棧的節點不相同，則這個節點的后一個節點就是第一個相交的節點。

3.遍歷鏈表記錄長度。

同時遍歷兩個鏈表到尾部，同時記錄兩個鏈表的長度。若兩個鏈表最后的一個節點相同，則兩個鏈表相交。

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

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

4.哈希表法。

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

我們可以采用除留取余法構造哈希函數。

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

a028f3f6dac4

14. 一行代碼實現數組去重？

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

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

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

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

16.?項目做過哪些性能優化？

1、減少HTTP請求數

2、減少DNS查詢

3、使用CDN