The personal-website's discuss from evelynhathaway

Investigate the effects of using a ResizeObverver for triggering the Tiles component when supported

These trigger events may be less performant than a native ResizeObserver, but likely not its polyfill.

personal-website/src/components/Tiles/index.jsx

Lines 42 to 69 in a100628

    
           // Trigger on page load 
        
           // - Won't have scrollbar which may cause a jump 
        
           //	or subpixel issues (mitigated by `tileSize + 1`) 
        
           // initialRender(); 
        
           // Trigger on window resized, zoomed, device rotated, moved to another screens, etc. 
        
           // - `requestAnimationFrame` delays the call by ~0.5ms on x6 slow down on a clean environment but may improve the performance when multiple resize events occur at once. This occurance is rare since `render()` is quicker than a layout reflow, which occurs after requesting the frame, but I still want to protect against this edge case. 
        
           // - I can't pinpoint any negative effects because the system must already be impacted to be noticable (e.g. large canvas, x6 CPU slowdown, no offscreencanvas, and a lot of other tabs in the same process), and even then V8 optimises the calls very quickly 
        
           // - Basically, the reflow from all of the responsive styles of other elements have a larger impact than this component 
        
           // If you have more information on the performance of this component, I'd love to chat :D 
        
           window.addEventListener("resize", () => requestAnimationFrame(renderHandoff)); 
        
           // Trigger on DOM content loaded (interactive DOM, not all resources) 
        
           // - Allows scrollbar to be included in the calculations in most cases 
        
           if (document.readyState === "loading") { 
        
           	// Loading hasn't finished yet 
        
           	document.addEventListener("DOMContentLoaded", initialRender); 
        
           } else { 
        
           	// `DOMContentLoaded` has already fired 
        
           	initialRender(); 
        
           } 
        
           // Tripper after all resources (fonts, styles, images) are loaded for the last initial paint 
        
           // - In case a layout update occurred after the first-to-the-punch `DOMContentLoaded` 
        
           if (document.readyState !== "complete") { 
        
           	// Loading hasn't finished yet 
        
           	window.addEventListener("load", renderHandoff); 
        
           }

evelynhathaway / personal-website Goto Github PK

personal-website's Issues

Investigate the effects of using a ResizeObverver for triggering the Tiles component when supported

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	// Trigger on page load
	// - Won't have scrollbar which may cause a jump
	// or subpixel issues (mitigated by `tileSize + 1`)
	// initialRender();

	// Trigger on window resized, zoomed, device rotated, moved to another screens, etc.
	// - `requestAnimationFrame` delays the call by ~0.5ms on x6 slow down on a clean environment but may improve the performance when multiple resize events occur at once. This occurance is rare since `render()` is quicker than a layout reflow, which occurs after requesting the frame, but I still want to protect against this edge case.
	// - I can't pinpoint any negative effects because the system must already be impacted to be noticable (e.g. large canvas, x6 CPU slowdown, no offscreencanvas, and a lot of other tabs in the same process), and even then V8 optimises the calls very quickly
	// - Basically, the reflow from all of the responsive styles of other elements have a larger impact than this component
	// If you have more information on the performance of this component, I'd love to chat :D
	window.addEventListener("resize", () => requestAnimationFrame(renderHandoff));

	// Trigger on DOM content loaded (interactive DOM, not all resources)
	// - Allows scrollbar to be included in the calculations in most cases
	if (document.readyState === "loading") {
	// Loading hasn't finished yet
	document.addEventListener("DOMContentLoaded", initialRender);
	} else {
	// `DOMContentLoaded` has already fired
	initialRender();
	}

	// Tripper after all resources (fonts, styles, images) are loaded for the last initial paint
	// - In case a layout update occurred after the first-to-the-punch `DOMContentLoaded`
	if (document.readyState !== "complete") {
	// Loading hasn't finished yet
	window.addEventListener("load", renderHandoff);
	}