2019.7月-前端面試總結（H5+C3+JS+ES6+Vue+瀏覽器）

時間 2019-11-20

標籤 2019.7月前端面試總結 h5+c3+js+es6+vue vue 瀏覽器欄目快樂工作简体版

原文原文鏈接

第二次面試

HTML

HTML5中的新標籤，舉例一下javascript

canvas繪畫，本地離線存儲localStorage，sessionStorage，video和audio元素，語義化元素，表單類型（date，time，email等），地理定位等css

CSS

CSS3新的標籤html

邊框：圓角border-radius，陰影box-shadow，邊框圖片border-image
背景：背景定位區域background-origin，背景大小支持百分比background-size
文字效果：文字陰影text-shadow，長單詞拆分word-wrap
2D轉換：transform:對元素進行移動translate()，縮放scale()，轉動rotate()，拉伸skew()
3D轉換：transform:對元素進行x軸旋轉rotateX()，y軸旋轉rotateY()
過渡，動畫，多列等等前端
如何垂直居中一個浮動元素vue
- 父盒子有寬高
父元素相對定位，子元素絕對定位，top：50%；left：50%。margin負的左右二分之一的height，widthjava

.content{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
float: left;
height: 100px;
background-color: #ff6700;
margin-top: -50px;
margin-left: -50px;
}node
- 父盒子沒有高寬
父盒子相對定位，子盒子決定定位，上下左右都爲0，margin：auto；jquery
```
.content{
     width: 200px;
     height: 200px;
     background-color: #ff6700;
     float: left;
     margin: auto;
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
 }
```
nth選擇器webpack

CSS3 :nth-child() 選擇器ios

規定屬於其父元素的第二個子元素的每一個 p 的背景色：

p:nth-child(2)
{
background:#ff0000;
}
CSS外邊距(margin)重疊及防止方法

詳解：
https://github.com/zuopf769/notebook/blob/master/fe/CSS%E5%A4%96%E8%BE%B9%E8%B7%9D(margin)%E9%87%8D%E5%8F%A0%E5%8F%8A%E9%98%B2%E6%AD%A2%E6%96%B9%E6%B3%95/README.md
1. 相鄰marign重疊的問題
  
  1.1 示例：
```
<style>
 *{
     margin:0;
     padding: 0;
 }
 .divout{
     width: 100px;
     height: 100px;
     background: yellow;
     margin-bottom: 50px;
     border: 1px solid black;
 }
 .divout1{
     width:50px;
     height: 50px;
     background: yellow;
     margin-top: 80px;
         /*float:left;*/
     /*position:absolute;*/
     border: 1px solid black;
 }
 </style>
 <body>
     <div class="divout">        
     </div>
     <div class="divout1">        
     </div>
 </body>
```
  1.2 外邊距重疊計算方式
  - 所有都爲正值，取最大者；
  - 不全是正值，則都取絕對值，而後用正值的最大值減去絕對值的最大值；
  - 沒有正值，則都取絕對值，而後用0減去最大值。
  1.3 解決辦法
  - 底部元素設置爲浮動 float:left;
  - 底部元素的position的值爲absolute/fixed
  - 在設置margin-top/bottom值時統一設置上或下
2. 元素和父元素margin值問題
  父元素無 border、padding、inline content 、 clearance時，子元素的margin-top/bottom會與父元素的margin產生重疊問題。
  
  示例
```
<style>
 *{
     margin:0;
     padding: 0;
     color: black;
 }
 #parrent{
     width:300px;
     height:150px;
     margin-top: 20px;
     background:teal;
 }
 #box1{
     width:100px;
     height:100px;
     background:aqua;
     margin:100px 0;
 }
```
```
<body>
     <div id="parrent">
         <div id="box1">
         我是box1
         </div>
         我是內容
     </div>
 </body>
```
  2.1 解決辦法
  外層元素添加padding
  外層元素 overflow:hidden;
  外層元素透明邊框 border:1px solid transparent;
  內層元素絕對定位 postion:absolute:
  內層元素加float:left;或display:inline-block;

說一下flex彈性佈局的屬性

