Displaying 1 to 12 from 12 results

idlize - Helper classes and methods for implementing the idle-until-urgent pattern

  •    Javascript

Helper classes and methods make it easier for developers to implement the idle-until-urgent pattern and leverage the requestIdleCallback() API. This library is a collection of helper methods and classes (not a single bundle). As such, each helper should be imported separately. All public helpers are released at the level of the project, so they can be imported by directly referencing the helper's .mjs file.

yall.js - A fast, flexible, and small image lazy loader!

  •    Javascript

yall.js is a featured-packed lazy loading script for <img>, <picture>, <video> and <iframe> elements. It works in all modern browsers including IE11. It uses Intersection Observer where available, but falls back to scroll, touchmove, resize, and orientationchange events where necessary. It can also monitor the DOM for changes using Mutation Observer to lazy load image elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also (optionally) optimize use of browser idle time using requestIdleCallback. To optimize decoding of <img> lazy loading for simple src and srcset use cases, yall.js uses Image.decode where available to decode images asynchronously before adding them to the DOM.

angular-idle-preload - :soon: Angular Idle Preload for preloading async routes via @TipeIO

  •    TypeScript

Scheduling non-essential work yourself is very difficult to do. It’s impossible to figure out exactly how much frame time remains because after requestAnimationFrame callbacks execute there are style calculations, layout, paint, and other browser internals that need to run. A home-rolled solution can’t account for any of those. In order to be sure that a user isn’t interacting in some way you would also need to attach listeners to every kind of interaction event (scroll, touch, click), even if you don’t need them for functionality, just so that you can be absolutely sure that the user isn’t interacting. The browser, on the other hand, knows exactly how much time is available at the end of the frame, and if the user is interacting, and so through requestIdleCallback we gain an API that allows us to make use of any spare time in the most efficient way possible.

sob - Schedule on Browser

  •    Javascript

This is a zero dependencies utility to manage, in a simple and fully cross browser way, calls to requestAnimationFrame and requestIdleCallback. New in version 0.1.0 the ability to schedule regular timeouts and intervals only when the tab is visible, saving operations for when the user needs them, as opposite to regardless.




ric-shim - requestIdleCallback shim that won't blow up if used in node.js

  •    Javascript

requestIdleCallback is awesome. I want to use it in my projects and install it from npm. I was going to write a shim that would fallback to a simple setTimeout only to find that the awesome Paul Lewis had already done this.

requestIdleCallback-polyfill - Polyfill for request idle callback

  •    Javascript

requestIdleCallback is a new browser API which allows to execute code when browser is idle. This is crucial for creating smooth animations and user experiences allowing to avoid janks which basically happens when CPU become too overloaded to fit into frame budget which is 16 msec. Polyfill is built on principe that janks are most harmful to UX and have highest chance to happen when user is continously interacting with UI. Polyfill basically prevents operation from being executed while user performing some actions on interface. Currently this implies scrolls, taps, clicks, mouse and touch movements. The condition is pretty simple - if there were no interactions for 100 msec there is a huge chance that we are in idle.

nanoscheduler - Schedule work to be completed when the user agent is idle.

  •    Javascript

Schedule work to be completed when the user agent is idle. Weighs 270 bytes compressed. Just like with window.requestAnimationFrame, it's much more efficient to share a single instance than to call it for each piece of work. There's a significant overhead when scheduling small amounts of work. This package allows sharing a scheduler as a singleton, which makes it particularly useful to be shared between multiple applications.

on-idle - 😴 - Detect when the browser is idle

  •    Javascript

Safely detect when the browser is idle. Does nothing when run in Node. Call a function when the browser has spare time. Calls it on the next frame if window.requestIdleCallback is not available. Does nothing in Node.


react-idle - Render components when browser is idle

  •    Javascript

Render components when browser is idle. The idea is to allow Above The Fold content to render as soon as possible, letting the rest of the app render and update when the browser is idle.

polite-element - Politely waits to render an element until the browser has spare time

  •    Javascript

Politely waits to render an element until the browser has time to spare using window.requestIdleCallback(). Useful to create incrementally loading applications that don't block user interaction. Create an initial element on load using renderBasic. Once the browser is less busy it will call the renderFancy function to load a more complex element. Always calls renderBasic when run in Node.

custom-idle-queue - Optimize the performance of important tasks by delaying background-tasks

  •    Javascript

This is a npm-module that lets you optimize the performance of important tasks by delaying background-tasks. It works a bit like requestIdleCallback but instead of fetching idle-time of the CPU, you can use this for any given limited ressource. In this example we define database-requests as limited ressource. We create an idleQueue arround all calls to the ressource to ensure our importantTask is as fast as possible and the backgroundTask only runs when no importantTask is using the database.

idle-until-urgent - Defer JS work until the browser has a chance to breathe

  •    Javascript

Fetch resources lazily - either whenever the browser is next idle, or when you request the resource. In a browser that doesn't support requestIdleCallback, or in node.js where the API is not available, falls back to setTimeout(fn, 1000).