1、 什么是重繪（Repaint）和回流（Reflow）？

哪些動作可能會導致重繪（Repaint）和回流（Reflow）的發生？

重繪（Repaint）和回流（Reflow）和Event loop的關系？

如何減少重繪（Repaint）和回流（Reflow）？

答： 重繪和回流是渲染步驟中的一小節，但是這兩個步驟對于性能影響很大。 1. 重繪是當節點需要更改外觀而不會影響布局的，比如改變?color?就叫稱為重繪 2. 回流是布局或者幾何屬性需要改變就稱為回流。

回流必定會發生重繪，重繪不一定會引發回流。回流所需的成本比重繪高的多，改變深層次的節點很可能導致父節點的一系列回流。 所以以下幾個動作可能會導致性能問題：

• 改變 window 大小
• 改變字體
• 添加或刪除樣式
• 文字改變
• 定位或者浮動
• 盒模型

很多人不知道的是，重繪和回流其實和 Event loop 有關。

• 當 Event loop 執行完 Microtasks 后，會判斷 document 是否需要更新。因為瀏覽器是 60Hz 的刷新率，每 16ms 才會更新一次。
• 然后判斷是否有?resize?或者?scroll?，有的話會去觸發事件，所以?resize?和?scroll?事件也是至少 16ms 才會觸發一次，并且自帶節流功能。
• 判斷是否觸發了 media query
• 更新動畫并且發送事件
• 判斷是否有全屏操作事件
• 執行?requestAnimationFrame?回調
• 執行?IntersectionObserver?回調，該方法用于判斷元素是否可見，可以用于懶加載上，但是兼容性不好
• 更新界面
• 以上就是一幀中可能會做的事情。如果在一幀中有空閑時間，就會去執行?requestIdleCallback?回調。

少重繪和回流 使用?translate?替代?top

• 使用?visibility?替換?display: none?，因為前者只會引起重繪，后者會引發回流（改變了布局）
• 把 DOM 離線后修改，比如：先把 DOM 給?display:none?(有一次 Reflow)，然后你修改100次，然后再把它顯示出來
• 不要把 DOM 結點的屬性值放在一個循環里當成循環里的變量

for(let i = 0; i < 1000; i++) { // 獲取 offsetTop 會導致回流，因為需要去獲取正確的值 console.log(document.querySelector('.test').style.offsetTop) }

不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局

• 動畫實現的速度的選擇，動畫速度越快，回流次數越多，也可以選擇使用?requestAnimationFrame
• CSS 選擇符從右往左匹配查找，避免 DOM 深度過深
• 將頻繁運行的動畫變為圖層，圖層能夠阻止該節點回流影響別的元素。比如對于?video?標簽，瀏覽器會自動將該節點變為圖層。

2、 https抓包的原理是什么？平時你用什么工具？如何抓包？

3、什么是無頭瀏覽器？它的作用是什么？

4、請說一下V8下的垃圾回收機制

答：V8 實現了準確式 GC，GC 算法采用了分代式垃圾回收機制。因此，V8 將內存（堆）分為新生代和老生代兩部分。 新生代算法 新生代中的對象一般存活時間較短，使用 Scavenge GC 算法。 在新生代空間中，內存空間分為兩部分，分別為 From 空間和 To 空間。在這兩個空間中，必定有一個空間是使用的，另一個空間是空閑的。新分配的對象會被放入 From 空間中，當 From 空間被占滿時，新生代 GC 就會啟動了。算法會檢查 From 空間中存活的對象并復制到 To 空間中，如果有失活的對象就會銷毀。當復制完成后將 From 空間和 To 空間互換，這樣 GC 就結束了。 #老生代算法

老生代算法 老生代中的對象一般存活時間較長且數量也多，使用了兩個算法，分別是標記清除算法和標記壓縮算法。 在講算法前，先來說下什么情況下對象會出現在老生代空間中： 新生代中的對象是否已經經歷過一次 Scavenge 算法，如果經歷過的話，會將對象從新生代空間移到老生代空間中。 To 空間的對象占比大小超過 25 %。在這種情況下，為了不影響到內存分配，會將對象從新生代空間移到老生代空間中。 老生代中的空間很復雜，有如下幾個空間

enum AllocationSpace { 復制代碼

// TODO(v8:7464): Actually map this space's memory as read-only. RO_SPACE, // 不變的對象空間 NEW_SPACE, // 新生代用于 GC 復制算法的空間 OLD_SPACE, // 老生代常駐對象空間 CODE_SPACE, // 老生代代碼對象空間 MAP_SPACE, // 老生代 map 對象 LO_SPACE, // 老生代大空間對象 NEW_LO_SPACE, // 新生代大空間對象

FIRST_SPACE = RO_SPACE, LAST_SPACE = NEW_LO_SPACE, FIRST_GROWABLE_PAGED_SPACE = OLD_SPACE, LAST_GROWABLE_PAGED_SPACE = MAP_SPACE }; 在老生代中，以下情況會先啟動標記清除算法：

• 某一個空間沒有分塊的時候
• 空間中被對象超過一定限制
• 空間不能保證新生代中的對象移動到老生代中

在這個階段中，會遍歷堆中所有的對象，然后標記活的對象，在標記完成后，銷毀所有沒有被標記的對象。在標記大型對內存時，可能需要幾百毫秒才能完成一次標記。這就會導致一些性能上的問題。為了解決這個問題，2011 年，V8 從 stop-the-world 標記切換到增量標志。在增量標記期間，GC 將標記工作分解為更小的模塊，可以讓 JS 應用邏輯在模塊間隙執行一會，從而不至于讓應用出現停頓情況。但在 2018 年，GC 技術又有了一個重大突破，這項技術名為并發標記。該技術可以讓 GC 掃描和標記對象時，同時允許 JS 運行，你可以點擊?該博客?詳細閱讀。

清除對象后會造成堆內存出現碎片的情況，當碎片超過一定限制后會啟動壓縮算法。在壓縮過程中，將活的對象像一端移動，直到所有對象都移動完成然后清理掉不需要的內存。

5、線性順序存儲結構和鏈式存儲結構有什么區別？以及優缺點。

答： 順序存儲結構和鏈式存儲結構的區別 鏈表存儲結構的內存地址不一定是連續的，但順序存儲結構的內存地址一定是連續的； 鏈式存儲適用于在較頻繁地插入、刪除、更新元素時，而順序存儲結構適用于頻繁查詢時使用。

順序存儲結構和鏈式存儲結構的優缺點： 空間上 順序比鏈式節約空間。是因為鏈式結構每一個節點都有一個指針存儲域。 存儲操作上： 順序支持隨機存取，方便操作 插入和刪除上： 鏈式的要比順序的方便（因為插入的話順序表也很方便，問題是順序表的插入要執行更大的空間復雜度，包括一個從表頭索引以及索引后的元素后移，而鏈表是索引后，插入就完成了） 例如：當你在字典中查詢一個字母j的時候，你可以選擇兩種方式，第一，順序查詢，從第一頁依次查找直到查詢到j。第二，索引查詢，從字典的索引中，直接查出j的頁數，直接找頁數，或許是比順序查詢最快的。

轉載于:https://juejin.im/post/5b911a635188255c652d1c3b

總結

以上是生活随笔為你收集整理的八月面试题（2） 2018-9-6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。