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

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

重繪（Repaint）和回流（Reflow）和Event loop的關(guān)系？

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

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

回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流?；亓魉璧某杀颈戎乩L高的多，改變深層次的節(jié)點很可能導致父節(jié)點的一系列回流。 所以以下幾個動作可能會導致性能問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

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 }; 在老生代中，以下情況會先啟動標記清除算法：

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

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

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

5、線性順序存儲結(jié)構(gòu)和鏈式存儲結(jié)構(gòu)有什么區(qū)別？以及優(yōu)缺點。

答： 順序存儲結(jié)構(gòu)和鏈式存儲結(jié)構(gòu)的區(qū)別 鏈表存儲結(jié)構(gòu)的內(nèi)存地址不一定是連續(xù)的，但順序存儲結(jié)構(gòu)的內(nèi)存地址一定是連續(xù)的； 鏈式存儲適用于在較頻繁地插入、刪除、更新元素時，而順序存儲結(jié)構(gòu)適用于頻繁查詢時使用。

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

轉(zhuǎn)載于:https://juejin.im/post/5b911a635188255c652d1c3b

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。