記錄--一些看起來很叼難的前端面試題

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1.ajax最大的缺陷

「對搜索引擎不友好，並且存在跨域問題限制」

搜索引擎會屏蔽掉所有baijavascript代碼du， 那麼ajax載入的內容對於搜索引擎來說zhi也是透明的。建議重要的頁面信dao息不要AJAX。用AJAX只是載入一些相關鏈接或者其他跟正文和關鍵詞關係不是很大的東西。

如果一定要做AJAX的頁面，那麼至少在title以及h1、h2、h3標記處不要用AJAX。否則這個頁面真正的關鍵詞搜索引擎是看不到的。

搜索引擎對AJAX很不友好，呵呵

「ajax不支持瀏覽器back按鈕(要實現ajax下的前後退功能成本較大)。」

「不支持瀏覽器“後退”和“前進“鍵。」

2.下麵這道題的輸出結果

 var foo={n:1};
     (function(foo){
       console.log(foo.n);
       foo.n=3;
       var foo={n:2};
       console.log(foo.n);
     })(foo);
    console.log(foo.n);

A：

var foo = {n:1};
(function(foo){            //形參foo同實參foo一樣指向同一片記憶體空間，這個空間里的n的值為1
    var foo;               //重覆聲明，無效。
    console.log(foo.n);    //輸出1
    foo.n = 3;             //形參與實參foo指向的記憶體空間里的n的值被改為3
    foo = {n:2};           //形參foo指向了新的記憶體空間，裡面n的值為2.
    console.log(foo.n);    //輸出新的記憶體空間的n的值
})(foo);
console.log(foo.n);        //實參foo的指向還是原來的記憶體空間，裡面的n的值為3.

3.進程主要組成部分包括

• ①程式。作用：描述進程要完成的功能。
• ②數據。作用：程式在執行時所需要的數據和工作區。
• ③ PCB。作用：包含進程的描述信息和控制信息。它是進程存在的唯一標誌。 進程式控制制塊

4.一個簡單的電腦網路 3 個主要組成部分是

電腦網路通常由三個部分組成，它們是「資源子網（一系列主機）、通信子網和通信協議」.所謂通信子網就是電腦網路中負責數據通信的部分；資源子網是電腦網路中面向用戶的部分，負責全網路面嚮應用的數據處理工作；而通信雙方必須共同遵守的規則和約定就稱為通信協議，它的存在與否是電腦網路與一般電腦互連繫統的根本區別。所以從這一點上來說，我們應該更能明白電腦網路為什麼是電腦技術和通信技術發展的產物了。

5.如果讓你來設計一個批處理多道系統，首先要考慮的是

「吞吐量，系統效率」

多道批處理系統有兩個特點：

1. 多道：系統內可同時容納多個作業。這些作業放在外存中，組成一個後備隊列，系統按一定的調度原則每次從後備作業隊列中選取一個或多個作業進入記憶體運行，運行作業結束、退出運行和後備作業進入運行均由系統自動實現，從而在系統中形成一個自動轉接的、連續的作業流。
2. 成批：在系統運行過程中，不允許用戶與其作業發生交互作用，即：作業一旦進入系統，用戶就不能直接干預其作業的運行。

• 多道批處理系統的優點：資源利用率大幅提升，系統吞吐量增大
• 缺點：用戶響應時間長，沒有交互功能

❝

• 分時操作系統解決了人機交互功能，但不能處理一些緊急任務
• 實時操作系統的特點：及時性和可靠性
• 分散式操作系統的特點：分佈性和並行性， 系統中各個電腦地位相同，任何工作都可以分佈在這些電腦上，由它們並行，協同完成

❞

6.已知一個二叉樹的後序遍歷的結果為 AEFDHZMG, 那麼它的中序遍歷可能為（）前序遍歷可能為（）

 樹結構如圖，思路為：

• 尋找共同項，分別對比AB和CD
• 得到大致結構——
• 前序遍歷：GDA _ _ MHZ
• 中序遍歷：ADEF _ _ _ Z
• 後序遍歷：AEFDHZMG
• 然後畫個圖往裡填空就行

