道阻且長啊TAT(前端面試總結) 附答案 － 上

之前在 segmentfault.com/a/119000001… 看到過這篇文章，最近閒下來就做著玩了一下， 如有誤，還請斧正

騰訊一面

• 1.瀏覽器工作原理

  • 使用者介面－ 包括位址列、後退/前進按鈕、書籤目瀏覽器引擎－ 用來查詢及操作渲染引擎的介面
  • 渲染引擎－ 渲染介面:Firefox、Chrome和Safari是基於兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit.
  • 網路－ 用來完成網路呼叫，例如http請求
UI 後端－ 用來繪製類似組合選擇框及對話方塊等基本元件，具有不特定於某個平臺的通用介面，底層使用作業系統的使用者介面
  • JS直譯器－ 解釋執行JS程式碼
  • 資料儲存－ 屬於持久層，瀏覽器需要在硬碟中儲存類似cookie的各種資料

• 2.Web安全,舉例說明

  • xss
  • https
  • 混合內容
  • 同源策略

• 3.狀態碼
  • 1xx 資訊
  • 2xx 成功
  • 3xx 重定向
  • 4xx 客戶端錯誤
  • 5xx 服務端錯誤
• 4.同源
  • 同埠
  • 同域名
  • 同協議

• 5.物件繼承

  • 所有繼承都是基於原型(prorotype)的,由於js繼承機制並不是明確規定的,所以繼承的方式也特別多
    • 原型鏈繼承

        Child.prototype = new Parent();複製程式碼

    • 原型繼承

        Child.prototype = Parent.prototype;
        Child.prototype.constructor = Child;複製程式碼

    • 拷貝繼承(extend)
    • call,apply

• 6.ES6歷史以及新特性有哪些?

  • ......
• 7.promise原理
  • 理解promise 主要使用場景，理解promise 幾個狀態(pending,fulilled,rejected)

• 8.事件模型

  • DOM0級模型 div.onclick = fn()
  • DOM2級模型 addEventListener(eventType, handler, useCapture)
  • IE事件模型 attachEvent( "eventType","handler")

• 9.常見相容性問題,列舉(移動端/PC端)

• 10.效能優化
  • 減少http請求
  • 靜態資源壓縮
  • CDN加速
  • 減少全域性變數
  • script標籤放至body後

騰訊二面（機試）
類似百度搜尋的提示框，相容各大瀏覽器，可用鍵盤控制.
勉強憋了出來，但是掛掉了，犯了一些低階錯誤，顯示經驗不足．
面試官建議多看書，多寫元件.

阿里一面

• 1.Ajax原理
  • create => open => send => onchange
• 2.瀏覽器解析過程
  • 流程： 解析html => 構建dom樹->構建render樹->佈局render樹->繪製render樹
• 3.垂直居中
  • flex
  • line-height, text-center
  • postion , margin
  • display: table, vertical-align: middle
  • position, top:0, bottom: 0
• 4.資料型別判斷
  • typeof
  • instanceof
  • toString
• 5.路由實現
  • location.hash+hashchange
  • history.pushState()+popState
• 6.資料本地儲存
  • localStorage
  • indexDB
  • cookie
  • seesionStorage
• 7.跨域
  • jsonp
  • cors
• 8.資料雙向繫結單向繫結優缺點
  • 雙向繫結是自動管理狀態的，對處理有使用者互動的場景非常合適，程式碼量少，當專案越來越大的時候，除錯也變得越來越複雜，難以跟蹤問題
  • 單向繫結是無狀態的, 程式除錯相對容易, 可以避免程式複雜度上升時產生的各種問題, 當然寫程式碼時就沒有雙向繫結那麼爽了

阿里二面

• 1.無線效能優化
  • 往上翻，有同樣的問題
• 2.Tap事件,Touch
  • Tap 是zepto庫封裝好的事件，在移動端上可以替代click 事件，從而規避300ms問題
  • Touch 是移動端上的手勢事件, 如 touchstart , touchend , touchmove
• 3.資料儲存
  • 往上翻，有同樣的問題
    搜狐一面
• 1.Dom操作
  • 增刪改查, 如：
    • document.elementById
    • document.querySelectAll
    • document.appendChild
    • docuemnt.removeChild
    • ......
• 2.移動佈局方案
  • Rem, Em
  • flex
  • 百分比
  • media query
• 3.前後端協作
  • .....
• 4.原生Ajax實現過程
  • 往上翻，有同樣的問題
    搜狐二面
• 1.單連結串列反轉

    function ReverseList(pHead) {
        var pre = null;
        var next = null;
        while (pHead != null) {
        next = pHead.next;
        pHead.next = pre;
        pre = pHead;
        pHead = next;
        }
        return pre;
    }複製程式碼

• 2.快排

    const quickSort = (arr) => {
        if(arr.length < 1) return arr;
        let inx = Math.floor(arr.length/2);
        let pivot = arr.splice(inx,1)[0];
        let left = [];
        let right = [];
        for(let i=0; i<arr.length; i++){
        if(arr[i] < pivot){
            left.push(arr[i])
        }else{
            right.push(arr[i])
        }
        }
  
        return quickSort(left).concat(pivot,quickSort(right))
    }複製程式碼

