百度Html5開發面試題

百度Html5開發面試題，目前前端開發涉及的技術比較多，從最基本的HTML、CSS到React和Vuejs等，已經有數百萬的開發者開始轉向HTML5開發行業，也有越來越多的學員選擇了參加HTML5培訓班。那麼來看看百度Html5開發面試題吧。

百度Html5開發面試題1

一、網友提問：我是一家上市公司，如何找到靠譜不貴的H5供應商?

陶老師：隨着微信、微博、LinkedIn乃至Facebook和Twitter，紛紛對H5分享的友好支持，企業對H5的需求也與日俱增，最近也有好多企業找到博看文思要求定製化H5的開發。事實上，隨着技術的成熟，和各種H5工具的出現，H5製作已經逐漸走向標準化了，成本問題也隨之一些工具的出現有了極大的改善。想要找到千萬級PV的H5也是有一定規律的。

如果你預算和時間充足的話，我推薦你關注BlueMP的定製開發服務。不單單有你所需要的：策劃、設計、開發、推廣、監測等服務，更重要的是物超所值。有興趣的朋友可以關注一下。

二、網友提問：我是平面設計，之前沒有接觸過編程可以學習HTML5開發嗎?

陶老師：完全沒有問題，有平面設計的基礎，對學習HTML5有很大幫助的。

衆所周知，博看文思作爲國內最早的HTML5研發和實訓機構，在課程體系上保持着實時更新。在課程設置上，本課程從HTML 5基礎的功能講起，起點低，容易入手和掌握。理論與真實項目完整結合，每一個概念都精選了一個完整的實例，增強學員動手能力，從而保證學員成爲一名合格的HTML5開發工程師。

三、網友提問：如何使用HTML5改進移動Web應用開發?

陶老師：HTML5是一種標記語言，與Java和CSS3一起，構成了每個開發者的核心技術，HTML5擁有自己的API以及一組被主流瀏覽器兼容的標準API，同時一些特殊被API，比如本地存儲也被許多瀏覽器支持。想要改進移動Web應用的開發重點要關注兼容性。主要是屏幕的尺寸和分辨率，更重要的是，要在各種尺寸的屏幕上測試。檢查圖片是否被現實;是否可以橫向滾動;是否所有的功能都可以工作;是否支持所有格式的文件;需要全面的檢查你的網站，確保使用HTML5開發的移動網站獲得完美的效果。儘量避免使用表格、隱藏圖形、彈出窗口等內容。

四、網友提問：我去美團面試前端遇到一個面試題：“ajax在jquery的底層是怎麼實現的呢?請指教。”

陶老師： jQuery底層是實現ajax功能時，也同樣調用了Java中對象，先是對這個對象進行瀏覽器兼容性的處理，它的處理則不僅是IE和其他瀏覽器，而是包含更多，以確保該對象的實現。

其次，它將對象打開請求地址時的相關參數封裝在相關函數(如ajax())的配置項中，一旦傳入了必需選項，則直接調用相應的send()方法進行數據的請求。

最後，jQuery底層將對象請求後返回的數據結果，直接封裝到相關函數的success方法中，所以，一旦異步請求成功，返回的數據對象直接注入到方法中，因此，可以調用success方法獲取服務端返回的數據。

五、網友提問：百度的技術經理要我列舉至少5種前端性能優化的具體方法，簡要說明理由，想聽聽老師的建議。

陶老師：方法有很多種，請參考。

1.儘量減少對服務端的數據請求，因爲每一次的請求需要消耗大量的資源，而且產生頁面的等待，對用戶的UI體驗特別差，因此，可以將多次的數據請求合成爲一次，獲取後再次分割進行保存，然後再使用。

2.對JS、CSS、圖片文件的體積進行相應的壓縮，因爲每次頁面的加載都需要考慮到整體頁面的大小，如果頁面包含的文件體積太大，也不利於主頁面加載的速度，用戶在UI體驗上也會大打折扣。

3.使用頁面緩存，當展示一些不經常變動的數據時，可以直接使用頁面的本地緩存對象，這樣的話減少頁面對服務端的依賴度，而且有利於頁面加載的速度，極大優化了用戶的UI體驗。

4.在進行js文件調用時，儘量將該文件放置在元素的結尾處，這樣的話即使導入的js文件體積很大，也不會阻塞主線程頁面的加載。

5.啓用服務器Gzip，網頁壓縮技術:啓用服務器Gzip，對頁面Gzip壓縮，減少元素的體積，從而減少數據的傳輸，進而提高網頁的加載速度。

百度Html5開發面試題2

1.什麼是HTML5？

答：HTML5是最新的HTML標準。

注意：講述HTML5推出的.設計目的，以及現在市場的使用情況，瀏覽器支持情況等。。。。

設計目的

HTML5的設計目的是爲了在移動設備上支持多媒體。新的語法特徵被引進以支持這一點，如video、audio和canvas 標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式，包括：

· 新的解析規則增強了靈活性

· 新屬性

· 淘汰過時的或冗餘的屬性

· 一個HTML5文檔到另一個文檔間的拖放功能

5中什麼是不同的新的表單元素類型？

答：提示本地驗證表單需要再外面添加form標籤包起來，才能查看效果

color

date

datetime-local

email

time

url

range

telephone

number

search

5的頁面結構同HTML4或者更前的HTML有什麼區別？

答：一個典型的WEB頁面包含頭部，腳部，導航，中心區域，側邊欄。現在如果我們想在在HTML4的HTML區域中呈現這些內容，我們可能要使用DIV標籤。

但是在HTML5中通過爲這些區域創建元素名稱使他們更加清晰，也使得你的HTML更加可讀

以下是形成頁面結構的HTML5元素的更多細節：(注意主要考的是標籤語意化)

：代表HTML的頭部數據

：頁面的腳部區域

：頁面導航元素

：自包含的內容

：使用內部article去定義區域或者把分組內容放到區域裏

：代表頁面的側邊欄內容

4.哪些瀏覽器支持HTML5？

答：幾乎所有的高版本瀏覽器Safari，Chrome，Firefox，Opera，IE8以上都支持HTML5

5.爲什麼HTML5裏面我們不需要DTD(Document Type Definition文檔類型定義)？

答：HTML5沒有使用SGML或者XHTML，他是一個全新的東西，因此你不需要參考DTD，對於HTML5，你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔即可

5的離線儲存？

答：localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 數據在瀏覽器關閉後自動刪除。

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

答：

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

(2)離線的情況下，瀏覽器就直接使用離線存儲的資源。

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

(1)cookie在瀏覽器和服務器間來回傳遞， sessionStorage和localStorage不會。

(2)sessionStorage和localStorage的存儲空間更大。

(3)sessionStorage和localStorage有更多豐富易用的接口。

(4)sessionStorage和localStorage各自獨立的存儲空間。

9.頁面可見性(Page Visibility)API 可以有哪些用途？

答：在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放。

5的form如何關閉自動完成功能？

答：給不想要提示的input是設置autocomplete=off即可。