search

MithrilJS / mithril.js

A JavaScript Framework for Building Brilliant Applications
https://mithril.js.org
MIT License
14.02k stars 925 forks source link

handle FOUC from pre-generated markup #147

Closed lhorie closed 9 years ago

lhorie commented 10 years ago

Related to #60

Need to figure out a way to handle flash of unbehaviored content when a developer sends pre-generated markup from the server for SEO and performance optimization purposes.

Realistically, you'd never want an app to load so slowly that a user would even be able to type before the Mithril-driven DOM kicks in, but still.

Satyam commented 10 years ago

A possible way to handle this might be starting the page like this:

<head>
<style>body {display:none}</style>
<body class="preventFOUC">

Then add this to the very bottom of the last CSS you load:

body.preventFOUC { display:block}

The higher specificity of the selector would make it override the previous. It can also be handled via !important but I think that the explicit className makes the intent clearer, at least by being there it makes you wonder what's the trick. The !important by being transparent, would make it easier to miss and someone else, at a later date, might drop the {display:none} part.

lhorie commented 10 years ago

Right, but the whole point of the exercise is to have the markup available before Mithril kicks in. Hiding it via CSS negates any performance benefits from pre-generating the markup

Satyam commented 10 years ago

I am not sure which unformatted content you might be concerned about but, if you want to wait for the styles to arrive, you will simply have to wait. However, I don't think this should be a concern.

AFAIK, most browsers will postpone rendering if any remote <style> tags are still pending. Once cached, there shouldn't be much of a delay. Unless the developer is using some very big CSS files, some of which exists, they shouldn't take long.

With the style sheets requested at the top of the page, they all should arrive well ahead of any code. The number of simultaneous connections the browser is configured to handle might delay the arrival of the code, whose Githubissues.

  • Githubissues is a development platform for aggregating issues.