一、HTML的Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
1.<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 标簽之前。告知浏覽器的解析器，用什麼文檔類型 規範來解析這個文檔。
2.嚴格模式的排版和 JS 運作模式是 以該浏覽器支援的最高标準運作。在混雜模式中，頁面以寬松的向後相容的方式顯示。模拟老式浏覽器的行為以防止站點無法工作。
3.DOCTYPE不存在或格式不正确會導緻文檔以混雜模式呈現。
二、請用CSS實作如下圖的樣式，相關尺寸如圖示，其中dom結構為：
<div id=”demo”></div>
#demo {
width: 100px;
height: 100px;
background-color: #fff;
position: relative;
border: 2px solid #
333
;
}
#demo:after, #demo:before {
border: solid transparent;
content:
' '
;
height:
;
left:
100
%;
position: absolute;
width:
;
}
#demo:after {
border-width: 10px;
border-left-color: #fff;
top: 20px;
}
#demo:before {
border-width: 12px;
border-left-color: #
000
;
top: 18px;
}
三、簡述document.write和 innerHTML的差別。
document.write是直接寫入到頁面的内容流，如果在寫之前沒有調用document.open, 浏覽器會自動調用open。每次寫完關閉之後重新調用該函數，會導緻頁面被重寫。 innerHTML則是DOM頁面元素的一個屬性，代表該元素的html内容。你可以精确到某一個具體的元素來進行更改。如果想修改document的内容，則需要修改document.documentElement.innerElement。
innerHTML很多情況下都優于document.write，其原因在于其允許更精确的控制要重新整理頁面的那一個部分。
四、你知道的，javascript語言的執行環境是"單線程模式"，這種模式的好處是實作起來比較簡單，執行環境相對單純；壞處是隻要有一個任務耗時很長，後面的任務都必須排隊等着，會拖延整個程式的執行，是以很多時候需要進行“異步模式”，請列舉js異步程式設計的方法。
$.ajax, 異步加載請求，加載完成後執行回調。 Promise類。
| 1 2 3 4 5 6 7 8 | |
自定義回調 var heavyFunc = function(callback) { // heavy function here
// a lot of time
callback()
} var callback = function() { // execute when heavy function is done
// your code here
} heavyFunc(callback)
五、使用者從手機的浏覽器通路www.baidu.com，看到的可能跟桌面PC電腦，是不太一樣的網頁效果，會更适合移動裝置使用。請簡要分析一下，實作這種網頁區分顯示的原因及技術原理
回答一：手機螢幕的px與css中寫的px并不完全一緻. 因為手機螢幕尺寸關系, 手機浏覽器會對頁面大小進行優化. 其方法就是改變螢幕分辨率算法, 比如将4個像素點算成1個像素點, 以此降低手機螢幕分辨率, 得到更好的顯示效果. 如iphone, 其螢幕分辨率其實為320PX(此px對應css中的px). 而在head中設定viewport即是告訴手機浏覽器, 該如何顯示網頁. 一般設定為viewport="device".
回答二：手機的網速問題、螢幕大小、記憶體、CPU等。通過不同裝置的特征，實作不同的網頁展現或輸出效果。根據useragent、螢幕大小資訊、IP、網速、css media Query等原理，實作前端或後端的特征識别和行為改變。
六、Flappy Bird是風靡一時的手機遊戲，玩家要操作一隻小鳥穿過無窮無盡的由鋼管組成的障礙。如果要你在HTML前端開發這個遊戲，為了保證遊戲的流暢運作，并長時間運作也不會崩潰，請列舉開發要注意的性能問題和解決的方法。
背景的卷軸效果優化。背景不能是無限長的圖檔拼接，必須有回收已移出的場景的方法。
将複雜運算從主UI線程中解耦。比如場景中小鳥的運動軌迹、碰撞算法等，需要在空閑時間片運算，不能和UI動畫同時進行。
将比較大的運算分解成不同的時間片，防止阻塞主UI線程。最好使用webworker。
注意記憶體洩漏和回收。使用對象池管理記憶體，提高記憶體檢測和垃圾回收。
進行預處理。将一些常用的過程進行預處理，
控制好幀率。将1秒分解成多個時間片，在固定間隔時間片進行UI動畫，其他時間片用在背景運算。
通過 GPU 加速和 CSS transition 将小鳥飛行動畫和背景動畫分離
七、如下圖，請實作表格資訊的排序功能，當點選表頭的屬性區域，将表格資訊進行排序切換功能，即第一次點選為降序排序，再一次點選進行升序排序。
我看很多人的回答都沒考慮清楚：
1、點選表頭，也可以是點選“姓名”，需要區分中文和數字的排序方式；
2、“第一次點選為降序排序，再一次點選進行升序排序”，需要可逆，并且如果點選“力量”一次，再點選“靈活”，然後再次點選“力量”，需要實作的是力量的降序，而不是力量的升序；
3、可擴充性，如果屬性不止這4個，那麼很多人的代碼直接廢棄。
貼代碼，原生JS寫的：
var the_table=document.getElementById("the_table");
var the_table_tr=the_table.getElementsByTagName("tr");
var the_table_tbody=the_table.getElementsByTagName("tbody")[0];
var the_table_head_td=the_table_tr[0].getElementsByTagName("td");
var click_switch=[];
for(i=0;i<the_table_head_td.length;i++){
(function each_one(_i){
click_switch.push(0);
the_table_head_td[_i].οnclick=function(){
for(q=0;q<click_switch.length;q++){
if(q!==_i){
click_switch[q]=0;
}
}
var temp_arr=[];
var the_table_tr_arr=[];
for(j=1;j<the_table_tr.length;j++){
temp_arr.push(the_table_tr[j].getElementsByTagName("td")[_i].innerHTML);
the_table_tr_arr.push(the_table_tr[j].cloneNode(true));
};
var tr_length_temp=the_table_tr.length
for(x=1;x<tr_length_temp;x++){
the_table_tbody.removeChild(the_table_tbody.getElementsByTagName("tr")[1]);
}
if(temp_arr[0]*1){
temp_arr.sort(function compare(a,b){return a-b;});
}else{
temp_arr.sort(function(a,b){return a<b?-1:1;});
}
if(click_switch[_i]==1){
click_switch[_i]=0;
for(k=temp_arr.length-1;k>=0;k--){
(function each_two(_k){
for(vv=0;vv<the_table_tr_arr.length;vv++){
if(temp_arr[_k]==the_table_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){
the_table_tbody.appendChild(the_table_tr_arr[vv]);
}
}
})(k);
}
}else{
click_switch[_i]=1;
for(k=0;k<temp_arr.length;k++){
(function each_two(_k){
for(vv=0;vv<the_table_tr_arr.length;vv++){
if(temp_arr[_k]==the_table_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){
the_table_tbody.appendChild(the_table_tr_arr[vv]);
}
}
})(k);
}
}
}
})(i)
}
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)