目錄

HTML/CSS

1.行內元素和塊級元素的區別？

2.列舉塊級標簽和行內標簽

3.css選擇器優先級

JavaScript基礎

1.js有哪些數據類型？

2.type of和instance of的區別

3.怎么判斷兩個對象相等？

4.js中定義函數的方式

5.js中函數有哪些調用形式？

6.==和===的區別

7.null和undefined區別

8.列舉數組api

9.列舉字符串api

10.document.write和innerHTML區別

11.區分split（）slice（），splice（），join（）

12.列舉3強制轉換2隱式轉換

13.如何判斷一個變量foo是數組

14.創建函數，對象，數組的方法（常用）

?15.判斷是否是數組

16.深拷貝和淺拷貝

19.數組去重

JavaScript高級

1.什么是原型對象？

2.什么是原型鏈？

3.什么是構造函數？

4.js實現繼承的方式

5.什么是閉包？有什么作用？注意

6.什么是內存泄露？哪些操作會引起內存泄露

7.什么是預解析？

8.this關鍵字指向問題

9.call（）apply（）和bind（）的區別

10.caller和callee的區別

11.new操作符具體做了什么？

12.js中eval的功能是什么？缺點是什么？

13.封裝，繼承，多態

14.事件模型

15.宏任務和微任務

16.判斷數據類型的方法

17.字面量和new出來的對象和Object.create（）創建出來的對象有什么區別

18.為什么JS是單線程的

19.箭頭函數和普通函數的區別

20.模塊化的好處

21.e.target和e.currentTarget的區別

22.exports和moudle.export的區別

23.JS性能優化

24.回流和重繪

25.link標簽和@import標簽

26.進程，線程

27.src和herf的區別

28.內存泄露以及解決

HTML5

1.html5有哪些新增標簽？

2.html5有哪些新增屬性？

3.readyonly和disabled的區別

4.哪些標簽存在偽元素？

5.html5的網頁為什么要寫

6.h5新增了哪些新特性？

7.sessionstorage，localstorage和cookie的區別

CSS3

1.px，em，rem的區別

2.CSS3新增偽類

3.pposition幾個屬性的作用

4:怎么讓一個不定寬高的div元素，垂直水平居中

5.清除浮動有哪些方式？

6.讓兩個塊級元素在一行顯示有哪些辦法？

7.如何設置一個元素垂直居中？

8.圖片懶加載的原理，圖片懶加載的插件

9.CSS3新增了哪些新特性？

10.display:none和visibility:hidden區別

11.less和scss

BOM/DOM

1.在一個頁面中給多個元素設置相同的id，會導致什么問題？

2.列舉dom元素增刪改查的api

3.bom中有哪些常用對象

4.什么是事件委托？原理？

5.js的幾種定時器，區別？

?

web

1.列舉常見的瀏覽器兼容問題

2.如何實現多個標簽頁的通信？

jQuery

1.$each（）和$（selector）.each()有什么不同？

2.$each（）和foreach區別

3.原生js的window.onload與jQuery的$（document）.ready（function（）｛｝，$function（）｛｝）區別

4.jQuery實現連式編程的原理

5.jQuery如何多次給同一個標簽綁定同一個事件？

6.如何開發jQuery插件？

7.jQuery哪些方法不支持鏈式操作？

vue

1.vue如何封裝一個組件？

2.computed和watch的區別

3.對vue中插槽的理解？

4.v-if和v-show的區別

5.什么是vuex，在什么場景下使用

6.vue路由的使用步驟

7.常見的vue組件庫

8.對mvvm的理解

9.vue的生命周期

10.vue實現雙向數據綁定的原理？

11.vue創建組件的時候，data為什么要使用匿名函數return一個對象？

12.vue組件傳參

13.vue有幾種路由模式？

14.路由傳參之query和params

15.vue的優點

16.vue路由導航守衛和應用場景

17.vue如何定義一個過濾器？

18.vue如何自定義一個vue指令？

19.vue路由模塊中$route和$router的區別？

20.v-for指令循環遍歷時key屬性的作用？

21.vue和react的區別

22.vue有哪些常用的事件修飾符

23.vue常用的指令

24.vue如何解決插值表達式閃爍問題？

25.vue如何實現通過錨點值的改變切換組件？

26.vue中如何避免組件間樣式沖突

27.vue如何動態添加一個路由規則？

28.vue優化頁面加載效率的辦法

28.路由懶加載，組件懶加載

29.vue如何觸發一個自定義事件？

30.vue如何監聽自定義事件的執行？

31.vue如何移除自定義事件？

32.vm.$mount(selector)方法的作用

33.keep-alive組件的作用是什么？

34.vue如何手動銷毀一個vue實例

35.vue有哪些內置的組件？

36.vue實例中有哪些屬性？

37.vue.use(plugin)的作用？注意問題？

38.vm.$nextTick(fn)的作用

39.vue中混入（mixin）有什么作用

40.如何開發一個vue插件？

41.什么是ssr？如何實現ssr？

42.什么是spa？

43.首屏加載慢怎么解決

44.vue中data的屬性可以和methods中方法同名嗎，為什么？

45.vue權限管理

46.vue性能優化

47.組件中name的作用 ?

48.虛擬dom的優缺點

50.$refs

51.全局事件總線

?52.數據代理

?53.關于state和...mapState輔助函數

http/Ajax

1.常見http狀態碼

2.http請求方式

3.Ajax工作原理

4.如何解決跨域？

5.jsonp跨域原理

6.什么是同步和異步，哪種執行方式好？

7.get和post的區別

8.localstorage，sessionstorage和cookie的區別

9.一個頁面從輸入url到頁面加載顯示完成，整個過程發生了什么

10.http切換到https需要做什么？

11.什么是restfulapi？

12.什么是漸進增強和優雅降級

13.什么是頁面的回流和重繪？

14.如何優化頁面性能？

15.什么是cdn加速？

16.什么是seo？

17.為什么利用多個域名存儲靜態資源更有效？

18.移動端點擊事件有多少秒的延遲？原因？解決？

19.網站攻擊方式有哪些？

20.js中的垃圾回收機制

21.JS是單線程嗎？

22.JS如何實現異步操作？

23.分別介紹mvc，mvvm，mvp三種模式

24.清理瀏覽器緩存的方式

25.cookie機制，session機制，token機制

es6新特性

1.es6新增了哪些數據類型？

2.es6新增了哪些特性？

3.let和var的區別

4.async/await的使用場景

5.箭頭函數作用和使用

6.對promise的理解

微信小程序

1.微信小程序如何實現頁面跳轉？

2.簡單描述小程序的生命周期

3.微信小程序如何請求數據接口？

4.如何優化小程序代碼包的體積？

?

---

HTML/CSS

1.行內元素和塊級元素的區別？

塊級元素:

獨占一行

水平垂直方向的內外邊距有效，可設置

行內元素:

可以和其他非塊級元素共占一行

水平內外邊距有效，垂直內外邊距無效

2.列舉塊級標簽和行內標簽

塊級標簽:

div，p，h1-h6，section，header，footer

行內標簽:

span，em（i），strong（b），u，a

3.css選擇器優先級

!important

行內樣式

id選擇器

類選擇器

標簽選擇器

通配符選擇器

---權重比較---

?

JavaScript基礎

1.js有哪些數據類型？

基本類型:number，string，Boolean，null，undefined，bigint，symbol

引用類型:object

2.type of和instance of的區別

type of判斷變量數據類型，返回字符串

a? instance of b判斷b是不是在a的原型鏈上，可以判斷數據類型，返回布爾值

