Interview-Questions

時間  2019-11-22
標籤 interview questions 简体版
原文   原文鏈接

本文只記錄面試過程當中遇到的面試題(不定更)，答案請自行百度(本身動手、豐衣足食)javascript

框架知識

1.談談對ssr的瞭解css

seo與首屏渲染快 比較適合首屏使用ssr進行快速渲染，更利於seohtml

2.vue數據驅動的原理前端

1.vue在實例化過程當中，遍歷data全部的屬性並使用Object.defineProperty將屬性全轉化爲getter/settervue

2.每一個實例對象都有一個watcher，在模板編譯過程當中使用getter訪問data的屬性，而且標記爲依賴，創建視圖與數據的聯繫java

3.當依賴的數據發生了變化，就調用了setter方法，watcher會對比先後兩個值的變化，決定是否通知視圖從新渲染node

4.v-if和v-show的區別webpack

1.DOM差別，CSS差別nginx

5.Proxy 相比於 defineProperty 的優點web

  • 數組變化也能監聽到
  • 不須要深度遍歷監聽

6.nextTick()

官方解釋：在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

什麼時候使用：(DOM發生變化的操做（不嚴謹！！！具體看下面兩個例子👇👇👇）)

  • 1.在created()鉤子函數進行的DOM操做必定要放在Vue.nextTick()的回調函數中。 緣由：是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，因此必定要將DOM操做的js代碼放進Vue.nextTick()的回調函數中。mounted該鉤子函數執行時全部的DOM掛載和渲染都已完成，所以不須要使用nextTick()。

  • 2.在數據變化後要執行的某個操做，而這個操做須要使用隨數據改變而改變的DOM結構的時候，這個操做應該放進Vue.nextTick()的回調函數中。

7.vue的生命週期

參考本文，我的感受寫的比較詳細了 segmentfault.com/a/119000001… 也可參考本文，講的比較精幹https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-60

微信小程序

1.簡述微信小程序原理？

  • 1.微信小程序採用JavaScript、WXML、WXSS三種技術進行開發
  • 2.小程序分爲兩個部分webview和appService。其中webview主要用來展示UI，appService有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，經過系統層JSBridge實現通訊，實現UI的渲染、事件的處理

2.rpx（responsivepixel）

微信小程序新定義了一個尺寸單位，能夠適配不一樣分辨率的屏幕，它規定屏幕寬爲750rpx，如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。

3.wx.navigateTo(Object object)

保留當前頁面。但小程序中頁面棧最多十層。

4.生命週期

  • 1.onLaunch小程序初始化完成時（全局只觸發一次）
  • 2.onLoad頁面加載時觸發。一個頁面只會調用一次
  • 3.onShow頁面顯示/切入前臺時觸發。
  • 4.onReady頁面初次渲染完成時觸發。一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。
  • 5.onHide頁面隱藏/切入後臺時觸發。
  • 6.onUnload頁面卸載時觸發

{% asset_img mina-lifecycle.png mina-lifecycle %}

非框架知識

1.serviceworker

參考本文https://www.cnblogs.com/dojo-lzz/p/8047336.html

2.哪些方式致使內存泄漏

  • 1.意外的全局變量: 沒法被回收
  • 2.定時器: 未被正確關閉，致使所引用的外部變量沒法被釋放
  • 3.事件監聽: 沒有正確銷燬 (低版本瀏覽器可能出現)
  • 4.閉包: 會致使父級中的變量沒法被釋放
  • 5.dom 引用: dom 元素被刪除時，內存中的引用未被正確清空

3.本地存儲及區別

這裏重點討論IndexedDB和WebSQL：參考本文加以理解http://www.cnblogs.com/ljwsyt/p/9760266.html

4.閉包、做用及處理，垃圾回收器

概念：

    1. 做爲一個函數變量的一個引用，當函數返回時，其處於激活狀態。
    1. 一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區。

做用：

  • 實現封裝，管理私有變量和私有方法，將變量（狀態）的變化封裝在安全的環境中

弊端：

  • 讓變量始終保持在內存中，不被釋放，內存消耗會很大

處理：

  • 使用後的變量置爲Null，等待垃圾回收器回收

垃圾回收器：兩種方式：1.標記清除（主要）2.引用計數

