Rendering bug in the spec
Closed this issue · 15 comments
Not sure if this is a respec bug or not, but something looks messed:
Can reproduce on both these URLs:
Doh. Looks like respec runtime is breaking due to a... newline. /cc @marcoscaceres
@plehegar I can't seem to push to the repo; any chance you could check my permissions?
@igrigorik I'm on it! I switched to off-main-thread syntax highlighting recently, and clearly I missed something.
Ok, there are some other markup issues ... fixing those. @igrigorik, will also add ABNF syntax highlight support to ReSpec ✨
Ok, so immediate issues appear to be fixed. Will send a PR with updated markup for this spec.
Actually, there is still a bug...
😔 ... will fix soon.
Ah, no! the ">" are in the markup. It's all good :)
Not sure if this is related but there is an issue with the strong tag and the preceding space of the textNode after the strong tag
@paulirish, really big ask, but any chance you could give me some recommendations for getting rid of the FOUC from ReSpec? I've tried various things (and have made significant gains - like the references are in IndexedDB, so I don't hit the network for those anymore on second load, and syntax highlighting is done off main-thread, etc.), but haven't quite got it to a point I'm happy super with.
@igrigorik, same for you, ReSpec is using preload and dns-preconnect in various places already. But if you have any further perf recommendations, I'm all ears. Would like to make it even faster. I'm going to move markdown processing off main-thread also, which hopefully help a bit.
@varemenos, thanks! Will look into that too.
@marcoscaceres the respec script include is async.. so it's a race between when that becomes available and the browser rendering the (unprocessed) HTML markup. To eliminate the race...
- inline it into the doc.. but that forfeits the current update mechanism + bloats each spec.
- hide the content until it's processed? Check out the amp hack for "animating" visibility.
The latter delays rendering, but removing FOUC is a win in my books..
@igrigorik, ok, will do as you suggested: will set body.hidden=true as early as possible in processing. Then after done, will show the final doc.
Testing it locally quickly, it does yield significantly less ugliness - the FOUC is much less extreme (and way less thrashing). Probably good enough for now 👍
@igrigorik, about the ABNF issue above... maybe turn off syntax highlighting (remove the "abnf" from the "```abnf")... it turned out to be less useful/pretty than I had originally hoped.
@igrigorik ok, I made your recommended changes to ReSpec (FOUC is gone!). Document is now hidden during generation. For markdown documents like this one, I suggest removing the "async" keyword from the scrip tag. That will get rid of the FOUC on this document too.
I will then continue to move some other things off main thread, reduce payload size, and lazy load some other things in parallel. Gradually, performance should get significantly better over the next year.
@marcoscaceres 👍 .. I'll tackle the ABNF stuff in separate commit. Closing this.