justify-content： //子元素水平排列的方式
                 center  //居中
                 space-between  //兩端對齊
                 space-around   // 子元素拉手分佈
                 flex-start     // 居左
                 flex-end      //居右

 align-items  ：  // 子元素的垂直居中的排列方式
                 enter    // 居中
                 flex-end   //底部
                 flex-start   //開始

 align-content :  //多行的時候，子元素的垂直排列方式
                  center    //居中
                  flex-end   //底部
                  flex-start   //開始
                  flx-direction：  // 排列方式row 橫向排列
                  row-reverse    //橫向反向排列

 flex-wrap ： //子元素是否在一行顯示
                 no-wrap   //不換行
                 wrap    //換行

說你對rem的理解
- 相對長度單位，相對於根元素(即html元素)font-size計算值的倍數。簡單來講，就是一個相對單位，相對根元素子體大小的倍數。
- 例如：html的font-size:12px；那麼使用rem做爲單位的，1rem等價於12px，2rem等價於24px；
- 按定高寬設計出來頁面，而後轉換爲rem單位，配合js查詢屏幕大小來改變html的font-size，完美自適應大屏小屏。
px、rem和em的區別

px：相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。特色：
- IE沒法調整那些使用px做爲單位的字體大小；
- 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；
- Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。
- em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前未設置，則相對於瀏覽器的默認字體尺寸。特色：
- em的值並非固定的；
- em會繼承父級元素的字體大小；
- rem：相對長度單位，相對於根元素(即html元素)font-size計算值的倍數。

JavaScript

JavaScript的數據類型

值類型(基本類型)：字符串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。

引用數據類型：對象(Object)、數組(Array)、函數(Function)。

注：Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值。
深拷貝和淺拷貝的區別

1.淺拷貝：將原對象或原數組的引用直接賦給新對象，新數組，新對象／數組只是原對象的一個引用

2.深拷貝：建立一個新的對象和數組，將原對象的各項屬性的「值」（數組的全部元素）拷貝過來，是「值」而不是「引用」
深拷貝 JS 實現

詳解:http://www.javashuo.com/article/p-ezkmkvqw-hs.html
原型和原型鏈

原型：

JavaScript 規定，每個構造函數都有一個 prototype 屬性，指向另外一個對象。咱們能夠把全部對象實例須要共享的屬性和方法直接定義在 prototype 對象上。這個對象的全部屬性和方法，都會被構造函數的所擁有。

Prototype做爲對象的內部屬性，是不能被直接訪問的，咱們通常經過__proto__這個屬性進行訪問。

在原型對象中還有一個屬性constructor，這個屬性對應建立全部指向該原型的實例的構造函數

原型對象就至關於一個公共的區域，全部同一個類的實例均可以訪問到這個原型對象，咱們能夠將對象中共有的內容，統一設置到原型對象中。

原型鏈：

在JavaScript中萬物都是對象，對象和對象之間也有關係，並非孤立存在的。對象之間的繼承關係，在JavaScript中是經過prototype對象指向父類對象，直到指向Object對象爲止，這樣就造成了一個原型指向的鏈條

當咱們訪問對象的一個屬性或方法時，它會先在對象自身中尋找，若是有則直接使用，若是沒有則會去原型對象中尋找，若是找到則直接使用。若是沒有則去原型的原型中尋找,直到找到Object對象的原型，Object對象的原型沒有原型，若是在Object原型中依然沒有找到，則返回undefined。
事件機制和事件委託

事件流的三個階段:
1. 事件捕獲
2. 處於目標階段
3. 事件冒泡
事件委託:
1. 事件委託是利用了事件的冒泡原理實現的,子元素的事件經過冒泡形式委託父元素執行

數組的去重

1、利用ES6 Set去重（ES6中最經常使用）

function unique (arr) {
    return Array.from(new Set(arr))
  }
  var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
  console.log(unique(arr))
   //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

2、利用for嵌套for，而後splice去重（ES5中最經常使用）

function unique(arr){            
          for(var i=0; i<arr.length; i++){
              for(var j=i+1; j<arr.length; j++){
                  if(arr[i]==arr[j]){         //第一個等同於第二個，splice方法刪除第二個
                      arr.splice(j,1);
                      j--;
                  }
              }
          }
  return arr;
  }
  var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
      console.log(unique(arr))
      //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}沒有去重，兩個null直接消失了

