前端頁面由哪三層構(gòu)成

結(jié)構(gòu)層：由 HTML 或 XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建悬槽。標(biāo)簽怀吻，也就是那些出現(xiàn)在尖括號里的單詞，對網(wǎng)頁內(nèi)容的語義含義做出了描述初婆，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息蓬坡。例如猿棉，P標(biāo)簽表達(dá)了這樣一種語義：“這是一個(gè)文本段⌒伎龋”
表示層：由CSS負(fù)責(zé)創(chuàng)建萨赁。CSS對 “ 如何顯示有關(guān)內(nèi)容 ” 的問題做出了回答。
行為層：負(fù)責(zé)回答 “ 內(nèi)容應(yīng)該如何對事件做出反應(yīng) ” 這一問題兆龙。這是 Javascript 語言和DOM主宰的領(lǐng)域杖爽。

HTML、CSS

HTML：超文本標(biāo)記語言紫皇∥堪玻“ 超文本 ” 就是指頁面內(nèi)可以包含圖片、鏈接坝橡，甚至音樂泻帮、程序等非文字元素。
CSS：層疊樣式表计寇。是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁脂倦，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化番宁。

什么是語義化的HTML?

語義化的HTML就是寫出的HTML代碼，符合內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化）
赖阻，選擇合適的標(biāo)簽（代碼語義化）蝶押，能夠便于開發(fā)者閱讀和寫出更優(yōu)雅
的代碼的同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。

1. 語義化有利于SEO火欧，有利于搜索引擎爬蟲更好的理解我們的網(wǎng)頁棋电，
   從而獲取更多的有效信息，提升網(wǎng)頁的權(quán)重苇侵。
2. 在沒有CSS的時(shí)候能夠清晰的看出網(wǎng)頁的結(jié)構(gòu)赶盔，增強(qiáng)可讀性。
3. 便于團(tuán)隊(duì)開發(fā)和維護(hù)榆浓，語義化的HTML可以讓開發(fā)者更容易的看明
   白于未，從而提高團(tuán)隊(duì)的效率和協(xié)調(diào)能力。
4. 支持多終端設(shè)備的瀏覽器渲染陡鹃。

常見的瀏覽器烘浦、內(nèi)核有哪些？

瀏覽器：IE萍鲸、Chrome闷叉、FireFox、Safari脊阴、Opera
內(nèi)核：Trident握侧、Gecko蚯瞧、Presto、Webkit

頁面導(dǎo)入樣式時(shí)藕咏，使用link和@import有什么區(qū)別

1. link屬于HTML標(biāo)簽状知，除了加載CSS外，還能用于定義RSS孽查，定義rel連接屬性等作用饥悴；而@import是CSS提供只能加載CSS;
2. 頁面被加載的時(shí)，link會同時(shí)被加載盲再，而@import引用的CSS會等到頁面被加載完再加載
   import是CSS2.1提出的西设，只在IE5以上才能被識別，而link是HTML標(biāo)簽答朋，無兼容問題贷揽；

清楚浮動有哪些方式？比較好的方式是哪一種

1. 父級div定義height梦碗。
2. 結(jié)尾處加空div標(biāo)簽clear：both禽绪。
3. 父級div定義偽類：after和zoom。
4. 父級div定義overflow：hidden洪规。
5. 父級div定義overflow：auto印屁。
6. 父級div也浮動，需要定義寬度斩例。
7. 父級div定義display：table雄人。
8. 結(jié)尾處加br標(biāo)簽clear:both。
   比較好的是第3種念赶，好多網(wǎng)站都這樣用

px础钠、em、rem的區(qū)別叉谜？

1. px像素旗吁。絕對單位，像素px是相對于顯示器屏幕分辨率而言的正罢，是一個(gè)虛擬單位阵漏。是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度翻具，需要指定精度DPI履怯。
2. em是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸裆泳。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置叹洲，則相對瀏覽器的默認(rèn)字體尺寸。它會繼承父級元素的字體大小工禾，因此并不是一個(gè)固定的值运提。
3. rem是CSS3新增的一個(gè)相對單位(root em,根em),使用rem為元素設(shè)定字體大小事蝗柔，仍然是相對大小但相對的只是HTML根元素。
4. 區(qū)別：IE無法調(diào)用那些使用px作為單位的字體大小民泵，而em和rem可以縮放癣丧，rem相對的只是HTML根元素。這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身栈妆，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小胁编，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前鳞尔，除了IE8及更早版本外嬉橙，所有瀏覽器已支持rem。

