慕課網js面試題學習筆記(ES6 標準) ——實時更新

最近在在看前端面試教程，這篇文章裏大部分是看視頻的過程當中本身遇到的不清楚的知識點，內容很簡單，只是起到一個梳理做用。有些地方也根據本身的理解在做者的基礎上加了點東西，若有錯誤，歡迎交流。

一、typeof有幾種結果

undefined、、boolean、object、string、number、function、symbol（ES6新增）

二、什麼時候使用 ===,什麼時候使用 ==

if(obj.a == null) {
    //至關於obj.a === null || obj.a === undefined
    //除了這種狀況用 == 以外，所有用 === 
    //這是jquery的推薦寫法
}

三、js中的內置函數有哪些？

Object()、Array()、Boolean()、Number()、String()、Function()、Date()、RegExp()、Error()

//注意：構造函數的函數名通常都以大寫字母開頭，本身定義的構造函數也儘可能這樣寫

四、window.onload和DOMContentLoaded的區別

當onload事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片，flash都已經加載完成了。

當DOMContentLoaded事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。

五、如何理解JSON

JSON首先是一種數據格式，也是js的一種內置對象，它有兩個方法：stringify()（序列化）、parse()（反序列化）

五、變量類型和引用類型的區別

js中變量分爲兩種類型，值類型：boolean、undefined、number、string和引用類型（object）。值類型的變量定義體和具體的值都存在棧內存中，因此var a = 123; var b = a; b = 456; 之後b等於456，a仍是等於123；
而引用類型的變量定義體存在棧內存中，而具體的值存在堆內存中，每次複製一個引用類型，至關於只是複製了一份引用。因此複製體改變，被複制體也會跟着同時改變。

六、如何準確判斷一個變量是數組類型

兩種辦法：
一、 a instanceof Array;
二、 Object.prototype.toString.call(a)
//a爲要檢測的變量，實際上第二種方法能夠準確判斷js中幾乎全部的類型。
//而第一種方法只能判斷引用類型，不能判斷值類型，由於值類型沒有對應的構造函數

七、描述new一個對象的過程

一、生成一個新的空對象；
二、this指向這個新對象；
三、執行構造函數中的代碼，即對this賦值；
四、將新對象的__prototype__屬性指向構造函數的prototype屬性；
五、返回this，即獲得新對象。

八、說明this的幾種不一樣的使用場景

一、做爲構造函數執行
二、做爲對象屬性執行
三、做爲普通函數執行
四、call bind apply
五、DOM事件中使用
六、js非strict模式下，this默認指向window對象

九、建立10個a標籤，點擊的時候彈出對應的序號（0-9）

//考察js做用域和閉包的運用
    <script>
        for(i = 0; i < 10; i++) {
            (function(i){
                var a = document.createElement("a");
                a.innerHTML = i + "<br/>";
                a.addEventListener("click", function(){
                    alert(i);
                });
                document.body.appendChild(a);
            })(i);
        }
    </script>

十、如何理解做用域

一、自由變量
二、做用域鏈、即自由變量的查找
三、閉包的兩個場景

十一、開發實際過程當中閉包的應用

封裝變量，收斂權限

十二、如何理解常說的JS

常說的JS通常來講包含兩部分：

一、JS基礎知識（ECMA262標準），也就是語法標準，讓js擁有基礎編程語言的能力。
二、JS-Web-API（W3C標準），讓js擁有操做dom和bom的能力。

1三、querySelectorAll 方法相比 getElementsBy 系列方法有什麼區別

一、querySelectorAll屬於W3C的Selector API規範，而getElementsBy屬於W3C的DOM規範。
二、方法接受的參數不同，前者接受的是css選擇符，然後者只能是單一的ClassName、Id、或者TagName.
三、querySelectorAll返回的是static node List，而getElementsBy返回的是live node List,獲取之後在添加元素，前者數量不變，後者數量會跟着增長。會致使一些死循環，參考:https://www.bbsmax.com/A/GBJr...
http://www.imooc.com/article/...

1四、Dom操做經常使用API

document.getElementsBy系列、docuemnt.querySelectorAll、document.querySelector、
getAttribute(attrName)、setAttribute(attrName,val)、
appendChild(node) - 在最後插入新的子節點（元素）、
insertBefore(node) - 在前面插入新的子結點
removeChild(node) - 刪除子節點（元素）、

1五、Dom節點的Attribute和property有什麼區別

Attribute是HTML標籤的屬性，property是JS對象的屬性

1六、常見的BOM操做API

檢測客戶端

navigator.userAgent

檢測屏幕

screen.width、screen.height

url操做

location.href  .protocol .pathname .search .hash

