位置粘

Question

我知道這是偉大的Web開發人員現在可以做到這樣的事情沒有JS：

.sticky { 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -ms-sticky; 
    position: -o-sticky; 
    top: 15px; 
} 

VS

<style> 
.sticky { 
    position: fixed; 
    top: 0; 
} 
.header { 
    width: 100%; 
    background: #F6D565; 
    padding: 25px 0; 
} 
</style> 

<div class="header"></div> 

<script> 
var header = document.querySelector('.header'); 
var origOffsetY = header.offsetTop; 

function onScroll(e) { 
    window.scrollY >= origOffsetY ? header.classList.add('sticky') : 
            header.classList.remove('sticky'); 
} 

document.addEventListener('scroll', onScroll); 
</script> 

但實際的瀏覽器的引擎蓋下是不是做相同類型的渲染，並佔用相同數量的內存。本質上，瀏覽器中的代碼級別較低，可以使CSS找到位置：-webkit-sticky，並且與上面的JavaScript具有相同的渲染效果？

Answer 1

從本質上講，瀏覽器中的代碼級別較低，可以讓CSS找到位置：-webkit-sticky，並且與上面的javascript具有相同的渲染效果？

不。瀏覽器不必做同樣的事情。

對於粘性區域的本機支持，對於每個剪切區域，瀏覽器可以維護兩個單獨的圖形緩衝區 - 一個用於容器大小的非粘性內容，另一個用於視口大小的粘性內容。上滾動，它

1. 抓住第一的可見區域中，
2. 複合材料，其與所述第二（考慮到z折射率）
3. 的blit即到屏幕上。

瀏覽器根本不需要處理DOM。

比較這與JS onscroll方法。

1. 抓住從另一幀的情況下，JS一個鎖當前計算的東西在當前幀
2. 成立了JS執行上下文
3. 運行的用戶功能
4. 檢查任何CSS選擇器是否需要重新應用
5. 檢查DOM是否需要進行佈局
6. 修改DOM事件偵聽器檢查是否需要被解僱
7. 網絡古爾哪些需要重新呈現DOM的位 - 這是不動的周圍已經被渲染矩形的問題
8. 重新渲染
9. 複合
10. 塊傳輸