前端面試總彙

時間  2019-11-29
標籤 前端 面試 總彙 欄目 快樂工作 简体版
原文   原文鏈接

前端面試總彙

html/css問題

1 . css權重排序javascript

答： !important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性css

2 . 什麼是盒子模型？html

答： 在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。前端

3 . 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？vue

答：html5

行內元素：a、b、span、img、input、strong、select、label、em、button、textareajava

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquotereact

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、linkjquery

4 . CSS實現垂直水平居中css3

方法一

.wrapper {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.content{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均設置爲0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin設置爲auto*/
    margin:auto;
    border: 1px solid green;    
} 
複製代碼

方法二： flex 盒子佈局

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

複製代碼

方法三： css3 translate屬性

.wrapper {
   position: relative;
   width: 500px;
    height: 500px;
    border: 1px solid red; 
}
.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateZ(-50%, -50%)
    /*margin設置爲auto*/
    margin:auto;
    border: 1px solid green;    
} 
複製代碼

5 . link 和import的區別？

答： link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。 link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS了。

加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

6 . xhtml和html有什麼區別

答：HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

最主要的不一樣： XHTML 元素必須被正確地嵌套。

XHTML 元素必須被關閉。

標籤名必須用小寫字母。

XHTML 文檔必須擁有根元素。

7 . 前端頁面有哪三層構成，分別是什麼?做用是什麼?

答： 結構層 Html 表示層 CSS 行爲層 js

8 . Doctype做用？標準模式與兼容模式各有什麼區別?

答: !DOCTYPE聲明位於位於HTML文檔中的第一行，處於html 標籤以前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。

標準模式的排版 和JS運做模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。

9 . html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

答： HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

繪畫 canvas 用於媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失； sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，好比 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術webworker, websockt, Geolocation

移除的元素 純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤： IE8/IE7/IE6支持經過document.createElement方法產生的標籤， 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤， 瀏覽器支持新標籤後，還須要添加標籤默認的樣式

  1. 什麼是BFC

BFC 全稱爲 塊格式化上下文 (Block Formatting Context) 。 簡單來說就是不在文檔流的中的且不內部不受外部佈局的影響。

優勢： 不受外部佈局影響，獨立的塊。

缺點： 由於脫離了文檔流，因此會出現一些奇怪的現象，好比高度不會被子元素撐開，出現塌陷的問題。又或者雙邊距問題。

js

1 JavaScript中如何檢測一個變量是一個String類型？

答：typeof obj === "string"

2 請用js去除字符串空格？

答：去除全部空格: str = str.replace(/\s*/g,"");

去除兩頭空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, 「」);

去除右空格： str = str.replace(/(\s*$)/g, "");

3 什麼是跨域？如何解決？

答: 因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。

1 . porxy代理：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。

實現方法：經過nginx代理；

2 . CORS: 是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。

使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。

3 . jsonp：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。

缺點：

  一、這種方式沒法發送post請求（這裏）

  二、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。

4 垃圾回收機制方式的兩種方式

答: 垃圾回收策略：標記清除(較爲經常使用)和引用計數。

5 編寫一個方法 去掉一個數組的重複元素

方法一：

var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
<!--判斷對象屬性是否存在 不然添加上去並給tmp數組push（arr[i]-->
   if( !obj[arr[i]] ){
      obj[arr[i]] = 1;
      tmp.push(arr[i]);
   }
}
console.log(tmp);
複製代碼

方法二：

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
    <!--判斷arr2是否存在該元素 若是返回數小於0 則
    添加進去-->
    if(arr2.indexOf(arr[i]) < 0){
        arr2.push(arr[i]);
    }
}
console.log(arr2);
複製代碼

方法三：

var arr = [2,3,4,4,5,2,3,6];
<!--過濾原數組 判斷位置是否與第一次同樣-->
var arr2 = arr.filter(function(obj,index,myarr){
return myarr.indexOf(obj) === index;
});
console.log(arr2);
複製代碼

6 jquery中.get()提交和.post()提交的異同點？

答： 相同點：都是異步請求的方式來獲取服務端的數據；

異同點：

一、請求方式不一樣：.get() 方法使用GET方法來進行異步請求的。.post() 方法使用POST方法來進行異步請求的。

二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。

三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多

四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。

7 . 簡述同步和異步的區別

答： 同步是阻塞模式，異步是非阻塞模式。 同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

8 . 瀏覽器的內核分別是什麼?

答： IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：之前是presto內核，Opera現已改用Google Chrome：Blink(基於webkit，Google與Opera Software共同開發)

9 sessionStorage 、localStorage 和 cookie 之間的區別

答： 共同點：用於瀏覽器端存儲的緩存數據

不一樣點：

