摘要：在客戶端編程語(yǔ)言中，如和，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制協(xié)議下腳本的訪問(wèn)權(quán)限。遍歷循環(huán)循環(huán)方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。

px、em和rem的區(qū)別

px表示像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)：1px = 1/96in)，是絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?/p>

em表示相對(duì)于父元素的字體大小。em是相對(duì)單位 ，沒(méi)有一個(gè)固定的度量值，而是由其他元素尺寸來(lái)決定的相對(duì)值。

rem：相對(duì)單位，可理解為”root em”, 相對(duì)根節(jié)點(diǎn)html的字體大小來(lái)計(jì)算，CSS3新加屬性，chrome/firefox/IE9+支持。

任意瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
為了簡(jiǎn)化計(jì)算，在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。

優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

漸進(jìn)增強(qiáng)（Progressive Enhancement）：一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗(yàn)。

優(yōu)雅降級(jí)（Graceful Degradation）：一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù)。比如一開(kāi)始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽。

eval()的作用

eval() 函數(shù)可計(jì)算某個(gè)字符串，并執(zhí)行其中的的 JavaScript 代碼。
語(yǔ)法：

eval(string)

JS哪些操作會(huì)造成內(nèi)存泄露

JS的回收機(jī)制：
找出不再使用的變量，然后釋放掉其占用的內(nèi)存，但是這個(gè)過(guò)程不是實(shí)時(shí)的，因?yàn)槠溟_(kāi)銷比較大，所以垃圾回收系統(tǒng)（GC）會(huì)按照固定的時(shí)間間隔,周期性的執(zhí)行。
垃圾收集器必須跟蹤到底哪個(gè)變量沒(méi)用，對(duì)于不再有用的變量打上標(biāo)記，以備將來(lái)收回其內(nèi)存。用于標(biāo)記的無(wú)用變量的策略可能因?qū)崿F(xiàn)而有所區(qū)別，通常情況下有兩種實(shí)現(xiàn)方式：“標(biāo)記清除”和“引用計(jì)數(shù)”。引用計(jì)數(shù)不太常用，標(biāo)記清除較為常用。
1、標(biāo)記清除
　　這是javascript中最常用的垃圾回收方式。當(dāng)變量進(jìn)入執(zhí)行環(huán)境是，就標(biāo)記這個(gè)變量為“進(jìn)入環(huán)境”。從邏輯上講，永遠(yuǎn)不能釋放進(jìn)入環(huán)境的變量所占用的內(nèi)存，因?yàn)橹灰獔?zhí)行流進(jìn)入相應(yīng)的環(huán)境，就可能會(huì)用到他們。當(dāng)變量離開(kāi)環(huán)境時(shí)，則將其標(biāo)記為“離開(kāi)環(huán)境”。
　　垃圾收集器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記。然后，它會(huì)去掉環(huán)境中的變量以及被環(huán)境中的變量引用的標(biāo)記。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量，原因是環(huán)境中的變量已經(jīng)無(wú)法訪問(wèn)到這些變量了。最后。垃圾收集器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值，并回收他們所占用的內(nèi)存空間。
*關(guān)于這一塊，建議讀讀 ，關(guān)于作用域鏈的一些知識(shí)詳解，讀完差不多就知道了，哪些變量會(huì)被做標(biāo)記。

function test(){
  var a=10;//被標(biāo)記，進(jìn)入環(huán)境
  var b=20;//被標(biāo)記，進(jìn)入環(huán)境
}
test();//執(zhí)行完畢之后a、b又被標(biāo)記離開(kāi)環(huán)境，被回收

