iframe懒加载_前端常见问题
原地址: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)題。
                            
                        - 上一篇: 运营商iptv服务器,电信运营商IPTV
 - 下一篇: 修改无效_解决docker部署gitla