碼上歡樂
相關內容    簡體    繁體

Web前端工程師面試題匯總（一）

本文轉載自   查看原文   2017-06-27 19:10   14226 

前端工程師面試題匯總

  本文由我收集總結了一些前端面試題，初學者閱后也要用心鑽研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。
 

HTML

• Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

1、聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規范來解析文檔。聲明必須在 HTML 文檔的第一行，這並不是一個 HTML 標簽。 
2、嚴格模式：又稱標准模式，是指瀏覽器按照 W3C 標准解析代碼。 
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。 
如何區分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網頁中的 DTD 直接相關。

1)、如果文檔包含嚴格的 DOCTYPE ，那么它一般以嚴格模式呈現。（嚴格 DTD ——嚴格模式） 2)、包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現，但有過渡 DTD 而沒有 URI （統一資源標識符，就是聲明最后的地址）會導致頁面以混雜模式呈現。（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式） 3)、DOCTYPE 不存在或形式不正確會導致文檔以混雜模式呈現。（DTD不存在或者格式不正確——混雜模式） 4)、HTML5 沒有 DTD，因此也就沒有嚴格模式與混雜模式的區別，HTML5 有相對寬松的語法，實現時，已經盡可能大的實現了向后兼容。（ HTML5 沒有嚴格和混雜之分）

意義：嚴格模式與混雜模式存在的意義與其來源密切相關，如果說只存在嚴格模式，那么許多舊網站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰時的混亂，每個瀏覽器都有自己的解析模式。

 

• HTML5 為什么只需要寫 <!DOCTYPE HTML>？

html5不基於SGML,因此不需要對DTD進行引用，但是需要doctype來 規范瀏覽器的行為（讓瀏覽器按照他們應該的方式來運行）而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

 

• 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，比如div默認display屬性值為“block”，成為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素;img默認display屬性值為“inline-block”，是“內聯塊狀”元素。 
常用的塊狀元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

塊級元素特點： 
1、每個塊級元素都從新的一行開始，並且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行） 
2、元素的高度、寬度、行高以及頂和底邊距都可設置。 
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 
常用的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

內聯元素特點： 
1、和其他元素都在一行上； 
2、元素的高度、寬度、行高及頂部和底部邊距不可設置； 
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 
常用的內聯塊狀元素有：

<img>、<input>

inline-block元素特點： 
1、和其他元素都在一行上； 
2、元素的高度、寬度、行高以及頂和底邊距都可設置。 
知名的空元素： <br/> <hr/> <img/> <input/> <link/> <meta/> 
鮮為人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

 

• 頁面導入樣式時，使用link和@import有什么區別？

  1. 頁面中使用CSS的方式主要有3種：行內添加定義style屬性值，頁面頭部內嵌調用和外面鏈接調用，其中外面引用有兩種：link和@import。外部引用CSS兩種方式link和@import的方式分別是： 
    XML/HTML代碼

    <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

XML/HTML代碼 
<style type="text/css" media="screen">

@import url("CSS文件");

</style>

 

兩者都是外部引用CSS的方式，但是存在一定的區別：

  1. 區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS范疇，只能加載CSS。

  2. 區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。

  3. 區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

  4. 區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

 

• 介紹一下你對瀏覽器內核的理解？

  1. 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

  2. 渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。 2.JS引擎則：解析和執行javascript來實現網頁的動態效果。

  3. 最開始渲染引擎和JS引擎並沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向於只指渲染引擎。

 

• 常見的瀏覽器內核有哪些？

  1. Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

  2. Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

  3. Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]

  4. Webkit內核：Safari,Chrome等。 [ Chrome的：Blink(WebKit的分支)]

 

• html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

  1. HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

  2. 繪畫 canvas;

  3. 用於媒介回放的 video 和 audio 元素;

  4. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;

  5. sessionStorage 的數據在瀏覽器關閉后自動刪除;

  6. 語意化更好的內容元素，比如 article、footer、header、nav、section;

  7. 表單控件，calendar、date、time、email、url、search;

  8. 新的技術webworker, websockt, Geolocation;

  9. 移除的元素：

  10. 純表現的元素：basefont，big，center，font, s，strike，tt，u;

  11. 對可用性產生負面影響的元素：frame，frameset，noframes;

  12. 支持HTML5新標簽：

  13. IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

  14. 可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

  15. 瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

  16. 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  17. 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

 

• 簡述一下你對HTML語義化的理解？

用正確的標簽做正確的事情。 
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;及時在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的;搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

 

• HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。 
原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。 
　　如何使用： 
　　1、頁面頭部像下面一樣加入一個manifest的屬性; 
　　2、在cache.manifest文件的編寫離線存儲的資源; 
　　CACHE MANIFEST 
　　#v0.11 
　　CACHE: 
　　js/app.js 
　　css/style.css 
　　NETWORK: 
　　resourse/logo.png 
　　FALLBACK: 
　　/ /offline.html 
　　3、在離線狀態時，操作window.applicationCache進行需求實現。 
　　詳細的使用請參考：有趣的HTML5：離線存儲

 

• 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？

在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源並進行離線存儲。 
　　離線的情況下，瀏覽器就直接使用離線存儲的資源。

 

• 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會 
sessionStorage和localStorage的存儲空間更大; 
sessionStorage和localStorage有更多豐富易用的接口; 
sessionStorage和localStorage各自獨立的存儲空間; 
localStorage 長期存儲數據，瀏覽器關閉后數據不丟失; 
sessionStorage 數據在瀏覽器關閉后自動刪除。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 web前端工程師面試題2021 web前端工程師面試題10條必會筆試題 Java工程師三大框架面試題匯總 初中級web前端工程師的面試題分享 前端面試題2019年騰訊工程師面試題及答案解析 前端面試題2019年京東工程師面試題及答案解析 硬件工程師面試題 算法工程師面試題 面試web前端工程師的悲哀。 初級軟件測試工程師面試題匯總2020
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM