stevenwaterman / minesweeper-optimisation Goto Github PK

Hi @stevenwaterman ,

first of all congratulations for the nicely written article that led me here: https://blog.scottlogic.com/2020/02/17/minesweeper-optimisation.html

I am writing this regarding the section on HTML Optimisation. I was wondering if your layout is not one of those which would benefit immensely from using the contain property (specified in the CSS Containment Module, a new web standard), which is precisely designed to prevent reflow and/or repaint by marking elements that are independent from the rest of the page.

Some folks at Bloomberg are using it for their complex UI (imagine a big table with numbers in cells changing all time -> that is very similar to your use case) and a 4x layout gain has been reported.

About CSS Contain:

• https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/
• talk at CSS conf EU last year from the feature implementer in Chromium (mentions Bloomberg use)
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment
• https://developer.mozilla.org/en-US/docs/Web/CSS/contain

If that is of interest and you end up trying the property instead of switching to canvas, let me know, I am genuinely interested.