選擇器的優(yōu)先權(quán)

內(nèi)聯(lián)樣式表的權(quán)值最高 1000寥假。
ID 選擇器的權(quán)值為 100市框。
Class 類選擇器的權(quán)值為 10。
HTML 標(biāo)簽（類型）選擇器的權(quán)值為 1糕韧。

H5標(biāo)簽

<video> 標(biāo)記定義一個(gè)視頻
<audio> 標(biāo)記定義音頻內(nèi)容
<source> 標(biāo)記定義媒體資源
<canvas> 標(biāo)記定義圖片
<embed> 標(biāo)記定義外部的可交互的內(nèi)容或插件 比如flash

什么是JavaScript枫振？

JavaScript是客戶端和服務(wù)器端腳本語言，可以插入到HTML頁面中萤彩，并且是目前較熱門的Web開發(fā)語言蒋得。同時(shí)，JavaScript也是面向?qū)ο缶幊陶Z言乒疏。

JavaScript的數(shù)據(jù)類型

基本數(shù)據(jù)類型：
字符串 String、數(shù)字 Number饮焦、布爾Boolean怕吴、空對象Null、未定義Undefined
復(fù)合數(shù)據(jù)類型：
對象 Object(數(shù)組也是對象的類型)

判斷JavaScript中的數(shù)據(jù)類型的方法

typeof县踢、instanceof转绷、 constructor、 prototype硼啤、 $.type()/jquery.type()

什么是未聲明和未定義的變量议经？

未聲明的變量是程序中不存在且未聲明的變量。如果程序嘗試讀取未聲明變量的值谴返，則會遇到運(yùn)行時(shí)錯(cuò)誤煞肾。未定義的變量是在程序中聲明但尚未給出任何值的變量。如果程序嘗試讀取未定義變量的值嗓袱，則返回未定義的值籍救。

DOM操作

1. 創(chuàng)建新節(jié)點(diǎn)
   createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
   createElement() //創(chuàng)建一個(gè)具體的元素
   createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
2. 添加、移除渠抹、替換蝙昙、插入
   appendChild()
   removeChild()
   replaceChild()
   insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
3. 查找
   getElementsByTagName() //通過標(biāo)簽名稱
   getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)闪萄，會得到一個(gè)數(shù)組，其中包括id等于name值的)
   getElementById() //通過元素Id奇颠，唯一性
   document.getElementByclassName //通過元素的class屬性值

數(shù)組對象有哪些原生方法败去，列舉一下

pop、push烈拒、shift圆裕、unshift、splice缺菌、reverse葫辐、sort、concat伴郁、join耿战、slice、toString焊傅、indexOf剂陡、lastIndexOf、reduce狐胎、reduceRight
forEach鸭栖、map、filter握巢、every晕鹊、some

響應(yīng)事件

onclick鼠標(biāo)點(diǎn)擊某個(gè)對象；onfocus獲取焦點(diǎn)暴浦；onblur失去焦點(diǎn)溅话；onmousedown鼠標(biāo)被按下

哪些操作會造成內(nèi)存泄漏

全局變量、閉包歌焦、DOM清空或刪除時(shí)飞几，事件未清除、子元素存在引用

關(guān)于事件独撇，IE與火狐的事件機(jī)制有什么區(qū)別屑墨？ 如何阻止冒泡？

IE為事件冒泡纷铣，F(xiàn)irefox同時(shí)支持事件捕獲和事件冒泡卵史。但并非所有瀏覽器都支持事件捕獲。jQuery中使用event.stopPropagation()方法可阻止冒泡;（舊IE的方法 ev.cancelBubble = true;）

new操作符具體干了什么呢?

1. 創(chuàng)建一個(gè)空對象关炼，并且 this 變量引用該對象程腹，同時(shí)還繼承了該函數(shù)的原型；
2. 屬性和方法被加入到 this 引用的對象中儒拂；
3. 新創(chuàng)建的對象由 this 所引用寸潦，并且最后隱式的返回 this

JS延遲加載的方式有哪些色鸳？

JS的延遲加載有助與提高頁面的加載速度。
defer和async见转、動態(tài)創(chuàng)建DOM方式（用得最多）命雀、按需異步載入JS
defer：延遲腳本。立即下載斩箫，但延遲執(zhí)行（延遲到整個(gè)頁面都解析完畢后再運(yùn)行）吏砂，按照腳本出現(xiàn)的先后順序執(zhí)行。
async：異步腳本乘客。下載完立即執(zhí)行狐血，但不保證按照腳本出現(xiàn)的先后順序執(zhí)行。