(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；

web storage,會將數據保存到本地，不會形成寬帶浪費；

(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;

(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；

sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；

(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；

10 Ajax的優缺點及工做原理

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用於建立快速動態網頁的技術。Ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。

優勢：

1.減輕服務器的負擔,按需取數據,最大程度的減小冗餘請求

2.局部刷新頁面,減小用戶心理和實際的等待時間,帶來更好的用戶體驗

3.基於xml標準化,並被普遍支持,不需安裝插件等,進一步促進頁面和數據的分離

缺點：

1.AJAX大量的使用了javascript和ajax引擎,這些取決於瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.

2.AJAX只是局部刷新,因此頁面的後退按鈕是沒有用的.

3.對流媒體還有移動設備的支持不是太好等

AJAX的工做原理：

1.建立ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判斷數據傳輸方式(GET/POST)

3.打開連接 open()

4.發送 send()

5.當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行回調函數

11 . 例舉3種強制類型轉換和2種隱式類型轉換?

答：強制（parseInt,parseFloat,number） 隱式（== or ===）

12 . 什麼是閉包？優缺點

閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

官方」的解釋是：閉包是一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

優勢： 變量私有化，防止全局變量污染

缺點 ： 會將變量儲存在內存中，消耗內存

13 . 函數節流和函數防抖

```
    // 函數節流   設定一個時間週期，週期性的執行一個函數；
    /*
        函數防抖會執行最後一次操做，在渲染上可能會形成忽然一下的大變化
        因此想相對平緩的操做，使用節流會好不少。
    */
	function throttling(fn, wait) {
		var timer;
		var args = ''; // 參數集合對象
		
		function run() {
		    // 開啓定時器
			timer = setTimeout(function() {
				// 調用自定義函數  傳入參數
				fn.apply(this, args);
				//  清除定時器
				clearTimeout(timer);
				// 從新設置定時器
				timer = null;
			}, wait)
		}
		
		return function () {
		    // 設置參數集合
			args = arguments;
			// 若是定時器爲false
			if(!timer) {
				run();
			}else {
				
			}
		}
	}
	
	
	/*
	函數防抖策略是當事件被觸發時，設定一個週期延遲執行動
	做，若期間又被觸發，則從新設定週期，直到週期結束，執行動做。
	*/
	/*
	主要用於高頻率的觸發事件，好比經過input來獲取用戶輸入去進行
	一個計算價格的操做，我能能夠把操做延遲，當用戶中止輸入時咱們再
	計算能夠優化性能 
	*/
	function debounce(fn, wait) {
		var timer;    // 定時器
		var initTime = 0; // 初始化時間
		var args = '';  // 參數集合
		
		function run() {
		    // 建立定時器
			timer = setTimeout(function() {
				// 執行自定義函數
				fn.apply(this, args);
			}, wait);
		}
		
		
		return function () {
		    // 獲取調用的時間
			var nowTime = new Date().getTime();
			args = arguments;
            
            /*
                若是兩次操做間隔小於定時器時間 
                清除定時器
                從新設置定時器
            */
			if(nowTime - initTime < wait) {
				clearTimeout(timer);
				run();
			}else {
				run();
			}
			
			// 記錄上一次操做時間
			initTime = nowTime;
		}
	}
	
	function a(name) {
		console.log('*************', name);
	}
	
	var b = debounce(a, 1000);
	var c = throttling(a, 3000);
	
	document.body.onclick = function() {
		//b('jack');
		c('hello');
	}
```
複製代碼
  1. 深拷貝與淺拷貝

淺拷貝

//1
var newObj = Object.assign({}, obj);
//2
var newObj = $.extend({}, obj);
複製代碼

深拷貝

//1
var newObj = JSON.parse(JSON.stringify(obj));
//2
var newObj = $.extend(true, {}, obj);
//3
_.cloneDeep(obj);
//4
function deepClone(obj){
    if(typeof obj !== "object") return;    
    let newObj = obj instanceof Array ? [] : {};
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            newObj[key] = typeof obj[key] === "object" ?
            deepClone(obj[key]) : obj[key];
        }      
    }  
    return newObj;  
}
複製代碼

理論性問題

1 . web前端開發，如何提升頁面性能優化？

答： 1.減小 HTTP 請求 (Make Fewer HTTP Requests)

2.減小 DOM 元素數量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可緩存 (Make Ajax Cacheable)

4 . 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

5 . 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

6 . 優化圖片 使用 CSS Sprites 技巧對圖片優化

7 . 把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2 . http狀態碼有那些？分別表明是什麼意思？

答： 100-199 用於指定客戶端應相應的某些動做。

200-299 用於表示請求成功。

300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。

400-499 用於指出客戶端的錯誤。400 一、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。

500-599 用於支持服務器錯誤。 503 – 服務不可用

3 . 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

答：

  • 查找瀏覽器緩存
  • DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
  • 進行HTTP協議會話
  • 客戶端發送報頭(請求報頭)
  • 文檔開始下載
  • 文檔樹創建，根據標記請求所需指定MIME類型的文件 文件顯示
  • 瀏覽器這邊作的工做大體分爲如下幾步：
  • 加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。
  • 解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）
  1. http與https區別

https是明文傳輸，https是加密傳輸的走的SSL協議， http默認端口是80，https默認端口是443

框架問題

1 . react虛擬DOM運行機制是什麼？

答： 在React中，render執行的結果獲得的並非真正的DOM節點，結果僅僅是輕量級的JavaScript對象，咱們稱之爲virtual DOM。虛擬dom

  1. 雙向綁定原理

答： 雙向綁定是經過Object.definePropety()實現的。 實現原理：經過方法重寫set和get方法，當用戶觸發set或者get方法的時候，會有一個Obsever 監聽對象監聽到屬性改變， 而後會告訴訂閱者 watcher 看看是否須要更新，若是須要更新則執行相應的函數更新視圖。更新視圖則由解析器compile 去關聯dom節點與解析指令。當指令執行的時候，去更新dom節點。

```
    // 流程圖
    observe （監聽器，監聽數據對象全部屬性，若是發生改變就通知訂閱者）
    ↓
    Dep（訂閱器,會對新舊數據對象進行淺比較，當數據發生改變時，會遍歷觀察者列表，
    通知全部的watch）
    ↓
    watcher （訂閱者，鏈接數據監聽器 和指令解析器， 訂閱每一個屬性的變化，接收更新通知，
    執行回調函數）
    ↓
    compile （指令解析器,  對指令進行解析，解析後去更新視圖）

```
複製代碼
  1. v-if與v-show有什麼區別（vue）

v-show主要是控制元素的顯示與隱藏，這時元素是已經渲染在頁面上了。

v-if是控制是否將元素渲染在頁面上，這時元素並不會直接渲染在頁面上

  1. 屬性發生改變視圖卻不刷新（vue）

介紹其中一個形成的緣由，由於vue對象會在初始化的時候對data對象屬性綁定監聽器，當你經過點擊之類的事件去向vue對象添加新的值，雖然值會添加進去，但是視圖並不會更新，這時候能夠經過Vue.$set(Vue.data, newVal);

  1. 子父組件通訊有哪些（vue）

  • props(父傳值子)

    <parent>
        <child :name="content"></child> 
    </parent>
    // child.vue
    
    export default {
        props: [name]
    }
    
複製代碼

  • $emit(子觸發父函數)

    //parent.vue
    <child @showbox="toshow" :msg="msg"></child> 
    
    {    
        methods: {
            toshow(msg) {
                this.msg = msg;
            }
        }
    }
    
    // child.vue
    <template>
        <div @click="open"></div>
    </template>
    
    {
        methods: {
           open() {
                // 觸發父組件方法
                this.$emit('showbox','the msg'); 
            }
        }
    }
複製代碼

  • new Vue()(創新一個vue對象)

    let vm = new Vue(); //建立一個新實例
    
    // one.vue
    {
        created() {
            // 像vue對象添加方法
            vm.$on('blur', (arg) => { 
                this.test= arg; // 接收
            });
        }
        
    }
    // two.vue
    {
        // 觸發vue對象的方法
        methods: {
            ge() {
                vm.$emit('blur','sichaoyun'); //觸發事件
            }
        }
    }
複製代碼

  • Vuex （狀態機管理）

  1. Vuex狀態機

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

流程： actions(發起請求)---Mutations(處理請求)---State(更新狀態)---View(更新視圖)

State(狀態)

```
    import Vuex from 'vuex' 
    import Vue from 'vue'
    
     Vue.use(Vuex)
    
    const moduleA ={
    	namespaced: true,
    	state: {
    		name: '小明',
    		age: 18
    	},
    	getters: {
    		getNewName: state => {
    			return () =>  state.name + '同窗' 
    		}
    	},
    	mutations: {
    		changeName(state, back) {
    			state.name = '小紅';
    			back ? back : '';
    		}
    		
    	},
    	actions: {
    		asyncChangeName(context) {
    			setTimeout(() => {
    				context.commit('changeName')
    			}, 1000)
    		}
    	}
    };
    
    
    const store = new Vuex.Store({
    	modules: {
    		moduleA,
    	}
    })
    
    export default store
```
複製代碼

vuex主要由5個屬性組成。

state主要初始化你須要的變量，。最近發現經過函數改變state以後，你拿到state的值若是放在vue.$data中是不會觸發更新的。

getters主要用於計算你最終的值，那跟state有啥區別呢？一它能夠對值作改變，其二它會在你改變值得時候同時觸發

mutations 以同步的方式調用函數，調用時使用this.$store.commit('函數名')，由於是同步因此他會依次執行。不適合處理異步任務。

actions 以異步的方式調用函數，調用時使用this.$store.dispath('函數名'),主要用於處理異步任務。

modules主要用於管理多個模塊之間的屬性，裏面有許多的有用的參數，好比namespaced會使其成爲帶命名的模塊，這樣模塊就會有本身專有的名字。其餘的參數請看文檔。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程