摘要：絕對定位的元素不再存在于正常文檔布局流中。則是頁面元素的一個屬性，代表該元素的內容。盡管在中代表但由于的許多優勢，比如更加輕量以及作為的一部分，目前的使用比更加普遍。通配符子選擇器相鄰選擇器等的。值則是表示空對象指針。

==和===的區別？

比較過程：
　　雙等號==：
　　（1）如果兩個值類型相同，再進行三個等號(===)的比較
　　（2）如果兩個值類型不同，也有可能相等，需根據以下規則進行類型轉換在比較：
　　　　1）如果一個是null，一個是undefined，那么相等
　　　　2）如果一個是字符串，一個是數值，把字符串轉換成數值之后再進行比較
　　
　　三等號===:
　　（1）如果類型不同，就一定不相等
　　（2）如果兩個都是數值，并且是同一個值，那么相等；如果其中至少一個是NaN，那么不相等。（判斷一個值是否是NaN，只能使用isNaN( ) 來判斷）
　　（3）如果兩個都是字符串，每個位置的字符都一樣，那么相等，否則不相等。
　　（4）如果兩個值都是true，或是false，那么相等
　　（5）如果兩個值都引用同一個對象或是函數，那么相等，否則不相等
　　（6）如果兩個值都是null，或是undefined，那么相等

float/postion屬性

Float CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，盡管仍然保持部分的流動性（與 絕對定位 相反）。

positon屬性：

靜態定位是默認行為

相對定位是我們將要看的第一個位置類型。 它與靜態定位非常相似，占據在正常的文檔流中，除了你仍然可以修改它的最終位置，包括讓它與頁面上的其他元素重疊。

絕對定位的元素不再存在于正常文檔布局流中。相反，它坐在它自己的層獨立于一切。這是非常有用的：這意味著我們可以創建不干擾頁面上其他元素的位置的隔離的UI功能 。例如，彈出信息框和控制菜單；翻轉面板；可以在頁面上的任何地方拖放的UI功能……

固定定位：絕對定位固定元素是相對于 元素或其最近的定位祖先，而固定定位固定元素則是相對于瀏覽器視口本身。 這意味著您可以創建固定的有用的UI項目，如持久導航菜單。

閉包注意點

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return I * I;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中，每次循環，都創建了一個新的函數，然后，把創建的3個函數都添加到一個Array中返回了。
你可能認為調用f1()，f2()和f3()結果應該是1，4，9，但實際結果是：

f1(); // 16
f2(); // 16
f3(); // 16

全部都是16！原因就在于返回的函數引用了變量i，但它并非立刻執行。等到3個函數都返回時，它們所引用的變量i已經變成了4，因此最終結果為16。
返回閉包時牢記的一點就是：返回函數不要引用任何循環變量，或者后續會發生變化的變量。
如果一定要引用循環變量怎么辦？方法是再創建一個函數，用該函數的參數綁定循環變量當前的值，無論該循環變量后續如何更改，已綁定到函數參數的值不變：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

JS事件委托

JavaScript事件代理：
當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制

Js高級程序上的定義：利用事件冒泡，只綁定一個函數就可以處理一類事件。
（思否的文章圖片不知道為什么老是莫名插入圖片失敗...后期正常后我會盡快添加，實在抱歉！）
實例：
Html

    

        
grandFather
        

            
father1
            

                
son1
            
        
        

            
father2
        
    

Js

// 事件代理
 grandFather.addEventListener("click", function(event){
            console.log("I am " + event.target.getAttribute("data-name"));
        },false);

事件代理的好處:

優化性能

當新元素綁添加進來的時候不需要再次綁定事件，通過冒泡就可以觸發。

瀏覽器輸入url到頁面呈現出來發生了什么？

進行地址解析

1. 解析出字符串地址中的主機，域名，端口號，參數等

根據解析出的域名進行DNS解析

1. 首先在瀏覽器中查找DNS緩存中是否有對應的IP地址，如果有就直接使用，沒有機執行第二步
2. 在操作系統中查找DNS緩存是否有對應的IP地址，如果有就直接使用，沒有就執行第三步
3. 向本地DNS服務商發送請求查找時候有DNS對應的ip地址。如果仍然沒有最后向Root Server服務商查詢。

根據查詢到的IP地址尋找目標服務器

1. 與服務器建立連接
2. 進入服務器，尋找對應的請求

瀏覽器接收到響應碼開始處理。

瀏覽器開始渲染DOM，下載CSS、圖片等一些資源。直到這次請求完成

清除浮動

1.父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

2.父級div定義 overflow:hidden

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好

