web前端面試題(常問-概念篇)

1、http與https的的區別

  1. https協議需要到ca申請證書,一般免費證書較少,因而需要一定費用。
  2. http是超文本傳輸協議,信息是明文傳輸,https則是具有安全性的ssl加密傳輸協議。
    http和https使用的是完全不同的連接方式,用的端口也不一樣,前者是80,後者是443。
  3. http的連接很簡單,是無狀態的;HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議,比http協議安全。

2、前端世界的安全防護

  1. 跨站腳本攻擊(XSS)
    跨站腳本攻擊其實說白了就是通過一些方式把JavaScript代碼注入到用戶的dom中並執行,從而實現一些盜取用戶cookies獲取監聽用戶輸入的一些行爲。
    XSS攻擊:轉義和過濾用戶提交的任何內容。
  2. CSRF(跨站點請求僞造)
    用戶登錄了受信的網站,生成了對應的cookie,用戶不退出登錄受信網站的情況下,訪問了釣魚網站,釣魚網站調用通過image或其他方式訪問了受信網站的url,然後瀏覽器就會帶上受信網站的cookie發出請求,模擬真實用戶訪問。CSRF攻擊是攻擊者利用用戶身份操作用戶賬戶的一種攻擊方式
    CSRF攻擊:敏感接口添加token參數進行驗證是最好的方法。
  3. 反射型XSS
    點擊劫持其實就是在一個頁面中通過一些視覺的效果例如誘人的圖片,或者一個透明的遮罩層蓋在內容之上,引誘用戶點擊,觸發對應的一些攻擊行爲。
    防禦點擊劫持:X-Frame-Options HTTP響應頭是用來給瀏覽器指示允許一個頁面能否在、、中展現的標記。有三個可選的值。

3、 AMD、CMD、CommonJs、ES6

  1. AMD - 異步加載模塊 (requirejs)
  2. CMD - 同步加載模塊 , 就進依賴,什麼時候用什麼時候引入(seajs)
  3. CommonJS規範- 是通過module.exports定義的,在前端瀏覽器裏面並不支持module.exports,通過node.js後端使用的。Nodejs端是使用CommonJS規範的,前端瀏覽器一般使用AMD、CMD、ES6等定義模塊化開發的
  4. ES6特性,模塊化-export/import對模塊進行導出導入的

4. js數據類型

字符串String、數字Number、布爾Boolean、數組Array、對象Object、Null、Undefined

5、javascript typeof返會的數據類型有哪些

object,string,undefined,number,function,boolean,對象,數組, null 都會返回object。

6、瀏覽器的同源策略和跨域

跨域是什麼:實際上就是一個網站不能執行其他網站上的網址,是由瀏覽器同源策略造成的,是瀏覽器對js施加的安全限制所謂同源,實際上是指域名,協議,端口都相同。也就是說當,域名或者協議,或者端口不同的時候,就是跨域。
同源策略限制以下幾種行爲:

  1. Cookie、LocalStorage 和 IndexDB 無法讀取
  2. DOM 和 Js對象無法獲得
  3. AJAX 請求不能發送
    跨域的幾種解決方法:
    通過jsonp跨域,跨域資源共享(CORS),nginx代理跨域,nodejs中間件代理跨域,WebSocket協議跨域

7. js的垃圾回收機制

標記清除:這是js最常用的垃圾回收方法,當一個變量進入執行環境時,例如函數中聲明一個變量,將其標記爲進入環境,當變量離開環境時,(函數執行結束),標記爲離開環境。

引用計數: 跟蹤記錄每個值被引用的次數,聲明一個變量,並將引用 類型賦值給這個變量,則這個值的引用次數+1,當變量的值變成了另一個,則這個值的引用次數-1,當值的引用次數爲0的時候,就回收。

8、閉包

是可以讀取函數內部的變量,另一個就是讓這些變量的值始終保持在內存中。
經典閉包

function outer(){
	var a = 1;
	function inner(){
			a++;
	}
	return inner
}
var inn = outer();
inn();

點擊li返回index

<ul id="test">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>