談?wù)則his的理解

1. this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）
2. 如果有new關(guān)鍵字易核，this指向new出來的那個(gè)對象
3. 在事件中匈织，this指向目標(biāo)元素，特殊的是IE的attachEvent中的this總是指向全局對象window牡直。

ES6 let缀匕、const

let是更完美的var
let聲明的變量擁有塊級作用域,let聲明仍然保留了提升的特性，但不會盲目提升碰逸。
let聲明的全局變量不是全局對象的屬性乡小。不可以通過window.變量名的方式訪問
形如for (let x…)的循環(huán)在每次迭代時(shí)都為x創(chuàng)建新的綁定
let聲明的變量直到控制流到達(dá)該變量被定義的代碼行時(shí)才會被裝載，所以在到達(dá)之前使用該變量會觸發(fā)錯(cuò)誤饵史。

const定義常量值满钟，不可以重新賦值，但是如果值是一個(gè)對象胳喷，可以改變對象里的屬性值

const OBJ = {"a":1, "b":2};
OBJ.a = 3;
OBJ = {};// 重新賦值零远，報(bào)錯(cuò)！
console.log(OBJ.a); // 3

客戶端儲存的方式

客戶端儲存的方式有三種：cookies厌蔽，sessionStorage和localStorage

cookies，sessionStorage和localStorage的區(qū)別

共同點(diǎn)：都是保存在瀏覽器端摔癣，且同源的奴饮。
Cookies：服務(wù)器和客戶端都可以訪問；大小只有4KB左右择浊；有有效期，過期后將會刪除；
sessionStorage和localStorage僅本地存儲：只有本地瀏覽器端可訪問數(shù)據(jù)厂庇，服務(wù)器不能訪問本地存儲直到故意通過POST或者GET的通道發(fā)送到服務(wù)器焕梅；可以達(dá)到5MB或更大；沒有過期數(shù)據(jù)担孔，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除江锨。
sessionStorage：數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除吃警。用于本地存儲一個(gè)會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀啄育。因此sessionStorage不是一種持久化的本地存儲酌心，僅僅是會話級別的存儲。
localStorage： 本地離線存儲挑豌，長期存儲數(shù)據(jù)安券，瀏覽器關(guān)閉后數(shù)據(jù)不丟失。除非主動刪除數(shù)據(jù)氓英，否則數(shù)據(jù)是永遠(yuǎn)不會過期的侯勉。

什么樣的布爾運(yùn)算符可以在JavaScript中使用？

“And”運(yùn)算符（&&）铝阐，'Or'運(yùn)算符（||）和'Not'運(yùn)算符（Ｖ访病）可以在JavaScript中使用。
*運(yùn)算符沒有括號饰迹。

javascript對象的幾種創(chuàng)建方式

1芳誓，工廠模式
2，構(gòu)造函數(shù)模式
3啊鸭，原型模式
4锹淌，混合構(gòu)造函數(shù)和原型模式
5，動態(tài)原型模式
6赠制，寄生構(gòu)造函數(shù)模式
7赂摆，穩(wěn)妥構(gòu)造函數(shù)模式

javascript繼承的6種方法

1，原型鏈繼承
2钟些，借用構(gòu)造函數(shù)繼承
3烟号，組合繼承(原型+借用構(gòu)造)
4，原型式繼承
5政恍，寄生式繼承
6汪拥，寄生組合式繼承

簡述ajax 的過程

1. 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個(gè)異步調(diào)用對象
2. 創(chuàng)建一個(gè)新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息
3. 設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù)
4. 發(fā)送HTTP請求
5. 獲取異步調(diào)用返回的數(shù)據(jù)
6. 使用JavaScript和DOM實(shí)現(xiàn)局部刷新

ajax同步和異步的區(qū)別

同步：阻塞的
-張三叫李四去吃飯篙耗，李四一直忙得不停迫筑，張三一直等著，直到李四忙完兩個(gè)人一塊去吃飯
=瀏覽器向服務(wù)器請求數(shù)據(jù)宗弯，服務(wù)器比較忙脯燃，瀏覽器一直等著（頁面白屏），直到服務(wù)器返回?cái)?shù)據(jù)蒙保，瀏覽器才能顯示頁面