• 3.即時通訊(除了Ajax和websocket)
  • Comet技術：基於HTTP長連線的Web端實時通訊技術
  • SSE：伺服器傳送事件,使用長連結進行通訊
• 4.伺服器代理轉發如何處理cookie(nginx)


    proxy_cookie_domain localhost example.org;
    proxy_cookie_domain ~\.([a-z]+\.[a-z]+)$ $1;
    proxy_cookie_path /one/ /;
    proxy_cookie_path / /two/;複製程式碼

• 5.物件繼承
  • proto
  • prototype
  • Object
• 6.this
  • 建構函式呼叫
  • apply,call使用
  • 物件的方法呼叫
  • 普通函式呼叫
• 7.rem佈局的優缺點


騰訊Alloy Team

一面(記錄兩個,其他都還好)

• 實現動畫有哪些途徑

  • CSS3
  • JS幀動畫,定時器,requestAnimateFrame
  • Canvas動畫
  • SVG
  • 圖片
• web安全
  • https加密過程,證書用途
    • 服務端配置證書 -> 傳送證書 -> 客戶端解析證書 -> 傳送加密資訊 -> 服務端解密資訊 -> 傳輸加密後資訊 -> 客戶端解密資訊
  • xss幾種形式,防範手段,過濾哪些字元?
    • 形式
      • 資料從一個不可靠的連結進入到一個web應用程式
      • 沒有過濾掉惡意程式碼的動態內容被髮送給web使用者
    • 防範手段
      • 不信任任何使用者的輸入(過濾，轉義)
      • 使用HTTP頭指定型別
    • 過濾字元
      • <,>,",&quot
  • xsrf原理,例項,防範手段(Laravel的token)
  • Sql注入
    • 前端惡意提交sql程式碼,來篡改服務端的sql執行程式碼
• 效能優化
  • 程式碼優化(html,css,js)
  • 網路效能優化:
    1. Cache快取之強制快取和協商快取
    2. CDN原理及應用
    3. HTTP壓縮之gzip
• 上下文環境物件

• 設計模式(要求說出如何實現,應用,優缺點):


  • 單例模式

    • 定義: 產生一個類的唯一例項

    • 實現:

        const createMask = ()=>{
            let mask = null;
            return ()=> mask || document.appendChild(document.createElement('div'))
        }
      
        const mask = createMask();複製程式碼

    • 優點:
      1. 提供了對唯一例項的受控訪問
      2. 避免對共享資源的多重佔用
      3. 節約系統資源
    • 缺點:
      1. 擴充套件性差
      2. 職責過重
  • 工廠模式
    • 定義: 建立物件時無須指定建立物件的具體燈
    • 實現:

        const Example = function(name,age){
            this.name = name || 'Tom',
            this.age = age || '18'
            this.say = function(){
                console.log(`name:${this.name},age:${this.age}`)
            }
        }複製程式碼

    • 優點:
      1. 結構清淅,有效的封裝變化
      2. 對呼叫者遮蔽具體實現， 呼叫者只需關心產品的介面
      3. 降低耦合度
    • 缺點:
      1. 新增新的類，需要改寫工廠類

  • 釋出訂閱模式

    • 定義: 定義物件間一種一對多的依賴關係，使得當每一個物件改變狀態，則所有依賴於它的物件都會得到通知並自動更新。

    • 實現:

        const Example = {};
        Example.clientList = [];
        Example.listen = function(fn){
            this.clientList.push(fn)
        }
        Example.trigger = function(){
            for(let i=0,fn; fn=this.clientList[i++]){
                fn.apply(this,arguments)
            }
        }
      
        Example.listen(function(message){
            console.log(message) // 我釋出了一個訊息，此時訂閱者會收到訊息
        })  
      
        Example.trigger(function(){
            console.log('我釋出了一個訊息，此時訂閱者會收到訊息')
        })複製程式碼

    • 優點:
      1. 時間上的解藕
      2. 物件之間的解藕
      3. 支援廣播通訊
    • 缺點:
      1. 如果一個觀察目標物件有很多直接和間接的觀察者的話，將所有的觀察者都通知到會花費很多時間
      2. 如果在觀察者和觀察目標之間有迴圈依賴的話，觀察目標會觸發它們之間進行迴圈呼叫，可能導致系統崩潰
      3. 觀察者模式沒有相應的機制讓觀察者知道所觀察的目標物件是怎麼發生變化的，而僅僅只是知道觀察目標發生了變化
• 跨域(產生原因)
  • JSONP原理
    • 利用script標籤沒有跨域的漏洞進行第三方通訊，第三方的響應資料為json，故稱之為jsonp (json padding)
  • CORS如何設定
    • 通過改變response headers 設定白名單,來允許指定origin進行通訊
  • Nginx代理

      location / {
          proxy_pass  xxx
      }複製程式碼

• 讀過哪些框架原始碼?
• 如何寫一個CSS庫,要注意哪些東西?
  1. 總是類名優先
  2. 元件程式碼放在一起
  3. 使用一致的類名稱空間
  4. 維護名稱空間和檔名之間的嚴格對映
  5. 避免元件外的樣式洩露
  6. 避免元件內的樣式洩露
  7. 遵守元件邊界
  8. 鬆散地整合外部樣式