頁面導(dǎo)入樣式時(shí),使用link和@import有什么區(qū)別?(1)link屬于XHTML標(biāo)簽,除了加載CSS外,還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用于加載CSS;
(2)頁面被加載的時(shí),link會同時(shí)被加載,而@import引用的CSS會等到頁面被加載完再加載;
(3)import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標(biāo)簽,無兼容問題;
介紹一下你對瀏覽器內(nèi)核的理解?
主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:負(fù)責(zé)取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計(jì)算網(wǎng)頁的顯示方式,然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同,所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則:解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確,后來JS引擎越來越獨(dú)立,內(nèi)核就傾向于只指渲染引擎。
常見的瀏覽器內(nèi)核有哪些?
Trident內(nèi)核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核:Netscape6及以上版本,F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核:Opera7及以上。 [Opera內(nèi)核原為:Presto,現(xiàn)為:Blink;]
Webkit內(nèi)核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
詳細(xì)文章:瀏覽器內(nèi)核的解析和對比
html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲,多任務(wù)等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section;
表單控件,calendar、date、time、email、url、search;
新的技術(shù)webworker, websocket, Geolocation;
移除的元素:
純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes;
支持HTML5新標(biāo)簽:
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,
瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架、比如html5shim;
- 如何區(qū)分HTML5: DOCTYPE聲明/新增的結(jié)構(gòu)元素/功能元素
簡述一下你對HTML語義化的理解?
用正確的標(biāo)簽做正確的事情。
html語義化讓頁面的內(nèi)容結(jié)構(gòu)化,結(jié)構(gòu)更清晰,便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示,并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于SEO;
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊,便于閱讀維護(hù)理解。
HTML5的離線儲存怎么使用,工作原理能不能解釋一下?
在用戶沒有與因特網(wǎng)連接時(shí),可以正常訪問站點(diǎn)或應(yīng)用,在用戶與因特網(wǎng)連接時(shí),更新用戶機(jī)器上的緩存文件。
原理:HTML5的離線存儲是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù)),通過這個(gè)文件上的解析清單離線存儲資源,這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí),瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。
如何使用:
1、頁面頭部像下面一樣加入一個(gè)manifest的屬性;
2、在cache.manifest文件的編寫離線存儲的資源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態(tài)時(shí),操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
詳細(xì)的使用請參考:有趣的HTML5:離線存儲
瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢?
在線的情況下,瀏覽器發(fā)現(xiàn)html頭部有manifest屬性,它會請求manifest文件,如果是第一次訪問app,那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了,那么瀏覽器就會使用離線的資源加載頁面,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發(fā)生改變,就不做任何操作,如果文件改變了,那么就會重新下載文件中的資源并進(jìn)行離線存儲。
離線的情況下,瀏覽器就直接使用離線存儲的資源。
詳細(xì)的使用請參考:有趣的HTML5:離線存儲
請描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端(Client Side)上的數(shù)據(jù)(通常經(jīng)過加密)。
cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),記會在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
存儲大小:
cookie數(shù)據(jù)大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達(dá)到5M或更大。
有期時(shí)間:
localStorage 存儲持久數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù);
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除。
cookie 設(shè)置的cookie過期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉
iframe有那些缺點(diǎn)?
iframe會阻塞主頁面的Onload事件;
搜索引擎的檢索程序無法解讀這種頁面,不利于SEO;
*iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe,最好是通過javascript
動態(tài)給iframe添加src屬性值,這樣可以繞開以上兩個(gè)問題。
Label的作用是什么?是怎么用的?
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí),瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
HTML5的form如何關(guān)閉自動完成功能?
給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off。
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信? (阿里)
WebSocket、SharedWorker;
也可以調(diào)用localstorge、cookies等本地存儲方式;
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí),它都會觸發(fā)一個(gè)事件,
我們通過監(jiān)聽事件,控制它的值來進(jìn)行頁面信息通信;
注意quirks:Safari 在無痕模式下設(shè)置localstorge值時(shí)會拋出 QuotaExceededError 的異常;
webSocket如何兼容低瀏覽器?(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發(fā)送 XHR 、
基于長輪詢的 XHR
頁面可見性(Page Visibility API) 可以有哪些用途?
通過 visibilityState 的值檢測頁面當(dāng)前是否可見,以及打開網(wǎng)頁的時(shí)間等;
在頁面被切換到其他后臺進(jìn)程的時(shí)候,自動暫停音樂或視頻的播放;
如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域?
1、map+area或者svg
2、border-radius
3、純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等
實(shí)現(xiàn)不使用 border 畫出1px高的線,在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。
網(wǎng)頁驗(yàn)證碼是干嘛的,是為了解決什么安全問題。區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動程序。可以防止惡意pojie mima、刷票、論壇灌水;
有效防止heike對某一個(gè)特定注冊用戶用特定程序暴力 pojie方式進(jìn)行不斷的登陸嘗試。
title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別?
title屬性沒有明確意義只表示是個(gè)標(biāo)題,H1則表示層次明確的標(biāo)題,對頁面信息的抓取也有很大的影響;
strong是標(biāo)明重點(diǎn)內(nèi)容,有語氣加強(qiáng)的含義,使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí):會重讀,而是展示強(qiáng)調(diào)內(nèi)容。
i內(nèi)容展示為斜體,em表示強(qiáng)調(diào)的文本;
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽。
附:本文參考于https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers