Front End Developer Questions 前端開發人員問題（一）

時間 2019-11-29

標籤 end developer questions 前端開發人員問題简体版

原文原文鏈接

問題來源：http://markyun.github.io/2015/Front-end-Developer-Questions/javascript

一、Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義?
答：告訴瀏覽器咱們使用的是哪一個版本的html協議（規範）。（對大小寫不敏感）
嚴格模式中根據規範呈現頁面；混雜模式中頁面是一種比較寬鬆的向後兼容的方式顯示。
（1）嚴格模式的HTML 4.0.1 strict
DTD包括全部的HTML元素和屬性，不包括展現的和棄用的元素。不準框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
（2）混雜模式
DTD包括全部的HTML元素和屬性，包括展現的和棄用的元素，以及框架集（Framesets）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
模式之間差別：最顯著的一個例子與Windows上IE專有的盒模型有關
意義：DOCTYPE不存在或形式不正確會致使HTML和XHTML文檔以混雜模式呈現。css

二、HTML5 爲何只須要寫 <!DOCTYPE HTML>？
答：表示聲明Html5標準網頁，支持html5標準主流瀏覽器都認識這個聲明。html

三、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
答：行內元素：a-描點；em-強調；strong-粗體強調；span-定義文本內區塊；i-斜體；img-圖片；b-
粗體；label-表格標籤；select-項目選擇；textarea-多行文本輸入框；sub-下標；sup-上標；q-短引
用
塊元素：div-經常使用塊；dl-定義列表；dt；dd；ul-非排序列表；li-排序列表；ol-排序表單；p-段落；
h1,h2,h3,h4,h5-標題；table-表格；form-表單
空元素：br-換行；hr-水平分隔線html5

四、頁面導入樣式時，使用link和@import有什麼區別？
答：相同的地方，都是外部引用CSS方式，區別：
（1）link是xhtml標籤，除了加載css外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載 CSS
（2）link引用CSS時候，頁面載入時同時加載；@import須要在頁面徹底加載之後加載
（3）link是xhtml標籤，無兼容問題；@import是在css2.1提出來的，低版本的瀏覽器不支持
（4）link支持使用javascript控制去改變樣式，而@import不支持
最優化的@import url（style.css）最值得推薦，字節最優化，兼容的瀏覽器多。java

五、介紹一下你對瀏覽器內核的理解？
答：主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網
頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，
因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用
程序都須要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。git

六、常見的瀏覽器內核有哪些？
答;（1）Trident 微軟的排版引擎 IE7修正許多CSS排版上的錯誤以及增長對PNG格式的支持：IE，The
World
（2）Geckos 開源的瀏覽器，:FireFox，seamonkey
（3）presto 渲染速度極速：opera7以上版本
（4）webkit 蘋果公司的內核，包含webcore排版引擎和javascript解析引擎。：safari，chromegithub

七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
答：新增長了圖像、位置、存儲、多任務等功能。
新增幾大類：
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，好比 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
移除的元素：
（1）顯示層元素：basefont，big，center，font，s，strike，tt，u
（2）性能較差元素：frame，frameset，noframes
處理HTML5新標籤的瀏覽器兼容問題：
（1）IE八、七、6支持document方法產生的標籤
（2）使用htmlshim框架
區分：
（1）doctype聲明的方式是區分重要因素
（2）根據新增長的結構、功能來區分web

八、簡述一下你對HTML語義化的理解？
答：用正確的標籤作正確的事情。根據內容結構化。選擇合適的標籤，便於開發者閱讀和寫出更優雅的
代碼，同時讓瀏覽器的爬蟲進行解析。ajax

九、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
答：所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面加載將使用本地的資源文件，在
離線的狀況下能夠繼續訪問web應用。算法

原理：HTML5 的離線存儲是基於一個新建的.appcache 文件的緩存機制（不是存儲技術），經過這個文
件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。

十、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
答：（1）html5是使用一個manifest文件來標明那些文件是須要被存儲，對於manifest文件，文件的
mime-type必須是text/cache-manifest類型。
（2）cache manifest下直接寫須要緩存的文件，這裏指明文件被緩存到瀏覽器本地；在network下指明
的文件，強制必須經過網絡資源獲取的；在failback下指明是一種失敗的回調方案，好比沒法訪問，就
發出404.htm請求。

十一、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
答：共同點：都是保存在瀏覽器端，且是同源的。
區別：（1）cookies始終是http中攜帶，即cookie在瀏覽器和服務器間來回傳遞，而sessionstorage和
localstorage不會自動把數據發給服務器，僅在本地保存。
（2）存儲大小的限制不一樣。cookie保存的數據很小，不能超過4k，而sessionstorage和localstorage
保存的數據大，可達到5M。
（3）數據的有效期不一樣。cookie只在設置的cookie過時時間以前一直有效，即便窗口或者瀏覽器關閉
。sessionstorage僅在瀏覽器窗口關閉以前有效。localstorage始終有效，窗口和瀏覽器關閉也一直保
存，用做長久數據保存。
（4）做用域不一樣。cookie在全部的同源窗口都是共享；sessionstorage不在不一樣的瀏覽器共享，即便
同一頁面，localstorage在全部同源窗口都是共享的。

十二、iframe框架有那些缺點？
答：優勢：1.iframe可以原封不動的把嵌入的網頁展示出來。
2.若是有多個網頁引用iframe，那麼你只須要修改iframe的內容，就能夠實現調用的每個頁面內容的
更改，方便快捷。
3.網頁若是爲了統一風格，頭部和版本都是同樣的，就能夠寫成一個頁面，用iframe來嵌套，能夠增長
代碼的可重用。
4.若是遇到加載緩慢的第三方內容如圖標和廣告，這些問題能夠由iframe來解決。

缺點：（1）搜索引擎的「爬蟲」程序沒法解讀這種頁面。對於網站來講就是一種災難
（2）框架結構讓人感到迷茫，幾個框架中出現各類滾動條。
（3）連接導航問題。使用框架結構時，保證設置正確的導航連接。
（4）iframe頁面會增長服務器的http請求（基本上都用ajax來代替iframe）

1三、Label的做用是什麼?是怎麼用的?(加 for 或包裹)
答：Label 中有兩個屬性是很是有用的,一個是FOR、另一個就是ACCESSKEY了。
FOR屬性
功能：表示Label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點。
用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY屬性：
功能：表示訪問Label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。
用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox"
type="text">

1四、HTML5的form如何關閉自動完成功能？
答：HTML的輸入框能夠擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你之前的同名
輸入框的歷史記錄中查找出相似的內容並列在輸入框下面，這樣就不用所有輸入進去了，直接選擇列表
中的項目就能夠了。

但有時候咱們但願關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，咱們但願使用AJAX技術從
數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。

方法：一、在IE的internet選項菜單中裏的內容--自動完成裏面設置
二、設置form的autocomplete爲on或者off來來開啓輸入框的自動完成功能。
三、設置輸入框的autocomplete爲on或者off來開啓或者關閉輸入框自動完成的功能。

1五、如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)
答：WebSocket、SharedWorker;也能夠調用 localstorge、cookies 等本地存儲方式;localstorge 另
一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，咱們經過監聽事件，控制它的值來進
行頁面信息通訊;注意 quirks：Safari 在無痕模式下設置 localstorge 值時會拋出
QuotaExceededError 的異常;

1六、webSocket如何兼容低瀏覽器？(阿里)
答：只是引用了WebSocket.js這個文件來兼容低版本瀏覽器。

1七、頁面可見性（Page Visibility）API 能夠有哪些用途？
答：（1）經過visibilitystate的值得檢測頁面當前是否可見，以及打開網頁的時間
（2）在頁面被切換到其餘後臺進程時，自動暫停音樂或視頻的播放。

1八、如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現，一個點不在圓上簡單算法、獲取鼠標座標

1九、實現不使用 border 畫出1px高的線，在不一樣瀏覽器的Quirksmode和CSSCompat模式下都能保持同一
效果。
<div style="height:1px;overflow:hidden;background:red"></div>

20、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題？
答：（1）區分用戶是計算機仍是人的公共全自動程序。
（2）能夠防止惡意破解密碼、刷票、論壇灌水；能夠有效防止黑客對某一個特定的註冊用戶用特定的
程序暴力破解進行不斷的嘗試。

2一、tite與h1的區別、b與strong的區別、i與em的區別？答：（1）title屬性沒有明確意義，只表示標題；h1表示層次明確的標題，對頁面信息的抓取也有很大的影響（2）strong標明重點內容，語氣增強含義；b是展現強調內容（3）i是內容是斜體；em表示強調文本注：天然樣式標籤：b，i，u，s語義樣式標籤：strong，em，ins，del，code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。