The ways we currently schedule and perform work in applications are suboptimal. This talk takes a deep dive into how Javascript runtimes and browsers work, and how we can write code to make our app's do their work more intelligently. You'll walk away with deeper knowledge and appreciation for MicroTasks, MacroTasks, the call stack, and requestAnimationFrame, as well as a preview of Igniter, a kernel for the web.
Running HTML5 Mobile Web Games at 60fpsApoorv Saxena
How to run Web Mobile Games at 60fps, talk presented at Meta Refresh 2015 conference.
Presentation discusses the performant tweaks / approaches to consider for running games at mobile at 60fps, and also entails the different pros and cons related to each approach.
Loops play an essential role in software development, and they are used to iterate through the arrays or other elements that are iterable. In Javascript, we have a few different types of loops. It sometimes can be confusing which loop we should use in a particular case and which one will be the best in case of our performance. In this article, I’m going to compare the loops in Javascript, describe their pros and cons, test the speed of each of them.
No Callbacks, No Threads - RailsConf 2010Ilya Grigorik
Multi-threaded servers compete for the global interpreter lock (GIL) and incur the cost of continuous context switching, potential deadlocks, or plain wasted cycles. Asynchronous servers, on the other hand, create a mess of callbacks and errbacks, complicating the code. But, what if, you could get all the benefits of asynchronous programming, while preserving the synchronous look and feel of the code – no threads, no callbacks?
Titanium - Making the most of your single threadRonald Treur
The native app development environments support multiple threads. Titanium however does not (out of the box), it only supports a single thread. In this presentaton, Ronald Treur will shortly explain how threading works and why this knowledge matters. But more important, he will show you how to keep heavy duty processes from blocking others.
Running HTML5 Mobile Web Games at 60fpsApoorv Saxena
How to run Web Mobile Games at 60fps, talk presented at Meta Refresh 2015 conference.
Presentation discusses the performant tweaks / approaches to consider for running games at mobile at 60fps, and also entails the different pros and cons related to each approach.
Loops play an essential role in software development, and they are used to iterate through the arrays or other elements that are iterable. In Javascript, we have a few different types of loops. It sometimes can be confusing which loop we should use in a particular case and which one will be the best in case of our performance. In this article, I’m going to compare the loops in Javascript, describe their pros and cons, test the speed of each of them.
No Callbacks, No Threads - RailsConf 2010Ilya Grigorik
Multi-threaded servers compete for the global interpreter lock (GIL) and incur the cost of continuous context switching, potential deadlocks, or plain wasted cycles. Asynchronous servers, on the other hand, create a mess of callbacks and errbacks, complicating the code. But, what if, you could get all the benefits of asynchronous programming, while preserving the synchronous look and feel of the code – no threads, no callbacks?
Titanium - Making the most of your single threadRonald Treur
The native app development environments support multiple threads. Titanium however does not (out of the box), it only supports a single thread. In this presentaton, Ronald Treur will shortly explain how threading works and why this knowledge matters. But more important, he will show you how to keep heavy duty processes from blocking others.
The Robots industry is promising major operational benefits, although no one is quite sure where robots and the Industrial Internet of Things (IIoT) will take manufacturing. IoT represents a closing of the gap between production and IT and is seen as the next big step for automation.
Lets see some algorithms and safety concepts behind this topic.
Join this video course on Udemy. Click the below link
https://www.udemy.com/mastering-rtos-hands-on-with-freertos-arduino-and-stm32fx/?couponCode=SLIDESHARE
>> The Complete FreeRTOS Course with Programming and Debugging <<
"The Biggest objective of this course is to demystifying RTOS practically using FreeRTOS and STM32 MCUs"
STEP-by-STEP guide to port/run FreeRTOS using development setup which includes,
1) Eclipse + STM32F4xx + FreeRTOS + SEGGER SystemView
2) FreeRTOS+Simulator (For windows)
Demystifying the complete Architecture (ARM Cortex M) related code of FreeRTOS which will massively help you to put this kernel on any target hardware of your choice.
Page freeze, glitchy animation, and slow scrolling. They follow us everywhere, and we'd like them to stop. This talk will get to the bottom of these issues by delving into the Javascript engine and concepts like task, call-stack, and event-loops. I will also introduce several ways to tackle these problems and walk you through a demo to help you understand.
Animations on Fire - Making Web animations fastbrianskold
How to make Web animations perform better by understanding what browsers are doing and employing the latest technologies like will-change, layers, compositor animations and the Web Animations API.
HTML version: http://people.mozilla.org/~bbirtles/pres/graphical-web-2014/
Unleashing Real-World Simulations: A Python Tutorial by Avjinder KalerAvjinder (Avi) Kaler
Simulation, a key tool in understanding complex systems, offers a dynamic representation to analyze and enhance resource allocation, preventing issues like congestion and delays.
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
The Robots industry is promising major operational benefits, although no one is quite sure where robots and the Industrial Internet of Things (IIoT) will take manufacturing. IoT represents a closing of the gap between production and IT and is seen as the next big step for automation.
Lets see some algorithms and safety concepts behind this topic.
Join this video course on Udemy. Click the below link
https://www.udemy.com/mastering-rtos-hands-on-with-freertos-arduino-and-stm32fx/?couponCode=SLIDESHARE
>> The Complete FreeRTOS Course with Programming and Debugging <<
"The Biggest objective of this course is to demystifying RTOS practically using FreeRTOS and STM32 MCUs"
STEP-by-STEP guide to port/run FreeRTOS using development setup which includes,
1) Eclipse + STM32F4xx + FreeRTOS + SEGGER SystemView
2) FreeRTOS+Simulator (For windows)
Demystifying the complete Architecture (ARM Cortex M) related code of FreeRTOS which will massively help you to put this kernel on any target hardware of your choice.
Page freeze, glitchy animation, and slow scrolling. They follow us everywhere, and we'd like them to stop. This talk will get to the bottom of these issues by delving into the Javascript engine and concepts like task, call-stack, and event-loops. I will also introduce several ways to tackle these problems and walk you through a demo to help you understand.
Animations on Fire - Making Web animations fastbrianskold
How to make Web animations perform better by understanding what browsers are doing and employing the latest technologies like will-change, layers, compositor animations and the Web Animations API.
HTML version: http://people.mozilla.org/~bbirtles/pres/graphical-web-2014/
Unleashing Real-World Simulations: A Python Tutorial by Avjinder KalerAvjinder (Avi) Kaler
Simulation, a key tool in understanding complex systems, offers a dynamic representation to analyze and enhance resource allocation, preventing issues like congestion and delays.
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Crescat
Crescat is industry-trusted event management software, built by event professionals for event professionals. Founded in 2017, we have three key products tailored for the live event industry.
Crescat Event for concert promoters and event agencies. Crescat Venue for music venues, conference centers, wedding venues, concert halls and more. And Crescat Festival for festivals, conferences and complex events.
With a wide range of popular features such as event scheduling, shift management, volunteer and crew coordination, artist booking and much more, Crescat is designed for customisation and ease-of-use.
Over 125,000 events have been planned in Crescat and with hundreds of customers of all shapes and sizes, from boutique event agencies through to international concert promoters, Crescat is rigged for success. What's more, we highly value feedback from our users and we are constantly improving our software with updates, new features and improvements.
If you plan events, run a venue or produce festivals and you're looking for ways to make your life easier, then we have a solution for you. Try our software for free or schedule a no-obligation demo with one of our product specialists today at crescat.io
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Atelier - Innover avec l’IA Générative et les graphes de connaissancesNeo4j
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Allez au-delà du battage médiatique autour de l’IA et découvrez des techniques pratiques pour utiliser l’IA de manière responsable à travers les données de votre organisation. Explorez comment utiliser les graphes de connaissances pour augmenter la précision, la transparence et la capacité d’explication dans les systèmes d’IA générative. Vous partirez avec une expérience pratique combinant les relations entre les données et les LLM pour apporter du contexte spécifique à votre domaine et améliorer votre raisonnement.
Amenez votre ordinateur portable et nous vous guiderons sur la mise en place de votre propre pile d’IA générative, en vous fournissant des exemples pratiques et codés pour démarrer en quelques minutes.
May Marketo Masterclass, London MUG May 22 2024.pdfAdele Miller
Can't make Adobe Summit in Vegas? No sweat because the EMEA Marketo Engage Champions are coming to London to share their Summit sessions, insights and more!
This is a MUG with a twist you don't want to miss.
First Steps with Globus Compute Multi-User EndpointsGlobus
In this presentation we will share our experiences around getting started with the Globus Compute multi-user endpoint. Working with the Pharmacology group at the University of Auckland, we have previously written an application using Globus Compute that can offload computationally expensive steps in the researcher's workflows, which they wish to manage from their familiar Windows environments, onto the NeSI (New Zealand eScience Infrastructure) cluster. Some of the challenges we have encountered were that each researcher had to set up and manage their own single-user globus compute endpoint and that the workloads had varying resource requirements (CPUs, memory and wall time) between different runs. We hope that the multi-user endpoint will help to address these challenges and share an update on our progress here.
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
GraphSummit Paris - The art of the possible with Graph TechnologyNeo4j
Sudhir Hasbe, Chief Product Officer, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppGoogle
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-fusion-buddy-review
AI Fusion Buddy Review: Key Features
✅Create Stunning AI App Suite Fully Powered By Google's Latest AI technology, Gemini
✅Use Gemini to Build high-converting Converting Sales Video Scripts, ad copies, Trending Articles, blogs, etc.100% unique!
✅Create Ultra-HD graphics with a single keyword or phrase that commands 10x eyeballs!
✅Fully automated AI articles bulk generation!
✅Auto-post or schedule stunning AI content across all your accounts at once—WordPress, Facebook, LinkedIn, Blogger, and more.
✅With one keyword or URL, generate complete websites, landing pages, and more…
✅Automatically create & sell AI content, graphics, websites, landing pages, & all that gets you paid non-stop 24*7.
✅Pre-built High-Converting 100+ website Templates and 2000+ graphic templates logos, banners, and thumbnail images in Trending Niches.
✅Say goodbye to wasting time logging into multiple Chat GPT & AI Apps once & for all!
✅Save over $5000 per year and kick out dependency on third parties completely!
✅Brand New App: Not available anywhere else!
✅ Beginner-friendly!
✅ZERO upfront cost or any extra expenses
✅Risk-Free: 30-Day Money-Back Guarantee!
✅Commercial License included!
See My Other Reviews Article:
(1) AI Genie Review: https://sumonreview.com/ai-genie-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
#AIFusionBuddyReview,
#AIFusionBuddyFeatures,
#AIFusionBuddyPricing,
#AIFusionBuddyProsandCons,
#AIFusionBuddyTutorial,
#AIFusionBuddyUserExperience
#AIFusionBuddyforBeginners,
#AIFusionBuddyBenefits,
#AIFusionBuddyComparison,
#AIFusionBuddyInstallation,
#AIFusionBuddyRefundPolicy,
#AIFusionBuddyDemo,
#AIFusionBuddyMaintenanceFees,
#AIFusionBuddyNewbieFriendly,
#WhatIsAIFusionBuddy?,
#HowDoesAIFusionBuddyWorks
Globus Connect Server Deep Dive - GlobusWorld 2024Globus
We explore the Globus Connect Server (GCS) architecture and experiment with advanced configuration options and use cases. This content is targeted at system administrators who are familiar with GCS and currently operate—or are planning to operate—broader deployments at their institution.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Mobile App Development Company In Noida | Drona InfotechDrona Infotech
Looking for a reliable mobile app development company in Noida? Look no further than Drona Infotech. We specialize in creating customized apps for your business needs.
Visit Us For : https://www.dronainfotech.com/mobile-application-development/
Do you want Software for your Business? Visit Deuglo
Deuglo has top Software Developers in India. They are experts in software development and help design and create custom Software solutions.
Deuglo follows seven steps methods for delivering their services to their customers. They called it the Software development life cycle process (SDLC).
Requirement — Collecting the Requirements is the first Phase in the SSLC process.
Feasibility Study — after completing the requirement process they move to the design phase.
Design — in this phase, they start designing the software.
Coding — when designing is completed, the developers start coding for the software.
Testing — in this phase when the coding of the software is done the testing team will start testing.
Installation — after completion of testing, the application opens to the live server and launches!
Maintenance — after completing the software development, customers start using the software.
Enhancing Research Orchestration Capabilities at ORNL.pdfGlobus
Cross-facility research orchestration comes with ever-changing constraints regarding the availability and suitability of various compute and data resources. In short, a flexible data and processing fabric is needed to enable the dynamic redirection of data and compute tasks throughout the lifecycle of an experiment. In this talk, we illustrate how we easily leveraged Globus services to instrument the ACE research testbed at the Oak Ridge Leadership Computing Facility with flexible data and task orchestration capabilities.
AI Genie Review: World’s First Open AI WordPress Website CreatorGoogle
AI Genie Review: World’s First Open AI WordPress Website Creator
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-genie-review
AI Genie Review: Key Features
✅Creates Limitless Real-Time Unique Content, auto-publishing Posts, Pages & Images directly from Chat GPT & Open AI on WordPress in any Niche
✅First & Only Google Bard Approved Software That Publishes 100% Original, SEO Friendly Content using Open AI
✅Publish Automated Posts and Pages using AI Genie directly on Your website
✅50 DFY Websites Included Without Adding Any Images, Content Or Doing Anything Yourself
✅Integrated Chat GPT Bot gives Instant Answers on Your Website to Visitors
✅Just Enter the title, and your Content for Pages and Posts will be ready on your website
✅Automatically insert visually appealing images into posts based on keywords and titles.
✅Choose the temperature of the content and control its randomness.
✅Control the length of the content to be generated.
✅Never Worry About Paying Huge Money Monthly To Top Content Creation Platforms
✅100% Easy-to-Use, Newbie-Friendly Technology
✅30-Days Money-Back Guarantee
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
#AIGenieApp #AIGenieBonus #AIGenieBonuses #AIGenieDemo #AIGenieDownload #AIGenieLegit #AIGenieLiveDemo #AIGenieOTO #AIGeniePreview #AIGenieReview #AIGenieReviewandBonus #AIGenieScamorLegit #AIGenieSoftware #AIGenieUpgrades #AIGenieUpsells #HowDoesAlGenie #HowtoBuyAIGenie #HowtoMakeMoneywithAIGenie #MakeMoneyOnline #MakeMoneywithAIGenie
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
Innovating Inference - Remote Triggering of Large Language Models on HPC Clus...Globus
Large Language Models (LLMs) are currently the center of attention in the tech world, particularly for their potential to advance research. In this presentation, we'll explore a straightforward and effective method for quickly initiating inference runs on supercomputers using the vLLM tool with Globus Compute, specifically on the Polaris system at ALCF. We'll begin by briefly discussing the popularity and applications of LLMs in various fields. Following this, we will introduce the vLLM tool, and explain how it integrates with Globus Compute to efficiently manage LLM operations on Polaris. Attendees will learn the practical aspects of setting up and remotely triggering LLMs from local machines, focusing on ease of use and efficiency. This talk is ideal for researchers and practitioners looking to leverage the power of LLMs in their work, offering a clear guide to harnessing supercomputing resources for quick and effective LLM inference.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
2. Chris Thoburn
@runspired
Ember + Mobile
@IsleOfCode
This is me, I recently took a timeout to wander a desert pondering the true meaning of Javascript.
This is the face I make when wondering what Tom Dale eats for breakfast.
4. This is how it feels to conquer the world and deliver an app that runs smoothly. Pedal to the Metal.
5. But too often it turns out like this cyclist.
It turns out that it’s hard to build optimized, performance focused applications without access to system metal.
6. What is our metal?
And how much access do we have?
When I began focusing on performance, I began asking this question.
Don’t worry, today isn’t going to be full of array or hash optimizations, it’s not about algorithms, Int32Arrays, Buffers, or Binary data.
Today, we’re going to talk a lot about requestAnimationFrame.
7. Doing Work Smarter
And we’re going to talk a lot about doing work smarter with requestAnimationFrame.
If you’ve never heard of requestAnimationFrame, I suggest you google it once we’re off of conference wifi, you may also want to consider a new home that’s not this
island, or a rock.
8. How does JS, JS?
But this isn’t a talk to tell you that requestAnimationFrame exists and why you should use it. Today we’ll dive deeper into what it is, how it functions, and how you should
be using it.
10. For a lot of us, a stack trace such as this is our first experience with the call stack.
11. We entered the stack by calling aFunction, which called bFunction and so on until it hit the function that threw the error. Because invocation began with aFunction, the
stack, and thus the trace, lead back to aFunction.
12. The Callback Queue
This is usually called the “Event Queue”, but in order to not confuse it with actual events, or a concept we’ll introduce later called an “event frame”, we’re going skip on
calling it that.
13. setTimeout(fn, 0);
This function is fancy magic. We know that Javascript is single threaded and that we can bump some work down the line by wrapping it in this call.
14. setTimeout(fnC, 0);
setTimeout(fnB, 0);
setTimeout(fnA, 0);
setTimeout(fnD, 0);
setTimeout(fnE, 0);
We might even use it to delay a lot of work. We get that there’s some queue of functions to be invoked, and that doing this pushed execution of a function to the end of
that queue.
How does this work?
17. Now, bar doesn’t immediately go onto the queue, instead it goes into this strange land of Web APIs, where a timer in a separate process is going to deliver it back to us
at the right time in case we say had called setTimeout with a number other than 0.
18. A timer kicks off, and at the right time, bar is sent to back of the queue.
19. And when the all the work from foo and from any other callbacks in front of this one completes, bar is invoked and becomes the start of a new call stack.
There are some concepts here for debugging asynchronous code “stack stitching” “async trace”
23. Ooof, there’s a lot going on in this picture, where to start.
For one, I’ve slyly renamed the callback queue to the “MacroTask” Queue. This just means these are higher level, but lower priority “jobs” or “tasks” that need to be
done. We’ve got a few waiting.
Off to the left, we’ve added a new purple box which we’ve called the Next AnimationFrame.
24. this time, foo calls requestAnimationFrame instead of setTimeout, and our web APIs see this as a new FrameTask.
25. and they schedule the job (baz) into the next AnimationFrame, a separate callback queue.
26. foo calls requestAnimationFrame several times, and each time a new job is pushed into the next AnimationFrame callback queue.
How will this flush?
27. I. Finish The Call Stack
II. Check if should flush AnimationFrame
I. Flush AnimationFrame
III. Do next MacroTask from MacroTask Queue
(repeat)
First, we complete the current call stack (all the work begun with foo).
Next, we check if it’s time to flush the AnimationFrame queue, and if so, we flush it.
Else, we do the next MacroTask, and repeat. We finish the callstack, check if we should flush the AnimationFrame, etc.
Let’s see this in action.
28.
29.
30.
31.
32.
33.
34. What happens if you requestAnimationFrame
during an Animation Frame flush?
if you’ve ever used raf, you already know the answer, but let’s see this quickly too.
40. The Window.requestAnimationFrame() method tells
the browser that you wish to perform an animation
and requests that the browser call a specified function
to update an animation before the next repaint. The
method takes as an argument a callback to be
invoked before the repaint.
https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
41. If you’ve ever dug into Chrome’s “performance tuning” documentation, you may have seen this diagram.
43. raf flushes ~ every (1000 / 60 - X) ms
Where X is the amount of time spent in the previous AnimationFrame flush. This means that if we take 10ms to flush, the next flush will begin only a few milliseconds
later.
44. Style is separate
AnimationFrame’s budge will adjust
Here, we’re doing JS and Layout outside of the AnimationFrame, but it’s legal to do it within it as well.
50. FRP style updates: this is a snippet from Hammer.js 3.0 which is currently under active development.
Here, we don’t schedule work into raf, we use raf to poll new state and flush it.
51. This is a snippet from the next version of smoke-and-mirrors. This is a module that lets you add and remove scroll event handlers for an element.
52. But instead of binding an event to scroll, it passively polls the element’s offset and triggers the callback when it has changed.
54. A Better IntersectionObserver
radar, within smoke-and-mirrors, is basically a richer IntersectionObserver, I’ve been considering turning it into a polyfill + additional features.
55. In poll mechanism for watching scroll, you may have noticed that I was flushing the callbacks inside the success callback of a resolved promise. This begs a question.
56. Promises
In Ember, we use a lot of promises for managing asynchronous behavior. How do they inter operate with setTimeout and raf?
57.
58. We flushed our promise work before the console printed the return from our function. I promise you this is actually asynchronous, but don’t worry, I’ll explain.
61. I. Finish The Call Stack
II. Flush MicroTask Queue
III. Check if should flush Render MacroTasks
I. Flush Render MacroTasks
IV. Do next MacroTask from Event Queue
(repeat)
A fuller picture
63. A Kernel for the Web
So what’s this about a kernel for the web?
We want to get down to the system metal.
64. Houston, what’s our countdown at again?
We have a timing problem.
You do not know is the next macro task scheduled via setTimeout will trigger before or after the next AnimationFrame flush.
back burner (ember.run) flushes with setTimeout.
Ember’s rendering engine flushes by scheduling into backburner’s render queue.
This means, we do not know if our next render is before or after the next AnimationFrame flush.
65. Forced Layouts are a timing problem.
Layout is a lot like a computed promise. Various events and actions will invalidate it, but it isn’t recomputed until it’s requested.
Forced layouts happen when our JS code needs to read a layout related value and our layout is in an invalid state.
66. JS => L => JS => L => JS => L => Paint => Composite
L: Layout
FL: Forced Layout
JS: Javascript Logic (app code)
P: Paint
C: Composite
This is what the default state for most Ember apps is, multiple extra layouts
Tying Ember’s render to setTimeout causes extra layouts.
67. JS => L => JS => FL =>
JS => L => JS => FL =>
JS => L => Paint => Composite
L: Layout
FL: Forced Layout
JS: Javascript Logic (app code)
P: Paint
C: Composite
Each time we did layout, we might also have needed to measure or alter something in the DOM, perhaps checking or modifying a class name, or maybe we wanted to
know the new dimensions or location of an object.
Now we additionally have multiple forced layouts to go with our extra layouts.
69. We do a lot of unnecessary work because of this.
I. (multiple) forced layouts
II. extraneous render flushes / diffs
III. misaligned read/write operations
IV. not all mutations and reads are equal
70. requestAnimationFrame is not necessarily better
you can still force layout
you want to batch your DOM reads and your DOM writes
not all DOM writes are created equal.
Abusing Frame MacroTasks can be as choppy and risky as setTimeout
if we aren’t organized.
Animation Frame’s flush stops the world,
but we do not know when.
71. Scheduling work via MacroTasks is slow
and error prone.
setTimeout often takes 4-5ms to flush
we have very poor guarantees of when
72. Scheduling work via MicroTasks is fast
but introduces order-of-operations issues.
We don’t know the order in which promises will be flushed.
We can’t control batching reads and writes.
Doing DOM work in a promise callback can quickly lead to Forced Layouts
73. Timing Implications
- our app is doing extra work
- the browser is doing extra work
- we’re increasing the likelihood of a
minor or a major GC event.
- we don’t know if work we
scheduled in RAF is happening
before or after the render we care
about.
74. We are even further away from the “Metal” now.
(not that we were very good at these things before either)
The frameworks we are building over have abstracted
rendering, in the process, we have lost control we need.
75. Major and Minor Garbage Collection events
stop the world and have unpredictable timing, but they
do have predictable causes!
76. What we really want, is a way to schedule work
to happen at the optimal time for what it is.
77. Igniter
I want to introduce you to a project I’ve been building called Igniter.
78. Event Frame Render Frame Measure Frame Idle Frame
- sync
- actions
- cleanup
- render
- afterRender
- cleanup
- destroy (legacy)
- measure
- affect
- gc
- query
schedule(‘sync’, () => {});
Why do we defer work, debounce, throttle, schedule?
- "do it at render"
- "do it in the right order"
- "do it at a better time"
- "do it later, just not now"
- "do this only once"
Igniter tries to answer these questions.
79. Event Frame
- sync
- actions
- cleanup
schedule(‘sync’, () => {});
EventFrame flushes as a micro task, and represents work that should be done asynchronously but immediately and in a better order.
80. Render Frame
- render
- afterRender
- cleanup
- destroy (legacy)
Render flushes within RAF, specifically at the beginning of RAF. This lets us avoid extra layouts and extra forced layouts that were present in the setTimeout version.
81. Measure Frame
- measure
- affect
Measure also flushes within raf, but is guaranteed to flush after render. It itself is separated into “measure” and “affect”, think “read” and “write”.
82. Idle Frame
- gc
- query
if you know that an operation is going to cause a significant GC and can be deferred, schedule it into the idle frame
85. Primary Advantages
I. Align work correctly
II. Avoid duplicated App work
III. Ease the Browser’s Workload
IV. Meaningful Stack Traces
V. Easier Experimentation