Occlusion Culling

by Julien Etienne

HTML

<div class="container" id="container">
</div>

CSS

.container {
  width: 40rem;
  height: 12rem;
  background: yellow;
  overflow-y: scroll;
 
  >.box {
    width: inherit;
    height: 12rem;
    /* height: 4rem; */
    border: 0.1rem solid limegreen;
    box-sizing: border-box;
    content-visibility: auto;
    content-intrinsic-size: 100px 150px;
  }
}

JavaScript

// Make boxes and insert into container
const container = document.querySelector('#container')
const makeBox = (text, i) => `<div class="box">${text}
 <img src="https://picsum.photos/200/300?${i}">
</div>`
const list = new Array(1000)

const items = list.fill()
.map((_, i) => makeBox(new Date(), i))
console.log('items', items)
const startTime = performance.now()

items.forEach((item) =>{
  container.insertAdjacentHTML('afterbegin', item)
})


container.insertAdjacentHTML('afterend',  performance.now() - startTime + ' ms')
//