來八道讓我萌幣的面試題

第 1 題：瀏覽器緩存讀取規則

能夠分紅 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那請求的時候 from memory cache 和 from disk cache 的依據是什麼，哪些數據何時存放在 Memory Cache 和 Disk Cache中？

1.Service Worker

Service Worker 是運行在瀏覽器背後的獨立線程，通常能夠用來實現緩存功能。使用 Service Worker的話，傳輸協議必須爲 HTTPS。由於 Service Worker 中涉及到請求攔截，因此必須使用 HTTPS 協議來保障安全。Service Worker 的緩存與瀏覽器其餘內建的緩存機制不一樣，它可讓咱們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，而且緩存是持續性的。

Service Worker 實現緩存功能通常分爲三個步驟：首先須要先註冊 Service Worker，而後監聽到 install 事件之後就能夠緩存須要的文件，那麼在下次用戶訪問的時候就能夠經過攔截請求的方式查詢是否存在緩存，存在緩存的話就能夠直接讀取緩存文件，不然就去請求數據。

當 Service Worker 沒有命中緩存的時候，咱們須要去調用 fetch 函數獲取數據。也就是說，若是咱們沒有在 Service Worker 命中緩存的話，會根據緩存查找優先級去查找數據。可是無論咱們是從 Memory Cache 中仍是從網絡請求中獲取的數據，瀏覽器都會顯示咱們是從 Service Worker 中獲取的內容。

2.Memory Cache

Memory Cache 也就是內存中的緩存，主要包含的是當前中頁面中已經抓取到的資源,例如頁面上已經下載的樣式、腳本、圖片等。讀取內存中的數據確定比磁盤快,內存緩存雖然讀取高效，但是緩存持續性很短，會隨着進程的釋放而釋放。一旦咱們關閉 Tab 頁面，內存中的緩存也就被釋放了。

那麼既然內存緩存這麼高效，咱們是否是能讓數據都存放在內存中呢？

這是不可能的。計算機中的內存必定比硬盤容量小得多，操做系統須要精打細算內存的使用，因此能讓咱們使用的內存必然很少。

當咱們訪問過頁面之後，再次刷新頁面，能夠發現不少數據都來自於內存緩存

內存緩存中有一塊重要的緩存資源是preloader相關指令（例如<link rel="prefetch">）下載的資源。總所周知preloader的相關指令已是頁面優化的常見手段之一，它能夠一邊解析js/css文件，一邊網絡請求下一個資源。

3.Disk Cache

Disk Cache 也就是存儲在硬盤中的緩存，讀取速度慢點，可是什麼都能存儲到磁盤中，比之 Memory Cache 勝在容量和存儲時效性上。

在全部瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的。它會根據 HTTP Herder 中的字段判斷哪些資源須要緩存，哪些資源能夠不請求直接使用，哪些資源已通過期須要從新請求。而且即便在跨站點的狀況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數據。絕大部分的緩存都來自 Disk Cache，關於 HTTP 的協議頭中的緩存字段，咱們會在下文進行詳細介紹。

瀏覽器會把哪些文件丟進內存中？哪些丟進硬盤中？

關於這點，網上說法不一，不過如下觀點比較靠得住：

對於大文件來講，大機率是不存儲在內存中的，反之優先

當前系統內存使用率高的話，文件優先存儲進硬盤

4.Push Cache

Push Cache（推送緩存）是 HTTP/2 中的內容，當以上三種緩存都沒有命中時，它纔會被使用。它只在會話（Session）中存在，一旦會話結束就被釋放，而且緩存時間也很短暫，在Chrome瀏覽器中只有5分鐘左右，同時它也並不是嚴格執行HTTP頭中的緩存指令。

Push Cache 在國內可以查到的資料不多，也是由於 HTTP/2 在國內不夠普及。這裏推薦閱讀Jake Archibald的HTTP/2 push is tougher than I thought這篇文章，文章中的幾個結論：

全部的資源都能被推送，而且可以被緩存,可是 Edge 和 Safari 瀏覽器支持相對比較差

能夠推送 no-cache 和 no-store 的資源

一旦鏈接被關閉，Push Cache 就被釋放

多個頁面可使用同一個HTTP/2的鏈接，也就可使用同一個Push Cache。這主要仍是依賴瀏覽器的實現而定，出於對性能的考慮，有的瀏覽器會對相同域名但不一樣的tab標籤使用同一個HTTP鏈接。

Push Cache 中的緩存只能被使用一次

瀏覽器能夠拒絕接受已經存在的資源推送

你能夠給其餘域名推送資源

若是以上四種緩存都沒有命中的話，那麼只能發起請求來獲取資源了。

第 2 題：使用迭代的方式實現 flatten 函數。

迭代的實現:

第 3 題：算法題「旋轉數組」

給定一個數組，將數組中的元素向右移動 k 個位置，其中 k 是非負數。

示例 1：

示例 2：

問題轉化爲：數組的末尾k個元素移動到數組前面
末尾元素：arr.splice(-k%arr.length)的返回值
剩餘元素：arr

const moveArr = (arr,k)=>arr.splice(-k%arr.length).concat(arr)

第 4 題：打印出 1 - 10000 之間的全部對稱數

例如：12一、1331 等

第 5 題：在輸入框中如何判斷輸入的是一個正確的網址。

工做中遇到校驗網址是否正確，查了好多方法發現實現不了複雜的校驗，最後定的規則是校驗是否是以https://或http://開頭

第 6 題：實現 convert 方法，把原始 list 轉換成樹形結構，要求儘量下降時間複雜度

如下數據結構中，id 表明部門編號，name 是部門名稱，parentId 是父部門編號，爲 0 表明一級部門，如今要求實現一個 convert 方法，把原始 list 轉換成樹形結構，parentId 爲多少就掛載在該 id 的屬性 children 數組下，結構以下：

第 7 題：實現模糊搜索結果的關鍵詞高亮顯示

個人大概思路是，用正則替換掉關鍵詞。

ps:若是是vue項目，直接與v-html結合使用更爽哦~

第 8 題：1000-div問題

難度：阿里p5 ~ p六、騰訊t21 ~ t22

一次性插入1000個div，如何優化插入的性能

使用Fragment

var fragment = document.createDocumentFragment();
fragment.appendChild(elem);

**
向1000個並排的div元素中，插入一個平級的div元素，如何優化插入的性能
**

1. 先display:none 而後插入 再display:block
2. 賦予key，而後使用virtual-dom，先render，而後diff，最後patch
3. 脫離文檔流，用GPU去渲染，開啓硬件加速