5.按需加載（webpack）

參考本文https://segmentfault.com/a/1190000011519350

1.import():

{
          path: '/hello',
          name: 'Hello',
          // component: Hello
          component: import(/* webpackChunkName: 'Hello' */   '../components/Hello')
      }
複製代碼

2.require.ensure()：多個路由指定相同的chunkName，會合並打包成一個js文件。

{
      path: '/hello',
      name: 'Hello',
      // component: Hello
      component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
 }
複製代碼

7.css動畫和js動畫的區別

參考本文https://www.cnblogs.com/simba-lkj/p/6139066.html

8.cdn的原理，哪些東西可使用cdn

介紹：

  • 經策略性部署的總體系統，解決因爲網絡帶寬小、用戶訪問量大、網點分佈不均而產生的用戶訪問網站響應速度慢的問題。

目的:

  • 在現有的Internet中增長一層新的網絡架構，將網站的內容發佈到最接近用戶的網絡「邊緣」，使用戶能夠就近取得所需的內容，解決 Internet 網絡擁塞情況，提升用戶訪問網站的響應速度。

9.深拷貝和淺拷貝的區別

參考本文https://www.cnblogs.com/echolun/p/7889848.html

  • 淺拷貝：一層遍歷和Object.assign()

深拷貝主要針對引用類型,拷貝全部層級的屬性

  • 方法一：遞歸實現深拷貝
function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判斷ojb子元素是否爲對象，若是是，遞歸複製
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //若是不是，簡單複製
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);
複製代碼
  • 方法二：JSON.Parse和JSON.stringify（兼容ie8+，對於正則表達式類型和函數類型沒法深拷貝，會直接丟失相應的值,並且會拋棄對象的constructer）
function deepClone(obj){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
    return objClone
}    
let a=[0,1,[2,3],4],
    b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
複製代碼

10.Map和WeakMap與Object

ES6新的數據結構，更爲完善的hash結構

與Object的區別：

  • Map的鍵能夠是個各類類型的數值，但Object只能是字符串類型或Symbol類型

Map與WeakMap的區別：

  • WeakMap只接受對象做爲鍵名，鍵名是對象的弱引用，當對象被回收後，WeakMap自動移除對應的鍵值對，WeakMap結構有助於防止內存泄漏。

11.Set和WeakSet

Set集合，沒有重複元素的集合,WeakSet的鍵必須爲對象

11.有哪幾種繼承

  • 1.原型鏈繼承：將父類的實例做爲子類的原型
  • 2.構造繼承：使用父類的構造函數來加強子類實例，等因而複製父類的實例屬性給子類（沒用到原型）
  • 3.實例繼承：爲父類實例添加新特性，做爲子類實例返回
  • 4.拷貝繼承
  • 5.組合繼承：經過調用父類構造，繼承父類的屬性並保留傳參的優勢，而後經過將父類實例做爲子類原型，實現函數複用
  • 6.寄生組合繼承：經過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點
  • 7.ES6的Class繼承

12.跨越的處理方案

  • 解決協議，域名，端口不用的問題
  • 一、 經過jsonp跨域 （只支持get）
  • 二、 document.domain + iframe跨域（僅限主域相同，子域不一樣的跨域應用場景）
  • 三、window.name + iframe跨域
  • 3.1name值在不一樣的頁面（甚至不一樣域名）加載後依舊存在，而且能夠支持很是長的 name 值（2MB）。
  • 四、 postMessage跨域
  • 五、 跨域資源共享（CORS）Access-Control-Allow-Origin
  • 5.1普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無須設置，
  • 5.2若要帶cookie請求：先後端都須要設置。
  • 六、 nginx代理跨域
  • 七、 nodejs中間件代理跨域
  • 八、 Vue跨域：(proxy)

13.重繪和迴流

  • 重繪(repaint): 當元素樣式的改變不影響佈局時，瀏覽器將使用重繪對元素進行更新，此時因爲只須要UI層面的從新像素繪製，所以 損耗較少

  • 迴流(reflow): 當元素的尺寸、結構或觸發某些屬性時，瀏覽器會從新渲染頁面，稱爲迴流。此時，瀏覽器須要從新通過計算，計算後還須要從新頁面佈局，所以是較重的操做。會觸發迴流的操做