3.怎么判斷兩個對象相等？

先判斷兩者是不是對象

再判斷兩個對象的所有key值是否相等

最后判斷兩個對象的key對應的值是否相等

?

?

4.js中定義函數的方式

• 函數聲明:function fn（）｛｝
• 函數表達式:var fn = function（）｛｝
• 構造函數:var fn = new Function（參數1，參數2，函數體）

5.js中函數有哪些調用形式？

普通函數

對象的方法

事件處理函數

構造函數

回調函數

6.==和===的區別

==比較值

===比較值和類型

7.null和undefined區別

• 數據類型不一樣?，用typeof進行判斷，

null的數據類型是object，

undefined的數據類型是undefined

• 比較

==時，二者相等

===時，二者不相等

• 轉化成數字

null轉數字為0

undefined轉數字為nan

• 定義

null代表空對象，是一個空指針

undefined代表定義了沒賦值

• 應用場景

null

作為函數的參數，表示該參數不是對象

作為對象原型鏈的終點

定義變量用來保存對象，初始化

undefined

變量聲明，沒有賦值

定義了形參，沒傳實參

對象的屬性不存在

函數沒有返回值

函數有返回值，沒有賦值

?

8.列舉數組api

push將元素添加到數組末尾，返回數組長度

pop將數組最右一個元素刪除，返回被刪除的元素

unshift在數組開頭添加一個元素，返回數組長度

shift刪除數組開頭的元素，返回被刪除的元素

splice（index，lenght）刪除數組元素，index是指定位置的下標，length是刪除的長度

concat連接數組

reverse翻轉數組

9.列舉字符串api

substr（start，length）截取字符串

substring（start，end）截取字符串

slice截取一段字符串

indexof查找字符串是否含有某元素，有，返回下標，沒有，返回-1

lastindexof從后往前查找是否含有某元素

replace替換字符串

touppercase字符串轉大寫

tolowercase字符串轉小寫

charat獲取字符串指定索引的字符

10.document.write和innerHTML區別

document.write是指定在整個頁面區域的內容

innerHTML是指定某個元素的內容

11.區分split（）slice（），splice（），join（）

split（）字符串轉數組

join（）數組轉字符串

slice（）從數組/字符串截取一段

splice（）刪除指定的數組元素

12.列舉3強制轉換2隱式轉換

強制轉換:

轉number:Number（）parseInt（）parseFLoat（）

轉字符串:String（）toString（）

轉布爾:Boolean（）

隱式轉換:

隱式拼接字符串

數字+布爾自動轉數字

13.如何判斷一個變量foo是數組

• foo instance of Array
• foo.constructor==Array
• Array.isArray（foo）
• Object.prototype.toString.call（foo）=="[Object Array]"

14.創建函數，對象，數組的方法（常用）

函數:

• 函數聲明創建:function 函數名（參數）｛｝
• 變量聲明創建:var a = function（參數）｛｝
• 構造函數創建:var a = new Function（參數）

對象:

• 字面量:var obj = ｛name:xxx，age:xxx｝
• 構造函數:var obj= new Object（）
• 構造函數+原型:

數組：

?

?15.判斷是否是數組

?

16.深拷貝和淺拷貝

?17.es5新特性

• 嚴格模式
• 對象的屬性
• 新增object接口
• 新增數組api
• 新增函數接口bind

18.es6新特性

• let，const
• 塊級作用域
• 箭頭函數
• 擴展運算符
• class類
• 參數增強
• 解構賦值
• 模板字符串 promise

19.數組去重

js數組去重的10種方法_sun6sian的博客-CSDN博客_js數組去重

JavaScript高級

1.什么是原型對象？

原型對象:函數的prototype屬性指向的對象，又用來存放實例對象的公有屬性和方法。所有的原型對象都是Object的實例

每一個函數都有一個prototype屬性，這個屬性的值是一個對象，叫做構造函數的原型對象。一般把構造函數的成員屬性綁定在prototype上，因為prototype上的屬性默認可以通過實例對象訪問到。好處就是每次通過new關鍵字創建實例對象的時候，這些方法不會在內存中北重復創建

?

2.什么是原型鏈？

原型:

顯式原型prototype 隱式原型__proto__

原型鏈:

如果某個對象查找屬性，自己和原型對象上都沒有，那就會繼續往原型對象的原型對象上去找，這個例子里就是Object.prototype，這里就是查找的終點站了，在這里找不到，就沒有更上一層了（null里面啥也沒有），直接返回undefined。 整個查找過程都是順著__proto__屬性，一步一步往上查找，形成了像鏈條一樣的結構，這個結構，就是原型鏈。所以，原型鏈也叫作隱式原型鏈。

?

?

3.什么是構造函數？

構造函數定義的時候，首字母一般大寫

構造函數調用的時候，必須用new關鍵字

使用時，用的是構造函數構造出來的實例對象，而不是構造函數

4.js實現繼承的方式

原型繼承

使用構造函數繼承

組合繼承

extends關鍵字繼承

---

es5繼承

先創建子類的實例對象，在實例化父類并添加到子類this中 原理:原型或構造函數機制 具體操作:

?es6繼承

先創建父類的實例對象this（所以必須先調用父類的super()方法），然后再用子類的構造函數修改this 原理: class關鍵字定義類，里面有構造方法 extends實現類之間的繼承 子類在constructor方法中調用super方法繼承父類的this對象（super指代父類的實例對象） 具體操作:

?

?

5.什么是閉包？有什么作用？注意

一個外層函數，包裹著一個內層函數和外層函數作用域的變量，內層函數通過return返回給外層函數，內層函數可以使用外層函數作用域的變量，當從外部調用內層函數時，外層函數組用域的變量被引用著無法釋放，形成閉包。

好處:

要保護的變量可以反復使用并且不會被外界篡改

延長變量的作用范圍

壞處:

內存泄露（變量用完不被釋放，占用內存）

在處理速度和內存消耗方面對腳本性能具有負面影響

6.什么是內存泄露？哪些操作會引起內存泄露

內存泄漏:指本應該被垃圾回收機制回收的內存空間由于某種特殊原因沒被回收

引起:濫用全局變量和閉包導致內存泄露

7.什么是預解析？

js代碼執行前，解析引擎先對代碼進行一個預先檢查，主要對變量和函數的聲明進行提升，將變量和函數的聲明提到代碼最前面。變量只提升聲明，不提升賦值

8.this關鍵字指向問題

• 普通函數，this指向window
• 構造函數，this指向new出來的實例對象
• 事件處理函數，this指向事件源
• 回調函數，this指向window
• 對象的成員方法，誰調用方法，this就指向誰

9.call（）apply（）和bind（）的區別

相同點:

都是改變this指向

第一個參數都是this指向的新對象

不同點:

傳參

call和bind可接收多個參數，第一個是this指向的新對象，后面的參數按順序引入

apply只能接收兩個參數，第一個是this指向的新對象，第二個是數組

函數調用

call和apply都是直接調用，立即執行

bind會創建一個新的函數，當被調用的時候，將其this關鍵字設置為提供的值，我們必須手動去調用

call用于對象的繼承 、偽數組轉換成真數組

apply用于找出數組中的最大值和最小值以及數組合并

bind用于vue或者react框架中改變函數的this指向?

10.caller和callee的區別

fun.caller返回調用這個fun函數的對象，即fun的執行環境，如果執行環境是window，返回null

callee是arguments的一個屬性，指向函數本身

11.new操作符具體做了什么？

?new的作用

訪問構造函數的屬性

訪問構造函數prototype的屬性

12.js中eval的功能是什么？缺點是什么？

功能:將一個字符串當做js代碼執行

缺點:執行效率低，不安全

13.封裝，繼承，多態

封裝:

將方法和屬性寫到同一個類中，并將屬性私有化，生成 get set方法，外部訪問屬性需要通過get和set方法,內部可以直接訪問屬性

繼承:

子類繼承父類，子類實例可以調用父類除private修飾以外的所有屬性和方法，一個子類只能繼承一個父類，但是可以多重繼承，一個父類可以擁有多個子類

多態:

父類的引用指向子類的實例，多個子類繼承同一個父類實現了這些類共通的方法，每一個子類實現的結果都不同

14.事件模型

事件捕獲階段

事件目標階段

事件冒泡階段

15.宏任務和微任務

宏任務:

script（整體代碼），定時器（setTimeout,setInterval,setImmediate），UIrendering

微任務:

process.NextTick（），promise，MutationObserver

宏任務中的事件放在callback queue中，由事件觸發線程維護；

微任務的事件放在微任務隊列中，由js引擎線程維護

執行過程:

• 執行宏任務script，
• 進入script后，
• 所有的同步任務主線程執行
• 所有宏任務放入宏任務執行隊列 所有微任務放入微任務執行隊列
• 先清空微任務隊列，
• 再取一個宏任務，執行，再清空微任務隊列
• 依次循環

?

16.判斷數據類型的方法

• type of
• instanceof
• constructor
• object.prototype.toString.call（）

17.字面量和new出來的對象和Object.create（）創建出來的對象有什么區別

字面量和new:

創建的對象會繼承原對象的屬性和方法，它們的隱式原型會指向Object的顯式原型

Object.create（）:

創建的對象原型為null，沒有繼承原對象的方法和屬性

18.為什么JS是單線程的

因為JS里面有可視的Dom，如果是多線程的話，這個線程正在刪除DOM節點，另一個線程正在編輯Dom節點，導致瀏覽器不知道該聽誰的

19.箭頭函數和普通函數的區別

• this指向它定義時所在的對象（作用域）
• 不會進行函數提升
• 沒有arguments對象
• 不能new

20.模塊化的好處

• 防止命名沖突
• 更好的分離，按需加載
• 更好的復用性
• 更高的維護性

21.e.target和e.currentTarget的區別

前者指事件的目標元素

后者指當前監聽的元素

22.exports和moudle.export的區別

exports.xxx=“xxx”

moudle.export =｛｝

require能看到的只有moudle.export

?

23.JS性能優化

• 垃圾回收
• 防抖節流
• 分批加載
• 事件委托
• 少用with
• script標簽中的defer和async
• cdn加速

24.回流和重繪

回流:

render樹中一部分或全部元素需要改變尺寸、布局、或著需要隱藏而需要重新構建，這個過程叫做回流

重繪:

render樹中一部分元素改變，而不影響布局的，只影響外觀的，比如顏色。該過程叫做重繪

回流必將引起重繪

25.link標簽和@import標簽

• link屬于html，@import屬于css
• 頁面加載時，link會被同時加載，@import會等頁面加載完再加載
• link的權重高于@import
• dom可以使用link，不能使用@import

26.進程，線程

進程: 一個在內存中運行的應用程序，有自己獨立的內存，一個進程可有多個線程

線程: 進程中的一個執行任務，負責當前進程的執行 一個進程可運行多個線程，多個線程共享數據

27.src和herf的區別

src:

指向的內容會嵌入到文檔當前標簽所在位置

瀏覽器解析時，暫停，先加載src資源

herf:

超文本引用，用來建立當前元素和文檔的鏈接

瀏覽器解析時，同時進行，并行加載?

28.內存泄露以及解決

?29.防抖節流

?

?

?

?

HTML5

1.html5有哪些新增標簽？

布局標簽:

header，footer，aside，section，article

表單標簽:

datalist，input的type類型（date，week，time，datatime，number，search，url，tel，email，color，range）

多媒體標簽:

audio，video

其他標簽:

progress（進度條），meter（度量器）

2.html5有哪些新增屬性？

hidden（隱藏元素）

required（必填）

minlength（最小長度）/maxlength（最大長度）

pattern（正則表達式）

placeholder（提示文本）

autocomplete（自動填充）

autofocus（自動獲取焦點）

3.readyonly和disabled的區別

readyonly:設置表單元素為只讀狀態

disabled:設置表單元素為禁用狀態

4.哪些標簽存在偽元素？

大部分容器標簽有偽元素，iframe沒有

大部分單標簽沒有偽元素，img有

偽元素不能用js操作

5.html5的網頁為什么要寫<!DOCTYOE HTML>

html5不基于SGML，不需要對DTD引用，需要用doctype規范瀏覽器的行為

6.h5新增了哪些新特性？

語義化標簽（header，footer，nav，aside，article，section）

本地存儲（localstorage，sessionstorage）

拖拽釋放（drag and drop），音頻視頻

畫布（canvas）api

地理位置api

表單控件（calendar，date，time，email，url，search）

websocket

7.sessionstorage，localstorage和cookie的區別

共同點:都是瀏覽器的存儲介質，可存儲數據

不同點:

sessionstorage把數據存儲在頁面內存，頁面關閉數據銷毀，只能存字符串，存儲5m左右

localstorage把數據存儲在電腦磁盤，需手動刪除，只能存字符串，存儲20m左右

cookie是http協議重要組成部分，可設置過期時間，時間到，自動銷毀，沒有設置時間會隨頁面關閉而銷毀，存儲4k左右，存儲數據會伴隨http請求發送到服務器端，所以不能存儲大量數據

?

CSS3

1.px，em，rem的區別

px:是一個絕對單位

em和rem是相對單位，

em相對于自身元素字體大小，

rem相對于根元素html字體大小

2.CSS3新增偽類

:first-of-type選擇屬于父元素的首個元素

:last-of-type選擇屬于父元素的最后一個元素

:nth-child（n）選擇屬于父元素的第n個元素

:nth-type-of（）選擇屬于父元素的第n個元素

:enabled，:disabled控制表單控件禁用狀態

:checked單選框或復選框被選中

3.position幾個屬性的作用

static:

默認位置，不常用，不脫離文檔流

relative:

相對定位，相對于元素本身位置偏移，不脫離文檔流

absolute:

絕對定位，相對于離它最近的父元素定位，沒有就找body，脫離文檔流

fixed:

固定定位，相對于瀏覽器窗口，脫離文檔流

4:怎么讓一個不定寬高的div元素，垂直水平居中

方法1:transform

.父元素｛樣式屬性

position：relative

｝

.子元素｛

position:absolute

top:50%

left:50%

transform:translate（-50%，-50%）

其他樣式屬性

子寬高為父寬高一半

｝

方法2:flex彈性布局

.父元素｛

display:flex

justify-content:center

align-items:center

其他樣式屬性

｝

.子元素｛

樣式屬性

子寬高為父寬高一半

｝

方法3:絕對定位

.父元素｛

position:relative

其他樣式屬性

｝

.子元素｛

position:absolute

top:0

bottom:0

left:0

right:0

margin:auto

子寬高為父寬高一半

｝

5.清除浮動有哪些方式？

• 給浮動父元素設置高度:不太靈活，x子元素高度不確定
• 給浮動父元素設置overflow:hidden
• 額外標簽法:在浮動元素最后加一個塊級標簽，并設置clear:both屬性:會在頁面上產生很多空白標簽
• 使用偽元素法.clear :after｛content:‘’，display:block，overflow:hidden，visibility:hidden，clear:both｝

6.讓兩個塊級元素在一行顯示有哪些辦法？

