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

時間 2019-11-16

標籤 tat 前端面試總結答案欄目快樂工作简体版

原文原文鏈接

以前在 segmentfault.com/a/119000001… 看到過這篇文章，最近閒下來就作着玩了一下，若有誤，還請斧正css

騰訊一面

1.瀏覽器工做原理 html
- 用戶界面－包括地址欄、後退/前進按鈕、書籤目瀏覽器引擎－用來查詢及操做渲染引擎的接口
- 渲染引擎－渲染界面: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.對象繼承 nginx
- 全部繼承都是基於原型(prorotype)的,因爲js繼承機制並非明確規定的,因此繼承的方式也特別多
  - 原型鏈繼承
```
Child.prototype = new Parent();複製代碼
```
  - 原型繼承
```
Child.prototype = Parent.prototype;
  Child.prototype.constructor = Child;複製代碼
```
  - 拷貝繼承(extend)
  - call,apply
6.ES6歷史以及新特性有哪些?web
- ......
7.promise原理
- 理解promise 主要使用場景，理解promise 幾個狀態(pending,fulilled,rejected)
8.事件模型面試
- DOM0級模型 div.onclick = fn()
- DOM2級模型 addEventListener(eventType, handler, useCapture)
- IE事件模型 attachEvent( "eventType","handler")
9.常見兼容性問題,列舉(移動端/PC端)sql
10.性能優化
- 減小http請求
- 靜態資源壓縮
- CDN加速
- 減小全局變量
- script標籤放至body後

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

阿里一面

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.快排segmentfault

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. 鬆散地整合外部樣式