3.結尾處加空div標簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

    
111
    
222
    
333
    
444

請描述一下 cookies sessionStorage和localstorage區別

相同點：都存儲在客戶端
不同點：

   1. 存儲大小
       cookie數據大小不能超過4k。
       sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
   2. 有效時間
       localStorage：存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
       sessionStorage：數據在當前瀏覽器窗口關閉后自動刪除。
       cookie：設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
   3. 數據與服務器之間的交互方式
       cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端
       sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

計算一個數組arr所有元素的和

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

編寫一個方法去掉數組里面的重復的內容 var arr=[1,2,3,4,5,1,2,3]

方法一：filter() + indexOf()

function norepeat(arr){
    return arr.filter(function(val, index, array) {
        return array.indexOf(val)===index;
    });
}

方法二： ES6 Set

function norepeat(arr){
    return [new Set(arr)];
}

方法三：用sort() 然后相鄰比較也可以實現

document.write和innerHTML的區別

document.write是直接寫入到頁面的內容流，如果在寫之前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉之后重新調用該函數，會導致頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentElement.innerElement。

Ajax

定義：
Asynchronous JavaScript + XML（異步JavaScript和XML）, 其本身不是一種新技術，而是一個在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的‘新’方法。包括: HTML or XHTML , Cascading Style Sheets , JavaScript , The Document Object Model , XML , XSLT , 以及最重要的 XMLHttpRequest object 。當使用結合了這些技術的AJAX模型以后， 網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要重載（刷新）整個頁面。這使得程序能夠更快地回應用戶的操作。
盡管X在Ajax中代表XML, 但由于 JSON 的許多優勢，比如更加輕量以及作為Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

原理：
（思否的文章圖片不知道為什么老是莫名插入圖片失敗...后期正常后我會盡快添加，實在抱歉！））

步驟：

第一步，創建xmlhttprequest對象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對象用來和服務器交換數據。

varxhttp;
if(window.XMLHttpRequest) {
//現代主流瀏覽器
xhttp = newXMLHttpRequest();
} else{
// 針對瀏覽器，比如IE5或IE6
xhttp = newActiveXObject("Microsoft.XMLHTTP");
}

第二步，使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。

xmlhttp.open(method,url,async)：
    method包括get 和post，
    url主要是文件或資源的路徑，
    async參數為true(代表異步)或者false（代表同步）
xhttp.send()：使用get方法發送請求到服務器。
xhttp.send(string)：使用post方法發送請求到服務器。

第三步，使用xmlhttprequest對象的responseText或responseXML屬性獲得服務器的響應。

第四步，onreadystatechange函數，當發送請求到服務器，我們想要服務器響應執行一些功能就需要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數

實例：
```javascript
function loadXMLDoc()
{
    //    第一步
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 瀏覽器執行代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //    第四步
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
    //    第三步    
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    //    第二步
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
```

XML和JSON的區別

JSON相對于XML來講，數據的體積小，傳遞的速度更快些
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
XML對數據描述性比較好；
JSON的速度要遠遠快于XML

box-sizing常用的屬性有哪些？分別有什么作用？

content-box（默認）：width即內容顯示部分的寬度，width = content
border-box：即為元素在設置內邊距和邊框是在已經設定好的寬度和高度之內進行繪制，width = margin + border + padding + content

css選擇器有哪些，選擇器的權重的優先級

選擇器類型

1、ID　　#id
2、class　　.class
3、標簽　　p
4、通用　　*
5、屬性　　[type="text"]
6、偽類　　:hover
7、偽元素　　::first-line
8、子選擇器、相鄰選擇器

權重計算規則

1、第一等：代表內聯樣式，如: style=””，權值為1000。
2、第二等：代表ID選擇器，如：#content，權值為0100。
3、第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
4、第四等：代表類型選擇器和偽元素選擇器，如div p，權值為0001。
5、通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
6、繼承的樣式沒有權值。

塊級元素水平垂直居中的方法有哪些（三個方法）

方法一：負margin

.mycss{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -150px;
}

方法二：利用CSS的margin設置為auto讓瀏覽器自己幫我們水平和垂直居中

.mycss{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 200px;
    width: 300px;
}

方法三：彈性盒子

.mycss{
    display: flex;
    align-item: center;
    justify-content: center;
}

三個盒子，左右定寬，中間自適應有幾種方法

第一種：左右側采用浮動 中間采用margin-left 和 margin-right 方法。

    
這是右側的內容 固定寬度
    
這是左側的內容 固定寬度
    
中間內容，自適應寬度
    