15.性能優化

1.減小HTTP請求數

  • 1.資源合併與壓縮
  • 2.圖片Sprites
  • 3.HTTP緩存

2.script腳本置底（或defer）

3.web worker

4.迴流重繪

2.服務器緩存策略

  • Cache-Control/Expires:瀏覽器判斷緩存是否過時，未過時時，直接使用強緩存，若是同時出現，Cache-Control的 max-age 優先級高於 Expires

  • 協商緩存：惟一標識Etag和If-None-Match、最後一次修改時間Last-Modified和If-Modified-Since（Etag優先級高於Lst-Modifieds）

19.sea和require的區別、優缺點

最大的區別：

  • SeaJS對模塊的態度是懶執行, 而RequireJS對模塊的態度是預執行

RequireJS:（1）實現js文件的異步加載，避免網頁失去響應； （2）管理模塊之間的依賴性，便於代碼的編寫和維護。

21.web worker

簡而言之就是子線程，本質就是數據刷新和頁面渲染不產生衝突，可經過自帶的消息機制進行通訊可是弊端是兼容性很差，並且沒法達到像websocket輪詢的效果

22.箭頭函數什麼狀況下不能用(須要動態上下文的場景)

  • 1.定義對象方法
  • 2.定義原型方法
  • 3.定義事件回調函數
  • 4.定義構造函數
  • 5.刻意追求太短的代碼，可能會給代碼閱讀和邏輯理解帶來困難。

23.rem和em的區別

區別：

  • rem是基於html元素的字體大小來決定，
  • em則根據使用它的元素的大小決定（不少人錯誤覺得是根據父類元素，其實是使用它的元素繼承了父類的屬性纔會產生的錯覺）

舉例： 當使用 rem 單位，他們轉化爲像素大小取決於頁根元素的字體大小，即 html 元素的字體大小。 根元素字體大小乘以你 rem 值。 例如，根元素的字體大小 16px，10rem 將等同於 160px，即 10 x 16 = 160。

當使用em單位時，像素值將是em值乘以使用em單位的元素的字體大小。 弊端：繼承

24.移動端適配

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
複製代碼

2.手淘團隊flexible.js佈局

25.數組如何去重（ES5,ES6）

1.ES6中新增了Set數據結構，相似於數組，可是 它的成員都是惟一的 ，其構造函數能夠接受一個數組做爲參數

2.ES6中Array新增了一個靜態方法Array.from，能夠把相似數組的對象轉換爲數組

ES6:
let array = [1,2,3,4,4,2,1,5];
let res = Array.from(new Set(array))
console.log(res)
複製代碼
ES5方法一
function unique(arr) {
    return arr.filter(function(item, index, arr) {
        //當前元素，在原始數組中的第一個索引==當前索引值，不然返回當前元素
        return arr.indexOf(item, 0) === index
    })
}
複製代碼
ES5方法二
function uniqueArr(arr){
    var arr2 = []
    var len = arr.length
    for(var i=0;i<len; i++) {
        if(arr2.indexOf(arr[i]) === -1) {
            arr2.push(arr[i])
        }
    }
    return arr2
} 
複製代碼

26.函數柯里化

柯里化是指這樣一個函數(假設叫作createCurry)，他接收函數A做爲參數，運行後可以返回一個新的函數。而且這個新的函數可以處理函數A的剩餘參數。 詳情參考https://www.jianshu.com/p/5e1899fe7d6b

27.vue的虛擬dom原理是什麼？怎麼實現的？

js建立dom，diff算法，同級比較

28.http請求頭裏都有什麼內容

  • Accept:瀏覽器可以處理的內容類型
  • Accept-Charset:瀏覽器可以顯示的字符集
  • Accept-Encoding：瀏覽器可以處理的壓縮編碼
  • Accept-Language：瀏覽器當前設置的語言
  • Connection：瀏覽器與服務器之間鏈接的類型
  • Cookie：當前頁面設置的任何Cookie
  • Host：發出請求的頁面所在的域
  • Referer：發出請求的頁面的URL
  • User-Agent：瀏覽器的用戶代理字符串

