img-comparison-slider
fastdom
img-comparison-slider | fastdom | |
---|---|---|
1 | 4 | |
534 | 6,779 | |
- | - | |
6.8 | 2.9 | |
11 days ago | 3 months ago | |
TypeScript | JavaScript | |
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
img-comparison-slider
-
If Web Components are so great, why am I not using them?
* Should not conflict with anything on the page
[0] https://github.com/sneas/img-comparison-slider
fastdom
-
If Web Components are so great, why am I not using them?
Now, every time we read `offsetHeight`, the browser sees that it has a scheduled DOM modification to apply, so it has to apply that first, before it can return a correct value.
This is the reason that libraries like fastdom (https://github.com/wilsonpage/fastdom) exist - they help ensure that, in a given tick, all the reads happen first, followed by all the writes.
That said, I suspect even if you add a write followed by a read to your `while(1)` experiment, it still won't actually render anything, because painting is a separate phase of the rendering process, which always happens asynchronously. But that might not be true, and I'm on mobile and can't test it myself.
- TodoMVC App Written in Vanilla JavaScript
-
Notes on the Critical Rendering Path (CRP)
batching your writes & reads to the DOM (via FastDOM or a virtual DOM implementation).
-
Performance tips for JavaScript Game Developers
For more information on how and why this works, and a more robust and complete implementation, check out the FastDom library: https://github.com/wilsonpage/fastdom - note that you might not need this particular optimization if you're using a rendering framework, which should already be doing these sorts of optimisations for you.
What are some alternatives?
yhtml - Tiny html tag function for rendering Web Component templates with event binding
mebm - zero-dependency browser-based video editor
lit - Lit is a simple library for building fast, lightweight web components.
react-gradual-upgrade-demo - Demonstration of how to gradually upgrade an app to a new version of React
custom-elements - Using custom elements
FunPizzaShop
uibuilder - Typed HTML templates using TypeScript's TSX files
custom-elements-everywhere - Custom Element + Framework Interoperability Tests.
lite-youtube - The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed.
proposal-import-attributes - Proposal for syntax to import ES modules with assertions