百度2015前端研發筆試卷

• 1.HTML的Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

<!DOCTYPE> 聲明位於文檔中的最前面，處於 標籤以前。告知瀏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。

嚴格模式的排版和 JS 運做模式是以該瀏覽器支持的最高標準運行。在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

• 2.請用CSS實現以下圖的樣式，相關尺寸如圖示，其中dom結構爲：<div id=」demo」></div>。

示例

#demo {
    width: 100px;
    height: 100px;
    background-color: #fff;
    position: relative;
    border: 2px solid #000;
}

#demo:after,
#demo:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    left: 100%;
    position: absolute;
    width: 0;
}

#demo:after {
    border-width: 10px;
    border-left-color: #fff;
    top: 20px;
}

#demo:before {
    border-width: 12px;
    border-left-color: #000;
    top: 18px;
}

• 3.簡述document.write和 innerHTML的區別。

document.write只能重繪整個頁面，innerHTML能夠重繪頁面的一部分。

• 4.你知道的，javascript語言的執行環境是"單線程模式"，這種模式的好處是實現起來比較簡單，執行環境相對單純；壞處是隻要有一個任務耗時很長，後面的任務都必須排隊等着，會拖延整個程序的執行，所以不少時候須要進行「異步模式」，請列舉js異步編程的方法。

回調函數，這是異步編程最基本的方法。

事件監聽，另外一種思路是採用事件驅動模式。任務的執行不取決於代碼的順序，而取決於某個事件是否發生。

發佈/訂閱，上一節的"事件"，徹底能夠理解成"信號"。

Promises對象，Promises 對象是CommonJS 工做組提出的一種規範，目的是爲異步編程提供統一接口。

• 5.用戶從手機的瀏覽器訪問www.baidu.com，看到的可能跟桌面PC電腦，是不太同樣的網頁效果，會更適合移動設備使用。請簡要分析一下，實現這種網頁區分顯示的緣由及技術原理。

手機的網速問題、屏幕大小、內存、CPU等。

經過不一樣設備的特徵，實現不一樣的網頁展示或輸出效果。根據useragent、屏幕大小信息、IP、網速、css media Query等原理，實現前端或後端的特徵識別和行爲改變。

• 6.Flappy Bird是風靡一時的手機遊戲，玩家要操做一隻小鳥穿過無窮無盡的由鋼管組成的障礙。若是要你在HTML前端開發這個遊戲，爲了保證遊戲的流暢運行，並長時間運行也不會崩潰，請列舉開發要注意的性能問題和解決的方法。

背景的卷軸效果優化。背景不能是無限長的圖片拼接，必須有回收已移出的場景的方法。

將複雜運算從主UI線程中解耦。好比場景中小鳥的運動軌跡、碰撞算法等，須要在空閒時間片運算，不能和UI動畫同時進行。將比較大的運算分解成不一樣的時間片，防止阻塞主UI線程。最好使用webworker。

注意內存泄漏和回收。使用對象池管理內存，提升內存檢測和垃圾回收。

進行預處理。將一些經常使用的過程進行預處理，

控制好幀率。將1秒分解成多個時間片，在固定間隔時間片進行UI動畫，其餘時間片用在後臺運算。

經過 GPU 加速和 CSS transition 將小鳥飛行動畫和背景動畫分離。

• 7.以下圖，請實現表格信息的排序功能，當點擊表頭的屬性區域，將表格信息進行排序切換功能，即第一次點擊爲降序排序，再一次點擊進行升序排序。

排序算法，Js的Dom和事件相關操做。