29.經常使用狀態碼

  • 200: 成功，並返回數據
  • 302: 臨時重定向
  • 304: 資源未修改，可以使用緩存
  • 403: 拒絕請求
  • 404: 資源不存在
  • 500: 服務器錯誤

29.promise順序執行

  • 方法一: then()執行
  • 方法二： 使用隊列執行
  • 方法三： 使用async、await實現相似同步編程

30.Event loop

首先放上參考文章，很是推薦，簡單明瞭！！！juejin.im/post/59e85e…

概念： 簡單來說就是時間循環機制（廢話，哈哈哈哈哈～～～～）

首先看一下下面這張圖，有助於理解js是如何運行的 {% asset_img eventloop.png eventloop %}

上圖表達的意思就是：👇👇👇

  • 同步和異步任務分別進入不一樣的執行"場所"，同步的進入主線程，異步的進入Event Table並註冊函數。
  • 當指定的事情完成時，Event Table會將這個函數移入Event Queue。
  • 主線程內的任務執行完畢爲空，（js引擎存在monitoring process進程，會持續不斷的檢查主線程執行棧是否爲空，一旦爲空，就會去Event Queue那裏檢查是否有等待被調用的函數。）會去Event Queue讀取對應的函數，進入主線程執行。
  • 上述過程會不斷重複，也就是常說的Event Loop(事件循環)。

除了廣義的同步任務和異步任務，咱們對任務有更精細的定義：

  • macro-task(宏任務)：包括總體代碼script，IO，setTimeout，setInterval
  • micro-task(微任務)：Promise中的回調（Promise自身是宏任務，不知是否能夠這麼理解），process.nextTick {% asset_img task-step.png task-step %}

30.call apply bind區別和用法

都是爲了改變某個函數運行時的上下文而存在的（就是爲了改變函數內部this的指向）；

  • apply的第二個參數是一個數組，
  • call第二個及之後的參數都是數組中的元素
  • bind與apply、call最大的區別就是：bind不會當即調用，其餘兩個會當即調用

31.THIS（看完你就明白了）

this 就是你 call 一個函數時，傳入的第一個參數。（請務必背下來「this 就是 call 的第一個參數」）

參考本文，一看就懂https://zhuanlan.zhihu.com/p/23804247

32.原型與原型鏈

原型鏈:

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

原理：

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

方法：

  • 使用對象的hasOwnProperty()來檢查對象自身是否含有該屬性，使用in來檢查是否在整條原型鏈上是否含有該屬性

注意點：

  • Object是JS中全部對象數據類型的基類(最頂層的類)在Object.prototype上沒有__proto__這個屬性。

33.GraphQL

詳情請關注官網連接http://graphql.cn/

概念：一種用於 API 的查詢語言，代替rest api

34.node登錄註冊

  • bcrypt
  • jwt
  • passport
  • passport-jwt

35.node 中間件

參考https://zhuanlan.zhihu.com/p/30384677

36.JWT

中間用點分隔開，而且都會使用 Base64 編碼

  • 1.header（頭部）
  • 2.payload（數據）
  • 3.signature（簽名）

37.JsBridge的核心

  • 1.用途：實現Native與Js相互調用的功能
  • 2.核心：
  • 1.攔截Url
  • 2.load url("javascript:js_method()");

算法

1.冒泡排序

function bubleSort(arr) {
	    var len = arr.length;
	    for (let i = len ; i >= 2;i--) {
	        for(let j = 0; j <= i - 1; j++) {
	            if(arr[j] > arr[j + 1]) {
	               // [arr[j],arr[j+1]] = [arr[j+1],arr[j]]
                 let tmp = arr[j+1]
                 arr[j+1] = arr[j]
                 arr[j] = tmp
	            }
	        }
	    }
	    return arr;
	}
複製代碼

2.快速排序 原理：選一個數，比較大小，放在當前數的左右數組，最後遞歸左右數組

function quickSort(arr) {
    if(arr.length <= 1) {
        return arr;  //遞歸出口
    }
    var left = [],
        right = [],
        current = arr.splice(0,1); 
    for(let i = 0; i < arr.length; i++) {
        if(arr[i] < current) {
            left.push(arr[i])  //放在左邊
        } else {
            right.push(arr[i]) //放在右邊
        }
    }
    return quickSort(left).concat(current,quickSort(right));
}

複製代碼
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程