<script>
	var oUL = document.getElementById("test");
	var oLi = oUl.getElementByTagName("li");
	for(var i=0;i<oLi.length;i++){
		oLi[i].index = i;
		oLi[i].onclick = (function(a){
			return function(){
				alert a;
			}
		})(i)
}
</script>

9、JavaScript 本地對象、內置對象、宿主對象

1.本地對象(要NEW)
ECMA-262 把本地對象(native object)定義爲“獨立於宿主環境的 ECMAScript 實現提供的對象”。

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服務器方面)、Enumerator(集合遍歷類)、RegExp(正則表達式)

由此可以看出,簡單來說,本地對象就是 ECMA-262 定義的類(引用類型)。
2.內置對象(不要NEW 直接引用——只有MATH GLOBAL)
類似於isNaN()、parseInt()和parseFloat()方法等,看起來都是函數,而實際上,它們都是Global對象的方法.內置對象也是本地對象。
3. 宿主對象
何爲“宿主對象”? ECMAScript中的“宿主”當然就是我們網頁的運行環境,即“操作系統”和“瀏覽器”。所有非本地對象都是宿主對象(host object),即由 ECMAScript 實現的宿主環境提供的對象。

所有的BOMDOM對象都是宿主對象。因爲其對於不同的“宿主”環境所展示的內容不同。其實說白了就是,ECMAScript官方未定義的對象都屬於宿主對象,因爲其未定義的對象大多數是自己通過ECMAScript程序創建的對象。TML DOM 是 W3C 標準(是 HTML 文檔對象模型的英文縮寫,Document Object Model for HTML)

10、js中的事件循環(event-loop)

javascript是單線程的語言,也就是說,同一個時間只能做一件事。
單線程就意味着,所有任務需要排隊,前一個任務結束,纔會執行後一個任務。如果前一個任務耗時很長,後一個任務就不得不一直等着但是,如果是網絡請求就不合適。因爲一個網絡請求的資源什麼時候返回是不可預知的,這種情況再排隊等待就不明智了。所以就出現了同步和異步。
人們把javascript調控同步和異步任務的機制稱爲事件循環,即執行下面4點

1、所有同步任務都在主線程上執行,形成一個執行棧
2、主線程之外,還存在一個"消息隊列"。只要異步操作執行完成,就到消息隊列中排隊
3、一旦執行棧中的所有同步任務執行完畢,系統就會按次序讀取消息隊列中的異步任務,於是被讀取的異步任務結束等待狀態,進入執行棧,開始執行
4、主程不斷重複上面的第三步
實際上因爲異步任務之間並不相同,因此他們的執行優先級也有區別。不同的異步任務被分爲兩類:微任務(micro task)和宏任務(macro task)。
以下事件屬於宏任務:
setInterval()
setTimeout()
以下事件屬於微任務
new Promise()
new MutaionObserver()
在一個事件循環中,異步事件返回結果後會被放到一個任務隊列中。然而,根據這個異步事件的類型,這個事件實際上會被對應的宏任務隊列或者微任務隊列中去。並且在當前執行棧爲空的時候,主線程會 查看微任務隊列是否有事件存在。如果不存在,那麼再去宏任務隊列中取出一個事件並把對應的回到加入當前執行棧;如果存在,則會依次執行隊列中事件對應的回調,直到微任務隊列爲空,然後去宏任務隊列中取出最前面的一個事件,把對應的回調加入當前執行棧…如此反覆,進入循環。
我們只需記住噹噹前執行棧執行完畢時會立刻先處理所有微任務隊列中的事件,然後再去宏任務隊列中取出一個事件。同一次事件循環中,微任務永遠在宏任務之前執行。

11、從輸入URL到瀏覽器顯示頁面發生了什麼

輸入網址–>DNS解析 獲取域名對應的ip地址–> 建立TCP鏈接(三次握手) --> 建立連接後瀏覽器向web服務器發送http請求–> 服務端處理返回數據–> 關閉TCP連接(四次揮手)–> 瀏覽器解析資源–>瀏覽器佈局渲染
下一章詳細複習js中的面向對象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章