• 用display:inline/inline-block
• flex布局:給父元素設置display:flex

7.如何設置一個元素垂直居中？

• 給父元素設置垂直內邊距
• 給需要垂直的子元素設置垂直外邊距
• 如果是文本，行高等于標簽高度
• flex布局，align-items:center
• 絕對定位子元素在相對定位父元素垂直對齊

8.圖片懶加載的原理，圖片懶加載的插件

原理:img圖片加載通過src屬性指向的文件來實現，當把src屬性暫時改成自己的一個自定義屬性，頁面就不會去加載圖片。當img標簽進入屏幕可視區域后，從存放圖片路徑的自定義屬性中獲取圖片地址，并動態的設置給src屬性，瀏覽器就會幫助我們去請求圖片資源，實現懶加載

插件:jQuery.lazyload，vue-lazyload

9.CSS3新增了哪些新特性？

• 媒體查詢（@media）
• transform系列:translate平移，scale縮放，rotating旋轉
• 動畫（animate）
• 過渡（transition）
• flex
• 盒模型box-sizing:border-box
• 線性漸變（line-gradient）
• 偽元素，文字陰影，邊框陰影，圓角

10.display:none和visibility:hidden區別

display:none隱藏元素，不占位

visibility:hidden隱藏元素占位

11.less和scss

less是一種css預處理語言，目的是提高開發效率以及提高代碼的可維護性

scss是一種css預處理語言，作用和less一樣

?

?

BOM/DOM

1.在一個頁面中給多個元素設置相同的id，會導致什么問題？

通過is獲取dom元素的時候，只能獲取到第一個元素，后面元素無法正常獲取

2.列舉dom元素增刪改查的api

創建dom:document.createElement（）

查找dom:

document.getElementById()

document.getElementByClassName()

document.getElementByName()

document.querySelector()

document.querySelectorAll()

追加dom:parentDom.appendChid()

移除dom:parentDom.removeChild()

3.bom中有哪些常用對象

location:

location.href頁面url地址

location.hash頁面url#后面的部分

location.search頁面url？后面的部分

location.reload()刷新頁面

navigator:

navigator.userAgent瀏覽器的userAgent信息

history:

history.go(1)前進1步

history.go(-1)后退1步

history.forward()前進

history.back()后退

screen:

screen.availWidth屏幕有效寬度

screen.availHeight屏幕有效高度

4.什么是事件委托？原理？

本應該注冊給子元素的事件，注冊給父元素（兒子要做的事情，不想做，交給老子做）

原理:事件冒泡，子元素的事件向外冒泡，觸發父元素的相同事件，根據事件對象找到真正的事件源

優點:

• 節省內存，減少事件注冊
• 新增子對象時，無需對其進行事件綁定

缺點:

• 如果把所有事件都用事件代理，可能會出現事件誤判。即本不該被觸發的事件被綁定上了事件。

5.js的幾種定時器，區別？

setInterval:周期定時器，間隔一定時間執行多次

setTimeout:延時定時器，只執行一次

?

web

1.列舉常見的瀏覽器兼容問題

https://blog.csdn.net/blackhehaha/article/details/108593638

創建異步對象

主流瀏覽器發送Ajax，使用xmlhttprequest創建異步對象

ie瀏覽器用xactive創建異步對象

注冊事件

主流瀏覽器:

addEventListener("eventType","handler","true/false")

removeEventListener("eventType","handler","true/false")

ie瀏覽器:

attachEvent("eventType",handler)

detachEvent("eventType",handler)

阻止冒泡

主流瀏覽器:event.stopPropagation()

ie瀏覽器:event.cancleBubble=true

獲取事件源

主流瀏覽器:event.target

ie瀏覽器:event.srcElement

2.如何實現多個標簽頁的通信？

?

localstorage

localstorage是storage對象的實例，對storage對象進行任何修改，都會觸發storage事件。當通過屬性或setItem()方法保存數據，使用delete操作符或removeItem()刪除數據，或者調用clear（）都會觸發該事件

jQuery

1.$each（）和$（selector）.each()有什么不同？

$each（）可循環任何數組和jQuery對象組成的偽數組

$（selector）.each（）只能循環jQuery對象組成的偽數組

2.$each（）和foreach區別

$each（）可循環任何數組和jQuery對象組成的偽數組

foreach只能循環普通數組

$each（arr，function（索引，循環單項，數組本身）｛｛｝）

arr.foreach(function (循環單項，索引，數組本身)｛｝)

3.原生js的window.onload與jQuery的$（document）.ready（function（）｛｝，$function（）｛｝）區別

執行時機不一樣

前者會等頁面元素渲染完畢并且資源文件加載完畢后才會執行

后者會在當前頁面元素加載完畢之后就會執行

4.jQuery實現連式編程的原理

jQuery的方法最后都會return一個this，這個this就是當前元素的jQuery對象

5.jQuery如何多次給同一個標簽綁定同一個事件？

使用addEventListener（事件名，function（）｛｝）注冊的事件，不會出現事件覆蓋

6.如何開發jQuery插件？

$.fn:可以通過任意jQuery對象來調用

$.extend:只能通過$頂級對象來調用

7.jQuery哪些方法不支持鏈式操作？

$.trim()? $.each()? $(selector).html()??

$(selector).text()

vue

1.vue如何封裝一個組件？

定義一個后綴名為.vue的組件

template模板部分：引入組件標簽

script邏輯部分：

improt? 組件名?from?組件位置

export?default{

component：{組件名}

}

style樣式部分：設置組件樣式

2.computed和watch的區別

computed存放不帶參數的方法，使用時不用（） methods存放帶參數的方法，使用時用（）

computed是計算屬性，可以根據data中的數據成員，動態計算出一個新的數據成員，這個數據成員在data中并不存在，計算屬性的函數必須有返回值

watch是監聽器，可以監視data中某一個數據成員的改變或路由中某些屬性的改變，根據這個改變，做一些其他操作

3.對vue中插槽的理解？

?

插槽分三種:匿名插槽，具名插槽，作用域插槽

定義:是子組件提供給父組件使用的一個占位符

子組件:寫一個插槽

父組件:引入子組件后，給占位符填充內容

4.v-if和v-show的區別

v-show通過css方式來隱藏元素，元素隱藏占據頁面空間

v-if根據條件是否成立決定是否創建元素，元素刪除后不占據頁面空間

如果某個元素需要頻繁切換顯示狀態，用v-show，因為頻繁創建銷毀dom需要性能開銷

5.什么是vuex，在什么場景下使用

全局組件狀態管理，實現組件間數據共享

state存放數據的狀態，但是不能修改數據

Getters用來獲取數據

mutations同步操作數據

actions異步操作數據

moudles讓每一個模塊都有自己的state，Getters，mutations，actions，結構清晰，便于修改

補充:構建大中型頁面使用vuex，一般的就用store 為什么mutations不能異步？ 如果mutation支持異步操作，就沒有辦法知道狀態是何時更新的，無法很好的進行狀態的追蹤，給調試帶來困難。

6.vue路由的使用步驟

• 下載路由模塊
• 創建路由對象
• 配置路由規則
• 將路由對象注冊為vue實例對象的成員屬性

7.常見的vue組件庫

PC端:element-ui，ant-design，iview

移動端:mint-ui，vant，vux

8.對mvvm的理解

mvvm由三部分組成

m數據層---負責初始化數據

v視圖層---負責頁面展示

vm視圖模型層---將數據層的數據傳遞給視圖層，將視圖層的行為傳遞到數據層進行持久化

9.vue的生命周期