3、利用indexOf去重

function unique(arr) {
  if (!Array.isArray(arr)) {
      console.log('type error!')
      return
  }
  var array = [];
  for (var i = 0; i < arr.length; i++) {
      if (array .indexOf(arr[i]) === -1) {
          array .push(arr[i])
      }
  }
  return array;
  }
  var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
  console.log(unique(arr))
     // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}沒有去重

4、利用sort()
5、利用對象的屬性不能相同的特色進行去重（這種數組去重的方法有問題，不建議用，有待改進）
6、利用includes
7、利用hasOwnProperty
8、利用filter
9、利用遞歸去重
10、利用Map數據結構去重
11、利用reduce+includes
12、[...new Set(arr)]
[...new Set(arr)]
//代碼就是這麼少----（其實，嚴格來講並不算是一種，相對於第一種方法來講只是簡化了代碼）

詳解：http://www.javashuo.com/article/p-nnxhkgva-x.html

數組怎麼拼接
```
var a = [1,2,3];
 var b = [4,5,6];
```
一、concat

js的Array對象提供了一個叫concat()方法，鏈接兩個或更多的數組，並返回結果。
```
var c = a.concat(b);//c=[1,2,3,4,5,6]
```
　　　　
這裏有一個問題，concat方法鏈接a、b兩個數組後，a、b兩個數組的數據不變，同時會返回一個新的數組。這樣當咱們須要進行屢次的數組合並時，會形成很大的內存浪費，因此這個方法確定不是最好的。

二、for循環

大概的思路是：遍歷其中一個數組，把該數組中的全部元素依次添加到另一個數組中。直接上代碼：
```
for(var i in b){
     a.push(b[i]);
 }
```
這樣的寫法能夠解決第一種方案中對內存的浪費，可是會有另外一個問題：醜！這麼說不是沒有道理，若是能只用一行代碼就搞定，豈不快哉~

三、apply

函數的apply方法有一個特性，那就是func.apply(obj,argv)，argv是一個數組。因此咱們能夠利用這點，直接上代碼：
```
a.push.apply(a,b);
```
調用a.push這個函數實例的apply方法，同時把，b看成參數傳入，這樣a.push這個方法就會遍歷b數組的全部元素，達到合併的效果。

這裏可能有點繞，咱們能夠把b當作[4,5,6]，變成這樣：
```
a.push.apply(a,[4,5,6]);
     而後上面的操做就等同於：
 a.push(4,5,6);
```
　　　　
這樣就很清楚了！

另外，還要注意兩個小問題：

1）以上3種合併方法並無考慮過a、b兩個數組誰的長度更小。

因此好的作法是預先判斷a、b兩個數組哪一個更大，而後使用大數組合並小數組，這樣就減小了數組元素操做的次數！

2）有時候咱們不但願原數組（a、b）改變，這時就只能使用concat了。

JQuery

Jquery的美圓符號$有什麼做用