7.數據鏈路層主要功能包括（）

「流量控制」涉及對鏈路上的幀的發送速率的控制，以使接收方有足夠的緩衝空間來接收每一個幀。基本方法是由接收方控制發送方發送數據的速率，常見的方式有兩種：「停止-等待協議和滑動視窗協議。」

兩個結點之間如果規定了數據鏈路層協議，就可以檢測出這些差錯，然後把收到的錯誤信息丟棄，這就是「差錯控制」功能。通常利用編碼技術進行差錯控制，主要有兩類：「自動重傳請求(ARQ)和前向糾錯(FEC)」。在ARQ方式中，接收端檢測出差錯時，就設法通知發送端重發，直到接收到正確的碼字為止。在FEC方式中，接收端不但能發現差錯，而且能確定二進位數位的錯誤位置，從而加以糾正。因此，差錯控制主要分為檢錯編碼和糾錯編碼

8.請描述一下 cookies ， sessionStorage 和 localStorage 的區別

9.請列舉 html5 本地存儲（ localStorage ）相關 api ，並實現 getAll 方法，獲取本地存儲

鏈接：https://www.nowcoder.com/questionTerminal/4fa885ec00f347db8e7217475f731fc7 來源：牛客網

• setItem(key,value) 添加數據
• getItem(key) 根據key獲取值
• key(index) 根據索引獲取key
• removeItem(key) 根據key刪除一條數據
• clear() 清空數據
• length:獲取總數據的長度

getAll()這個方法我沒太明白想獲取什麼，所以我採用了key()和getItem()方法結合獲取鍵值對

function() {
    for (let i = 0; i < localStorage.length; i++) {
        let key = localStorage.key(i)
        let value = localStorage.getItem(key)
        console.log(key + ":" + value)
    }
}

10.JS中substr與substring的區別

JS中substr與substring的區別

js中substr和substring都是截取字元串中子串，非常相近，可以有一個或兩個參數。

語法：substr(start [，length]) 第一個字元的索引是0，start必選 length可選

substring(start [, end]) 第一個字元的索引是0，start必選 end可選

相同點：當有一個參數時，兩者的功能是一樣的，返回從start指定的位置直到字元串結束的子串

var str = "hello Tony";

str.substr(6);  //Tony

str.substring(6); //Tony

不同點：有兩個參數時

（1）substr(start,length) 返回從start位置開始length長度的子串

“goodboy”.substr(1,6);   //oodboy

【註】當length為0或者負數，返回空字元串

（2）substring(start,end) 返回從start位置開始到end位置的子串（「不包含end」）

“goodboy”.substring(1,6);  //oodbo

註】:

（1）substring 方法使用 start 和 end 兩者中的較小值作為子字元串的起始點

（2）start 或 end 為 NaN 或者負數，那麼將其替換為0

❝

str是字元串時str.substring(start,end)和str.slice(start,end)完全等價； str是數組時str.slice(start,end)還可以繼續用，str.substring(start,end)就不行了。

❞

11.JS 截取地址欄指定字元後的內容

一、獲取地址欄路徑

var url = window.location.href;

二、截取指定字元後的內容

/**
  * 截取指定字元後的內容
  * @param url 路徑
  * @param parameter 字元
  */
function getCaption(url,parameter) {
    var index = url.lastIndexOf(parameter);
    url = url.substring(index + 1, url.length);
    return url;
}

三、調用方法及結果

示例：

var url="http://www.baidu.com?123";
var a = getCaption(url, "?");

輸出結果：123

12.以下代碼的運行結果是

var game='4399'
game.substring(2,1)
console.log(game)

這裡有兩個坑，第一個是start<stop的話，會自動交換這兩個參數，第二個是substring對原數組不會改變。

13.JS的重定向有哪些

location.assign("http://www.baidu.com");
location.href="http://www.baidu.com";

window.location="http://www.baidu.com";
top.location="http://www.baidu.com";
self.location="http://www.baidu.com";