異步：非阻塞的
-張三叫李四去吃飯辕棚，李四在忙，張三說了一聲然后自己就去吃飯了，李四忙完后自己去吃
=瀏覽器向服務(wù)器請求數(shù)據(jù)逝嚎，服務(wù)器比較忙扁瓢，瀏覽器可以自如的干原來的事情（顯示頁面），服務(wù)器返回?cái)?shù)據(jù)的時(shí)候通知瀏覽器一聲懈糯，瀏覽器把返回的數(shù)據(jù)再渲染到頁面涤妒，局部更新。

GET和POST的區(qū)別赚哗，何時(shí)使用POST她紫？

GET：一般用于信息獲取，使用URL傳遞參數(shù)屿储，對所發(fā)送信息的數(shù)量也有限制贿讹，一般在2000個(gè)字符，有的瀏覽器是8000個(gè)字符
POST：一般用于修改服務(wù)器上的資源够掠，對所發(fā)送的信息沒有限制民褂，提交的數(shù)據(jù)內(nèi)容存在于http請求體中，數(shù)據(jù)不會暴漏在url地址中疯潭。
在以下情況中赊堪，請使用 POST 請求：
a. 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
b. 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
c. 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

JSON

json是一種輕量級的數(shù)據(jù)交換格式竖哩，前端用于數(shù)據(jù)傳輸哭廉、數(shù)據(jù)請求。便于解析相叁。
json的數(shù)據(jù)格式就是對象嵌套數(shù)組遵绰，數(shù)組嵌套對象。數(shù)組與對象相互嵌套的一種數(shù)據(jù)格式增淹。

同源策略

跨域是由同源策略引起的
同源策略就是不同的瀏覽器不能讀寫對方的資源椿访。同源指的是協(xié)議、域名和端口號虑润。

如何解決跨域

JSONP跨域
websocket協(xié)議跨域

Jsonp原理(JSONP跨域只支持GET)

Ajax不能跨域成玫，但是script標(biāo)簽和img標(biāo)簽都可以跨域。jsonp的話就是動態(tài)創(chuàng)建一個(gè)script標(biāo)簽拳喻，把jsonp數(shù)據(jù)格式(callback(json))的接口的地址賦值給我們的script標(biāo)簽的src屬性梁剔。每一次發(fā)送jsonp請求的時(shí)候都會創(chuàng)建一個(gè)全局的回調(diào)函數(shù)，全局回調(diào)函數(shù)名稱跟我們jsonp接口里面的函數(shù)名稱是一致的舞蔽。全局函數(shù)里面寫的就是對請求過來數(shù)據(jù)的操作。（jsonp缺點(diǎn)：只能實(shí)現(xiàn)get一種請求码撰。）

JavaScript原生：
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 傳參并指定回調(diào)執(zhí)行函數(shù)為onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回調(diào)執(zhí)行函數(shù)
    function onBack(res) {
        alert(JSON.stringify(res));
    }

jQuery ajax：
    $.ajax({
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 請求方式為jsonp
        jsonpCallback: "onBack",    // 自定義回調(diào)函數(shù)名
        data: {}
    });

vue.js：
    this.$http.jsonp('http://www.domain2.com:8080/login', {
        params: {},
        jsonp: 'onBack'
    }).then((res) => {
        console.log(res); 
    })

websocket協(xié)議跨域

WebSocket是HTML5開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議渗柿。
在WebSocket API中，瀏覽器和服務(wù)器只需要做一個(gè)握手的動作，然后朵栖，瀏覽器和服務(wù)器之間就形成了一條快速通道颊亮。兩者之間就直接可以數(shù)據(jù)互相傳送。
瀏覽器通過 JavaScript 向服務(wù)器發(fā)出建立 WebSocket 連接的請求陨溅，連接建立以后终惑，客戶端和服務(wù)器端就可以通過 TCP 連接直接交換數(shù)據(jù)。
它實(shí)現(xiàn)了瀏覽器和服務(wù)器的全雙工通訊门扇，同時(shí)允許跨域通信雹有。
下邊代碼使用的是Socket.io，它很好的封裝了websocket接口臼寄，提供了更簡單靈活的接口霸奕，也對不支持websocket的瀏覽器提供了向下支持。

<div>
    user input：<input type="text">
</div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.xxx.com:8080');

