html

瀏覽器緩存？ cache-control？

瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存在請(qǐng)求的時(shí)候會(huì)根據(jù)http請(qǐng)求頭判斷是否命中強(qiáng)緩存：如果命中則加載緩存中的數(shù)據(jù)，不會(huì)發(fā)送請(qǐng)求如果沒(méi)有命中則瀏覽器請(qǐng)求服務(wù)器，服務(wù)器會(huì)判斷本地緩存是否有效？有效則加載本地?cái)?shù)據(jù)，服務(wù)器不返回信息如果命中的是協(xié)商緩存則服務(wù)器會(huì)根據(jù)請(qǐng)求把數(shù)據(jù)返回，瀏覽器加載數(shù)據(jù)并更新本地緩存

// cache-control 在header中設(shè)置用來(lái)控制瀏覽器緩存行為

public： http通信的過(guò)程中，包括請(qǐng)求的發(fā)起方（瀏覽器）、代理緩存服務(wù)器都可以進(jìn)行緩存。 private ：只允許請(qǐng)求的發(fā)起方（瀏覽器）進(jìn)行緩存。 no-cache：可以在請(qǐng)求的發(fā)起方（瀏覽器）進(jìn)行緩存，但是每次都需要去服務(wù)器進(jìn)行資源驗(yàn)證。 no-store：任何地方都不可以緩存。

Html離線存儲(chǔ)？

在瀏覽器得html頭部加上manifest屬性，如果是第一次訪問(wèn)瀏覽器會(huì)根據(jù)manifest 得內(nèi)容進(jìn)行下載存儲(chǔ)離線內(nèi)容，如果已經(jīng)訪問(wèn)過(guò)則從離線存儲(chǔ)中進(jìn)行加載，然后在比對(duì)服務(wù)器如果有新內(nèi)容在更新離線存儲(chǔ)

svg和canvas 的區(qū)別？

svg 輸出的圖形都有獨(dú)立的dom 是一個(gè)矢量圖形 放大縮小不會(huì) canvas 輸出的是一整塊 是一個(gè)畫(huà)布 放大 縮小會(huì)失貞

src 和 href 的區(qū)別？

src 是引入資源的 href 是跳轉(zhuǎn)url的

前端有哪三層構(gòu)成，分別是什么？

結(jié)構(gòu)層 html dom結(jié)構(gòu)表示層 css 渲染行為層 js操作

什么是標(biāo)簽語(yǔ)義？有什么作用？

即使在沒(méi)有css的情況下 頁(yè)面代碼也能很好的被閱讀理解，用正確的標(biāo)簽 能夠?qū)g覽器和搜索引擎的支持更好。便于后期的維護(hù)。

常見(jiàn)的瀏覽器內(nèi)核有哪些？以及你對(duì)內(nèi)核的了解？

IE(trident) chrome safari(webkit) firefox(gecko) opera(presto) 分為渲染引擎和js 引擎渲染引擎 負(fù)責(zé) 取得網(wǎng)頁(yè)的html css 圖像 等信息 然后根據(jù)css 將頁(yè)面渲染出來(lái) js 引擎 則負(fù)責(zé)頁(yè)面數(shù)據(jù)或者動(dòng)態(tài)效果的處理

cookie、session、localstroage、sessionStorage 的區(qū)別？?jī)?yōu)缺點(diǎn)？

session存在于服務(wù)端不在客戶(hù)端

cookie 是用于和服務(wù)端通信，其他兩個(gè)則不會(huì)

cookie 有大小限制相對(duì)于其他兩個(gè)，單個(gè)不超過(guò)4kb，個(gè)數(shù)不超過(guò)150個(gè)，超過(guò)4kb不會(huì)被設(shè)置，超過(guò)150個(gè)視各瀏覽器不同，刪舊留新

localStorage 數(shù)據(jù)永遠(yuǎn)存儲(chǔ)，除非你主動(dòng)刪除 如果超過(guò)5mb會(huì)報(bào)錯(cuò) sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉之前一直存在

input如何監(jiān)聽(tīng)值的變化？

可以監(jiān)聽(tīng)input 的 focus 或者 keydown 屬性

輸入U(xiǎn)RL后發(fā)生了什么？

首先 從DNS解析域名 獲取ip地址，根據(jù)ip地址 找到服務(wù)器，服務(wù)器根據(jù)地址請(qǐng)求 返回頁(yè)面相關(guān)數(shù)據(jù)，瀏覽器獲取到數(shù)據(jù)進(jìn)行頁(yè)面加載渲染頁(yè)面

瀏覽器的渲染過(guò)程？

1、將獲取的html解析成dom樹(shù)

2、處理css，構(gòu)成層疊樣式表模型CSSOM

3、將dom樹(shù)和CSSOM合并為渲染樹(shù)

4、根據(jù)CSSOM將渲染樹(shù)的節(jié)點(diǎn)布局計(jì)算

5、將渲染樹(shù)節(jié)點(diǎn)樣式繪制到頁(yè)面上

// 注意在渲染的過(guò)程中是自上而下渲染， js會(huì)阻塞頁(yè)面的渲染，優(yōu)先等js執(zhí)行完成如果在渲染的過(guò)程中改變了樣式，會(huì)造成回流需要重新渲染

總結(jié)

到此這篇關(guān)于2020前端面試題之HTML篇的文章就介紹到這了,更多相關(guān)2020前端面試題html內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論