2、引用計(jì)數(shù)
　　另一種不太常見(jiàn)的垃圾回收策略是引用計(jì)數(shù)。引用計(jì)數(shù)的含義是跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型賦值給該變量時(shí)，則這個(gè)值的引用次數(shù)就是1。相反，如果包含對(duì)這個(gè)值引用的變量又取得了另外一個(gè)值，則這個(gè)值的引用次數(shù)就減1。當(dāng)這個(gè)引用次數(shù)變成0時(shí)，則說(shuō)明沒(méi)有辦法再訪問(wèn)這個(gè)值了，因而就可以將其所占的內(nèi)存空間給收回來(lái)。這樣，垃圾收集器下次再運(yùn)行時(shí)，它就會(huì)釋放那些引用次數(shù)為0的值所占的內(nèi)存。

function test(){
  var a={};//a的引用次數(shù)為0
  var b=a;//a的引用次數(shù)加1，為1
  var c=a;//a的引用次數(shù)加1，為2
  var b={};//a的引用次數(shù)減1，為1
}

哪些操作會(huì)造成內(nèi)存泄露：
1.意外的全局變量引起的內(nèi)存泄露，一個(gè)未聲明變量的引用會(huì)在全局對(duì)象中創(chuàng)建一個(gè)新的變量。在瀏覽器的環(huán)境下，全局對(duì)象就是 window，也就是說(shuō)：

function foo(arg) {
    bar = "aaaaa";
}

// 實(shí)際上等價(jià)于
function foo(arg) {
    window.bar = "aaaaa";
}

// 類似的
function foo() {
    this.variable = "qqqqq";
}
//this 指向全局對(duì)象（window）
foo();

2.閉包引起的內(nèi)存泄露

function fn1(){
    var n=1;
    function fn2(){//在加一個(gè)fn2當(dāng)他的子集
        alert(n);
    }
return fn2(); 
//return出來(lái)后 他就給 window了所以一直存在內(nèi)存中。因?yàn)橐恢痹趦?nèi)存中，在IE里容易造成內(nèi)存泄漏
}
fn1();

3.dom清空或刪除時(shí)，事件未清除導(dǎo)致的內(nèi)存泄漏

var elements={
    button: document.getElementById("button"),
    image: document.getElementById("image"),
    text: document.getElementById("text")
};
function doStuff(){
    image.src="http://some.url/image";
    button.click():
    console.log(text.innerHTML)
}
function removeButton(){
  document.body.removeChild(document.getElementById("button"))
}

4.循環(huán)引用

function leakMemory() {
    var el = document.getElementById("el");
    var o = { "el": el };
    el.o = o;
}

5.定時(shí)器setTimeout和setInterval：當(dāng)不需要setInterval或者setTimeout時(shí)，定時(shí)器沒(méi)有被clear，定時(shí)器的回調(diào)函數(shù)以及內(nèi)部依賴的變量都不能被回收，造成內(nèi)存泄漏。比如：vue使用了定時(shí)器，需要在beforeDestroy 中做對(duì)應(yīng)銷毀處理。js也是一樣的。

clearTimeout(***)
clearInterval(***)

6.如果在mounted/created 鉤子中使用了$on，需要在beforeDestroy 中做對(duì)應(yīng)解綁($off)處理

beforeDestroy() {
  this.bus.$off("****");
}

7.死循環(huán)

while(1){
    a++;
}

8.給DOM對(duì)象添加的屬性是一個(gè)對(duì)象的引用

var testObject = {};
document.getElementById("idname").property = testObject;  //如果DOM不被消除，則testObject會(huì)一直存在，造成內(nèi)存泄漏

bootstrap響應(yīng)式實(shí)現(xiàn)的原理

百分比布局+媒體查詢

CSS樣式覆蓋規(guī)則

規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時(shí)，最近祖先獲勝。

規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時(shí)，直接指定的樣式獲勝

規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)，樣式權(quán)值高者獲勝。

樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表:
```
CSS選擇器                    權(quán)值
標(biāo)簽選擇器                    1
類選擇器                    10
ID選擇器                    100
內(nèi)聯(lián)樣式                    1000
偽元素(:first-child)        1
偽類(:link)                10
```
可以看到，內(nèi)聯(lián)樣式的權(quán)值>>ID選擇器>>類選擇器>>標(biāo)簽選擇器，除此以外，后代選擇器的權(quán)值為每項(xiàng)權(quán)值之和，比如”#nav .current a”的權(quán)值為100 + 10 + 1 = 111。

