前端面試題2

塗鴉智能面試準備

對公司的了解程度

• 我所了解到的，貴公司是一個從事物聯網、智能應用開發的一家公司，作為一個全球雲開發平台，是業界比較在頭部的一家公司

兩邊固定中間自适應怎麼實作

• left ：float：left；right：float：right；中間自适應
• position：absolute left： 0 position：absolute right：0 中間自适應
• display：flex left、right有寬度，中間:flex: 1
• display：table ；left、right：display：table-cell

js的資料類型

number string boolean undefined null object symbol bigint

object：Array、Object、Date、regexp、function

判斷資料類型

• typeof
• instanceof
• Object.prototype.toString.call()

對原型鍊的了解

以我的了解，原型鍊是對象建立過程的記錄，當通路對象的某個屬性時，會先對對象本身屬性進行查找，如果找不到，會對其__proto__隐式原型進行查找，再對其prototype的對象進行查找，一層一層往上查找形成一條鍊式結構

原型鍊的作用

實作js對象的繼承，将對象的公共屬性放在一個共享空間，避免重複聲明，節約記憶體；原型鍊頂端是null

原型和原型鍊

prototype是函數的屬性，每個函數都有該屬性。用于指向一個對象。是顯式修改對象的原型的屬性

__proto__是對象的内置屬性，是用于尋找原型鍊的屬性

new操作

首先建立一個空對象，然後将空對象的原型的記憶體位址指向函數的原型對象，利用函數的call方法，将指向Windows的this指向該對象，然後再傳回該對象

對JS構造函數的了解

我的了解是使用new關鍵字來調用的函數被認為為構造函數。當使用new關鍵字建立對象時，this指向的是新建立的那個對象。如果被建立的對象沒有return 則會隐式的傳回this對象。

淺談對MVVM的了解

• MVVM是model-view-viewmodel的縮寫，即模型-視圖-視圖模型
• 模型：存放各種資料，一些是固定的，大部分是通過api從後端擷取的資料
• 視圖：顯示的界面，即DOM
• 視圖模型：是連接配接模型、視圖的橋梁，當資料變化時，viewmodel可監聽到變化，并自動更新視圖；而當使用者操作視圖時，viewmodel也可以監聽到使用者操作，進而對資料進行改動，實作資料的雙向綁定

• 

堆和棧的差別

• 從空間配置設定上
  • 棧：一般有作業系統自行配置設定釋放，用于存放參數值，局部變量等。
  • 堆：一般由程式員自行配置設定釋放，如果程式員忘記釋放，在程式結束後作業系統才會幫助釋放記憶體
• 從緩存上
  • 棧：使用一級緩存，一般在被調用時才存在于存儲空間中，用完即釋放
  • 堆：使用二級緩存，生命周期由垃圾回收機制所決定
• 從結構上
  • 棧：棧資料結構，先進先出
  • 堆：堆結構

vue 渲染大量資料時應該怎麼優化

• 一次傳入大量資料
  • 讓後端人員提供接口時做分頁處理，每次調用時進行分頁，并調用多次
  • 盡量不用雙向綁定，隻用部分頁面處理資料
• 分段加載資料，次數特别多
  • 使用異步渲染元件
  • 使用v-if，避免出現大量節點

網站的黑夜模式的原理

使用media (prefers-color-scheme: dark)來更換css樣式

講述浏覽器緩存流程

強緩存和協商緩存相應字段和優先級

• 強緩存：cache-control、expires。cache-control>expires
• 協商緩存：last-modified/if-modified-since、etag/if-none-match。etag>last-modified

express和koa的差別

• 文法差別
  • express異步使用回調函數
  • koa異步使用await和async
• 中間件差別
  • koa采用洋蔥模型，進去順序執行，出去反向執行，且支援context傳遞資料
  • express本身沒有洋蔥模型，需要引入插件，且沒有context
• 內建度差別
  • koa内置中間件，內建度高
  • koa簡潔

ES6 代碼轉成 ES5 代碼的實作思路是什麼

将ES6的代碼轉換為AST文法樹，然後再将ES6 AST轉為ES5 AST，再将AST轉為代碼

介紹下 BFC、IFC、GFC 和 FFC

塊級格式化上下文BFC，内聯格式化上下文IFC，網格布局格式化上下文GFC，自适應格式化上下文FFC

介紹下 http1.0、1.1、2.0 協定的差別

http 1.0 建構可擴充

http 1.1 添加了持久連結

http 2.0 添加了加密 頭部壓縮 伺服器推送 管線操作 以及多路複用等功能

計算機網絡相關

• OSI協定
  • 應用層 表示層 會話層 運輸層 網絡層 資料鍊路層 實體層
• TCP/IP協定
  • 應用層 運輸層 網際層 網絡接口層
• 五層協定
  • 應用層 運輸層 網絡層 資料鍊路層 實體層
• 資料鍊路層
  • 封裝成幀---------将網絡層的分組添加首部和尾部，形成幀
  • 透明傳輸---------在内容中和首部和尾部相同的内容添加轉義字元
  • 差錯檢測---------使用CRC檢測
• TCP三向交握(A:用戶端；B：服務端)
  • A向B發送請求封包，SYN=1,ACK=0，seq選擇一個初始的序号x
  • B收到A發送的請求封包後，如果同意連接配接，則向A發送确認封包，SYN=1，ACK=1，确認号為x+1，同時seq選擇一個初始的序号y
  • A收到B發送的确認封包後，再向B發出确認,ACK=1，确認号為y+1，序号為x+1
  • B收到A的封包後，連接配接确立