第二種：左右兩側采用絕對定位中間同樣采用margin-left margin-right方法

第三種：用彈性布局flex:

js有幾種數據類型，其中基本數據類型有哪些
5種基本類型:Undefined、Null、Boolean、Number和String。
還有1種復雜的數據類型：Object。Object本質上是由一組無序的名值對組成的。

undefined 和 null 區別

javaScript權威指南：
null 和 undefined 都表示“值的空缺”，你可以認為undefined是表示系統級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常的或在意料之中的值的空缺。

javaScript高級程序設計：
在使用var聲明變量但未對其加以初始化時，這個變量的值就是undefined。  null值則是表示空對象指針。

http 和 https 有何區別？如何靈活使用？
http是HTTP協議運行在TCP之上。所有傳輸的內容都是明文，客戶端和服務器端都無法驗證對方的身份。

https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。所有傳輸的內容都經過加密，加密采用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端可以驗證服務器端的身份，如果配置了客戶端驗證，服務器方也可以驗證客戶端的身份

常見的HTTP狀態碼

2開頭 （請求成功）表示成功處理了請求的狀態代碼。

3開頭 （請求被重定向）表示要完成請求，需要進一步操作。 通常，這些狀態代碼用來重定向。

4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。

5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤可能是服務器本身的錯誤，而不是請求出錯。

如何進行網站性能優化

從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。

從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所占帶寬，能夠節省可觀的資源。

　　總之，恰當的優化不僅能夠改善站點的用戶體驗并且能夠節省相當的資源利用。
　　前端優化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優化，例如 HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等 ;第二類則是代碼級別的優化，例如 Javascript中的DOM 操作優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。另外，本著提高投入產出比的目的，后文提到的各種優化策略大致按照投入產出比從大到小的順序排列。
　　
　　
    **頁面級優化**
        1. ~JavaScript 壓縮和模塊打包~
        2. ~按需加載資源~
        3. 在使用 DOM 操作庫時用上 array-ids
        4. ~緩存~
        5. 啟用 HTTP/2
        6. 應用性能分析
        7. ~使用負載均衡方案~
        8. 為了更快的啟動時間考慮一下同構
        9. ~使用索引加速數據庫查詢~
        10. 使用更快的轉譯方案
        11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
        12. 用于未來的一個建議：使用 service workers + 流
        13. ~圖片編碼優化~ 

什么是mvvm mvc是什么區別 原理
MVC（Model-View-Controller）即模型-視圖-控制器。
Model（模型）：
是應用程序中用于處理應用程序數據邏輯的部分。通常模型對象負責在數據庫中存取數據。

Model定義了這個模塊的數據模型。在代碼中體現為數據管理者，Model負責對數據進行獲取及存放。
數據不可能憑空生成的，要么是從服務器上面獲取到的數據，要么是本地數據庫中的數據，也有可能是用戶在UI上填寫的表單即將上傳到服務器上面存放，所以需要有數據來源。既然Model是數據管理者，則自然由它來負責獲取數據。
Controller不需要關心Model是如何拿到數據的，只管調用就行了。
數據存放的地方是在Model，而使用數據的地方是在Controller，
所以Model應該提供接口供controller訪問其存放的數據（通常通過.h里面的只讀屬性）

View（視圖）：
是應用程序中處理數據顯示的部分。通常視圖是依據模型數據創建的。

View，視圖，簡單來說，就是我們在界面上看見的一切。 它們有一部分是我們UI定死的，也就是不會根據數據來更新顯示的， 比如一些Logo圖片啊，這里有個按鈕啊，那里有個輸入框啊，一些顯示特定內容的label啊等等； 有一部分是會根據數據來顯示內容的，比如tableView來顯示好友列表啊， 這個tableView的顯示內容肯定是根據數據來顯示的。 我們使用MVC解決問題的時候，通常是解決這些根據數據來顯示內容的視圖。

Controller（控制器）：是應用程序中處理用戶交互的部分。通常控制器負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。

Controller是MVC中的數據和視圖的協調者，也就是在Controller里面把Model的數據賦值給View來顯示（或者是View接收用戶輸入的數據然后由Controller把這些數據傳給Model來保存到本地或者上傳到
服務器）。

各部分之間的通信方式如下，所有通訊都是單向的 。

    1. View 傳送指令到 Controller
    2. Controller 完成業務邏輯后，要求 Model 改變狀態
    3. Model 將新的數據發送到 View，用戶得到反饋

推薦閱讀：
2019年前端面試題-01
2019年前端面試題-02
2019年前端面試題-03
2019年前端筆試題

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