規(guī)則四：樣式權(quán)值相同時(shí)，后者獲勝。

規(guī)則五：!important的樣式屬性不被覆蓋。

position的值， relative和absolute分別是相對(duì)于誰(shuí)進(jìn)行定位的

absolute:生成絕對(duì)定位的元素， 相對(duì)于最近一級(jí)的定位不是 static 的父元素來(lái)進(jìn)行定位（相對(duì)于最近的已經(jīng)定位，即position為absolute或者relative的元素的祖先元素）。

fixed（老IE不支持）生成絕對(duì)定位的元素，通常相對(duì)于瀏覽器窗口或 frame 進(jìn)行定位。

relative生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位（相對(duì)于本元素原始位置進(jìn)行定位）。

static默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中

sticky生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出

解釋下CSSsprites，以及你要如何在頁(yè)面或網(wǎng)站中使用它

CSS?Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置

怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？

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() //插入

3）查找
getElementsByTagName() //通過(guò)標(biāo)簽名稱
getElementsByName() //通過(guò)元素的Name屬性的值
getElementById() //通過(guò)元素Id，唯一性

瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari：webkit內(nèi)核

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

Chrome：Blink(基于webkit，Google與Opera Software共同開(kāi)發(fā))

請(qǐng)解釋JSONP的工作原理，以及它為什么不是真正的AJAX。

JSONP (JSON with Padding)是一個(gè)簡(jiǎn)單高效的跨域方式，HTML中的script標(biāo)簽可以加載并執(zhí)行其他域的javascript，于是我們可以通過(guò)script標(biāo)記來(lái)動(dòng)態(tài)加載其他域的資源。例如我要從域A的頁(yè)面pageA加載域B的數(shù)據(jù)，那么在域B的頁(yè)面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在 pageA中用script標(biāo)簽把pageB加載進(jìn)來(lái)，那么pageB中的腳本就會(huì)得以執(zhí)行。JSONP在此基礎(chǔ)上加入了回調(diào)函數(shù)，pageB加載完之后會(huì)執(zhí)行pageA中定義的函數(shù)，所需要的數(shù)據(jù)會(huì)以參數(shù)的形式傳遞給該函數(shù)。JSONP易于實(shí)現(xiàn)，但是也會(huì)存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁(yè)面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。

請(qǐng)解釋一下JavaScript的同源策略。

在客戶端編程語(yǔ)言中，如javascript和 ActionScript，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略規(guī)定跨域之間的腳本是隔離的，一個(gè)域的腳本不能訪問(wèn)和操作另外一個(gè)域的絕大部分屬性和方法。那么什么叫相同域，什么叫不同的域呢？當(dāng)兩個(gè)域具有相同的協(xié)議, 相同的端口，相同的host，那么我們就可以認(rèn)為它們是相同的域。同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制file協(xié)議下腳本的訪問(wèn)權(quán)限。本地的HTML文件在瀏覽器中是通過(guò)file協(xié)議打開(kāi)的，如果腳本能通過(guò)file協(xié)議訪問(wèn)到硬盤上其它任意文件，就會(huì)出現(xiàn)安全隱患，目前IE8還有這樣的隱患。

瀏覽器是如何渲染頁(yè)面的？

解析HTML文件，創(chuàng)建DOM樹(shù)。自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。

解析CSS。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式

將CSS與DOM合并，構(gòu)建渲染樹(shù)（Render Tree）

布局和繪制，重繪（repaint）和重排（reflow）

對(duì)標(biāo)簽有什么理解

    
    
    
    


    
本文檔的 meta 屬性標(biāo)識(shí)了創(chuàng)作者和編輯軟件。

請(qǐng)寫(xiě)出你對(duì)閉包的理解，并列出簡(jiǎn)單的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。
閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。
閉包有三個(gè)特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類型？請(qǐng)寫(xiě)出函數(shù)實(shí)現(xiàn)

typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String

判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)

$(document).ready()方法和window.onload有什么區(qū)別？

window.onload方法是在網(wǎng)頁(yè)中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的。

$(document).ready()方法可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱，并調(diào)用執(zhí)行綁定的函數(shù)。

js遍歷

for循環(huán)

forEach循環(huán)：forEach() 方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。沒(méi)有返回值。

array.forEach(function(currentValue[, index, arr), thisValue])

map()函數(shù)：map() 方法返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

array.map(unction(currentValue,index,arr), thisValue)

filter函數(shù)：方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

array.filter(function(currentValue[,index,arr), thisValue])

some函數(shù)：some() 方法用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供），some() 方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素：

array.some(function(currentValue[,index,arr),thisValue])    

對(duì)象in方法

let obj ={a:"2",b:3,c:true};
for (var i in obj) {
    console.log(obj[i],i)
}
console.log(obj);

Object.keys（obj）和 Object.values（obj）函數(shù)

const obj = {
　　　　id:1,
　　　　name:"zhangsan",
　　　　age:18
}
console.log(Object.keys(obj))
console.log(Object.values(obj))

js數(shù)組處理函數(shù)總結(jié)

array.push()：push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

array.pop()：刪除并返回?cái)?shù)組的最后一個(gè)元素

array.unshift()： 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度.

array.shift() ：刪除并返回?cái)?shù)組的第一個(gè)元素

array.reverse() ：方法將數(shù)組中元素的位置顛倒,并返回該數(shù)組。該方法會(huì)改變?cè)瓟?shù)組。

array.sort() ：方法用 原地算法 對(duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。排序算法現(xiàn)在是 穩(wěn)定的 。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。由于它取決于具體實(shí)現(xiàn)，因此無(wú)法保證排序的時(shí)間和空間復(fù)雜性。原數(shù)組上原地排序，原數(shù)組改變。

array.concat(array2) ：方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組，而是返回一個(gè)新數(shù)組。

array.join()：creates and returns a new string by concatenating all of the elements in an array (or an array-like object ), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr.join()
//     output: George,John,Thomas

string.slice(start,end) ：方法提取一個(gè)字符串的一部分，返回一個(gè)從原字符串中提取出來(lái)的新字符串。

// 語(yǔ)法:
str.slice(beginSlice[, endSlice])

beginSlice:
必需。規(guī)定從何處開(kāi)始選取。如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開(kāi)始算起的位置。也就是說(shuō)，-1 指最后一個(gè)元素，-2 指倒數(shù)第二個(gè)元素，以此類推。

endSlice:
可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒(méi)有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個(gè)參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從數(shù)組尾部開(kāi)始算起的元素。

//實(shí)例: 
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr.slice(1) // output: John,Thomas

array.splice() ：方法通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。

// 語(yǔ)法:
array.splice(startIndex,howmany[,item1,.....])

// 示例1: 添加元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");    // output: Banana,Orange,Lemon,Kiwi,Mango

// 示例2: 刪除元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);    // output: Banana,Orange

array.indexOf()：返回?cái)?shù)組對(duì)象的原始值

array.reduce(reducer)：方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。

 reducer函數(shù)接收4個(gè)參數(shù):
1    Accumulator (acc) (累計(jì)器)
2    Current Value (cur) (當(dāng)前值)
3    Current Index (idx) (當(dāng)前索引)
4    Source Array (src) (源數(shù)組)

array.map()：對(duì)數(shù)組的每一項(xiàng)應(yīng)用回調(diào)函數(shù)，返回新數(shù)組。

array.some()：數(shù)組中只需有一項(xiàng)滿足給定條件則返回true。

array.filter()：方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

array.every()：數(shù)組的每一項(xiàng)都滿足給定條件則返回true。

forEach：數(shù)組遍歷，與for循環(huán)一樣，沒(méi)有返回。

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

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