HTML rendering and javascript engines are very optimized, so why do they feel slow on smartphones?
It seems that HTML’s low performance justified the creation of mobiles “apps” which are more responsive, but also did not allow developers to just do things in HTML.
It seems that websites are generally too heavy/cluttered/bloated, which makes it harder for smartphone processors to render them fast enough, but it doesn’t seem like it’s the only real reason.
I’ve read that HTML is known to be an ambiguous language, which makes it harder to render it since browsers have to lift ambiguity and render malformed HTML.
XHTML seems like a “stricter” standard, but it seems like it was abandoned. Would a more strict markup language be faster to render?
What other option would there be for a markup language to be faster to render?
-
Would it be possible to reduce clutter by collapsing redundant tags before sending the HTML?
-
Would “compiling” the tag tree-architecture into a binary format make it faster to render?
Does the DOM generally carries too much technical debt, which explains its poor performance?
4
It’s not really to do with HTML itself, and especially not XHTML, but four things:
-
the document layout is dynamically computed at runtime based on the size of the device viewport.
-
the attributes (including ones which affect the layout!) have to be computed at runtime from the CSS
-
quite a lot of modern webpages isn’t in the HTML at all, but is dynamically generated at runtime by Javascript and then added to the DOM. This triggers a re-layout and re-render. Potentially many re-layout and re-render events.
-
advertising and tracking systems issue a lot of requests in the background, and potentially trigger yet more re-renders.
If you construct a raw HTML page with simple CSS, you will observe it rendering pretty quickly on a phone. Conversely, if you look at a web page in a desktop browser and open the development tools, you’ll see an awful lot of complexity.
Much of this is down to the choice of various Javascript frameworks such as React. React components usually don’t exist in the initial HTML and are constructed at runtime by Javascript. There are some efforts to combat their terrible performance by “precompiling” dynamic data back into the HTML that’s originally delivered. This process is called “hydration”.