摘要：為了實現這一點，他們創建了兩種呈現模式標準模式和混雜模式。不存在或形式不正確會導致和文檔以混雜模式呈現。無論是否編寫了有效的，如果選擇了錯誤的，那么頁面就將以混雜模式呈現，其行為就可能會有錯誤或不可預測。

什么是web標準？

WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為 （Behavior）。
對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如 W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

請解釋一下DOCTYPE的作用，有DOCTYPE和沒有DOCTYPE有什么區別？

聲明位于位于HTML文檔中的第一行，處于 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

XHTML與HTML有什么區別

XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標簽名必須用小寫字母。

XHTML 文檔必須擁有根元素。

嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。

當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式。

在標準模式中，瀏覽器根據規范呈現頁面；在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示。
混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那么它一般以標準模式 呈現。對于HTML4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準 模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
根據DOCTYPE是否存在選擇呈現模式，被稱為DOCTYPE切換或DOCTYPE偵測。
DOCTYPE切換是瀏覽器用來區分遺留文檔和符合標準的文檔的手段。無論是否編寫了有效的CSS，如果選擇了錯誤的DOCTYPE，那么頁面就將以混雜 模式呈現，其行為就可能會有錯誤或不可預測。因此一定要在每個頁面上包含形式完整的DOCTYPE聲明，并且在使用HTML時選擇嚴格的DTD。

寫出3個使用this的典型應用

（1）在html元素事件屬性中使用，如：

（2）構造函數

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

（3）input點擊，獲取值

(4)apply()/call()求數組最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

數組去重

// 方法一
var norepeat = funtion(arr){
    return arr.filter(function(val, index, array){
        return array.indexOf(val) === index;
    });
}
norepeat()


// 方法二
var set = new Set(arr);

數組求和

var sum = function(arr){
    return arr.reduce(function(x, y){
        return x + y
    });
}

sum()

如何顯示/隱藏一個DOM元素？

Display
visibility
Opacity

JavaScript中如何檢測一個變量是一個String類型？

function isString(str){
 return (typeof str == "string" || str.constructor == String);
}

網頁中實現一個計算當年還剩多少時間的倒數計時程序，要求網頁上實時動態顯示“××年還?！痢撂臁痢習r××分××秒”

function counter() { 
    var date = new Date(); 
    var year = date.getFullYear();
    var date2 = new Date(year, 12, 31, 23, 59, 59);
    /*轉換成秒*/
    var time = (date2 - date) / 1000;
    var day = Math.floor(time / (24 * 60 * 60))
    var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
    var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
    var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
    var str = year + "年還剩" + day + "天" + hour + "時" + minute + "分" + second + "秒";
    console.log(str);
}
window.setInterval("counter()", 1000);

補充代碼，鼠標單擊Button1后將Button1移動到Button2的后面.

JavaScript中如何對一個對象進行深度clone

方法一：

function deepClone(obj){
  var str = JSON.sringify(obj);
  var newobj = JSON.parse(str);
  return newobj;
 }

方法二：

//深克隆
function deepClone(obj){
    if (!obj) { return obj; }
    var o = obj instanceof Array ? [] : {};
    for(var k in obj){
        if(obj.hasOwnProperty(k)){
            o[k] = typeof obj[k] === "object" ? deepClone(obj[k]) : obj[k];
        }
    }
    return o;
}

鼠標點擊頁面中的任意標簽，alert該標簽的名稱．（注意兼容性）

請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象

var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;


function parseQueryString(argu){
    var str = argu.split("?")[1];
    var result = {};
    var temp = str.split("&");
    for(vari=0; i


如何點擊每一列的時候alert其index?

    
這是第一條
    
這是第二條
    
這是第三條


(function A() {
    var index = 0;
    var ul = document.getElementById("test");
    var obj = {};
    for (var i = 0, l = ul.childNodes.length; i < l; i++) {
        if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
            var li = ul.childNodes[i];
            li.onclick = function() {
                index++;
                alert(index);
            }
        }
    }
})();



請給出異步加載js方案，不少于兩種
1）defer，只支持IE
   2）async/await
   3）創建script，插入到DOM中，加載完畢后callBack，見代碼：


請設計一套方案，用于確保頁面中JS加載完全
function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others: Firefox, Safari, Chrome, and Opera
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}

loadScript("http:/xxx.min.js",function(){
    alert("ok");
})


判斷一個字符串中出現次數最多的字符，統計這個次數
方法一：利用json數據個數“鍵”唯一的特性
方法二、利用數組reduce()方法；同時應用一個函數針對數組的兩個值(從左到右)。
方法三、利用正則表達式的replace對str的每一項進行檢測



歡迎閱讀：
2019年前端面試題-01
2019年前端面試題-02
2019年前端面試題-03

我是Cloudy，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。 
個人筆記，整理不易，感謝閱讀、點贊和收藏。
文章有任何問題歡迎大家指出，也歡迎大家一起交流前端各種問題！