個(gè)人收集整理前端面試題（答案持續(xù)更新ing）

Vue面試題

1.什么是 vue 生命周期
 Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。
 也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。
 它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后
2.vue生命周期的作用是什么
它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯。
3.第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子
第一次頁(yè)面加載時(shí)會(huì)觸發(fā) 
beforeCreate,
created
beforeMount
mounted
4.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景
生命周期鉤子的一些使用方法： 
beforecreate : 可以在這加個(gè)loading事件，
在加載實(shí)例時(shí)觸發(fā) created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用 mounted : 掛載元素，
獲取到DOM節(jié)點(diǎn) updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù) beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框 nextTick : 更新數(shù)據(jù)后立即操作dom
5.created和mounted的區(qū)別
mounted一般是在html渲染完成后的操作，此時(shí)el，data都已經(jīng)加載完成，一般對(duì)dom的操作都寫在mounted中，例如獲取innerHTML，初始化echarts的時(shí)候。
created一般是在html渲染前的操作，此時(shí)el還是undefined，data已經(jīng)存在。這里不能對(duì)dom進(jìn)行操作
6.vue獲取數(shù)據(jù)在哪個(gè)周期函數(shù)
created

vue路由面試題

1.mvvm 框架是什么？
MVVM是Model-View-ViewModel的簡(jiǎn)寫
總結(jié)：就是vm層（視圖模型層）通過接口從后臺(tái)m層（model層）請(qǐng)求數(shù)據(jù)，vm層繼而和v（view層）實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。
MVVM是MVC的增強(qiáng)版，實(shí)質(zhì)上和MVC沒有本質(zhì)區(qū)別，只是代碼的位置變動(dòng)而已.
優(yōu)點(diǎn)：
    1.Controller清晰簡(jiǎn)潔： ViewModel分離了大部分Controller代碼，更加清晰和容易維護(hù)。
    2.方便測(cè)試：開發(fā)中大部分Bug來(lái)至于邏輯處理，由于ViewModel分離了許多邏輯，可以對(duì)ViewModel構(gòu)造單元測(cè)試。
    3.開發(fā)解耦
缺點(diǎn)：
    1.看起來(lái)代碼會(huì)比MVC多點(diǎn)
    2.需要對(duì)每個(gè)Controller實(shí)現(xiàn)綁定，
2.vue-router 是什么它有哪些組件
路由，其實(shí)就是指向的意思
路由中有三個(gè)基本的概念 route, routes, router。
    1， route，它是一條路由，由這個(gè)英文單詞也可以看出來(lái)，它是單數(shù)， Home按鈕  => home內(nèi)容， 這是一條route,  about按鈕 => about 內(nèi)容， 這是另一條路由?！　　　?    2， routes 是一組路由，把上面的每一條路由組合起來(lái)，形成一個(gè)數(shù)組。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}]　　　　
    3， router 是一個(gè)機(jī)制，相當(dāng)于一個(gè)管理者，它來(lái)管理路由。因?yàn)閞outes 只是定義了一組路由，它放在哪里是靜止的，當(dāng)真正來(lái)了請(qǐng)求，怎么辦？ 就是當(dāng)用戶點(diǎn)擊home 按鈕的時(shí)候，怎么辦？這時(shí)router 就起作用了，它到routes 中去查找，去找到對(duì)應(yīng)的 home 內(nèi)容，所以頁(yè)面中就顯示了 home 內(nèi)容。
    4，客戶端中的路由，實(shí)際上就是dom 元素的顯示和隱藏。當(dāng)頁(yè)面中顯示home 內(nèi)容的時(shí)候，about 中的內(nèi)容全部隱藏，反之也是一樣?？蛻舳寺酚捎袃煞N實(shí)現(xiàn)方式：基于hash 和基于html5 history api.
3.active-class 是哪個(gè)組件的屬性？
一、首先，**active-class是什么?，

    active-class是vue-router模塊的router-link組件中的屬性，用來(lái)做選中樣式的切換；
二、在vue-router中要**使用active-class有兩種方法：

    1、直接在路由js文件中配置linkActiveClass

export default new Router({

  linkActiveClass: 'active',

})

    2、在router-link中寫入active-class

<router-link to="/home" class="menu-home" active-class="active">首頁(yè)</router-link>
4.怎么定義 vue-router 的動(dòng)態(tài)路由 怎么獲取傳過來(lái)的值
1.如果是模塊化機(jī)制，需要調(diào)用 Vue.use(VueRouter)
2.定義路由組件，如：
const Foo = {
   template: '<div>foo</div>'
};
3.定義路由（數(shù)組）
const routes = [
   {
       path: '/foo',
       component: Foo
   }
];
4.創(chuàng)建 router 實(shí)例
const router = new VueRouter({
   routes
});
5.創(chuàng)建和掛載根實(shí)例
const app = new Vue({
   routes
}).mount('#app');
5.vue-router 有哪幾種導(dǎo)航鉤子
1） 全局鉤子函數(shù)：定義在全局的路由對(duì)象中，主要有： 
   beforeEach：在路由切換開始時(shí)調(diào)用 
   afterEach：在每次路由切換成功進(jìn)入激活階段時(shí)被調(diào)用 

2）單獨(dú)路由獨(dú)享的鉤子：可以再路由配置上直接定義beforeEnter 鉤子

3）組件的鉤子函數(shù)：定義在組件的router選項(xiàng)中
   beforeRouteEnter
   beforeRouteUpdate
   beforeRouteLeave
6.route 和router 的區(qū)別
1.router是VueRouter的一個(gè)對(duì)象，通過Vue.use(VueRouter)和VueRouter構(gòu)造函數(shù)得到一個(gè)router的實(shí)例對(duì)象，這個(gè)對(duì)象中是一個(gè)全局的對(duì)象，他包含了所有的路由包含了許多關(guān)鍵的對(duì)象和屬性。

2.route是一個(gè)跳轉(zhuǎn)的路由對(duì)象，每一個(gè)路由都會(huì)有一個(gè)route對(duì)象，是一個(gè)局部的對(duì)象，可以獲取對(duì)應(yīng)的name,path,params,query等我們可以從vue devtools中看到每個(gè)路由對(duì)象的不同
7.vue-router響應(yīng)路由參數(shù)的變化

復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話，你可以簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    }
  }
}
8.vue-router傳參
1.get方法
     傳遞值:
     <router-link :to="{path:'/test',query: {name: id}}">跳轉(zhuǎn)</router-link>
     接收值:
     this.$route.query.name
2.post方法
     傳遞值:
     <router-link :to="{path:'/test',push: {name: id}}">跳轉(zhuǎn)</router-link>
     接收值:
     this.$route.params.name  （在頁(yè)面刷新的時(shí)候就會(huì)消失）
3.路由方法
     傳遞值:
//?問號(hào)的意思是該參數(shù)不是必傳項(xiàng)
//多個(gè)參數(shù)用/:id連接
//path: '/Driver/CarManager/CarSetting/:car_id/:page_type',
{
    path: 'test/:name?',
    name: 'test',
    component: 'test.vue',
    props: true,
}
     接收值:
     props:{name:{required:false,default:''}} （頁(yè)面刷新不消失，可以在路由配置中設(shè)置參數(shù)）
9.vue-router的兩種模式

眾所周知，vue-router有兩種模式，hash模式和history模式，這里來(lái)談?wù)剝烧叩膮^(qū)別。

1.hash模式:
    hash模式背后的原理是onhashchange事件,可以在window對(duì)象上監(jiān)聽這個(gè)事件:

window.onhashchange = function(event){
 
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

2.history路由
    隨著history api的到來(lái)，前端路由開始進(jìn)化了,前面的hashchange，你只能改變#后面的url片段，而history api則給了前端完全的自由
    history api可以分為兩大部分，切換和修改
   
切換歷史狀態(tài):
    history.go(-2);//后退兩次
    history.go(2);//前進(jìn)兩次
    history.back(); //后退
    hsitory.forward(); //前進(jìn)

修改歷史狀態(tài)
    history.pushState({color:'red'}, 'red', 'red'})
 
window.onpopstate = function(event){
    console.log(event.state)
    if(event.state && event.state.color === 'red'){
        document.body.style.color = 'red';
    }
}
 
history.back();
 
history.forward();
10.vue-router實(shí)現(xiàn)路由懶加載（ 動(dòng)態(tài)加載路由 ）
1.vue異步組件===異步加載
    vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實(shí)現(xiàn)按需加載 . 
但是,這種情況下一個(gè)組件生成一個(gè)js文件

2.es提案的import()===路由懶加載
   
3.webpack的require,ensure()
    vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實(shí)現(xiàn)按需加載。 
這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。

vue常見面試題

1.vue優(yōu)點(diǎn)

1.輕量級(jí)框架
    只關(guān)注視圖層,是一個(gè)構(gòu)建數(shù)據(jù)的視圖集合,大小只有幾十kb

2.簡(jiǎn)單易學(xué)
    國(guó)人開發(fā),中文文檔,不存在語(yǔ)言障礙,易于理解和學(xué)習(xí)

3.雙向數(shù)據(jù)綁定
    保留了angular的特點(diǎn),在數(shù)據(jù)操作方面更為簡(jiǎn)單

4.組件化
    保留了react的優(yōu)點(diǎn),實(shí)現(xiàn)了html的封裝和重用,在構(gòu)建單頁(yè)面應(yīng)用方面有著獨(dú)特的優(yōu)勢(shì)

5.視圖,數(shù)據(jù),結(jié)構(gòu)分離
    是數(shù)據(jù)的更改更為簡(jiǎn)單,不需要進(jìn)行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關(guān)操作

6.虛擬DOM
    dom操作時(shí)非常耗費(fèi)性能的,不再使用原生的dom操作節(jié)點(diǎn),極大解放dom操作,但具體操作的還是dom不過是換了另一種方式

7.運(yùn)行速度更快
    像比較與react而言,同樣都是操作虛擬dom,就性能而言,vue存在很大的優(yōu)勢(shì)
2.vue父組件向子組件傳遞數(shù)據(jù)？
父?jìng)髯又饕ㄟ^在父組件v-model綁定數(shù)據(jù)，在子組件進(jìn)行用props進(jìn)行數(shù)據(jù)的接收
 <div id="container">
        <Child :msg="data"></Child>
  </div>
export default {
  data() {
    return {};
  },
  props:["msg"]
};
3.子組件向父組件傳遞事件
this.$emit('父組件綁定事件名')
4.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)
v-show本質(zhì)就是通過設(shè)置css中的display設(shè)置為none;控制隱藏

v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素;

v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷毀和創(chuàng)建，如果要頻繁切換某節(jié)點(diǎn)時(shí)，故v-show性能更好一點(diǎn)。
5.如何讓CSS只在當(dāng)前組件中起作用
<style scoped>
6.<keep-alive></keep-alive>的作用是什么
7.如何獲取dom
8.說出幾種vue當(dāng)中的指令和它的用法？
9. vue-loader是什么？使用它的用途有哪些？
10.為什么使用key
11.axios及安裝
12.axios解決跨域
axios.get( {
     url: "你的api地址",
     headers: {
            "Content-Type": "application/octet-stream",
            "Access-Control-Allow-Origin": "*",
          }
} )
13.v-modal的使用
14.scss的安裝以及使用
15. 請(qǐng)說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？
16.分別簡(jiǎn)述computed和watch的使用場(chǎng)景
17.v-on可以監(jiān)聽多個(gè)方法嗎
18.$nextTick的使用
19.vue組件中data為什么必須是一個(gè)函數(shù)
20.vue事件對(duì)象的使用
21 組件間的通信
22.漸進(jìn)式框架的理解
23.Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的
24.單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)
25.vue中過濾器有什么作用及詳解
26.v-if和v-for的優(yōu)先級(jí)
v-for優(yōu)先級(jí)比v-if高
27.assets和static的區(qū)別
28.列舉常用的指令
29.vue常用的修飾符
30.數(shù)組更新檢測(cè)
31.Vue.set視圖更新
32.自定義指令詳解
33.vue的兩個(gè)核心點(diǎn)
34.vue和jQuery的區(qū)別
35 引進(jìn)組件的步驟
36.Vue-cli打包命令是什么？打包后悔導(dǎo)致路徑問題，應(yīng)該在哪里修改
37.三大框架的對(duì)比
38. 跨組件雙向數(shù)據(jù)綁定
39.delete和Vue.delete刪除數(shù)組的區(qū)別
40.SPA首屏加載慢如何解決
41.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別
42. vue slot
43.你們vue項(xiàng)目是打包了一個(gè)js文件，一個(gè)css文件，還是有多個(gè)文件？
44.vue遇到的坑，如何解決的？
45.Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決？
46.Vue2中注冊(cè)在router-link上事件無(wú)效解決方法
47.RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題
48.axios的特點(diǎn)有哪些
49.請(qǐng)說下封裝 vue 組件的過程？
50.vue 各種組件通信方法（父子 子父 兄弟 爺孫 毫無(wú)關(guān)系的組件）
51.params和query的區(qū)別
52. vue mock數(shù)據(jù)
53 vue封裝通用組件
54.vue初始化頁(yè)面閃動(dòng)問題
55.vue禁止彈窗后的屏幕滾動(dòng)
56.vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法
57.vue常用的UI組件庫(kù)
58. vue如何引進(jìn)本地背景圖片
59. vue如何引進(jìn)sass
60.vue修改打包后靜態(tài)資源路徑的修改

vuex常見面試題

1.vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式

使用場(chǎng)景：
1、購(gòu)物車功能；
2、下單頁(yè)面有選擇優(yōu)惠券按鈕，點(diǎn)擊進(jìn)入優(yōu)惠券頁(yè)面，選擇后返回到下單頁(yè)，數(shù)據(jù)會(huì)綁定回來(lái)，顯示已選擇的優(yōu)惠券；
3、登錄狀態(tài)等等
2.vuex有哪幾種屬性
3.不使用Vuex會(huì)帶來(lái)什么問題
4.Vue.js中ajax請(qǐng)求代碼應(yīng)該寫在組件的methods中還是#####vuex的actions中？
5.vuex一個(gè)例子方法
6.Vuex中如何異步修改狀態(tài)
7.Vuex中actions和mutations的區(qū)別

ES6面試題

1.let const var比較
2.反引號(hào)（`）標(biāo)識(shí)
3.函數(shù)默認(rèn)參數(shù)
4.箭頭函數(shù)
5.屬性簡(jiǎn)寫
6.方法簡(jiǎn)寫
7.Object.keys()方法，獲取對(duì)象的所有屬性名或方法名
8.Object.assign ()原對(duì)象的屬性和方法都合并到了目標(biāo)對(duì)象
9.for...of 循環(huán)
10.import和export
11.Promise對(duì)象
12.解構(gòu)賦值
13.set數(shù)據(jù)結(jié)構(gòu)（可用于快速去重）
14.Spread Operator 展開運(yùn)算符(...)
15.字符串新增方法

ES6數(shù)組面試題

1.forEach()
2.map()
3.filter()
4.reduce()
5.some()
6.every()
7.all()方法

react生命周期面試題

1.react 生命周期函數(shù)
2.react生命周期中，最適合與服務(wù)端進(jìn)行數(shù)據(jù)交互的是哪個(gè)函數(shù)
3.運(yùn)行階段生命周期調(diào)用順序
4.shouldComponentUpdate 是做什么的，（react 性能優(yōu)化是哪個(gè)周期函數(shù)？）
5.指出(組件)生命周期方法的不同

react 基礎(chǔ)面試題

1.React 中 keys 的作用是什么？
2.React 中 refs 的作用是什么？
3.React 中有三種構(gòu)建組件的方式
4.調(diào)用 setState 之后發(fā)生了什么？
5.react diff 原理（?？?，大廠必考）
6.為什么建議傳遞給 setState 的參數(shù)是一個(gè) callback 而不是一個(gè)對(duì)象
7.除了在構(gòu)造函數(shù)中綁定 this，還有其它方式嗎
8.setState第二個(gè)參數(shù)的作用
9.(在構(gòu)造函數(shù)中)調(diào)用 super(props) 的目的是什么
10.簡(jiǎn)述 flux 思想
11.在 React 當(dāng)中 Element 和 Component 有何區(qū)別？
12.描述事件在 React 中的處理方式。
13.createElement 和 cloneElement 有什么區(qū)別？
14.如何告訴 React 它應(yīng)該編譯生產(chǎn)環(huán)境版本？
15.Controlled Component 與 Uncontrolled Component 之間的區(qū)別是什么？

react組件面試題

1.展示組件(Presentational component)和容器組件(Container component)之間有何不同
2.類組件(Class component)和函數(shù)式組件(Functional component)之間有何不同
3.(組件的)狀態(tài)(state)和屬性(props)之間有何不同
4.何為受控組件(controlled component)
5.何為高階組件(higher order component)
6.應(yīng)該在 React 組件的何處發(fā)起 Ajax 請(qǐng)求
7.react中組件傳值
8.什么時(shí)候在功能組件( Class Component )上使用類組件( Functional Component )？
9.受控組件( controlled component )與不受控制的組件( uncontrolled component )有什么區(qū)別？
10.react 組件的劃分業(yè)務(wù)組件技術(shù)組件？
react性能比較面試題
1.vue和react的區(qū)別
2.react性能優(yōu)化的方案
3.React 項(xiàng)目用過什么腳手架
4.介紹一下webpack webpack
5.如果你創(chuàng)建了類似于下面的 Twitter 元素，那么它相關(guān)的類定義是啥樣子的？
6.為什么我們需要使用 React 提供的 Children API 而不是 JavaScript 的 map？

js面試題

1.簡(jiǎn)述同步和異步的區(qū)別
2.怎么添加、移除、復(fù)制、創(chuàng)建、和查找節(jié)點(diǎn)
3.實(shí)現(xiàn)一個(gè)函數(shù)clone 可以對(duì)Javascript中的五種主要數(shù)據(jù)類型（Number、string、Object、Array、Boolean）進(jìn)行復(fù)制
4.如何消除一個(gè)數(shù)組里面重復(fù)的元素
5.寫一個(gè)返回閉包的函數(shù)
6.使用遞歸完成1到100的累加
7.Javascript有哪幾種數(shù)據(jù)類型
8.如何判斷數(shù)據(jù)類型
9.console.log(1+'2')和console.log(1-'2')的打印結(jié)果
10.Js的事件委托是什么，原理是什么
11.如何改變函數(shù)內(nèi)部的this指針的指向
12.列舉幾種解決跨域問題的方式，且說明原理
13.談?wù)劺厥諜C(jī)制的方式及內(nèi)存管理
14.寫一個(gè)function ，清除字符串前后的空格
15.js實(shí)現(xiàn)繼承的方法有哪些
16.判斷一個(gè)變量是否是數(shù)組，有哪些辦法
17.let ，const ，var 有什么區(qū)別
18.箭頭函數(shù)與普通函數(shù)有什么區(qū)別
19.隨機(jī)取1-10之間的整數(shù)
20.new操作符具體干了什么
21.Ajax原理
22.模塊化開發(fā)怎么做
23.異步加載Js的方式有哪些
24.xml和 json的區(qū)別
25.webpack如何實(shí)現(xiàn)打包的
26.常見web安全及防護(hù)原理
27.用過哪些設(shè)計(jì)模式
28.為什么要同源限制
29.offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區(qū)別
30.javascript有哪些方法定義對(duì)象
31.說說你對(duì)promise的了解
32.談?wù)勀銓?duì)AMD、CMD的理解
33.web開發(fā)中會(huì)話跟蹤的方法有哪些
34.介紹js有哪些內(nèi)置對(duì)象？
35.說幾條寫JavaScript的基本規(guī)范？
36.javascript創(chuàng)建對(duì)象的幾種方式？
37.eval是做什么的？
38.null，undefined 的區(qū)別？
39.[“1”, “2”, “3”].map(parseInt) 答案是多少？
40.javascript 代碼中的”use strict”;是什么意思 使用它區(qū)別是什么？
41.js延遲加載的方式有哪些？
42.defer和async
43.說說嚴(yán)格模式的限制
44.attribute和property的區(qū)別是什么？
45.ECMAScript6 怎么寫class么，為什么會(huì)出現(xiàn)class這種東西
46.常見兼容性問題
47.函數(shù)防抖節(jié)流的原理
48.原始類型有哪幾種？null是對(duì)象嗎？
49.為什么console.log(0.2+0.1==0.3) //false
50.說一下JS中類型轉(zhuǎn)換的規(guī)則？
51.深拷貝和淺拷貝的區(qū)別？如何實(shí)現(xiàn)
52.如何判斷this？箭頭函數(shù)的this是什么
53.== 和 ===的區(qū)別
54.什么是閉包
55.JavaScript原型，原型鏈 有什么特點(diǎn)？
56.typeof()和instanceof()的用法區(qū)別
57.什么是變量提升
58.all、apply以及bind函數(shù)內(nèi)部實(shí)現(xiàn)是怎么樣的
59.為什么會(huì)出現(xiàn)setTimeout倒計(jì)時(shí)誤差？如何減少
60.談?wù)勀銓?duì)JS執(zhí)行上下文棧和作用域鏈的理解
61.new的原理是什么？通過new的方式創(chuàng)建對(duì)象和通過字面量創(chuàng)建有什么區(qū)別？
62.prototype 和 proto 區(qū)別是什么？
63.使用ES5實(shí)現(xiàn)一個(gè)繼承？
64.取數(shù)組的最大值（ES5、ES6）
65.ES6新的特性有哪些？
66.promise 有幾種狀態(tài), Promise 有什么優(yōu)缺點(diǎn)
67.Promise構(gòu)造函數(shù)是同步還是異步執(zhí)行，then呢 promise如何實(shí)現(xiàn)then處理
68.Promise和setTimeout的區(qū)別
69.如何實(shí)現(xiàn) Promise.all
70.如何實(shí)現(xiàn) Promise.finally
71.如何判斷img加載完成
72.如何阻止冒泡？
73.如何阻止默認(rèn)事件？
74.ajax請(qǐng)求時(shí)，如何解釋json數(shù)據(jù)
75.json和jsonp的區(qū)別
76.如何用原生js給一個(gè)按鈕綁定兩個(gè)onclick事件？
77.拖拽會(huì)用到哪些事件
78.document.write和innerHTML的區(qū)別
79.jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？
80.瀏覽器是如何渲染頁(yè)面的？
81.$(document).ready()方法和window.onload有什么區(qū)別？
82. jquery中.get()提交和.post()提交有區(qū)別嗎？
83.對(duì)前端路由的理解？前后端路由的區(qū)別？
84.手寫一個(gè)類的繼承
85.XMLHttpRequest：XMLHttpRequest.readyState;狀態(tài)碼的意思
86.正則表達(dá)式常見面試題

瀏覽器/html/css面試題

1.什么是盒模型
元素的外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）就構(gòu)成了CSS盒模型。

IE盒模型的寬度或者高度計(jì)算方式為：width/height = content + padding + border，

W3C盒模型的寬度或者高度計(jì)算方式為：width/height = content。
2.行內(nèi)元素有哪些？塊級(jí)元素有哪些？ 空(void)元素有那些？行內(nèi)元素和塊級(jí)元素有什么區(qū)別？
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）
（2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
    <br> <hr> <img> <input> <link> <meta>
    鮮為人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

區(qū)別：
1、行內(nèi)元素會(huì)在一條直線上排列（默認(rèn)寬度只與內(nèi)容有關(guān)），都是同一行的，水平方向排列。
     塊級(jí)元素各占據(jù)一行（默認(rèn)寬度是它本身父容器的100%（和父元素的寬度一致），與內(nèi)容無(wú)關(guān)），垂直方向排列。

2、塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素。行內(nèi)元素不能包含塊級(jí)元素，只能包含文本或者其它行內(nèi)元素。

3、行內(nèi)元素與塊級(jí)元素屬性的不同，主要是盒模型屬性上：行內(nèi)元素設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效
3.簡(jiǎn)述src和href的區(qū)別
1.src 是指向物件的來(lái)源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要連結(jié)的地方，是與該頁(yè)面有關(guān)聯(lián)的，是引用。在 link和a 等元素上使用。

使用區(qū)別：
src通常用作“拿取”（引入），href 用作 "連結(jié)前往"（引用）。
4.什么是css Hack
根據(jù)不同瀏覽器寫不同的css
5.什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
6.px和em的區(qū)別
px表示像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)：1px = 1/96in)，是絕對(duì)單位 ，不會(huì)因?yàn)槠渌氐某叽缱兓兓?
em表示相對(duì)于父元素的字體大小。em是相對(duì)單位 ，沒有一個(gè)固定的度量值，而是由其父元素元素尺寸來(lái)決定的相對(duì)值。
7.HTML5 新特效
8.Http的狀態(tài)碼有哪些
200 – 請(qǐng)求成功

301 – 資源(網(wǎng)頁(yè)等)被永久轉(zhuǎn)移到其它URL

404 – 請(qǐng)求的資源(網(wǎng)頁(yè)等)不存在

500 – 內(nèi)部服務(wù)器錯(cuò)誤

分類分類描述

1**信息，服務(wù)器收到請(qǐng)求，需要請(qǐng)求者繼續(xù)執(zhí)行操作
2**成功，操作被成功接收并處理
3**重定向，需要進(jìn)一步的操作以完成請(qǐng)求
4**客戶端錯(cuò)誤，請(qǐng)求包含語(yǔ)法錯(cuò)誤或無(wú)法完成請(qǐng)求
5**服務(wù)器錯(cuò)誤，服務(wù)器在處理請(qǐng)求的過程中發(fā)生了錯(cuò)誤
9.一次完整的HTTP事務(wù)是怎么一個(gè)過程
1.域名解析
2. 發(fā)起TCP的3次握手
3.建立TCP連接后發(fā)起http請(qǐng)求
4.服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼
5.瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源（如js、css、圖片等
6.瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶
10.HTTPS是如何實(shí)現(xiàn)加密
11.瀏覽器是如何渲染頁(yè)面的
1、解析文檔構(gòu)建DOM樹:HTML/CSS/JS
2、構(gòu)建渲染樹
    解析文檔完成后，瀏覽器引擎會(huì)將 CSS Rule Tree 附著到DOM Tree 上，并根據(jù)DOM Tree 和 CSS Rule Tree構(gòu)造 Rendering Tree（渲染樹）。此處需要注意：
    Render Tree和DOM Tree的區(qū)別在于，類似Head或display：node之類的東西不會(huì)放在渲染樹中；
    將CSS Rule Tree匹配到DOM Tree需要解析CSS的選擇器，為了提高該過程的性能，DOM樹應(yīng)該盡量小，CSS Selector應(yīng)該盡量使用id和class，避免過度層疊。
3、布局與繪制渲染樹
    解析position, overflow, z-index等等屬性，計(jì)算每一個(gè)渲染樹節(jié)點(diǎn)的位置和大小，此過程被稱為reflow。最后調(diào)用操作系統(tǒng)的Native GUI API完成繪制（repain）。注意：
    渲染樹的節(jié)點(diǎn)，在Gecko中稱為frame，而在webkit中稱為renderer；
    reflow和repaint是兩個(gè)不同的概念，其區(qū)別會(huì)在后文進(jìn)行探討。
12.瀏覽器的內(nèi)核有哪些？分別有什么代表的瀏覽器
firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
opera：以前是用presto內(nèi)核，現(xiàn)在已經(jīng)改用google chrome的blink內(nèi)核
chrome：blink（基于webkit，是google與opera software共同開發(fā)的
13.頁(yè)面導(dǎo)入時(shí)，使用link和@import有什么區(qū)別
用法:
import的寫法
<style type=”text/css”>
    @import url（“a.css”）；
</style>

link的寫法
<link rel="stylesheet" href="index.csss">

區(qū)別:
1.來(lái)源：link屬于XHTML標(biāo)簽，import是CSS提供的方式。link方式除了CSS，還可以定義RSS，定義rel連接屬性等，而import只能加載CSS。
2.順序：link是頁(yè)面加載時(shí)同時(shí)執(zhí)行的，而import是在頁(yè)面加載完之后，才會(huì)執(zhí)行的（所以容易導(dǎo)致樣式閃爍，即開始頁(yè)面沒有樣式，突然會(huì)閃爍一下，然后就有了樣式，就我個(gè)人比較喜歡link引用的方式）
3.js控制的差別：當(dāng)頁(yè)面需要使用javascript控制dom改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)閕mport不是js操作dom可以控制的。也不支持js操作dom來(lái)控制。
14.如何優(yōu)化圖像，圖像格式的區(qū)別
優(yōu)化：
1、不用圖片，盡量用css3特效代替。
2、 使用矢量圖SVG替代位圖。
3、使用恰當(dāng)?shù)膱D片格式。我們常見的圖片格式有JPEG、GIF、PNG。
4、按照HTTP協(xié)議設(shè)置合理的緩存。
5、使用字體圖標(biāo)webfont、CSS Sprites等
6、用CSS或JavaScript實(shí)現(xiàn)預(yù)加載。
7、WebP圖片格式能給前端帶來(lái)的優(yōu)化。

區(qū)別：
1、gif:是是一種無(wú)損，8位圖片格式。具有支持動(dòng)畫，索引透明，壓縮等特性。適用于做色彩簡(jiǎn)單(色調(diào)少)的圖片，如logo,各種小圖標(biāo)icons等。

2、JPEG格式是一種大小與質(zhì)量相平衡的壓縮圖片格式。適用于允許輕微失真的色彩豐富的照片，不適合做色彩簡(jiǎn)單(色調(diào)少)的圖片，如logo,各種小圖標(biāo)icons等。

-3、png:PNG可以細(xì)分為三種格式:PNG8，PNG24，PNG32。后面的數(shù)字代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值。
15.列舉你了解Html5. Css3 新特性
16.可以通過哪些方法優(yōu)化css3 animation渲染
17.列舉幾個(gè)前端性能方面的優(yōu)化
18.如何實(shí)現(xiàn)同一個(gè)瀏覽器多個(gè)標(biāo)簽頁(yè)之間的通信
19.瀏覽器的存儲(chǔ)技術(shù)有哪些
20.css定位方式
21.盡可能多的寫出瀏覽器兼容性問題
22.垂直上下居中的方法
23.響應(yīng)式布局原理
25.清除浮動(dòng)的方法
26.http協(xié)議和tcp協(xié)議
27.刷新頁(yè)面，js請(qǐng)求一般會(huì)有哪些地方有緩存處理
28.如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化
29.你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和W3C重要性的理解
30.Http和https的區(qū)別
31.data-屬性的作用
32.如何讓Chrome瀏覽器顯示小于12px的文字
33.哪些操作會(huì)引起頁(yè)面回流（Reflow）

34.CSS預(yù)處理器的比較less sass

35.如何實(shí)現(xiàn)頁(yè)面每次打開時(shí)清除本頁(yè)緩存
36.什么是Virtual DOM,為何要用Virtual DOM
37.偽元素和偽類的區(qū)別
38.http的幾種請(qǐng)求方法和區(qū)別
39.前端需要注意哪些SEO
40.的title和alt有什么區(qū)別
41.從瀏覽器地址欄輸入url到顯示頁(yè)面的步驟
42.如何進(jìn)行網(wǎng)站性能優(yōu)化
43.語(yǔ)義化的理解
1、去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)；
2、有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
3、方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來(lái)渲染網(wǎng)頁(yè)；
4、便于團(tuán)隊(duì)開發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步吧網(wǎng)頁(yè)的重要?jiǎng)酉颍裱璚3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。
44.HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？
原理：
HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的，通過這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。

怎么用：

首先，在html頁(yè)面頭部加入一個(gè)manifest的屬性:

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

然后書寫cache.manifest文件：

CACHE MANIFEST
#v0.11

CACHE:
js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

manifest （即 .appcache 文件）文件是簡(jiǎn)單的文本文件，可分為三個(gè)部分：

CACHE ：在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存。

NETWORK ：在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存，離線時(shí)無(wú)法使用。?可以使用 “*” 來(lái)指示所有其他資源/文件都需要因特網(wǎng)連接：NETWORK: *如果在CACHE和NETWORK中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)，也就是說CACHE的優(yōu)先級(jí)更高。

FALLBACK：在此標(biāo)題下列出的文件規(guī)定當(dāng)頁(yè)面無(wú)法訪問時(shí)的回退頁(yè)面。
45.瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢
46.iframe有那些缺點(diǎn)？
47.WEB標(biāo)準(zhǔn)以及W3C標(biāo)準(zhǔn)是什么
48.Doctype作用 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義
49.HTML全局屬性(global attribute)有哪些
50.Canvas和SVG有什么區(qū)別？
51.如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
52.網(wǎng)頁(yè)驗(yàn)證碼是干嘛的，是為了解決什么安全問題
53.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
54. CSS選擇器有哪些？哪些屬性可以繼承？
55.CSS優(yōu)先級(jí)算法如何計(jì)算？
56.CSS3有哪些新特性？
57.請(qǐng)解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場(chǎng)景？
58.用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
59.常見的兼容性問題？
60.為什么要初始化CSS樣式
61.absolute的containing block計(jì)算方式跟正常流有什么不同？
62.CSS里的visibility屬性有個(gè)collapse屬性值？在不同瀏覽器下以后什么區(qū)別？
63.display:none與visibility：hidden的區(qū)別？
64.position跟display、overflow、float這些特性相互疊加后會(huì)怎么樣？
65.對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？
66.為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式？
67.上下margin重合的問題
68. 設(shè)置元素浮動(dòng)后，該元素的display值是多少？
69.移動(dòng)端的布局用過媒體查詢嗎？
70.CSS優(yōu)化、提高性能的方法有哪些？
71.瀏覽器是怎樣解析CSS選擇器的？
72.在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
73.margin和padding分別適合什么場(chǎng)景使用？
74.元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？
75.全屏滾動(dòng)的原理是什么？用到了CSS的哪些屬性？
76.什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？
77. 視差滾動(dòng)效果？
78.::before 和 :after中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這2個(gè)偽元素的作用
79.讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？
80. position:fixed;在android下無(wú)效怎么處理？
81.如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？
82.li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
83.display:inline-block 什么時(shí)候會(huì)顯示間隙？
84. 有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度
85.png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過webp？
86.style標(biāo)簽寫在body后與body前有什么區(qū)別？
87.CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理
88.闡述一下CSS Sprites
89. 一行或多行文本超出隱藏
<style>

p{

  width:300px;

　overflow:hidden;

　white-space:nowrap;

　text-overflow:ellipsis;　

}

</style>

小程序常見bug

1.域名必須是HTTPS
2. input組件placeholder字體顏色
3. wx.navigateTo無(wú)法跳轉(zhuǎn)到帶tabbar的頁(yè)面
4. tabbar在切換時(shí)頁(yè)面數(shù)據(jù)無(wú)法刷新
5.如何去掉自定義button灰色的圓角邊框
6.input textarea是APP的原生組件，z-index層級(jí)最高
7.一段文字如何換行
8.設(shè)置最外層標(biāo)簽的margin-bottom在IOS下不生效
9.小程序中canvas的圖片不支持base64格式
10.wx.setStorageSync和wx.getStorageSync報(bào)錯(cuò)問題
11.如何獲取微信群名稱
12.new Date跨平臺(tái)兼容性問題
13.wx.getSystemInfoSync獲取windowHeight不準(zhǔn)確
14.圖片本地資源名稱，盡量使用小寫命名
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React htm...
    糖醋里脊120625閱讀 2,987評(píng)論 0贊 6
  • 今天的React題沒有太多的故事…… 半個(gè)月前出了248個(gè)Vue的知識(shí)點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些R...
    浪子神劍閱讀 10,244評(píng)論 6贊 106
  • 前端開發(fā)面試題 面試題目： 根據(jù)你的等級(jí)和職位的變化，入門級(jí)到專家級(jí)，廣度和深度都會(huì)有所增加。 題目類型： 理論知...
    怡寶丶閱讀 2,694評(píng)論 0贊 7
  • 我所知道的各大廠所用技術(shù)-不定時(shí)更新 京東 —— react 美團(tuán) —— react 華宇 —— vue+reac...
    蔣小小喵閱讀 2,694評(píng)論 0贊 7
  • 一：什么是閉包？閉包的用處？ （1）閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上，閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 10,067評(píng)論 1贊 52

友情鏈接更多精彩內(nèi)容