window.location.href="http://www.baidu.com";

14.談談你對虛擬DOM原理的理解？

什麼是Virtual DOM

Virtual DOM是對DOM的抽象，本質上是JavaScript對象，這個對象就是更加輕量級的對DOM的描述.

為什麼需要Virtual DOM

既然我們已經有了DOM,為什麼還需要額外加一層抽象？

首先，我們都知道在前端性能優化的一個秘訣就是儘可能少地操作DOM,不僅僅是DOM相對較慢，更因為頻繁變動DOM會造成瀏覽器的迴流或者重回，這些都是性能的殺手，因此我們需要這一層抽象，在patch過程中儘可能地一次性將差異更新到DOM中，這樣保證了DOM不會出現性能很差的情況.

其次，現代前端框架的一個基本要求就是無須手動操作DOM,一方面是因為手動操作DOM無法保證程式性能，多人協作的項目中如果review不嚴格，可能會有開發者寫出性能較低的代碼，另一方面更重要的是省略手動DOM操作可以大大提高開發效率.

最後，也是Virtual DOM最初的目的，就是更好的跨平臺，比如Node.js就沒有DOM,如果想實現SSR(服務端渲染),那麼一個方式就是藉助Virtual DOM,因為Virtual DOM本身是JavaScript對象.

15.怎麼利用img進行xss攻擊

這個問題，我有點矇蔽，我以為是 轉發圖片給上當者，然後就攻擊了，網上找了答案，果不其然，我想錯了

因為最近在學習web安全，出於好奇，嘗試對CSDN進行了XSS註入，沒想到真的成功了。

操作步驟：

直接找一篇博客，在底下評論

<img src="pic.gif" οnerrοr="javascript:this.src='/noPic.gif';" alt="pic" />

因為CSDN做了簡單的轉義，他會將註入的標簽，去掉閉合性，也就是會把我註入的內容處理為：

<img src="pic.gif" οnerrοr="javascript:this.src='/noPic.gif';" alt="pic">

這樣，註入的標簽就失去了他的閉合性了，對一些普通的攻擊就進行了防禦，但是onerror事件是專門針對js出錯的，所以，標簽閉合性被破壞剛好觸發了這個事件，所以，他會被執行，執行之後將img標簽的src屬性替換成我們想要的屬性，然而我註入的這個地址，故意又是一個不能訪問的地址，於是，就反覆的觸發這個onerror事件，最終導致瀏覽器堆棧溢出了。

說明：如果圖片存在，但網路很不通暢，也可能觸發 onerror。

解決方法：

- 1、用html轉義，將<>轉義成轉義符，這樣標簽就編程了文本了（QQ空間的做法）   - 2、使用jsoup白名單過濾掉onerror關鍵字，讓他不要在前臺顯示（這種更安全，因為轉義還有可能被繞過）

16.使用一個輔助棧進行棧元素排序

設計思路

依次從棧中彈出元素，依次壓入輔助棧。

如果彈出的元素比輔助棧的元素小，就將輔助棧的元素依次彈出並壓入原棧，將這個較小的元素壓入輔助棧，再遞歸。

如果彈出的元素比輔助棧的元素大，直接壓入輔助棧，直至原棧為空。

 代碼實現

public static void sortStack(Stack<Integer> stack) {
  Stack<Integer> help = new Stack<Integer>();
     while(!stack.isEmpty()) {
      int temp = stack.pop();
      while(!help.isEmpty()&&help.peek()<temp) {   //只有當pop出來的元素值比help棧頂元素大，才會將help中的元素移回stack
       stack.push(help.pop());
      }
      help.push(temp);    //其他不管是help為空，還是pop出來的元素值比help棧頂小，都是一律push。所以合併寫一個就可以，不用再if寫情況了
     }
     
     while(!help.isEmpty()) {     //最後將反序的help壓回stack，順序就對了
      stack.push(help.pop());
     }
 }

本文轉載於:

https://juejin.cn/post/6854573209552568328

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。