1七、常見瀏覽器的內核

Trident內核：主要表明爲IE瀏覽器 // -ms-
Gecko內核：主要表明爲Firefox    //-moz-
Presto內核：主要表明爲Opera     //-o-
Webkit內核：產要表明爲Chrome和Safari //-webkit-

1八、描述瀏覽器訪問一個網站的過程

1、域名到ip地址解析過程

一、查找瀏覽器緩存
二、查找系統緩存（通常是hosts文件）
三、查找路由器緩存
四、查找ISP DNS 緩存
五、ISP發起一個迭代的DNS請求
(1)本地 DNS服務器即將該請求轉發到互聯網上的根域（即一個完整域名最後面的那個點，一般省略不寫）
(2)根域將所要查詢域名中的頂級域（假設要查詢ke.qq.com，頂級域就是com）的服務器IP地址返回到本地DNS
(3) 本地DNS根據返回的IP地址，再向頂級域（就是com域）發送請求。
(4) com域服務器再將域名中的二級域（即ke.qq.com中的qq）的IP地址返回給本地DNS
(5) 本地DNS再向二級域發送請求進行查詢
(6) 以後不斷重複這樣的過程，直到本地DNS服務器獲得最終的查詢結果，並返回到主機。這時候主機才能經過域名訪問該網站。
域名解析的過程到此完成，至此瀏覽器拿到了域名對應的IP地址

2、創建TCP/IP鏈接，經過TCP協議的三次握手，鏈接創建之後，瀏覽器就向服務器發起http請求，通常經過get或者post方法。
3、服務器端接受到這個請求，根據請求參數，經過相關的處理把結果，一個html代碼，返回給服務器
4、瀏覽器拿到html代碼，開始解析頁面，裏面的css、js、圖片等靜態資源，一樣要通過上述步驟才能到達瀏覽器。
5、瀏覽器根據拿到的資源對頁面進行渲染，最後將渲染完成的頁面呈現給用戶。

1九、http請求常見的狀態碼有哪些

200     //請求完成，成功返回數據
301     //所請求的頁面已經轉移至新的url
400     //客戶端請求的語法錯誤，服務器沒法解析
401     //請求要求用戶的身份認證
403     //服務器理解請求客戶端的請求，可是拒絕執行此請求，可能仍是沒有權限
404     //客戶端請求的資源不存在，最多見的一種狀態碼
500     //服務器錯誤
503     //因爲超載或系統維護，服務器暫時的沒法處理客戶端的請求

20、簡述cookies、 sessionStorage、localStorage的區別

cookies容量大約只有4KB、全部的http請求都帶着它，會影響獲取資源的效率,API太簡單隻有documet.cookies，使用的時候通常要經過字符串處理函數通過封裝。
sessionStorage和localStorage容量有5M，API簡單易用，它們兩個惟一區別就是sessionStorage關閉瀏覽器會自動清除

2一、常見的幾種性能優化策略

1、加載資源優化:

一、靜態資源的合併壓縮（利用webpack、gulp等，壓縮合並js、css文件）
二、靜態資源緩存（同一網站下靜態資源的名字不變，瀏覽器不會從新請求）
三、使用CDN讓資源加載更快（大公司都有本身的CDN）
四、使用SSR（server side render）後端渲染，數據直接輸出到HTML中，是vue、react中提出的概念，可是其實在早期的php、asp、jsp中都是這種渲染形式。

2、渲染優化

一、CSS放前面，JS放後面
二、懶加載（圖片懶加載，下拉加載更多，而不是一次性所有加載）
三、減小DOM查詢，對DOM查詢作緩存
四、減小DOM操做，多個操做盡可能合併在一塊兒執行（利用createDocumentFragment，先將要插入的dom元素按次序放在Fragment中，再一次性將Fragment插入到已有的dom中）
五、事件節流
六、儘早操做，在DOMContentLoaded的時候就進行操做，而不是window.onload之後再進行，zepto和jquery都是用前者

2二、常見的web攻擊類型

一、XSS（Cross-site Scripting）跨站請求攻擊例如：攻擊者在文章裏面寫入一段<script>獲取cookies的一些操做，發送到本身的服務器</script>，別人點開文章，就至關於執行了這個腳本，攻擊者就能夠得到別人的隱私信息解決方法：前端替換關鍵字，例如替換 < 爲&lt, > 爲&gt 。 因爲前端性能有限，通常這些工做交給後端處理 二、XSRF（Cross-site request forgery）跨站請求僞造攻擊者僞形成被攻擊者向服務器發送請求，形成財產損失解決方法：增長驗證流程，密碼，短信驗證碼。