// 連接成功處理
socket.on('connect', function() {
    // 監(jiān)聽服務(wù)端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 監(jiān)聽服務(wù)端關(guān)閉
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

阻止默認(rèn)行為

function stopDefault( e ) {
    // 阻止默認(rèn)瀏覽器動作(W3C)
    if ( e && e.preventDefault ) {
        e.preventDefault();
    } else {
        // IE中阻止函數(shù)器默認(rèn)動作的方式
        window.event.returnValue = false;
    }
    return false;
}

阻止冒泡

function stopBubble(e) {
    // 如果提供了事件對象吉拳，則這是一個(gè)非IE瀏覽器
    if ( e && e.stopPropagation ) {
        // 因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
    } else {
        // 否則质帅，我們需要使用IE的方式來取消事件冒泡
        window.event.cancelBubble = true;
    }
}

apply、call和bind

在嚴(yán)格模式下留攒，未指定環(huán)境對象而調(diào)用函數(shù)煤惩，則this 值不會轉(zhuǎn)型為window。除非明確把函數(shù)添加到某個(gè)對象或者調(diào)用apply()或call()炼邀，否則this 值將是undefined魄揉。
在非嚴(yán)格模式下，call汤善、apply的第一個(gè)參數(shù)傳遞為null或undefined時(shí)什猖，函數(shù)體內(nèi)的this會指向默認(rèn)的宿主對象，在瀏覽器中則是window红淡。

• apply不狮、call和bind比較

var obj = {
    x: 81
};
var foo = {
    getX: function () {
        return this.x;
    }
}
console.log(foo.getX.bind(obj)());
console.log(foo.getX.apply(obj));
console.log(foo.getX.call(obj));

• 很明顯，bind方法后面多了一對括號在旱。也就是說摇零，當(dāng)你希望改變上下文環(huán)境之后并且立即執(zhí)行，而是回調(diào)執(zhí)行的時(shí)候（多用于事件監(jiān)聽器函數(shù)）桶蝎，使用bind()方法驻仅，而apply/call則會立即執(zhí)行函數(shù)。
  定義一個(gè) log 方法登渣，讓它可以代理 console.log 方法噪服。

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

• 給每一個(gè) log 消息添加一個(gè)”(app)”的前輟，比如：

log("hello world");    //(app)hello world
function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
  console.log.apply(console, args);
};

• apply實(shí)現(xiàn)bind

function bind (fn, context) {
    return function () {
        return fn.apply(context, argument);
    }
}

一個(gè)頁面從輸入 URL 到頁面加載顯示完成胜茧，這個(gè)過程中都發(fā)生了什么粘优？

分為4個(gè)步驟：
（1）訪問DNS服務(wù)器仇味，獲取請求對應(yīng)的IP地址
（2）瀏覽器與遠(yuǎn)程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個(gè)TCP/IP連接。
（3）發(fā)送請求和響應(yīng)
（4）此時(shí)雹顺，Web服務(wù)器提供資源服務(wù)丹墨，客戶端開始下載資源，通過瀏覽器解析顯示出來

分為4個(gè)步驟：
（1）當(dāng)發(fā)送一個(gè)URL請求時(shí)嬉愧，不管這個(gè)URL是Web頁面的URL還是Web頁面上每個(gè)資源的URL贩挣，瀏覽器都會開啟一個(gè)線程來處理這個(gè)請求，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動一個(gè)DNS查詢没酣。這能使瀏覽器獲得請求對應(yīng)的IP地址王财。
（2）瀏覽器與遠(yuǎn)程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個(gè)TCP/IP連接。該握手包括一個(gè)同步報(bào)文四康，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文搪搏，這三個(gè)報(bào)文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信闪金，而后服務(wù)器應(yīng)答并接受客戶端的請求疯溺，最后由客戶端發(fā)出該請求已經(jīng)被接受的報(bào)文。
（3）一旦TCP/IP連接建立哎垦，瀏覽器會通過該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請求囱嫩。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)漏设。
（4）此時(shí)墨闲，Web服務(wù)器提供資源服務(wù)，客戶端開始下載資源郑口。
請求返回后鸳碧，便進(jìn)入了我們關(guān)注的前端模塊
簡單來說，瀏覽器會解析HTML生成DOM Tree犬性，其次會根據(jù)CSS生成CSS Rule Tree瞻离，而javascript又可以根據(jù)DOM API操作DOM

數(shù)組API

詳細(xì)見《JavaScript數(shù)組API》

數(shù)組去重

詳細(xì)見《JavaScript數(shù)組去重（含ES6方法）》