2019年前端面試題-01

時間 2019-11-05

標籤 2019年端面試題简体版

原文原文鏈接

==和===的區別？
比較過程：
　　雙等號==：
　　（1）若是兩個值類型相同，再進行三個等號(===)的比較
　　（2）若是兩個值類型不一樣，也有可能相等，需根據如下規則進行類型轉換在比較：
　　　　1）若是一個是null，一個是undefined，那麼相等
　　　　2）若是一個是字符串，一個是數值，把字符串轉換成數值以後再進行比較
　　
　　三等號===:
　　（1）若是類型不一樣，就必定不相等
　　（2）若是兩個都是數值，而且是同一個值，那麼相等；若是其中至少一個是NaN，那麼不相等。（判斷一個值是不是NaN，只能使用isNaN( ) 來判斷）
　　（3）若是兩個都是字符串，每一個位置的字符都同樣，那麼相等，不然不相等。
　　（4）若是兩個值都是true，或是false，那麼相等
　　（5）若是兩個值都引用同一個對象或是函數，那麼相等，不然不相等
　　（6）若是兩個值都是null，或是undefined，那麼相等javascript
float/postion屬性css

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

positon屬性：前端
- 靜態定位是默認行爲
- 相對定位是咱們將要看的第一個位置類型。它與靜態定位很是類似，佔據在正常的文檔流中，除了你仍然能夠修改它的最終位置，包括讓它與頁面上的其餘元素重疊。
- 絕對定位的元素再也不存在於正常文檔佈局流中。相反，它坐在它本身的層獨立於一切。這是很是有用的：這意味着咱們能夠建立不干擾頁面上其餘元素的位置的隔離的UI功能。例如，彈出信息框和控制菜單；翻轉面板；能夠在頁面上的任何地方拖放的UI功能……
- 固定定位：絕對定位固定元素是相對於 <html> 元素或其最近的定位祖先，而固定定位固定元素則是相對於瀏覽器視口自己。這意味着您能夠建立固定的有用的UI項目，如持久導航菜單。
閉包注意點java
```
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。
返回閉包時牢記的一點就是：返回函數不要引用任何循環變量，或者後續會發生變化的變量。
若是必定要引用循環變量怎麼辦？方法是再建立一個函數，用該函數的參數綁定循環變量當前的值，不管該循環變量後續如何更改，已綁定到函數參數的值不變：ajax
```
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事件代理：
當咱們須要對不少元素添加事件的時候，能夠經過將事件添加到它們的父節點而將事件委託給父節點來觸發處理函數。這主要得益於瀏覽器的事件冒泡機制segmentfault

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

<!-- 沒有給p元素設置data-name，點擊p元素時會顯示data-name爲null -->
    <div id="grandFather" data-name="grandFather" style="width: 700px;height: 700px; background-color: red">
        <p>grandFather</p>
        <div id="father1" data-name="father1" style="width: 300px; height: 300px; background-color: pink">
            <p>father1</p>
            <div id="son1" data-name="son1" style="width: 100px; height: 100px; background-color: yellow">
                <p>son1</p>
            </div>
        </div>
        <div id="father2" data-name="father2" style="width: 300px;height: 300px; background-color: green">
            <p>father2</p>
        </div>
    </div>

// 事件代理
 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，讓人感受很很差
```
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
```

請描述一下 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 = border + padding + content
css選擇器有哪些，選擇器的權重的優先級
選擇器類型

一、ID　　#id
二、class　　.class
三、標籤　　p
四、通用　　*
五、屬性　　[type="text"]
六、僞類　　:hover
七、僞元素　　::first-line
八、子選擇器、相鄰選擇器

權重計算規則

一、第一等：表明內聯樣式，如: style=」」，權值爲1000。
二、第二等：表明ID選擇器，如：#content，權值爲0100。
三、第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。
四、第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。
五、通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
六、繼承的樣式沒有權值。

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

方法一：負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 方法。

<div style="width:100%; margin:0 auto;">
    <div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>
    <div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>
    <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div>
    </div>

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

第三種：用彈性佈局flex:

<style>
   /* 彈性盒子佈局*/
    .wrap{
        width: 100%;
        height: 90px;
        display: flex;
    }
    .left{
        width: 300px;
        background-color: red;
        float: left;
    }
    .content{
        flex:1;
        height: 90px;
        background-color: yellow;
    }
.right{
        width: 300px;
        height: 90px;
        background-color:blue;
        float: right;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>

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開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。這些錯誤多是服務器自己的錯誤，而不是請求出錯。
如何進行網站性能優化
1. 從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。
2. 從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的資源。

　　總之，恰當的優化不只可以改善站點的用戶體驗而且可以節省至關的資源利用。
　　前端優化的途徑有不少，按粒度大體能夠分爲兩類，第一類是頁面級別的優化，例如 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，用戶獲得反饋

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。