十道前端面試題（6）

原創 小馋猫s 2019-10-26 12:52
  1. 閉包的作用理解，以及那些地方用過閉包，以及閉包的缺點，如何實現閉包
  2. 從1-10，設置一個定時器，讓它每秒鐘打印一個？
  3. 從在瀏覽器輸入URL到頁面顯示出來都發生了什麼？
  4. 瀏覽器如何渲染頁面的
  5. html5有什麼新的tag，canvas…
  6. 如何理解html語義化
  7. border-box和content-box
  8. 正則如何將一個數千分化表示
  9. 如何處理CSS兼容問題
  10. BFC

1. 閉包的作用理解，以及那些地方用過閉包，以及閉包的缺點，如何實現閉包？(點擊查看>>)

2. 從1-10，設置一個定時器，讓它每秒鐘打印一個？

(function(){
    let i = 0;
    function change(num){
        i++;
        console.log(i);
        let timer = setTimeout(() => {
            change(num);
        }, 1000);
        if(i === num){
            clearTimeout(timer);
            return false;
        }
    }
    return change;
})()(10);

3. 從在瀏覽器輸入URL到頁面顯示出來都發生了什麼？

  1. 輸入網址

  2. DNS解析域名，查找IP地址。

  3. 應用層客戶端發送HTTP請求。
    HTTP請求包括請求頭和請求主體兩個部分，其中請求頭包括請求的方法，URL，遵循的http協議，返回信息是否需要緩存，以及cookie等

  4. 傳輸層TCP傳輸報文 “三次握手”
    位於傳輸層的TCP協議爲傳輸報文提供可靠的字節流服務。它爲了方便傳輸，將大塊的數據分割成以報文段爲單位的數據包進行管理，併爲它們編號，方便服務器接收時能準確地還原報文信息。TCP協議通過“三次握手”等方法保證傳輸的安全可靠。
    “三次握手”的過程是，發送端先發送一個帶有SYN（synchronize）標誌的數據包給接收端，在一定的延遲時間內等待接收的回覆。接收端收到數據包後，傳回一個帶有SYN/ACK標誌的數據包以示傳達確認信息。接收方收到後再發送一個帶有ACK標誌的數據包給接收端以示握手成功。在這個過程中，如果發送端在規定延遲時間內沒有收到回覆則默認接收方沒有收到請求，而再次發送，直到收到回覆爲止。

  5. 網絡層IP協議查詢MAC地址
    IP協議的作用是把TCP分割好的各種數據包傳送給接收方。而要保證確實能傳到接收方還需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一對應的關係，一個網絡設備的IP地址可以更換，但是MAC地址一般是固定不變的。ARP協議可以將IP地址解析成對應的MAC地址。當通信的雙方不在同一個局域網時，需要多次中轉才能到達最終的目標，在中轉的過程中需要通過下一個中轉站的MAC地址來搜索下一個中轉目標。

  6. 數據到達數據鏈路層
    在找到對方的MAC地址後，就將數據發送到數據鏈路層傳輸。這時，客戶端發送請求的階段結束

  7. 服務器接收數據
    接收端的服務器在鏈路層接收到數據包，再層層向上直到應用層。這過程中包括在運輸層通過TCP協議講分段的數據包重新組成原來的HTTP請求報文。

  8. 服務器響應請求
    服務接收到客戶端發送的HTTP請求後，查找客戶端請求的資源，並返回響應報文，響應報文中包括一個重要的信息——狀態碼。狀態碼由三位數字組成，其中比較常見的是200 OK表示請求成功。301表示永久重定向，即請求的資源已經永久轉移到新的位置。在返回301狀態碼的同時，響應報文也會附帶重定向的url，客戶端接收到後將http請求的url做相應的改變再重新發送。404 not found 表示客戶端請求的資源找不到。

  9. 服務器返回相應文件
    請求成功後，服務器會返回相應的HTML文件。接下來就到了頁面的渲染階段了。

  10. 頁面渲染
    現代瀏覽器渲染頁面的過程是這樣的：解析HTML以構建DOM樹 –> 構建渲染樹 –> 佈局渲染樹 –> 繪製渲染樹。
    DOM樹是由HTML文件中的標籤排列組成，渲染樹是在DOM樹中加入CSS或HTML中的style樣式而形成。渲染樹只包含需要顯示在頁面中的DOM元素，像元素或display屬性值爲none的元素都不在渲染樹中。
    在瀏覽器還沒接收到完整的HTML文件時，它就開始渲染頁面了，在遇到外部鏈入的腳本標籤或樣式標籤或圖片時，會再次發送HTTP請求重複上述的步驟。在收到CSS文件後會對已經渲染的頁面重新渲染，加入它們應有的樣式，圖片文件加載完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。