jQuery中就是經過這個美圓符號來實現各類靈活的DOM元素選擇的，例如$(「#main」)即選中id爲main的元素。
Jquery中有哪幾種類型的選擇器？

從我本身的角度來說，能夠有3種類型的選擇器，以下：
- 一、基本選擇器：直接根據id、css類名、元素名返回匹配的dom元素。
- 二、層次選擇器：也叫作路徑選擇器，能夠根據路徑層次來選擇相應的DOM元素。
- 三、過濾選擇器：在前面的基礎上過濾相關條件，獲得匹配的dom元素。
- 四、請使用jQuery將頁面上的全部元素邊框設置爲2px寬的虛線？

ES6

es6的箭頭函數和普通函數有什麼區別

let f = function(v) {
 return v;
 };
 let f = v => v;

promise

Promise 是異步編程的一種解決方案.簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，能夠從改對象獲取異步操做的消息。

// 1. 建立promise實例,在實例中執行異步操做(好比發送網絡請求)
 // 2. 異步操做成功時,調用reslove函數傳遞數據
 // 3. 異步操做失敗時,調用reject函數傳遞錯誤信息
 const promise = new Promise(function(resolve, reject) {
     // 異步操做
     if (/* 異步操做成功 */){
         resolve(value);
     } else {
         reject(error);
     }
 });
 //  使用promise實例then方法接收reslove或reject返回的數據
 promise.then(function(value) {
     // 此處數據即爲reslove回來的數據
     // success
 }, function(error) {
     // 此處數據即爲reject回來的數據
     // failure
 });

字符串擴展
1. includes斷字符串中是否包含子字符串,第一個參數表示要測試的子字符串,第二個參數表示從那個位置開始查找,不傳默認從索引0開始。
2. startsWith判斷字符串是否以特定的字符串開始
3. endsWith判斷字符串是否以特定的字符串結束
4. 字符串填充:padStart()和padEnd()能夠對字符串進行填充

擴展運算符-合併數組

let arr2 = [4,5,6];
 let arr3 = [...arr1,...arr2];
 console.log(arr3); // [1,2,3,4,5,6]

Vue

MVVM
1. MVVM是一種分層次開發思想,它是CommonJS規範的實現
2. M表明module模型層
3. V代碼view視圖層
4. VM模型層和視圖層之間沒有任何的聯繫,而VM會充當一個調度者,將他們聯繫起來,實現雙向數據綁定
vue-router路由模式有幾種,原理分別是什麼?

vue-router路由庫是用哪一種技術實現的,總共有兩種,分別叫hash模式和history模式,默認是hash模式
- hash模式:地址上帶有#號;url地址能夠放在任意標籤中打開;能夠兼容低版本的瀏覽器
hash模式原理:監聽hashchange事件,能夠調用window.location.hash獲取到錨點值,和路由規則進行匹配,匹配到以後將路由規則中定義的組件渲染到頁面

history模式:地址上沒有#號,更加符合URL形式;url地址不能重複打開;
- history模式原理:利用HTML5新提供的history.pushState API 來完成 URL 跳轉而無須從新加載頁面
history模式須要後臺進行相關配置:要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面
Vuex怎麼用,它相對與localstorage有什麼優勢和缺點

vuex的核心是：state,getter,actions,mutations
- state用來定義存放公共數據
  this.$store.state.msg
- mutations定義方法
  this.$store.commit('change','我是被修改的數據')
- getters用於獲取數據進行一些操做相似於Vue實例中的過濾器和計算屬性
  this.$store.getters.fixmsg
- actionactions和mutations都是定義對數據進行操做的方法,mutations中都是同步方法,mutations中定義異步方法
  this.$store.dispatch('asyncchange','我是被異步修改的數據')
區別

localstorage沒法實現雙向數據綁定,模型層的數據改變視圖中數據不會發生改變,vuex數據不能持久化,須要結合localstorage使用,比較臃腫,小型項目不建議使用
axios 是什麼？怎麼使用？描述使用它實現登陸功能的流程

axios 是請求後臺資源的模塊。 npm i axios -S

若是發送的是跨域請求，需在配置文件中 config/index.js 進行配置

詳解：http://www.javashuo.com/article/p-puyktofo-gv.html
vue經常使用的指令

v-text v-bind v-for v-if v-on
說一下單向數據流

組件之間的傳值,數據從父級組件傳遞給子組件，只能單向綁定。

父組件向子組件傳值

在父組件中定義數據,經過屬性綁定的形式綁定到子組件上,在子組件中定義props接收傳遞過來的變量

子組件向父組件傳值

在子組件中使用this.$emit觸發一個自定義的方法名,而後傳遞數據第一個參數就是自定義的方法名,第二個參數就是須要傳遞給父組件的數據
```
this.$emit('func',this.msg)
```
在父組件中使用子組件時,綁定一個事件,事件名稱和子組件觸發的方法名同名
```
<div id='app'>
    <son @func = 'getmsg'></son>
 </div>
```
雙向綁定和原理

v-model指令、數據視圖同步更新、使用的是ES5提供的Object.defineProperty()這個方法實現數據劫持

數據如何從模型同步到視圖?當模型中數據發生變化時會觸發Object.defineProperty的set方法,在這個方法內部可以劫持到數據的改變,而後就能夠在該方法內部通知視圖更新

視圖中的數據如何同步到模型中?(v-model指令是怎麼實現改變了元素中的數據同步到模型中)監聽表單元素的change事件,在change事件中能夠拿到用戶輸入的數據,而後給模型中的數據賦值

瀏覽器

SEO優化

詳解：https://segmentfault.com/a/1190000002994538

SEO：搜索引擎優化.

白帽SEO：改良和規範網站設計，使之對搜索引擎和用戶更加友好，是一種搜索引擎推薦的作法。

黑帽SEO：利用或者放大搜索引擎的缺陷，使用不正當競爭獲取更多的訪問量。（例如最近花千骨電視劇熱播，立刻有一些網站使用這個標題標題，可是內容倒是推銷廣告的，給廣大網名形成很大困擾）。

SEO的主要方面：
- 網站標題、關鍵字、描述
- 網站內容優化
- 合理設置Robot.txt文件
- 生成對搜索引擎友好的網站地圖
- 增長外鏈引用
- 其中最重要的是如下2個方面：
- 網站結構佈局優化
- 網頁代碼優化
Tips:
- 將重要html代碼放在最前面，廣告等不重要的部分放在整個文檔的最後，而後利用CSS樣式控制廣告div左右浮動。
- 重要內容不要使用js輸出。
- 儘可能少使用iframe框架。
- 對於暫時不須要顯示的元素應該使用z-index屬性而不是display:none;這樣的代碼，由於Spider會過濾display屬性爲none的內容。
- 儘可能精簡代碼。
cookies , sessionStorage和localStorage區別
- cookies：數據大小不超過4k，cookies過時以前一直有效，會自動傳遞到服務器
- sessionStorage：存儲大小相對cookies大得多（5M或更大），關閉瀏覽器窗口後自動刪除，僅存本地
- localStorage：存儲大小相對cookies大得多（5M或更大），除非手動刪除，關瀏覽器後不會刪除，僅存本地
瀏覽器緩存機制

從緩存位置上來講分爲四種，而且各自有優先級，當依次查找緩存且都沒有命中的時候，纔會去請求網絡。
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
詳解：https://www.jianshu.com/p/54cc04190252
網頁性能
- 減小http請求：圖片地圖，CSS Sprites（精靈圖）。
- 使用CDN：內容發佈網絡（CDN）是一組分佈在不一樣地理位置的Web服務器，用於更加有效的向用戶發佈內容。
- 添加Expires頭：告訴客戶端可使用一個組件的當前副本，直到指定時間爲止。
- 壓縮組件，代理緩存
- 樣式防頭部，腳本放底部
- 避免CSS表達式
- 使用外部的js和css
- 減小DNS查找
- 精簡javascript
- 避免重定向
- 刪除重複腳本
- 配置ETag
- 使Ajax緩存
詳解：http://www.cnblogs.com/MarcoHan/p/5295398.html
跨域問題如何解決
- 一、經過jsonp跨域
- 二、 postMessage跨域
- 三、跨域資源共享（CORS）
- 普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無須設置，若要帶cookie請求：先後端都須要設置。
- 四、 nginx代理跨域：nginx配置解決iconfont跨域，nginx反向代理接口跨域
- 五、 nodejs中間件代理跨域： vue框架的跨域webpack.config.js部分配置
- 六、 WebSocket協議跨域
詳解：http://www.javashuo.com/article/p-gjnaksry-em.html
優雅降級和漸進加強
優雅降級：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽
漸進加強：一開始就針對低版本瀏覽器進行構建頁面，完成基本功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

項目打包

webpack

webpack是一個模塊打包工具，可使用它管理項目中的模塊依賴，並編譯輸出模塊所需的靜態文件。它能夠很好地管理、打包開發中所用到的HTML,CSS,JavaScript和靜態文件（圖片，字體）等，讓開發更高效。對於不一樣類型的依賴，webpack有對應的模塊加載器，並且會分析模塊間的依賴關係，最後合併生成優化的靜態資源。

面試題：https://www.jianshu.com/p/bb1e76edc71e

寫在最後