javascript - Position sticky -

i know it's great web developers can accomplish things without 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> 

but under hood of actual browser isn't doing same kind of rendering, , take same amount of memory. in essence there lower level of code in browser renders css finds position: -webkit-sticky, , of same rendering javascript above?

in essence there lower level of code in browser renders css finds position: -webkit-sticky, , of same rendering javascript above?

no. browser not have same thing.

with native support sticky regions, each clipped region browser can maintain 2 separate graphics buffers -- 1 non-sticky content sized container , 1 sticky content sized viewport. on scroll, it

1. grabs visible region of first,
2. composite second (taking account z-indices)
3. blits screen.

the browser not need deal dom @ all.

compare js onscroll approach.

1. grab lock in case js frame computing in current frame
2. set js execution context
3. run user function
4. check whether css selectors need re-applied
5. check whether dom needs laid out
6. check whether dom modification event listeners need fired
7. figure out bits of dom need re-rendered -- isn't matter of moving around rectangles have been rendered
8. re-render
9. composite
10. blit