撩課-Web大前端天天5道面試題-Day33

1.CommonJS 中的 require/exports 和 ES6 中的 import/export 區別？

CommonJS 模塊的重要特性是加載時執行，
即腳本代碼在 require 的時候，就會所有執行。
一旦出現某個模塊被」循環加載」，
就只輸出已經執行的部分，
還未執行的部分不會輸出。

ES6 模塊是動態引用，
若是使用 import 從一個模塊加載變量，
那些變量不會被緩存，
而是成爲一個指向被加載模塊的引用，
須要開發者本身保證，
真正取值的時候可以取到值。

import/export 最終都是編譯爲 require/exports 來執行的。
CommonJS 規範規定，
每一個模塊內部，
module 變量表明當前模塊。
這個變量是一個對象，
它的 exports 屬性（即 module.exports ）是對外的接口。
加載某個模塊，
實際上是加載該模塊的 module.exports 屬性。
export 命令規定的是對外的接口，
必須與模塊內部的變量創建一一對應關係。

複製代碼

2.項目作過哪些性能優化？

減小 HTTP 請求數
減小 DNS 查詢
使用 CDN
避免重定向
圖片懶加載
減小 DOM 元素數量
減小 DOM 操做
使用外部 JavaScript 和 CSS
壓縮 JavaScript 、 CSS 、字體、圖片等
優化 CSS Sprite
使用 iconfont
字體裁剪
多域名分發劃份內容到不一樣域名
儘可能減小 iframe 使用
避免圖片 src 爲空
把樣式表放在 中
把腳本放在頁面底部

複製代碼

3.js 異步加載的方式?

渲染引擎遇到 script 標籤會停下來，
等到執行完腳本，繼續向下渲染
defer 是「渲染完再執行」，async 是「下載完就執行」，
defer 若是有多個腳本，
會按照在頁面中出現的順序加載，
多個async 腳本不能保證加載順序
加載 es6模塊的時候設置 type=module，
異步加載不會形成阻塞瀏覽器，頁面渲染完再執行，
能夠同時加上async屬性，
異步執行腳本（利用頂層的this等於undefined這個語法點，
能夠偵測當前代碼是否在 ES6 模塊之中）

複製代碼

4.get與post 通信的區別？

Get 請求能緩存，Post 不能
Post 相對 Get 安全一點點，
由於Get 請求都包含在 URL 裏，且會被瀏覽器保存歷史紀錄，
Post 不會，可是在抓包的狀況下都是同樣的。
Post 能夠經過 request body來傳輸比 Get 更多的數據，Get 沒有這個技術
URL有長度限制，會影響 Get 請求，
可是這個長度限制是瀏覽器規定的，不是 RFC 規定的
Post 支持更多的編碼類型且不對數據類型限制

複製代碼

5.爲何虛擬 dom 會提升性能?

虛擬 dom 至關於在 js 和真實 dom 中間加了一個緩存，
利用 dom diff 算法避免了沒有必要的 dom 操做，從而提升性能。

用 JavaScript 對象結構表示 DOM 樹的結構；
而後用這個樹構建一個真正的 DOM 樹，
插到文檔當中當狀態變動的時候，從新構造一棵新的對象樹。
而後用新的樹和舊的樹進行比較，
記錄兩棵樹差別把 2 所記錄的差別應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。

複製代碼