一般問到這樣的題，說得越詳細越好。。。

4. 瀏覽器如何渲染頁面的

  1. 解析HTML構建DOM樹
    怎樣解析HTML？
  • 讀取HTML的原始字節，根據文件指定編碼解析各個字符
  • 將字符串轉化爲各種標籤
  • 然後將標籤轉化爲node節點
  • 構建DOM樹
    在這裏插入圖片描述
  1. 解析CSS構建CSSOM樹
    怎樣解析CSS？
  • CSS字節轉化爲字符，接着轉換爲令牌和節點，最後生成CSSOM樹
    在這裏插入圖片描述
  1. 將DOM與CSSOM合併成一個渲染樹
    CSSOM樹和DOM樹合併成渲染樹，然後用於計算每個可見元素的佈局，並輸出給繪製流程，將像素渲染到屏幕上。
    怎麼構建渲染樹？
  • 從DOM樹的根節點開始遍歷每個可見節點（display:none與visibility:hidden的區別）
  • 對於每個可見節點，爲其找到適配的CSSOM規則並應用它
  • 生成渲染樹

  1. 佈局階段：輸出盒模型
    根據渲染樹來佈局，計算每個節點的佈局信息

  2. 繪製：輸出到屏幕上的像素

5. html5有什麼新的tag，canvas…

點擊查看html5新增標籤 >>

6. 如何理解html語義化

  • 背景
    HTML語義化是近幾年才提出來的，以前的DOM結構基本上就是一堆冷冷冰冰的沒有語義化的標籤。一打開就是一堆div+css。爲了改變這種情況才提出了讓HTML結構化的概念，並且HTML也給出了一些語義化的標籤。比如：<header>,<nav>,<footer>等
  • 那到底什麼是語義化呢？
    語義化就是讓我們寫的HTML結構，是用相對應且有一定語義的英文字母（標籤）表示的，標記的語言。
    在沒有CSS樣式的情況下，依然能夠呈現內容的結構，以及代碼的結構。
  • 爲什麼要語義化呢？（好處）
  1. 提升用戶體驗，在沒有CSS的情況下頁面也能呈現出很好的結構
  2. 有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多有效信息。（爬蟲依賴於標籤來確定上下文和各個關鍵字的權重）
  3. 有利於團隊開發和維護，增強可讀性。

7. border-box和content-box

border-box和content-box都是表示盒模型的尺寸：border-sizing

  1. border-sizing: border-box(默認);: border和padding計算入width之內
  2. border-sizing: border-content;: border和padding不計算入width之內

點擊查看盒模型>>

8. 正則如何將一個數千分化表示

function formatNum(num) {  
	 const pattern = /(?=((?!\b)\d{3})+$)/g;
	 return String(num).replace(pattern, ',');
}

formatNum(100000);     //   100,000

9. 如何處理CSS兼容問題

先了解一個概念：hack
我們爲了讓頁面形成統一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的CSS樣式，所以我們就把這個針對不同瀏覽器/版本而寫CSS的過程叫做 CSS hack。

CSS hack主要有三種：IE條件註釋法、CSS屬性前綴法、選擇器前綴法；

