以下題目是根據(jù)網(wǎng)上多份面經(jīng)收集而來的哺壶,題目相同意味著被問的頻率比較高躲撰,有問題歡迎留言討論,喜歡可以點贊關(guān)注弧圆。
HTML5新特性赋兵,新標簽新特性
WEB標準以及W3C標準是什么?
Doctype作用? 嚴格模式與混雜模式如何區(qū)分?它們有何意義?
HTML全局屬性(global attribute)有哪些
html語義化的理解墓阀,SEO和語義化
Html4毡惜,html5是建立在http上的,http的下一代要解決什么問
HTML5的離線儲存怎么使用斯撮,工作原理能不能解釋一下?
HTML5離線存儲存儲功能非常強大扶叉,它的作用是:在用戶沒有與因特網(wǎng)連接時勿锅,可以正常訪問站點或應(yīng)用,在用戶與因特網(wǎng)連接時枣氧,自動更新緩存數(shù)據(jù)溢十。
原理:
HTML5的離線存儲是基于一個新建的.appcache文件的,通過這個文件上的解析清單離線存儲資源达吞,這些資源就會像cookie一樣被存儲了下來张弛。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時,瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
怎么用:
首先吞鸭,在html頁面頭部加入一個manifest的屬性:
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
然后書寫cache.manifest文件:
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
manifest (即 .appcache 文件)文件是簡單的文本文件寺董,可分為三個部分:
CACHE :
在此標題下列出的文件將在首次下載后進行緩存。(由于包含manifest文件的頁面將被自動離線存儲刻剥,所以不需要把頁面自身也列出來)
NETWORK :
在此標題下列出的文件需要與服務(wù)器的連接遮咖,且不會被緩存,離線時無法使用造虏。?
可以使用 “*” 來指示所有其他資源/文件都需要因特網(wǎng)連接:
NETWORK
如果在CACHE和NETWORK中有一個相同的資源御吞,那么這個資源還是會被離線存儲,也就是說CACHE的優(yōu)先級更高漓藕。
FALLBACK:
在此標題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面陶珠。比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了,那么就去訪問offline.html享钞。
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢
在線的情況下背率,瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,它會請求manifest文件嫩与,如果是第一次訪問app寝姿,那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了划滋,那么瀏覽器就會使用離線的資源加載頁面饵筑,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發(fā)生改變处坪,就不做任何操作根资,如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲同窘。離線的情況下玄帕,瀏覽器就直接使用離線存儲的資源。
如何設(shè)計一個localStorage想邦,保證數(shù)據(jù)的實效性
https://blog.csdn.net/weixin_41610178/article/details/81216914
思路 存儲的時候設(shè)置一個時間起和有效時間段裤纹,獲取的時候new一個當(dāng)前時間,對比存儲時間丧没,超過了有效時間段鹰椒,刪除存儲。
Canvas動畫
SVG
Canvas和SVG有什么區(qū)別呕童?
canvas優(yōu)化繪制性能
http://www.reibang.com/p/891cce4c2baf
serviceworker如何保證離線緩存資源更新
https://blog.csdn.net/weixin_40920953/article/details/102460557
<b>和<strong>的區(qū)別
input和textarea的區(qū)別
用一個div模擬textarea的實現(xiàn)
如上
移動設(shè)備忽略將頁面中的數(shù)字識別為電話號碼的方法
如果忽略頁面中的數(shù)字識別為電話號碼, 只要把這個默認行為關(guān)閉就行漆际,只要一行代碼:
<meta name = "format-detection" content = "telephone=no">
Web Worker
web worker 是運行在后臺的 JavaScript,不會影響頁面的性能夺饲。
現(xiàn)代瀏覽器為JavaScript創(chuàng)造的多線程環(huán)境奸汇∈┓可以新建并將部分任務(wù)分配到worker線程并行運行,兩個線程可獨立運行擂找,互不干擾戳吝,可通過自帶的消息機制相互通信。
基本用法:
// 創(chuàng)建 worker
const worker = new Worker('work.js');
// 向主進程推送消息
worker.postMessage('Hello World');
// 監(jiān)聽主進程來的消息
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
}
限制:
- 同源限制
- 無法使用 document / window / alert / confirm
- 無法加載本地資源
介紹service worker
http://www.reibang.com/p/768be2733872
https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
Service workers 本質(zhì)上充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器婴洼,也可以在網(wǎng)絡(luò)可用時作為瀏覽器和網(wǎng)絡(luò)間的代理骨坑。它們旨在(除其他之外)使得能夠創(chuàng)建有效的離線體驗
,攔截網(wǎng)絡(luò)請求并基于網(wǎng)絡(luò)是否可用以及更新的資源是否駐留在服務(wù)器上來采取適當(dāng)?shù)膭幼骷聿伞K麄冞€允許訪問推送通知和后臺同步API
Websocket
Websocket 是一個持久化的協(xié)議欢唾,基于 http , 服務(wù)端可以主動 push
兼容:
FLASH Socket
長輪詢: 定時發(fā)送 ajax
long poll: 發(fā)送 --> 有消息時再 response
new WebSocket(url)
ws.onerror = fn
ws.onclose = fn
ws.onopen = fn
ws.onmessage = fn
ws.send()