mirror of
https://github.com/morris/vanilla-todo.git
synced 2025-08-26 07:14:22 +02:00
discuss innerHTML re-rendering problems
This commit is contained in:
13
README.md
13
README.md
@@ -20,7 +20,7 @@ considerable duplication.
|
|||||||
If anything, the case study validates the value of build steps and frameworks,
|
If anything, the case study validates the value of build steps and frameworks,
|
||||||
but also demonstrates that standard web technologies can be used effectively and
|
but also demonstrates that standard web technologies can be used effectively and
|
||||||
there are only a few [critical areas](#523-the-bad) where a vanilla approach is
|
there are only a few [critical areas](#523-the-bad) where a vanilla approach is
|
||||||
clearly inferior (especially in browser testing).
|
clearly inferior.
|
||||||
|
|
||||||
_Intermediate understanding of the web platform is required to follow through._
|
_Intermediate understanding of the web platform is required to follow through._
|
||||||
|
|
||||||
@@ -375,9 +375,14 @@ Reference:
|
|||||||
#### 3.2.3. Rendering
|
#### 3.2.3. Rendering
|
||||||
|
|
||||||
Naively re-rendering a whole component using `.innerHTML` should be avoided
|
Naively re-rendering a whole component using `.innerHTML` should be avoided
|
||||||
as this may hurt performance and will likely break important functionality such
|
as this may hurt performance and will likely break important functionality
|
||||||
as input state, focus, text selection etc. which browsers have already been
|
which browsers have already been optimizing for decades:
|
||||||
optimizing for decades.
|
|
||||||
|
- `<a>`, `<button>`, `<input>`, etc. may lose focus.
|
||||||
|
- Form inputs may lose data on re-render.
|
||||||
|
- Text selection may be reset on re-render.
|
||||||
|
- CSS transitions won't work if you re-render a large chunk of HTML instead of toggling a class.
|
||||||
|
- Event listeners may need to be reattached.
|
||||||
|
|
||||||
As seen in [3.2.1.](#321-mount-functions), rendering is therefore split into
|
As seen in [3.2.1.](#321-mount-functions), rendering is therefore split into
|
||||||
some rigid base HTML and an idempotent, complete update function which only
|
some rigid base HTML and an idempotent, complete update function which only
|
||||||
|
Reference in New Issue
Block a user