常見的CSS兼容問題：

  1. 不同瀏覽器對標籤的默認支持不同，所以的初始化樣式。（點擊查看初始化樣式>>）
  2. IE6的雙邊距bug。塊級元素添加float屬性之後，如果在float方向上有margin值，那麼margin值會加倍。主要是會擠壓其他元素。
    解決辦法：
  • 給浮動的元素添加display：inline
  • 採用CSS屬性前綴法，如：_margin-left:5px;

  1. 上下margin重合。兩個相鄰元素的margin左右不會重合，但是上下margin會重合。儘量要同時採用bottom和margin

  2. 超鏈接訪問過後樣式就混亂了，hover樣式不出現了。其實主要是其CSS屬性的排序問題。一般來說，最好按照這個順序：L-V-H-A
    a:link{} a:visited{} a:hover{} a:active{}

  3. chrome下默認會將小於12px的文本強制按照12px來解析。解決辦法是給其添加屬性：
    -webkit-text-size-adjust: none;

  4. CSS控制透明度問題：
    一般 opacity: 0.6;
    IE: filter: Alpha(opacity=60)；
    但在IE6下有問題，所以又得寫成filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

  5. 鼠標的手勢：FireFox的cursor屬性不支持hand``，但是支持pointer，IE兩個都支持；所以爲了兼容都用pointer```；

  6. IE6下div高度無法小於10px: 比如定義一條高2px的線條，FF和IE7都正常；但IE6就是10px；
    解決辦法：

  • 添加overflow屬性或設置font-size大小爲高度大小 ；
 div{ height: 2px; overflow: hidden; background: #333; width: 100px; }
div{ height: 2px; font-size: 2px; background: #333; width: 100px; }
  1. CSS3 風格的前綴
    如果你正在使用最新的 CSS 代碼，比如 box-sizing，或者background-clip等，確保你使用了合適的供應商前綴。
-moz- /* Firefox 和其他使用 Mozilla 瀏覽器引擎的瀏覽器 */
-webkit- /* Safari，Chrome 和其他使用了 Webkit 引擎的瀏覽器 */
-o- /* Opera */
-ms- /* IE 瀏覽器（但不總是 IE） */

10. BFC

BFC即 Box Format Context的縮寫
直譯爲“塊級格式上下文”，是一個獨立的渲染區域，也就是盒子內部的元素無論如何佈局都不會影響到外部的元素。

BFC的佈局規則：

  1. 內部元素在垂直方向一個一個放置
  2. Box垂直方向上的距離由margin決定。屬於同一個BFC的兩個相鄰元素的margin會發生重疊。
  3. 內部元素的margin不會傳遞給BFC
  4. 浮動元素會被BFC計算高度
  5. 非浮動元素不會覆蓋浮動元素位置

哪些元素可以生成BFC：

  1. 根元素
  2. float屬性不爲none的元素
  3. position屬性爲absolute或fixed的元素
  4. display爲inline-block, table-cell, table-caption, flex, inline-flex的元素
  5. overflow不爲visibility的元素
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

十道前端面試題（2）

爲什麼css樣式初始化，目的是爲了什麼 js繼承 常見佈局的方法 rem，px，em的區別 typeof去判斷數據類型返回值有哪些 快排和冒泡的原理 清除浮動的方法 定時器setTimeout的運行機制 get和post的請求區

小馋猫s 2020-06-28 00:09:51

十道前端面試題（10）- webpack

小馋猫s 2020-02-26 05:23:21

十道前端面試題（9）

小馋猫s 2020-02-26 05:23:21

十道前端面試題（1）

小馋猫s 2020-02-26 05:23:21

十道前端面試題（8）

小馋猫s 2019-10-28 10:45:05

十道前端面試題（7）

小馋猫s 2019-10-26 12:52:18

十道前端面試題（3）

小馋猫s 2019-10-26 12:52:18

十道前端面試題（4）

小馋猫s 2019-10-26 12:52:18

十道前端面試題（5）

小馋猫s 2019-10-26 12:52:17