過程:開始創建-初始化數據-編譯模板-掛載dom-渲染-更新-渲染-卸載

詳解:

必經階段:

beforeCreated:沒有data，沒有訪問器屬性（methods），沒有虛擬dom樹（el）

created:有data，有訪問器屬性，沒有虛擬dom樹

beforeMounted:有data，有訪問器屬性，有虛擬dom樹，頁面內容未加載

mounted:有data，有訪問器屬性，有虛擬dom樹，頁面內容加載完成

不必經階段:

beforeUpdated，updated:通過訪問器屬性修改屬性值，觸發通知函數，掃描虛擬dom樹，只更新受影響的元素

beforeDestroyed，destroyed:只刪除虛擬dom樹，打斷與new vue（）頁面的聯系，它還在內存中

?

10.vue實現雙向數據綁定的原理？

通過數據劫持和發布者訂閱者功能來實現 利用Object.defineProperty()對屬性添加get，set方法，實現數據變化視圖跟著變化 利用事件監聽，實現視圖變化數據跟著變化

執行過程:

• 實現一個監聽器Observer，用來劫持并監聽所有屬性，如果有變動的，就通知訂閱者
• 實現一個訂閱者Watcher，每個Watcher都綁定一個更新函數，Watcher可以收到屬性的變化通知并執行相應的函數，從而更新視圖
• 實現一個消息訂閱器 Dep ,主要收集訂閱者，當 Observe監聽到發生變化，就通知Dep 再去通知Watcher去觸發更新
• 實現一個解析器Compile，可以掃描和解析每個節點的相關指令，若節點存在指令，則Compile初始化這類節點的模板數據（使其顯示在視圖上），以及初始化相應的訂閱者?

11.vue創建組件的時候，data為什么要使用匿名函數return一個對象？

起因:

data數據是Vue原型上的屬性，存在于內存當中，對象是對于內存地址的引用，如果data以對象的形式保存數據，每個組件使用了data會改變data原有屬性，造成組件之間數據相互影響

用函數:

• 函數可以封裝屬性和方法
• 構造函數會實例化一個對象，相當于data副本，繼承data的屬性和方法
• 組件使用data對象副本，互不影響

12.vue組件傳參

父傳子:

每個組件的數據都需要向服務器發請求，每次都發，浪費性能，所以讓父組件發送一次請求，子組件通過父組件傳遞數據就行

方法:給父組件里的子組件標簽自定義一個屬性，值為要傳遞的屬性或方法，子組件用props來接收

子傳父:

先在父組件methods里面聲明一個方法（帶參） 在父組件里的子組件標簽加個自定義事件 把方法賦給那個自定義事件 在子組件中用this.$emit（方法，this.數據）

兄弟傳參:

創建一個事件中心，傳遞和接收事件 const eventBus=new Vue（）

使用$emit（）發布事件-傳遞值

使用$on（）訂閱事件-接收值

使用$off（）移除事件監聽

13.vue有幾種路由模式？

hash模式:是默認的

history模式:可以在創建路由對象的時候，使用mode屬性來切換路由模式

哈希模式:

優點: ?

• 項目打包部署到云服務器，主頁面刷新不會報錯
• 路由修改的是#中的信息，對后端沒影響

缺點: ?

• 有#，不美觀 瀏覽器無法把哈希值傳遞給服務器，不利于seo搜索

history模式:

優點:

• ? 美觀

缺點: ?

• 服務器運行時進行刷新容易出現404錯誤（原因是刷新需要向服務器發請求，服務器找不到對應的響應或資源就會報錯）

14.路由傳參之query和params

query傳參:

類似get請求

參數拼接在地址欄中（？id=123）

可配合path和name

例子:

編程式傳參 data:{ username: '' }, login() { ... this.$router.push({ path: '/home', query: { username: this.username }, }) }

聲明式傳參 <router-link :to="{ path: '/home', query: { username: username } }">

取值:this.$route.query.username

params傳參:

類似post請求

參數不在地址欄

只能配合name，否則失效

params傳參頁面刷新后會失效

例子:

編程式傳參 data:{ username: '' }, login() { ... this.$router.push({ name: 'home', //注意使用 params 時一定不能使用 path params: { username: this.username }, }) }

聲明式傳參 <router-link :to="{ name: 'home', params: { username: username } }">

取值:this.$route.params.username

補充:name是給path取的別名，地址欄中顯示的是path名

15.vue的優點

• 輕量級框架，大小只有幾十kb
• 單頁面應用
• 組件化開發
• 雙向數據綁定
• 簡單易學，國人開發，便于理解
• 視圖，數據分離
• 虛擬dom，提高性能和運行速度

16.vue路由導航守衛和應用場景

路由守衛是在頁面進行路由跳轉時進行一些處理

1.全局路由

全局前置守衛（beforeEach）

全局后置鉤子（afterEach）

2.路由獨享守衛

beforeEnter（to，from，next）｛｝

?meta：路由元信息，也就是每個路由身上攜帶的信息，用來存放自定義配置

3.組件內的導航鉤子

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

17.vue如何定義一個過濾器？

定義全局過濾器

Vue.filter('過濾器名稱'，function（input）｛return input｝)

定義局部過濾器

18.vue如何自定義一個vue指令？

定義全局指令

定義私有指令

19.vue路由模塊中$route和$router的區別？

$route中存儲跟路由相關的屬性如$route.params,$route.query

$router中存儲的是和路由相關的方法如$router.push(),$router.go()

20.v-for指令循環遍歷時key屬性的作用？

• 舊虛擬DOM中找到了與新虛擬DOM相同的key:若虛擬DOM中內容沒變,直接使用之前的真實DOM，
• 若虛擬DOM中內容變了,則生成新的真實DOM,隨后替換掉頁面中之前的真實DOM。
• 舊虛擬DOM中未找到與新虛擬DOM相同的key 創建新的真實DOM,隨后渲染到頁面。

補充：用index作為key可能引發的問題

• 若對數據進行：逆序添加、逆序刪除等破壞順序操作，產生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低。
• 如果結構中還包含輸入類的DOM，會產生錯誤DOM更新 ==> 界面有問題。

?

?

21.vue和react的區別

vue實現了雙向數據綁定，提供了指令，使用插值表達式進行數據渲染

react是單向數據流，沒有指令，用jsx渲染數據

22.vue有哪些常用的事件修飾符

?

23.vue常用的指令

v-model:實現雙向數據綁定

v-bind:綁定屬性

v-on:注冊事件，綁定方法

v-html:設置標簽內容

v-text:設置標簽內容

v-clack:解決插值表達式閃爍問題

v-for:循環遍歷數組或對象

24.vue如何解決插值表達式閃爍問題？

使用v-html或v-text

使用v-clack解決插值閃爍

第一步:聲明屬性選擇器[v-clack]｛display:none｝

第二步:在插值表達式所在標簽添加屬性v-clack

25.vue如何實現通過錨點值的改變切換組件？

監聽hashchange事件

window.addEventListener('hashchange',function（）｛｝)

26.vue中如何避免組件間樣式沖突

scoped

給父元素添加class名

scoped原理:給組件內的所有標簽添加data自定義屬性，實現樣式私有化

27.vue如何動態添加一個路由規則？

使用router.addRoutes([｛path:",component:"｝])

28.vue優化頁面加載效率的辦法

• 使用路由懶加載和組件懶加載
• 不要打包一些公共的依賴（vue，組件庫）
• 使用cdn加載依賴文件

28.路由懶加載，組件懶加載

路由懶加載:

是通過異步的方式來加載對應的路由組件，默認是將所有的組件全部加載并打包

好處:

可以提高頁面的加載速度，尤其是首頁的加載速度。因為使用懶加載后，加載首頁的時候，就不需要加載其他頁面對應的組件，在需要的時候再加載

組件懶加載：

當用到某個路徑時，觸發箭頭函數，臨時加載組件

path:路徑名

name:xxx

component:（）=>import（組件位置）

?

29.vue如何觸發一個自定義事件？

this.$emit(event,'數據')

30.vue如何監聽自定義事件的執行？

this.$on(event,callback)

31.vue如何移除自定義事件？

this.$off(event,callback)

32.vm.$mount(selector)方法的作用

手動把一個vue實例掛載到頁面上

33.keep-alive組件的作用是什么？

是vue的內置組件，保留組件在內存中，防止重復渲染dom

actived

deactived

34.vue如何手動銷毀一個vue實例

調用vm.$destory()可銷毀一個vue實例

35.vue有哪些內置的組件？

component，slot，transition，transition-group，keep-alive

36.vue實例中有哪些屬性？

vm.$data可以獲取vm實例對象data中的數據

vm.$props可以獲取vm組件接收到的props對象數據

vm.$el可以獲取vm實例對象的根dom元素

vm.$refs可以獲取vm實例中注冊過得ref特性的所有dom組件和組件實例

37.vue.use(plugin)的作用？注意問題？

作用是安裝一個vue插件

該方法需要在調用new vue（）之前被調用

38.vm.$nextTick(fn)的作用

語法:this.$nextTick（回調函數）

延遲某個操作的執行，直到dom更新以后再執行

是專門在vue所有生命周期執行完之后才觸發的一個回調函數（數據更新完畢，dom渲染完畢，自動執行這個函數）

原理:Vue 在更新 DOM 時是異步執行的，在修改數據后，視圖不會立刻更新，而是等同一事件循環中的所有數據變化完成之后，再統一進行視圖更新。所以修改完數據，立即在方法中獲取DOM，獲取的仍然是未修改的DOM。 $nextTick的作用是：該方法中的代碼會在當前渲染完成后執行，就解決了異步渲染獲取不到更新后DOM的問題了。 $nextTick的原理：$nextTick本質是返回一個Promise 。應用場景：在鉤子函數created()里面想要獲取操作Dom，把操作DOM的方法放在$nextTick中

39.vue中混入（mixin）有什么作用

分發組件中的可復用功能

一個混入對象可以包含任意組件對象

40.如何開發一個vue插件？

vue.js的插件應該暴露一個install方法

這個方法的第一個參數是vue構造器

第二個參數是可選的選項對象

41.什么是ssr？如何實現ssr？

ssr是服務器渲染，讓頁面的渲染在服務器端完成，環境為nodejs。vue中可以使用nuxt實現服務端渲染。

42.什么是spa？

?

優點:

• 用戶體驗好，內容改變不需要重新加載整個頁面
• 良好的前后端分離，分工明確

缺點:

• 不利于搜索引擎的抓取
• 首屏加載速度慢

43.首屏加載慢怎么解決

首屏加載:瀏覽器從響應用戶輸入網址地址，到首屏內容渲染完成的時間，

原因:

• 網絡延遲
• 資源文件體積過大
• 資源重復發送請求
• 加載腳本時，渲染內容阻塞

解決:

• 減少入口文件體積-路由懶加載
• 靜態資源本地緩存-localstorage
• UI框架按需加載
• 組件重復打包-minChunks3，表示會把使用3次及以上的包抽離出來，放進公共依賴文件，避免了重復加載組件
• 圖片資源壓縮
• gzip壓縮
• 使用SSR

44.vue中data的屬性可以和methods中方法同名嗎，為什么？

可以，methods里面的方法會被data的屬性覆蓋

45.vue權限管理

后端-對接口訪問權限

前端-對菜單訪問權限?

• 菜單管理：可以實現對后臺管理系統左側菜單的管理，支持更換圖標、更換名稱、控制菜單顯示和排序；
• 資源管理：實現了基于訪問路徑的后臺動態權限控制，控制的權限可以精確到接口級別；
• 角色管理：可以自定義角色，并為角色分配菜單和資源；
• 后臺用戶管理：可以對后臺用戶進行管理并分配角色，支持分配多個角色。

?

46.vue性能優化

編碼階段

• 盡量減少data中的數據，data中的數據都會增加getter和setter，會收集對應的watcher
• v-if和v-for不能連用 如果需要使用v-for給每項元素綁定事件時使用事件代理
• SPA 頁面采用keep-alive緩存組件
• 在更多的情況下，使用v-if替代v-show
• key保證唯一
• 使用路由懶加載、異步組件
• 防抖、節流
• 第三方模塊按需導入
• 長列表滾動到可視區域動態加載
• 圖片懶加載

SEO優化

• 服務端渲染SSR
• 預渲染
• 打包優化

壓縮代碼

• 使用cdn加載第三方模塊
• splitChunks抽離公共文件

47.組件中name的作用 ?

• 使用keep-alive時，可搭配組件name進行緩存過濾
• dom作遞歸組件時需要調用自身name
• vue-devtools調試工具里顯示的組件名稱是由name決定的

48.虛擬dom的優缺點

優點: ?

減少了dom操作，減少了回流重繪

具有局部更新能力，提高性能

缺點: ?

首次渲染dom時，加載慢

49.vuex持久化處理

• 把數據存儲在localstorage或sessionstorage
• 數據很多的話，用插件vuex-persistedstate和vuex-persist

?

50.$refs

用ref給普通標簽添加屬性或方法，用this.$refs.屬性名/方法名讀取

用ref給組件標簽添加屬性或方法，this指的是ref所在的組件對象，this.$refs.屬性名/方法名讀取的就是ref所在組件的屬性或方法

總結:

ref是用來給元素或子組件注冊引用信息的，用在html標簽上獲取的就是對應dom元素，用在組件標簽上獲取的就是組件實例對象。

使用方式: 打標識:ref=xxx（寫在標簽里面） 獲取:this.$refs.xxx

51.全局事件總線

實現任意組件間通信?

?52.數據代理

給對象添加屬性: Object.defineProperty（對象名，屬性名，配置項）

配置項:

value:屬性值

enumerable:是否可枚舉

writable:是否可修改

configurable:是否可刪除

get:讀取屬性

set:修改屬性

數據代理定義: 通過一個對象代理對另一個對象中屬性的操作

?

?53.關于state和...mapState輔助函數

state：

state和data類似，都是存儲數據/狀態值的，但是要想實現響應式，要把state掛載到computed計算屬性上，有利于state的值發生改變的時候及時響應給子組件（data接收的值不能及時響應更新,用computed就可以.）

...mapState：

輔助函數，從vuex里的state里拿數據，用什么數據就拿什么，不用每次都用this.$store.state

http/Ajax

1.常見http狀態碼

100---正在初始化（一般看不到）

101---正在切換協議

200---響應主體內容已經成功返回

202---表示接受

301---請求的url永久重定向

302---請求的url臨時轉移

304---獲取的內容是讀取緩存中的數據

400---客戶端傳給服務器端的參數出現錯誤

401---未認證，沒有登錄網站

403---禁止訪問，沒有權限

404---客戶端訪問的資源不存在

500---未知的服務器錯誤

503---服務器超負荷

2.http請求方式

• get請求指定的頁面信息，并返回實體主體
• head類似get，返回的響應沒有具體內容，用于獲取報頭
• post向指定資源提交數據進行處理請求，如提交表單，上傳文件，數據在請求體中，post可能會導致新的資源建立和原有資源的修改
• put從客戶端向服務器端傳送的數據取代指定的文檔內容
• 其他略

3.Ajax工作原理

• 創建對象var xhr = new XMLHTTPRequeat（）
• 設置請求行xhr.open(請求方式，請求地址)
• 發送get方式xhr.send()

如果是post還要設置請求頭信息

4.如何解決跨域？

同源策略:

瀏覽器的的一個網站只能訪問本網站的資源，不能訪問其他網站的資源（script，src，href，img，iframe除外），必須是同協議，同域名，同端口

解決:

• jsonp:利用的原理是script標簽可以跨域請求資源，將回調函數作為參數拼接在url中。后端收到請求，調用該回調函數，并將數據作為參數返回去，注意設置響應頭返回文檔類型，應該設置成javascript。優點是簡單，兼容性好。缺點是只能用get方法，不安全
• cors:設置后端來實現，服務端設置 Access-Control-Allow-Origin
• postMessage:異步方式進行通信，跨文本，多窗口，跨域傳遞。關鍵字:message發送的數據，targetOrigin指定接收的url
• websocket:持久化雙向通信協議，WebSocket 在建立連接時需要借助 HTTP 協議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關了
• node中間件代理
• nginx反向代理:和node中間件代理類似，需要搭建一個nginx服務器。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持session，不需要修改任何代碼，并且不會影響服務器性能
• window.name+iframe
• location.hash+iframe
• document.domain+iframe

?

5.jsonp跨域原理

在頁面動態創建script標簽，使其src屬性指向后端數據接口，后端數據接口必須返回一個js函數的調用字符串，將要返回給前端的json數據作為函數的實參，當script標簽加載完畢后會在瀏覽器中執行后端返回的函數調用。所以前端必須先對調用的函數進行聲明。因為函數是在js中聲明的，所以可以在函數內部拿到服務器端調用時傳入的實參，所以就間接實現了跨域請求數據。

6.什么是同步和異步，哪種執行方式好？

同步指一個程序執行完了去執行另外一個程序

異步指多個程序同時執行

異步效率高，因為異步不會出現阻塞現象，程序的執行互不影響

?

7.get和post的區別

get是把要傳遞的參數拼在url中，傳遞數量少，不安全

post是把要傳遞的參數放在請求體里，傳遞數據大，安全

8.localstorage，sessionstorage和cookie的區別

9.一個頁面從輸入url到頁面加載顯示完成，整個過程發生了什么

• 瀏覽器查找域名對應的IP地址
• 瀏覽器向web服務器發送http請求
• 服務器處理請求（通過路由讀取資源）
• 服務器返回一個http響應（content-type設置為text/html）
• 瀏覽器進行dom樹構建
• 瀏覽器發送請求獲取嵌在html中的資源
• 瀏覽器顯示完成頁面

10.http切換到https需要做什么？

只需要在web服務器中加入一個ssl的安全認證模塊

11.什么是restfulapi？

restfulapi的核心思想就是使用http請求方式配合資源對象的方式來完成對服務器某個資源的操作（http動詞+資源對象）

動詞通常就是5種http方法

get讀取

post創建

put更新

patch更新，部分更新

delete刪除

12.什么是漸進增強和優雅降級

漸進增強:

針對低版本瀏覽器進行構建頁面，保證最基本功能，再針對高級瀏覽器進行效果，交互等的改進和追加功能，給用戶更好的體驗。

優雅降級:

一開始就構建完整的功能，然后針對低版本瀏覽器進行兼容。

13.什么是頁面的回流和重繪？

回流:

當頁面結構或標簽尺寸發生變化，瀏覽器需要對頁面進行重排并且重新渲染

重繪:

當頁面上標簽的外觀發生改變，瀏覽器對頁面進行重新渲染

關系:回流一定會引起重繪，重繪不一定引起回流

要提高頁面性能，就要盡量減少頁面的回流和重繪

14.如何優化頁面性能？

資源加載方面:

• 減少http請求次數---代碼合并，使用精靈圖
• 減少http請求數據量---代碼壓縮，合理設置緩存
• 啟用cdn加速服務

代碼層面:

• 避免濫用全局變量，減少作用域查找，不要濫用閉包
• 減少dom操作，對已經查找到的dom對象進行緩存，避免重復查找
• 使用圖片懶加載，避免單次加載圖片數量過多導致頁面卡頓
• 將script標簽寫在頁面底部，因為JS會阻塞頁面的渲染
• 不要在本地書寫大量cookie，因為cookie會伴隨每一次http請求

15.什么是cdn加速？

主要是對網站靜態資源加速，需要購買，cdn會對客戶的網頁靜態資源進行緩存處理，當有人第二次訪問時，就從cdn節點上獲取網站所需靜態資源。

16.什么是seo？

seo是搜索引擎優化，讓搜索引擎抓取網頁。方法:合理設置網頁的title，keywords，description

17.為什么利用多個域名存儲靜態資源更有效？

瀏覽器對請求靜態資源文件有并發數量限制，每次只能請求同一個域名下的若干個資源文件，如果把資源文件存放在多個不同的域名下面就會突破瀏覽器的限制。而且，啟用多個靜態資源服務器，可以減輕主服務器的壓力。

18.移動端點擊事件有多少秒的延遲？原因？解決？

300ms

原因:瀏覽器為了保留雙擊縮放的功能

解決:

使用touch觸摸事件模擬點擊事件

使用fastclick解決

禁止頁面縮放功能

19.網站攻擊方式有哪些？

xss跨站腳本攻擊

csrf跨站請求偽造

20.js中的垃圾回收機制

標記清除（mark and sweep）

大部分瀏覽器用此方法，當變量進入執行環境，垃圾回收機制將其標記為“進入環境”，當變量離開環境，將其標記為“離開環境”，在離開環境之后還有的變量就是要被刪除的變量。

垃圾收集器給內存中所有變量都加上標記，然后去掉環境中的變量以及被環境中的變量引用的變量標記。在此之后，再被加上的標記的變量即為需要回收的變量，因為環境中的變量已經無法訪問這些變量

引用計數（reference coynting）

此方法會引起內存泄漏，低版本ie用。

原理:追蹤一個值的引用次數，當聲明一個變量并且給它賦值引用類型，次數加1，當這個變量指向其他引用類型，次數減1，當該值引用次數為0時，回收

21.JS是單線程嗎？

是

單位時間內只能處理一個進程

22.JS如何實現異步操作？

由瀏覽器提供的子線程完成

回調函數、事件監聽、setTimeout、Promise、生成器Generators/yield、async/await

所有異步任務都是在同步任務執行結束之后，從任務隊列中依次取出執行。

• 回調函數是異步操作最基本的方法，比如AJAX回調，回調函數的優點是簡單、容易理解和實現，缺點是不利于代碼的閱讀和維護，各個部分之間高度耦合，使得程序結構混亂、流程難以追蹤（尤其是多個回調函數嵌套的情況），而且每個任務只能指定一個回調函數。此外它不能使用 try catch 捕獲錯誤，不能直接 return
• Promise包裝了一個異步調用并生成一個Promise實例，當異步調用返回的時候根據調用的結果分別調用實例化時傳入的resolve 和 reject方法，then接收到對應的數據，做出相應的處理。Promise不僅能夠捕獲錯誤，而且也很好地解決了回調地獄的問題，缺點是無法取消 Promise，錯誤需要通過回調函數捕獲。
• Generator 函數是 ES6 提供的一種異步編程解決方案，Generator 函數是一個狀態機，封裝了多個內部狀態，可暫停函數, yield可暫停，next方法可啟動，每次返回的是yield后的表達式結果。優點是異步語義清晰，缺點是手動迭代`Generator` 函數很麻煩，實現邏輯有點繞
• async/await是基于Promise實現的，async/awt使得異步代碼看起來像同步代碼，所以優點是，使用方法清晰明了，缺點是awt 將異步代碼改造成了同步代碼，如果多個異步代碼沒有依賴性卻使用了 awt 會導致性能上的降低，代碼沒有依賴性的話，完全可以使用 Promise.all 的方式。

JS 異步編程進化史：callback -> promise -> generator/yield -> async/awt。

async/awt函數對 Generator 函數的改進，體現在以下三點：

- 內置執行器。 Generator 函數的執行必須靠執行器，而 async 函數自帶執行器。也就是說，async 函數的執行，與普通函數一模一樣，只要一行。

- 更廣的適用性。 yield 命令后面只能是 Thunk 函數或 Promise 對象，而 async 函數的 awt 命令后面，可以跟 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時等同于同步操作）。 - -更好的語義。 async 和 awt，比起星號和 yield，語義更清楚了。async 表示函數里有異步操作，awt 表示緊跟在后面的表達式需要等待結果。 目前使用很廣泛的就是promise和async/aw

23.分別介紹mvc，mvvm，mvp三種模式

mvc

是后端語言的一種設計模式，主要實現對代碼分層。

m是數據模型，主要負責操作數據庫。

v是視圖層，主要負責頁面展示。

c是業務控制層，主要負責控制業務邏輯，將m數據層的數據交給v視圖層展示。

mvvm

是前端的一種設計模式，從mvc演變而來

m數據層，主要負責數據和方法初始化

v視圖層

vm視圖模型層，負責連接數據層和視圖層，將數據層的數據給視圖層展示，將視圖層的行為傳遞給數據層

mvp

后端設計模式，應用于安卓開發

m數據層

v視圖層

p業務邏輯

24.清理瀏覽器緩存的方式

緩存:

第一次訪問網站的時候，電腦會把網站上的圖片和數據下載到電腦上，當再次訪問該網站的時候，網站就會從電腦中直接加載出來

好處: 緩解服務器壓力 提升性能

緩存位置:

memory cache:存儲操作系統緩存文件等資源，在內存

disk cache:存續圖像和網頁等資源，在硬盤

清理方式:

強緩存:當訪問URL時，不會向服務器發送請求，直接從緩存中讀取資源，但是會返回200的狀態碼 協商緩存:強緩存失效后，瀏覽器攜帶緩存標識向服務器發送請求，由服務器根據緩存標識來決定是否使用緩存的過程

強緩存過程:

?

協商緩存過程:

協商緩存生效，返回304

協商緩存失效，返回200和請求結果

?

如何設置強緩存和協商緩存

強緩存: ?

• express:設置緩存到期時間
• cache-control:設置誰可以緩存

public:資源和客戶端都可以緩存

privite：資源只有客戶端可以緩存

no-cache：客戶端緩存資源，但是是否緩存需要經過協商緩存來驗證

no-store：不使用緩存

max-age：緩存保質期 ?

pragma:值為no-cache，效果一樣

協商緩存: ?

• last-modified:服務器響應請求時，返回文件最后被修改的時間
• if-modified-since:客戶端再次發起該請求時，攜帶上次請求返回的Last-Modified值，服務器收到該請求，發現請求頭含有If-Modified-Since字段，則會根據If-Modified-Since的字段值與該資源在服務器的最后被修改時間做對比，若服務器的資源最后被修改時間大于If-Modified-Since的字段值，則重新返回資源，狀態碼為200；否則則返回304，代表資源無更新，可繼續使用緩存文件
• etag:服務器響應請求時，返回資源文件的唯一標識
• if-none-match:客戶端再次發起該請求時，攜帶上次請求返回的唯一標識Etag值，服務器收到該請求后，發現該請求頭中含有If-None-Match，則會根據If-None-Match的字段值與該資源在服務器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200

25.cookie機制，session機制，token機制

cookie機制: ?

• 客戶端向服務器發送第一次請求，服務器接收并處理請求
• 服務器端處理后，返回響應數據，相應數據中攜帶cookie信息希望客戶端儲存
• 客戶端接收響應，把cookie存入本地。下次發送請求時，自動攜帶cookie
• 服務器端第二次接收請求，解析到cookie信息，知道客戶端是誰，完成http狀態管理

session機制:

• ?客戶端向服務器發送第一次請求，服務器接收并處理請求
• 服務器端分配一個sessionID，把它對應的用戶端信息存在服務器端，以cookie的方式把sessionID和數據返回客戶端
• 客戶端保存sessionID，下次發請求時，攜帶
• 服務器端接收請求，解析到sessionID獲取到以前存過的客戶端信息，完成http狀態管理

?

token機制:

Token登錄認證詳解_吉諾比利20的博客-CSDN博客_token認證

?

?

es6新特性

1.es6新增了哪些數據類型？

基本:symbol，set，map

復雜:weakset，weakmap，typearray

2.es6新增了哪些特性？

let聲明變量

const聲明常量

map和set數據類型

模板字符串

對象數組解構賦值

展開運算符

函數默認參數

對象字面量的增強（屬性名=屬性值，寫一個）

promise異步對象

calss類

3.let和var的區別

let聲明的變量有塊級作用域，沒有變量提升

var聲明的變量沒有塊級作用域，有變量提升

4.async/await的使用場景

async用來修飾函數的聲明，會變成一個異步函數

await用來修飾函數的調用，必須返回一個promise異步對象，用await修飾后，會將promise異步對象轉換為同步操作

5.箭頭函數作用和使用

箭頭函數使函數內部的this指向和函數外部保持一致

箭頭函數內部沒有this指向，可以在Ajax的回調函數中使用，讓回調函數的this指向事件源

可以在定時器的第二個參數使用箭頭函數，避免函數內部的this指向全局window

6.對promise的理解

promise可以解決傳統的回調地獄

promise提供一個構造函數，在使用時必須通過new創建一個實例對象，在創建實例對象時需要傳遞一個匿名函數，這個匿名函數需要兩個參數（resolve，reject），resolve成功處理函數，reject失敗處理函數。成功/失敗的處理函數觸發由具體業務邏輯決定。

resolve和reject需要通過promise實例對象提供的then方法傳遞。promise提供兩個靜態方法all和race。all可以一次執行多個promise實例，返回數組。race也可以一次執行多個promise實例。

微信小程序

1.微信小程序如何實現頁面跳轉？

小程序頁面跳轉:

使用組件

<navigator url ="../home/home">目標頁面</navigator>

使用api

wx.navigateTo(｛url:'../home/home'｝)

tabbar頁面跳轉

使用組件

<navigator url ="../home/home" open-type="switchTab">目標頁面</navigator>

使用api

wx.switchTabbar(｛url:'../index/index'｝)

2.簡單描述小程序的生命周期

分為應用生命周期和頁面生命周期

應用生命周期:

onLaunch:應用啟動，只執行一次

onShow:應用切換到前臺

onHide:應用切換到后臺

noError:運行階段出現錯誤

onPageNotFound:找不到頁面

頁面生命周期:

onLoad:頁面開始加載

onReady:頁面加載完畢

onShow:頁面進入焦點狀態

onHide:頁面進入后臺狀態

3.微信小程序如何請求數據接口？

通過wx.request

4.如何優化小程序代碼包的體積？

分包加載，使用分包加載可以讓小程序代碼體積達到8m

將資源文件盡量放在遠程服務器端

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的面试题整理（全）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。