• TCP四次揮手
  • A向B發送釋放封包，FIN=1,seq 選擇一個序号u
  • B收到A發出的封包後，則向A發出确認封包，ACK=1, seq選擇一個序号v，确認号為u+1，此時B屬于半關閉狀态，B可以向A發送資料但是A不能像B發送
  • 當B确定不再需要連接配接時，B向A發送釋放封包，FIN=1,ACK=1,seq選擇一個序号w，确認号為u+1
  • 當A收到确認後，向B發送封包，ACK=1,seq為u+1，确認号為w+1，A再進入time-wait狀态，之後自行關閉
  • B收到A的封包後關閉連接配接

塗鴉智能二面準備

條件編譯

使用@cc_on @if (@_jscript_version >= 4) @else @end

vue雙向綁定原理深入

首先元件進行初始化的時候，解析器compile會掃描和解析各個節點元素，然後會利用Object.defineProterty來建立監聽器observer用于監聽屬性，如果屬性發生變化，便會通知訂閱者watcher，看是否需要更新，因為訂閱者會有多個，是以需要建立消息訂閱器dep對監聽器和訂閱者進行管理。當訂閱者接收到屬性變化後，會執行挺對應的更新函數，對視圖進行更新

監聽器observer

function defineReactive(data, key, val) {
    observe(val);	//如果值為對象，則周遊其子屬性，添加資料劫持
    let dep = new Dep();
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            if ('是否添加訂閱者') {
                dep.addSub(watcher);//添加訂閱者
            }
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('屬性'+ key + '已被監聽, 現在值為: ' + newVal);
            dep.notify();//通知所有訂閱者
        };
    })
};
function observe(data) {
    if (!data || typeof(data) !== 'object') return;
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
}
           

消息訂閱器dep

function Dep() {
    this.subs = [];
};
Dep.prototype = {
    addSub(sub) {
        this.subs.push(sub);
    },
    notify() {
        this.subs.forEach(sub => {
            sub.update();
        })
    },
};
           

DNS工作原理

1、在浏覽器中輸入www . qq .com 域名，作業系統會先檢查自己本地的hosts檔案是否有這個網址映射關系，如果有，就先調用這個IP位址映射，完成域名解析。

2、如果hosts裡沒有這個域名的映射，則查找本地DNS解析器緩存，是否有這個網址映射關系，如果有，直接傳回，完成域名解析。

3、如果hosts與本地DNS解析器緩存都沒有相應的網址映射關系，首先會找TCP/ip參數中設定的首選DNS伺服器，在此我們叫它本地DNS伺服器，此伺服器收到查詢時，如果要查詢的域名，包含在本地配置區域資源中，則傳回解析結果給客戶機，完成域名解析，此解析具有權威性。

4、如果要查詢的域名，不由本地DNS伺服器區域解析，但該伺服器已緩存了此網址映射關系，則調用這個IP位址映射，完成域名解析，此解析不具有權威性。

5、如果本地DNS伺服器本地區域檔案與緩存解析都失效，則根據本地DNS伺服器的設定（是否設定轉發器）進行查詢，如果未用轉發模式，本地DNS就把請求發至13台根DNS，根DNS伺服器收到請求後會判斷這個域名(.com)是誰來授權管理，并會傳回一個負責該頂級域名伺服器的一個IP。本地DNS伺服器收到IP資訊後，将會聯系負責.com域的這台伺服器。這台負責.com域的伺服器收到請求後，如果自己無法解析，它就會找一個管理.com域的下一級DNS伺服器位址(http://qq.com)給本地DNS伺服器。當本地DNS伺服器收到這個位址後，就會找http://qq.com域伺服器，重複上面的動作，進行查詢，直至找到www . qq .com主機。

6、如果用的是轉發模式，此DNS伺服器就會把請求轉發至上一級DNS伺服器，由上一級伺服器進行解析，上一級伺服器如果不能解析，或找根DNS或把轉請求轉至上上級，以此循環。不管是本地DNS伺服器用是是轉發，還是根提示，最後都是把結果傳回給本地DNS伺服器，由此DNS伺服器再傳回給客戶機。

從用戶端到本地DNS伺服器是屬于遞歸查詢，而DNS伺服器之間就是的互動查詢就是疊代查詢。

vue與react的差別

• 資料是否可變
  • react的資料整體是函數式的思想，屬于單項資料流，資料不可變
  • vue雙向綁定，資料可變
• 是否通過js操作一切
  • react是js操作一切，是以有jsx，vue是将html，css，js相結合
• 是否為聲明式寫法
  • vue是聲明式寫法，react是類的寫法

實作一個簡單的promise

class PromiseM {
    constructor(process) {
        this.status = 'pending';
        this.msg = 'asd';
        process(this.resolve.bind(this), this.reject.bind(this));
        return this;
    };
    resolve(val) {
        this.status = 'fullfilled';
        this.msg = val;
    };
    reject(err) {
        this.status = 'rejected';
        this.msg = err;
    };
    then(fullfilled, rejected) {
        if (this.status == 'fullfilled')
            fullfilled(this.msg);
        if (this.status == 'rejected')
            rejected(this.msg);
    };
}
           

this指向問題

• 在函數方法中，this指向全局對象
• 在對象調用中，this指向上級對象，即調用者
• 在構造函數調用中，this指向該對象