摘要：在客戶端編程語言中，如和，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有著重要的意義。同源策略還應該對一些特殊情況做處理，比如限制協議下腳本的訪問權限。遍歷循環循環方法用于調用數組的每個元素，并將元素傳遞給回調函數。

px、em和rem的區別

px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化；

em表示相對于父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。

rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

任意瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
為了簡化計算，在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。

優雅降級和漸進增強

漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

eval()的作用

eval() 函數可計算某個字符串，并執行其中的的 JavaScript 代碼。
語法：

eval(string)

JS哪些操作會造成內存泄露

JS的回收機制：
找出不再使用的變量，然后釋放掉其占用的內存，但是這個過程不是實時的，因為其開銷比較大，所以垃圾回收系統（GC）會按照固定的時間間隔,周期性的執行。
垃圾收集器必須跟蹤到底哪個變量沒用，對于不再有用的變量打上標記，以備將來收回其內存。用于標記的無用變量的策略可能因實現而有所區別，通常情況下有兩種實現方式：“標記清除”和“引用計數”。引用計數不太常用，標記清除較為常用。
1、標記清除
　　這是javascript中最常用的垃圾回收方式。當變量進入執行環境是，就標記這個變量為“進入環境”。從邏輯上講，永遠不能釋放進入環境的變量所占用的內存，因為只要執行流進入相應的環境，就可能會用到他們。當變量離開環境時，則將其標記為“離開環境”。
　　垃圾收集器在運行的時候會給存儲在內存中的所有變量都加上標記。然后，它會去掉環境中的變量以及被環境中的變量引用的標記。而在此之后再被加上標記的變量將被視為準備刪除的變量，原因是環境中的變量已經無法訪問到這些變量了。最后。垃圾收集器完成內存清除工作，銷毀那些帶標記的值，并回收他們所占用的內存空間。
*關于這一塊，建議讀讀 ，關于作用域鏈的一些知識詳解，讀完差不多就知道了，哪些變量會被做標記。

function test(){
  var a=10;//被標記，進入環境
  var b=20;//被標記，進入環境
}
test();//執行完畢之后a、b又被標記離開環境，被回收

2、引用計數
　　另一種不太常見的垃圾回收策略是引用計數。引用計數的含義是跟蹤記錄每個值被引用的次數。當聲明了一個變量并將一個引用類型賦值給該變量時，則這個值的引用次數就是1。相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數就減1。當這個引用次數變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其所占的內存空間給收回來。這樣，垃圾收集器下次再運行時，它就會釋放那些引用次數為0的值所占的內存。

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

哪些操作會造成內存泄露：
1.意外的全局變量引起的內存泄露，一個未聲明變量的引用會在全局對象中創建一個新的變量。在瀏覽器的環境下，全局對象就是 window，也就是說：

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

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

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

2.閉包引起的內存泄露

function fn1(){
    var n=1;
    function fn2(){//在加一個fn2當他的子集
        alert(n);
    }
return fn2(); 
//return出來后 他就給 window了所以一直存在內存中。因為一直在內存中，在IE里容易造成內存泄漏
}
fn1();

3.dom清空或刪除時，事件未清除導致的內存泄漏

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.循環引用

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

5.定時器setTimeout和setInterval：當不需要setInterval或者setTimeout時，定時器沒有被clear，定時器的回調函數以及內部依賴的變量都不能被回收，造成內存泄漏。比如：vue使用了定時器，需要在beforeDestroy 中做對應銷毀處理。js也是一樣的。

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

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

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

7.死循環

while(1){
    a++;
}

8.給DOM對象添加的屬性是一個對象的引用

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

bootstrap響應式實現的原理

百分比布局+媒體查詢

CSS樣式覆蓋規則

規則一：由于繼承而發生樣式沖突時，最近祖先獲勝。

規則二：繼承的樣式和直接指定的樣式沖突時，直接指定的樣式獲勝

規則三：直接指定的樣式發生沖突時，樣式權值高者獲勝。

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

規則四：樣式權值相同時，后者獲勝。

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

position的值， relative和absolute分別是相對于誰進行定位的

absolute:生成絕對定位的元素， 相對于最近一級的定位不是 static 的父元素來進行定位（相對于最近的已經定位，即position為absolute或者relative的元素的祖先元素）。

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

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

static默認值。沒有定位，元素出現在正常的流中

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

解釋下CSSsprites，以及你要如何在頁面或網站中使用它

CSS?Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置

怎樣添加、移除、移動、復制、創建和查找節點？

1）創建新節點

createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點

2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入

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

瀏覽器的內核分別是什么?

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核

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

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

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

請解釋一下JavaScript的同源策略。

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

瀏覽器是如何渲染頁面的？

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

解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式

將CSS與DOM合并，構建渲染樹（Render Tree）

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

對標簽有什么理解

    
    
    
    


    
本文檔的 meta 屬性標識了創作者和編輯軟件。

請寫出你對閉包的理解，并列出簡單的理解

使用閉包主要是為了設計私有的方法和變量。
閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。
閉包有三個特性：
1.函數嵌套函數
2.函數內部可以引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收

JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現

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

判斷一個字符串中出現次數最多的字符，統計這個次數

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

window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器后才執行的。

$(document).ready()方法可以在DOM載入就緒時就對其進行操縱，并調用執行綁定的函數。

js遍歷

for循環

forEach循環：forEach() 方法用于調用數組的每個元素，并將元素傳遞給回調函數。沒有返回值。

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

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

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

filter函數：方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

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

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

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

對象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）函數

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

js數組處理函數總結

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

array.pop()：刪除并返回數組的最后一個元素

array.unshift()： 向數組的開頭添加一個或更多元素，并返回新的長度.

array.shift() ：刪除并返回數組的第一個元素

array.reverse() ：方法將數組中元素的位置顛倒,并返回該數組。該方法會改變原數組。

array.sort() ：方法用 原地算法 對數組的元素進行排序，并返回數組。排序算法現在是 穩定的 。默認排序順序是根據字符串Unicode碼點。由于它取決于具體實現，因此無法保證排序的時間和空間復雜性。原數組上原地排序，原數組改變。

array.concat(array2) ：方法用于合并兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。

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) ：方法提取一個字符串的一部分，返回一個從原字符串中提取出來的新字符串。

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

beginSlice:
必需。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推。

endSlice:
可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那么它規定的是從數組尾部開始算起的元素。

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

array.splice() ：方法通過刪除或替換現有元素或者原地添加新的元素來修改數組,并以數組形式返回被修改的內容。此方法會改變原數組。

// 語法:
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()：返回數組對象的原始值

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

 reducer函數接收4個參數:
1    Accumulator (acc) (累計器)
2    Current Value (cur) (當前值)
3    Current Index (idx) (當前索引)
4    Source Array (src) (源數組)

array.map()：對數組的每一項應用回調函數，返回新數組。

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

array.filter()：方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

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

forEach：數組遍歷，與for循環一樣，沒有返回。

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

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