座標廣州，web前端中高級開發工程師面試題整理…（css,js,es6,vue,http等等…微信小程序問得比較少就列舉了），2020.04月，有空會再更新一下，需要的朋友可以看看哈…
1.css移動端1px問題
https://blog.csdn.net/duola8789/article/details/95456188
僞元素 + tranform: scaleY
0.5px邊框
僞元素 + liner-gradient + sacle
2.css3新特性
選擇器，旋轉，位移，動畫，陰影，漸變，彈性，濾鏡…
3.HTML5新特性
section，article，header，nav，article…
canvas畫布，draggable拖放，video/audio，input類型
localStorage
4. 有幾種方式可以實現繼承
https://www.cnblogs.com/humin/p/4556820.html
原型鏈繼承（對象間的繼承）
類式繼承（構造函數間的繼承）
實例繼承
5.作用域、作用域鏈和閉包的理解
變量的作用域無非就是兩種：全局變量和局部變量。
作用域鏈：根據在內部函數可以訪問外部函數變量的這種機制，用鏈式查找決定哪些數據能被內部函數訪問。（當代碼執行的時候，會創建變量對象的一個作用域鏈…）
閉包：閉包是指有權訪問另一函數作用域中的變量的函數。
閉包案例：
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i + " ");
}, 100);
}
輸出結果爲 5 5 5 5 5
修改：
for (var i = 0; i < 5;i++) {
(function(i) {
setTimeout(function() {
console.log(i + " ");
}, 100);
})(i);
}
輸出結果爲： 0 1 2 3 4
6. 對象深拷貝、淺拷貝
https://www.cnblogs.com/dabingqi/p/8502932.html
淺拷貝的意思就是隻複製引用（指針），而未複製真正的值。
如果拷貝後的對象發生變化，原對象也會發生變化。
深拷貝就是對目標的完全拷貝，不像淺拷貝那樣只是複製了一層引用，就連值也都複製了。
只要進行了深拷貝，它們老死不相往來，誰也不會影響誰。
方法：1.利用 JSON 對象中的 parse 和 stringify
2.利用遞歸來實現每一層都重新創建對象並賦值
7. this關鍵字
面嚮對象語言中 this 表示當前對象的一個引用。
在方法中，this 表示該方法所屬的對象。
如果單獨使用，this 表示全局對象。
在函數中，this 表示全局對象。
在函數中，在嚴格模式下，this 是未定義的(undefined)。
在事件中，this 表示接收事件的元素。
類似 call() 和 apply() 方法可以將 this 引用到任何對象。
8. 爲什麼會有同源策略
兩個頁面地址中的協議，域名，端口號一致，則表示同源；
同源策略的限制：不能通過ajax請求不同域的數據，不能通過腳本操作不同域下的DOM；
爲什麼要用同源策略：設置同源限制主要是爲了安全，如果沒有同源限制存在瀏覽器中的cookie等其他數據可以任意讀取，不同域下DOM任意操作，ajax任意請求的話如果瀏覽了惡意網站那麼就會泄漏這些隱私數據；
9.js中幾種實用的跨域方法原理詳解
1.通過jsonp跨域
2.跨域資源共享（CORS）
3.通過修改document.domain來跨子域
4.使用window.name來進行跨域
5.通過WebSocket進行跨域
10.瀏覽器是如何渲染頁面的？
1.解析HTML文件，創建DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。
2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式。
3.將CSS與DOM合併，構建渲染樹（Render Tree）。
4.佈局和繪製，重繪（repaint）和重排（reflow）。
11.一次完整的http事務是怎樣的一個過程
一.域名解析
二.發起TCP的3次握手
三.建立TCP連接後發起http請求
四.服務器端響應http請求，瀏覽器得到html代碼
五. 瀏覽器解析html代碼，並請求html代碼中的資源
六.瀏覽器對頁面進行渲染呈現給用戶
12.雙等號和三等號的區別
== 定義的比較寬鬆允許進行類型轉換 在對比時把兩個值轉換爲同一類型 然後比較兩個值是否相等 ；
=== 定義嚴格， 如果類型不同，結果爲false
例如 ：
let string = ‘1’
let number = 1
number == string //true
number === string // false
而對象（Date,Array）及普通對象通過指針指向的內存中的地址來做比較
13.call和apply區別
call和apply方法都是使用一個指定的this值和對應的參數前提下調用某個函數或方法。區別則在於
call是通過傳多個參數的方式，而apply則是傳入一個數組。
var obj = {
name: 'jack'
}
function func(age, sex) {
console.log(this.name,age,sex);
}
func.call(obj,12,'女'); // jack 12 女
func.apply(obj, [18, '女']); //ljack 18 女
20.數組去重
方法1 var newArr = Array.from(new Set(arr))
方法2 function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
21.垃圾回收機制
JS的垃圾回收機制是爲了以防內存泄漏，內存泄漏的含義就是當已經不需要某塊內存時這塊內存還存在着，垃圾回收機制就是間歇的不定期的尋找到不再使用的變量，並釋放掉它們所指向的內存。
原理：垃圾收集器會定期（週期性）找出那些不在繼續使用的變量，然後釋放其內存。
方式：標記清除法，引用計數法
22.js中的基本數據類型
（Number,String,Boolean,Undefined,Null）,和一種複雜數據類型（Object）。
23.get和post區別？
GET把參數包含在URL中，POST通過request body傳遞參數。
GET請求只能進行url編碼，而POST支持多種編碼方式。
GET比POST更不安全，因爲參數直接暴露在URL上，所以不能用來傳遞敏感信息。
24.請描述一下cookies，sessionStorage和localstorage區別
（1）存儲大小
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或 更大。
（2）有效時間
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除;
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
（3）數據與服務器之間的交互方式
cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端;
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存;
25.dom節點操作
添加：appendChild()
移除：removeChild()
替換：replaceChild()
插入：insertBefore()
創建：createElement() createTextNode()
查找：getElementsById() getElementsByName()
26.var、let、const聲明變量的區別
let和var聲明變量的區別：
let所聲明的變量只在let命令所在的代碼塊內有效。（塊級作用域）
let命令不存在變量提升
let聲明變量存在暫時性死區（即變量會綁定某個區域，不受外部影響）
const聲明變量
const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。
27.解構賦值
從數組和對象中提取值，對變量進行賦值
let [a, b, c] = [1, 2, 3]; a=1,b=1,c=3
let a=1, b=2;
[b, a] = [a, b]
console.log(a, b)
28.聲明類與繼承：class、extend
class Person {
// 構造函數
constructor(name) {
this.name = name;
}
// 等價於Person.prototype.sayName
sayName() {
console.log(this.name);
}
}
console.log(typeof Person); // function
console.log(typeof Person.prototype.sayName); // function
29.擴展運算符
https://www.jianshu.com/p/3578bfbe3b4d
30.Map的用法
https://www.cnblogs.com/kongxianghai/p/7309735.html
Map對象就是簡單的鍵值對映射。其中的鍵和值可以使任意值。（ps : 對象的鍵只能是字符串 ）
const map1 = new Map()
const objkey = {p1: ‘v1’}
map1.set(objkey, ‘hello’)
console.log(map1.get(objkey)) 輸出hello
31.promise與async/await的區別
https://blog.csdn.net/weixin_42470791/article/details/82560734
async/await是寫異步代碼的新方式，以前的方法有回調函數和Promise。
async/await是基於Promise實現的，它不能用於普通的回調函數。
async/await與Promise一樣，是非阻塞的。
async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。
Promise主要處理異步操作，確認異步操作完成再執行後面的語句。
const promise = new Promise(function(resolve, reject) {
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(res){
}).catch（function(err){
}）;
async/await是then/catch的完美版。作用與then/catch相同，只是用法上的區別。
async f1() {
try{
const res = await promise;
}catch(err){
console.log(err)
}
}
付一道題promise題：
答案:
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
32.MVVM模式理解
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。
33.vue虛擬dom原理
https://www.jianshu.com/p/af0b398602bc
Virual DOM是用JS對象記錄一個dom節點的副本，當dom發生更改時候，先用
虛擬dom進行diff，算出最小差異，然後再修改真實dom。
vue的virtual dom的diff算法是基於snabbdom算法改造而來，與react的diff算法一樣
僅在同級的vnode間做diff，遞歸的進行同級vnode的diff，最終實現整個DOM樹的更新。
虛擬DOM的缺點：
- 代碼更多，體積更大
- 內存佔用增大
- 小量的單一的dom修改使用虛擬dom成本反而更高，不如直接修改真實dom快
34.數據雙向綁定原理
https://segmentfault.com/a/1190000014616977
vue數據雙向綁定是通過數據劫持結合發佈者-訂閱者模式的方式來實現的.
原理：1.數據劫持，2.發佈訂閱模式
Object.defineProperty(obj, key, val)來劫持各個屬性的的setter以及getter，在數據變動時發佈消息給訂閱者，從而觸發相應的回調來更新視圖。
35.watch computed區別
watch：屬性監聽 監聽屬性的變化
computed: 計算屬性通過屬性計算而得來的屬性
使用場景
computed 當一個屬性受多個屬性影響的時候就需要用到computed
最典型的例子： 購物車商品結算的時候
watch 當一條數據影響多條數據的時候就需要用watch
搜索數據
37.vuex
state存儲的全局的客戶和供應商集合;
getters用來根據state計算各種屬性值;
mutations一般是用來同步改變state中的數據,類似於setters;
actions則是異步接收數據(不一定必須是異步方法,如第一個方法,只是外界調用接口都是從這裏調用的),然後調用mutations內部方法來改變state的值;
modules：store的子模塊，爲了開發大型項目，方便狀態管理而使用的。
38.vue的生命週期
beforeCreate（創建前）、created（創建後）、beforeMount(載入前)、mounted（載入後）、beforeUpdate（更新前）、updated（更新後）、beforeDestroy（銷燬前）、destroyed（銷燬後）
39.created和mounted的區別
created:在模板渲染成html前調用，即通常初始化某些屬性值，然後再渲染成視圖。
mounted:在模板渲染成html後調用，通常是初始化頁面完成後，再對html的dom節點進行一些需要的操作。
40.Vue中路由守衛
https://www.cnblogs.com/minigrasshopper/p/7928311.html
導航守衛的作用：vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。
全局守衛包括：router.beforeEach（是全局前置守衛）、router.beforeResolve（是全局解析守衛）、router.afterEach（是全局後置鉤子）
每個導航守衛都接受3個參數 from 、to、next() ,參數的定義如下：
to: Route: 即將要進入的目標 路由對象
from: Route: 當前導航正要離開的路由
next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
41.this.$router.push({})實現路由跳轉
this.$router.push({
path:'/login',
name:'login',
//params傳參 需要使用 name 否則取不到；對應路由配置的 name
// query: {
// id:this.id
// }
params: {
id:this.id
}
區別是query傳參的參數會帶在url後邊展示在地址欄，params傳參的參數不會展示到地址欄
42.axios的post
https://blog.csdn.net/qq_37121488/article/details/81192163
使用transformRequest，在請求發送前將請求數據進行轉換
如果使用模塊化開發，可以使用qs模塊進行轉換
new URLSearchParams()
推薦qs
var qs = require(‘qs’);
axios.post(’/demo’, qs.stringify({ ‘params’: 7758521 }, { indices: false }))
43.vue實例中data使用return包裹
因爲不使用return包裹的數據會在項目的全局可見，會造成變量污染。
使用return包裹後數據中變量只在當前組件中生效，不會影響其他組件。
44.vue替換數組對象的某個屬性值
this.$set
由於 Vue 會在初始化實例時進行雙向數據綁定，使用Object.defineProperty()對屬性遍歷添加getter/setter 方法，所以屬性必須在 data 對象上存在時才能進行上述過程 ，這樣才能讓它是響應的。
例如：
data:[
{name: 'xxx', status: 0},
{name: 'xxx', status: 1},
]
data.forEach(item => {
if (item.status === 0) {
// 'status'爲屬性名，'非活動'爲修改後的內容
this.$set(item, 'status', '非活動')
} else if (item.status === 1) {
this.$set(item, 'status', '活動')
}
})
44.說一說emit、 on 、off
1、vm.$emit( event, […args] )
觸發當前實例上的事件。附加參數都會傳給監聽器回調，如果沒有參數，形式爲vm.$emit(event)。
2、vm.$on( event, callback )
監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。
3、vm.$off( [event, callback] )
移除自定義事件監聽器。
如果沒有提供參數，則移除所有的事件監聽器；
如果只提供了事件，則移除該事件所有的監聽器；
如果同時提供了事件與回調，則只移除這個回調的監聽器。
45.Vue 定義全局的公用的組件
import fotter from './components/fotter.vue'
Vue.component('fotter-view',fotter)
使用：<fotter-view></fotter-view>
46.Vue全局方法
import xx from './plugin/xx' // 引入
Vue.prototype.$xx = xx;
使用this.$xx()
47.組件通訊
父-子：props:['msg']
子-父：this.$emit this.$emit('receiveMsg','from child');
兄弟：this.$root.eventHub.$emit ；this.$root.eventHub.$on
爺-孫：屬性 this.attrs['msg']； 方法 this.$listeners.test(123)
48.Vue生命週期的執行過程
1、創建vue實例，Vue();
2、在創建Vue實例的時候，執行了init()，在init過程中首先調用了beforeCreate鉤子函數；
3、同時監聽data數據，初始化vue內部事件，進行屬性和方法的計算；
4、以上都幹完了，調用Created鉤子函數；
5、模板編譯，把data對象裏面的數據和vue語法寫的模板編譯成HTML。編譯過程分三種情況：1）實例內部有template屬性，直接調用，然後調用render函數去渲染；2）沒有該屬性調用外部html；3）都沒有拋出錯誤；
6、編譯模板完成，調用beforeMount鉤子函數；
7、render函數執行之後，將渲染出來的內容掛載到DOM節點上；
8、掛在結束，調用Mounted鉤子函數；
9、數據發生變化，調用beforeUpdate鉤子函數，經歷virtual Dom；
10、更新完成，調用Updated鉤子函數；
11、beforeDestory銷燬所有觀察者、組件及事件監聽；
12、Destoryed實例銷燬；
49.vue.nextTick()方法的使用
nextTick()，this.$nextTick(() => {})是將回調函數延遲在下一次dom更新數據後調用，簡單的理解是：當數據更新了，在dom中渲染後，自動執行該函數
50.單頁面和多頁面應用的區別
51.緩存組件keep-alive
https://blog.csdn.net/weixin_42211816/article/details/105254582
keepalive中文翻譯的意思是：保持活着；
被包含在 keep-alive 中創建的組件，會多出兩個生命週期的鉤子: activated 與 deactivated
activated: 在 keep-alive 組件激活時調用，該鉤子函數在服務器端渲染期間不被調用
deactivated:在 keep-alive 組件停用時調用，該鉤子在服務器端渲染期間不被調用