WindowOrWorkerGlobalScope.setInterval() - Web APIs
the setinterval() method, offered on the window and worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. it returns an interval id which uniquely identifies the interval, so you can remove it later by calling clearinterval(). this method is defined by the windoworworkerglobalscope mixin. syntax var intervalid = scope.setinterval(func, [delay, arg1, arg2, ...]); var intervalid = scope.setinterval(function[, delay]); var intervalid = scope.setinterval(code, [delay]); parameters func a function to be executed every delay milliseconds. the function is not passed any arguments, and no return value is expected. code an optional syntax allows you to include a string instead of a function, which is compiled and executed every d...
... arg1, ..., argn optional additional arguments which are passed through to the function specified by func once the timer expires. ...
...iseconds. the function is not passed any arguments, and no return value is expected. code an optional syntax allows you to include a string instead of a function, which is compiled and executed every delay milliseconds. this syntax is not recommended for the same reasons that make using eval() a security risk. delayoptional the time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. see delay restrictions below for details on the permitted range of delay values. arg1, ..., argn optional additional arguments which are passed through to the function specified by func once the timer expires. note: passing additional arguments to setinterval() in the first syntax does not work in internet explorer 9 and earlier. if yo...
...And 10 more matches

nsITimer
nsitimer instances must be initialized by calling one of the initialization methods. you may also re-initialize (using one of the initialization methods) an existing instance to avoid the overhead of destroying and creating a timer. it is not necessary to cancel the timer in that case. xpcom/threads/nsitimer.idlscriptable please add a summary to this article. last changed in gecko 5 (firefox 5 / thunderbird 5 / seamonkey 2.2) inherits from: nsisupports implemented by: @mozilla.org/timer;1. ...
...rg/timer;1. to create an instance, use: var timer = components.classes["@mozilla.org/timer;1"] .createinstance(components.interfaces.nsitimer); users of instances of nsitimer should keep a reference to the timer until it is no longer needed in order to assure the timer is fired. ...
...ateinstance(components.interfaces.nsitimer); users of instances of nsitimer should keep a reference to the timer until it is no longer needed in order to assure the timer is fired. method overview void cancel(); void init(in nsiobserver aobserver, in unsigned long adelay, in unsigned long atype); void initwithcallback(in nsitimercallback acallback, in unsigned long adelay, in unsigned long atype); void initwithfunccallback(in nstimercallbackfunc acallback, in voidptr aclosure, in unsigned long adelay, in unsigned long atype); native code only! attributes attribute type description callback nsitimercallback the nsitimercallback object passed to initwithcallback(). read only. closure voidptr the opaque p...
...And 9 more matches

Installer Script - Archive of obsolete content
plugins folder next to mozilla 34. var pluginsfolder = getfolder("plugins"); 35. if (!fileexists(pluginsfolder)) 36. { 37. var ignoreerr = dircreate(pluginsfolder); 38. logcomment("dircreate() returned: " + ignoreerr); 39. } 40. else 41. logcomment("plugins folder already exists"); 42. var cf = getfolder("chrome"); 43. ...
...leexists(pluginsfolder)) 36. { 37. var ignoreerr = dircreate(pluginsfolder); 38. logcomment("dircreate() returned: " + ignoreerr); 39. } 40. else 41. logcomment("plugins folder already exists"); 42. var cf = getfolder("chrome"); 43. registerchrome(content | delayed_chrome, getfolder(cf,"toolkit.xpi"),"content/global/"); 44. registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/communicator/"); 45. ...
...gcomment("dircreate() returned: " + ignoreerr); 39. } 40. else 41. logcomment("plugins folder already exists"); 42. var cf = getfolder("chrome"); 43. registerchrome(content | delayed_chrome, getfolder(cf,"toolkit.xpi"),"content/global/"); 44. registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/communicator/"); 45. registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/editor/"); 46. registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/navigator/"); 47. ...
...And 6 more matches

JavaScript Daemons Management - Archive of obsolete content
/******************************* * polyfills * *******************************/ /*\ |*| |*| ie-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html5 standard syntax). ...
...*****************************/ /*\ |*| |*| ie-specific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html5 standard syntax). ...
...ific polyfill which enables the passage of arbitrary arguments to the |*| callback functions of javascript timers (html5 standard syntax). ...
...And 4 more matches

Choosing the right approach - Learn web development
asynchronous callbacks generally found in old-style apis, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. this is the precursor to promises; it's not as efficient or flexible. use only when necessary. useful for... ...
... support for callbacks in apis depends on the particular api. refer to the reference documentation for the api you're using for more specific support info. further information introducing asynchronous javascript, in particular async callbacks settimeout() settimeout() is a method that allows you to run a function after an arbitrary amount of time has passed. useful for... ...
...her information cooperative asynchronous javascript: timeouts and intervals, in particular settimeout() settimeout() reference setinterval() setinterval() is a method that allows you to run a function repeatedly with a set interval of time between each execution. not as efficient as requestanimationframe(), but allows you to choose a running rate/frame rate. useful for... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes no (unless it is the same one) no code example the following function creates a new date() object, extracts a time string out of it using tolocaletimestring(), and then displays it in the ui. we then run it once per second using setinterval(), creating the effe...
...And 4 more matches

Frame script loading and lifetime
loadframescript() function. this line of code loads a frame script into the currently selected tab. the script just writes "foo" to the command line: // chrome script var mm = gbrowser.selectedbrowser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame. chrome: urls extension developers usually use a chrome:// url to refer to the frame scripts. to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" f...
...me: urls extension developers usually use a chrome:// url to refer to the frame scripts. to define the mapping between a chrome:// url and a frame script packaged with an extension, use a "chrome.manifest" file to register a chrome url: // chrome.manifest content my-e10s-extension chrome/content/ // chrome script mm.loadframescript("chrome://my-e10s-extension/content/content.js", true); allowdelayedload if the message manager is a global frame message manager or a window message manager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call. for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into a...
...anager then: if allowdelayedload is true, the frame script will be loaded into any new frame, which has opened after the loadframescript() call. for example: var mm = window.messagemanager; mm.loadframescript("chrome://my-e10s-extension/content/frame-script.js", true); the script will be loaded into all tabs currently open in this window, and all new tabs opened afterwards. if allowdelayedload is false, the script will only be loaded into frames which are open when the call was made. if the message manager is a browser message manager, you should always pass true here. because a browser message manager only corresponds to a single browser tab, its loadframescript() function will only ever load the frame script into that one tab. ...
...And 4 more matches

DeferredTask.jsm
firefox 28 note interface was changed in firefox 28, and old methods were removed. the deferredtask.jsm javascript code module offers utility routines for a task that will run after a delay. multiple attempts to run the same task before the delay will be coalesced. to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/deferredtask.jsm"); use this, for instance, if you write data to a file and you expect that you may have to rewrite data very soon afterwards. ...
... run after a delay. multiple attempts to run the same task before the delay will be coalesced. to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://gre/modules/deferredtask.jsm"); use this, for instance, if you write data to a file and you expect that you may have to rewrite data very soon afterwards. with deferredtask, the task is delayed by a few milliseconds and, should a new change to the data occur during this period, only the final version of the data is actually written; a further grace delay is added to take into account other changes. the deferredtask constructor requires gecko 18.0(firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) if you have a function call you want to defer for two seconds, you can do...
... check the current task state. bool ispending(); return value returns true if pending, false otherwise. start obsolete since gecko 28 start (or postpone) task. void start(); flush obsolete since gecko 28 perform any postponed task immediately. void flush(); cancel obsolete since gecko 28 cancel any pending task. void cancel(); arm request the execution of the task after the delay specified on construction. multiple calls don't introduce further delays. if the task is running, the delay will start when the current execution finishes. the task will always be executed on a different tick of the event loop, even if the delay specified on construction is zero. multiple "arm" calls within the same tick of the event loop are guaranteed to result in a single execution of the tas...
...And 4 more matches

nsIFrameScriptLoader
idl file: mozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used to load frame scripts. methods void loadframescript(in astring aurl, in boolean aallowdelayedload, [optional] in boolean aruninglobalscope) void removedelayedframescript(in astring aurl); jsval getdelayedframescripts(); loadframescript() load a script in the remote frame. frame scripts are loaded as soon as loadframescript() is called. if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame...
...s loadframescript() is called. if this function is called on a chromemessagebroadcaster (for example, a global frame message manager or a window message manager) then: loadframescript() will load the frame script independently into each applicable frame: every open frame in the given window for the window message manager, or every frame in every window for the global message manager if aallowdelayedload is true, then the script will also be loaded into any applicable new frames opened after the loadframescript() call. otherwise it will only be loaded into frames that exist at the time of the call. if this function is called on a chromemessagesender: it will load the frame script only into this chromemessagesender's frame aallowdelayedload should always be true. it's possible that the...
...t get reloaded when the user navigates. if you want a frame script to do something whenever a new document is loaded, you can listen for the document-element-inserted notification. parameters name type description aurl string url for the script to load. aurl must be the absolute url. data: urls are also supported. for example data:,dump("foo\n"); aallowdelayedload boolean if true, this flag means that the frame script will be loaded into any new frames opened after the loadframescript() call, until removedelayedframescript() is called for that script. aruninglobalscope boolean optional, defaults to false. by default, frame scripts each have their own scope, so they can declare global variables without causing conflicts ...
...And 4 more matches

nsIProcessScriptLoader
ozilla-central/source/dom/base/nsimessagemanager.idl inherits from: nsisupports this interface is used by parent process message managers to load scripts into a child process. the scripts run only once per process. the global object for process scripts is a contentprocessmessagemanager. ...
...sagemanager.idl inherits from: nsisupports this interface is used by parent process message managers to load scripts into a child process. the scripts run only once per process. the global object for process scripts is a contentprocessmessagemanager. ...
...ace is used by parent process message managers to load scripts into a child process. the scripts run only once per process. the global object for process scripts is a contentprocessmessagemanager. methods void loadprocessscript(in astring aurl, in boolean aallowdelayedload) void removedelayedprocessscript(in astring aurl); jsval getdelayedprocessscripts(); loadprocessscript() load a script in the child process. ...
...And 4 more matches

transition - CSS: Cascading Style Sheets
the transition css property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. transitions enable you to define the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript. ...
...xamples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. transitions enable you to define the transition between two states of an element. different states may be defined using pseudo-classes like :hover or :active or dynamically set using javascript. ...
...ay be defined using pseudo-classes like :hover or :active or dynamically set using javascript. ...
...And 4 more matches

animation - CSS: Cascading Style Sheets
the animation shorthand css property applies an animation between styles. it is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...red in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 3 more matches

jspage - Archive of obsolete content
).tostring(16); b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}});function.implement({extend:function(a){for(var b in a){this[b]=a[b];}return this;},create:function(b){var a=this; b=b||{};return function(d){var c=b.arguments;c=(c!=undefined)?$splat(c):array.slice(arguments,(b.event)?1:0);if(b.event){c=[d||window.event].extend(c); }var e=function(){return a.apply(b.bind||null,c);};if(b.delay){return settimeout(e,b.delay);}if(b.periodical){return setinterval(e,b.periodical);}if(b.attempt){return $try(e); }return e();};},run:function(a,b){return this.apply(b,$splat(a));},pass:function(a,b){return this.create({bind:b,arguments:a});},bind:function(b,a){return this.create({bind:b,arguments:a}); },bindwithevent:function(b,a){return this.create({bind:b,arguments:a,event:true});},attempt:fun...
...b.periodical);}if(b.attempt){return $try(e); }return e();};},run:function(a,b){return this.apply(b,$splat(a));},pass:function(a,b){return this.create({bind:b,arguments:a});},bind:function(b,a){return this.create({bind:b,arguments:a}); },bindwithevent:function(b,a){return this.create({bind:b,arguments:a,event:true});},attempt:function(a,b){return this.create({bind:b,arguments:a,attempt:true})(); },delay:function(b,c,a){return this.create({bind:c,arguments:a,delay:b})();},periodical:function(c,b,a){return this.create({bind:b,arguments:a,periodical:c})(); }});number.implement({limit:function(b,a){return math.min(a,math.max(b,this));},round:function(a){a=math.pow(10,a||0);return math.round(this*a)/a;},times:function(b,c){for(var a=0; a<this;a++){b.call(c,a,this);}},tofloat:function(){return parsefl...
...({$events:{},addevent:function(c,b,a){c=events.removeon(c);if(b!=$empty){this.$events[c]=this.$events[c]||[]; this.$events[c].include(b);if(a){b.internal=true;}}return this;},addevents:function(a){for(var b in a){this.addevent(b,a[b]);}return this;},fireevent:function(c,b,a){c=events.removeon(c); if(!this.$events||!this.$events[c]){return this;}this.$events[c].each(function(d){d.create({bind:this,delay:a,"arguments":b})();},this);return this;},removeevent:function(b,a){b=events.removeon(b); if(!this.$events[b]){return this;}if(!a.internal){this.$events[b].erase(a);}return this;},removeevents:function(c){var d;if($type(c)=="object"){for(d in c){this.removeevent(d,c[d]); }return this;}if(c){c=events.removeon(c);}for(d in this.$events){if(c&&c!=d){continue;}var b=this.$events[d];for(var a=b.length...
...And 2 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
rogrammers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop. these functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationframe() the modern version of setinterval(). executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in. the asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed). it's import...
...uitable framerate regardless of the environment it is being run in. the asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed). it's important to know that you can (and often will) run other code before a settimeout() call executes, or between iterations of setinterval(). depending on how processor-intensive these operations are, they can delay your async code even further, as any async code will execute only after the main thread is available. (in other words, when the stack is empty.) you will learn more on this matter as you progress through this article. in any case, these functions are used for running constant animations and other background processing on a web site or application. in the following sections we will show you how...
... before executing the code. if you specify a value of 0 (or simply omit the value), the function will run as soon as possible. (see the note below on why it runs "as soon as possible" and not "immediately".) more on why you might want to do this later. zero or more values that represent any parameters you want to pass to the function when it is run. note: the specified amount of time (or the delay) is not the guaranteed time to execution, but rather the minimum time to execution. the callbacks you pass to these functions cannot run until the stack on the main thread is empty. as a consequence, code like settimeout(fn, 0) will execute as soon as the stack is empty, not immediately. if you execute code like settimeout(fn, 0) but then immediately after run a loop that counts from 1 to 10 bil...
...And 2 more matches

Animated PNG graphics
sequence number of the animation chunk, starting with 0. 4 width unsigned int width of the following frame. 8 height unsigned int height of the following frame. 12 x_offset unsigned int x position at which to render the following frame. 16 y_offset unsigned int y position at which to render the following frame. 20 delay_num unsigned short frame delay fraction numerator. 22 delay_den unsigned short frame delay fraction denominator. 24 dispose_op byte type of frame area disposal to be done after rendering this frame. 25 blend_op byte type of frame area rendering for this frame. the frame must be rendered within the region defined by x_offset, y_off...
...his frame. the frame must be rendered within the region defined by x_offset, y_offset, width, and height. the offsets must be non-negative, the dimensions must be positive, and the region may not fall outside of the default image. constraints on frame regions: x_offset >= 0 y_offset >= 0 width > 0 height > 0 x_offset + width <= 'ihdr' width y_offset + height <= 'ihdr' height the delay_num and delay_den parameters together specify a fraction indicating the time to display the current frame, in seconds. if the denominator is 0, it is to be treated as if it were 100 (that is, delay_num then specifies 1/100ths of a second). if the the value of the numerator is 0 the decoder should render the next frame as quickly as possible, though viewers may impose a reasonable lower bound. fr...
...he decoder should render the next frame as quickly as possible, though viewers may impose a reasonable lower bound. frame timings should be independent of the time required for decoding and display of each frame, so that animations will run at the same rate regardless of the performance of the decoder implementation. dispose_op specifies how the output buffer should be changed at the end of the delay (before rendering the next frame). valid values for dispose_op are: value constant description 0 apng_dispose_op_none no disposal is done on this frame before rendering the next; the contents of the output buffer are left as is. 1 apng_dispose_op_background the frame's region of the output buffer is to be cleared to fully transparent black before ren...
...And 2 more matches

nsIChromeFrameMessageManager
content/base/public/nsimessagemanager.idlscriptable handles loading of content in a remote chrome frame. ...
... content/base/public/nsimessagemanager.idlscriptable handles loading of content in a remote chrome frame. ...
...from: nsiframemessagemanager last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void loadframescript(in astring aurl, in boolean aallowdelayedload); void removedelayedframescript(in astring aurl); methods loadframescript() loads a script into the remote frame. void loadframescript( in astring aurl, in boolean aallowdelayedload ); parameters aurl the url of the script to load into the frame; this must be an absolute url, but data: urls are supported. ...
...And 2 more matches

core/promise - Archive of obsolete content
or = function(event) { deferred.reject(event); }; xhr.send(); return deferred.promise; } so defer returns an object that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise. note: a promise can be rejected or resolved only once. all subsequent attempts to either reject it or resolve it will be ignored. ...
...resolve, reject functions that can be used to resolve / reject that promise. note: a promise can be rejected or resolved only once. all subsequent attempts to either reject it or resolve it will be ignored. ...
...resolved only once. all subsequent attempts to either reject it or resolve it will be ignored. another simple example may be a delay function that returns a promise which is fulfilled with a given value after a given time ms -- kind of promise based alternative to settimeout: function delay(ms, value) { let { promise, resolve } = defer(); settimeout(resolve, ms, value); return promise; } delay(10, 'hello world').then(console.log); // after 10ms => 'helo world' advanced usage if general defer and promised should be enough to doing almost anything you may think of with promises, but once you start using promises extensively you may discover some missing pieces and this section of documentation may help you to discover them. doing things concurrently so far we have being playing with ...
...r asyncaorb = race(readasync(urla), readasync(urlb)); note: that this implementation forgives failures and would fail if all promises fail to resolve. there are cases when promise may or may not be fulfilled in a reasonable time. in such cases it's useful to put a timer on such tasks: function timeout(promise, ms) { let deferred = defer(); promise.then(deferred.resolve, deferred.reject); delay(ms, 'timeout').then(deferred.reject); return deferred.promise; } var tweets = readasync(url); timeout(tweets, 20).then(function(data) { ui.display(data); }, function() { alert('network is being too slow, try again later'); }); alternative promise apis there may be cases where you will want to provide more than just then method on your promises. in fact some other promise frameworks do th...

JavaScript timers - Archive of obsolete content
the setimmediate() function can be used instead of the settimeout(fn, 0) method to execute heavy operations in ie. ...
...the setimmediate() function can be used instead of the settimeout(fn, 0) method to execute heavy operations in ie. ...
...the setimmediate() function can be used instead of the settimeout(fn, 0) method to execute heavy operations in ie. ...
...tions. the setimmediate() function can be used instead of the settimeout(fn, 0) method to execute heavy operations in ie. the requestanimationframe() function tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame. documentation settimeout() calls a function or executes a code snippet after specified delay. setinterval() calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function. setimmediate() calls a function immediately after the browser has completed other operations, such as events and display updates. cleartimeout() clears the delay set by settimeout(). clearinterval() cancels repeated action which was set up using setinterval().

Perceived performance - Learn web development
ight which content important to a user more highly, so it's not a perfect metric. these metrics have to do with initial load and render. it is also important to ensure the site feels fast once the user begins interacting with it. for this, time to interactive, is a good metric; it is the moment when the last long task of the load process finishes and the ui is available for user interaction with delay. ui lack or responsiveness and jank both harm perceived performance. even though a task may take a long time, though, there are ways to make it seem faster. there are several tips to improving perceived performance. improving perceived performance understanding networking, how the browser works, user perception of time, etc., can help you better understand how to improve the user interaction. ...
...erceived performance, minimize the original page load. in other words, first download everything you're going to actually show, but only the stuff you are actually using, then download the rest. if you're downloading all the assets in the end, the weight of all your assets hasn't improved -- in fact, you may need to add some code -- but because the download of non-immediately necessary assets are delayed in a manner that is not perceptible the the user, the user will feel like the download was faster. to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first. delay, or lazy load, the rest of the assets. don't load images or scripts that aren’t use...
... user, the user will feel like the download was faster. to minimize the assets required for initial load, separate interactive functionality from content so that required content -- the text, styles, and images visible at initial load -- can be loaded first. delay, or lazy load, the rest of the assets. don't load images or scripts that aren’t used or visible on the initial page load. either delay their load, loading them when the page becomes usable, or, loading them when they become necessary. loading additional assets and resources after initial page load improves perceived performance. loading essential data in initial requests and progressively loading features and data only as needed helps mitigate low bandwidth and lower spec hardware. additionally, you should optimize the assets y...
...ance. content reflowing is especially bad for user experience when not initiated by user interaction. if some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or resize, especially after the site has become interactive. avoid font file delays font use can both help and harm user experience. selecting the right fonts is an art form, and can greatly improve the user experience. fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if comic sans is used (kidding). flicker of unstyled text and missing text both harm performance. make fallback fonts the same size ...

Performance
ted in their lifetime to that of the frame itself, this does not apply to observer registrations. ...
...ent.document.queryselectorall('p').length})", false) } function decoratebutton(button, count) { // do stuff with result } this executes the script only when it is needed and only in one tab and allows it to be garbage-collected immediately after execution. as long as it the action does not happen frequently the memory and startup savings should outstrip the added cost of script evaluation. delaying the script registration until the session is restored my provide some middle ground for some addons. it does not provide the same memory footprint reductions but it improves application startup. beam down information in advance to avoid synchronous calls to the parent bad: // processscript.js function contentpolicy() { // ... } object.assign(contentypolicy.prototype, { classdescri...
... and on will load to unload/reload events. not handling those properly can lead to duplicate or conflicting code execution, especially when messages are sent. it can also lead to conflicts between the old and new code. under some circumstances it may even cause exceptions when attempting to register something twice under the same id. ...
...o duplicate or conflicting code execution, especially when messages are sent. it can also lead to conflicts between the old and new code. under some circumstances it may even cause exceptions when attempting to register something twice under the same id. better: // addon.js function onunload() { services.mm.removedelayedframescript("resources://my-addon/framescript.js"); services.ppmm.removedelayedprocessscript("resources://my-addon/processcript.js"); services.mm.broadcastasyncmessage("my-addon:unload"); services.ppmm.broadcastasyncmessage("my-addon:unload"); } in the frame/process scripts: remove all kinds of listeners remove observer notifications remove custom categories and services nuke sandboxes unload jsms restore content dom states where necessary, e.g. remove intera...

nsIPromptService
g indicates that the label is passed as a separate string. use this for labels that don't match one of the constants above. button default flags these flags are used to select which button is the default. ...
... label is passed as a separate string. use this for labels that don't match one of the constants above. button default flags these flags are used to select which button is the default. ...
... button_pos_2_default 33554432 button_delay_enable button_delay_enable causes the buttons to be initially disabled. they are enabled after a timeout expires. the implementation may interpret this loosely, as the intent is to ensure that the user does not click through a security dialog too quickly. strictly speaking, the implementation could choose to ignore this flag. a delay can be useful not only to give the user more time to think before acting, but also as a countermeasure against malicious web sites that intentionally create a race condition whereby the user intends to click or type a key responding, for example, to the web site's prompt but the security dialog pops up unexpectedly and its button is unintentionally activated. constant value descrip...
...ly to give the user more time to think before acting, but also as a countermeasure against malicious web sites that intentionally create a race condition whereby the user intends to click or type a key responding, for example, to the web site's prompt but the security dialog pops up unexpectedly and its button is unintentionally activated. constant value description button_delay_enable 67108864 standard buttons flags constant value description std_ok_cancel_buttons 513 selects the standard set of ok/cancel buttons. (button_title_ok *button_pos_0) +(button_title_cancel * button_pos_1) std_yes_no_buttons 1027 selects the standard set of yes/no buttons. (button_title_yes *button_pos_0) +(button_tit...

nsIXULTemplateQueryProcessor
a binding allows an additional variable to be set for a result, outside of those defined within the query. these ...
...sidomnode. all of these uris are checked by the builder so it is safe to use them, however note that a uri that redirects may still needs to be checked to ensure that the document containing arootnode may access it. this is the responsibility of the query processor if it needs to load the content of the uri. ...
...the builder so it is safe to use them, however note that a uri that redirects may still needs to be checked to ensure that the document containing arootnode may access it. this is the responsibility of the query processor if it needs to load the content of the uri. if the query processor needs to load the datasource asynchronously, it may set the ashoulddelaybuilding returned parameter to true to delay building the template content, and call the builder's rebuild method when the data is available. nsisupports getdatasource( in nsiarray adatasources, in nsidomnode arootnode, in boolean aistrusted, in nsixultemplatebuilder abuilder, out boolean ashoulddelaybuilding ); parameters adatasources the list of nsiuri objects and/or nsidomnode objects. arootnode the root node the builder is a...
... return value a datasource object. initializeforbuilding() initialize for query generation. ...

HTMLElement: transitionstart event - Web APIs
the transitionstart event is fired when a css transition has actually started, i.e., after any transition-delay has ended. ...
... the transitionstart event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transit...
... specifications specification status comment css transitionsthe definition of 'transitionstart' in that specification. working draft initial definition. ...
...tener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); transition.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e. at the start of any delay). transitionstart fires when the actual animation has begun (i.e. at the end of any delay). specifications specification status comment css transitionsthe definition of 'transitionstart' in that specification. working draft initial definition. ...

WebKit CSS extensions - CSS: Cascading Style Sheets
it-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. ...
... -webkit-mask-position-x* -webkit-mask-positi...
...ith no prefix as well: see formerly proprietary properties that are now standard above. note: due to the legacy code in a multitude of web sites that used -webkit- prefixed properties, edge and firefox redirect many -webkit- prefixed properties to -moz-, -ms-, and unprefixed equivalents. ...
...microsoft edge and ie mobile support this property with the -webkit- prefix, rather than -ms- for interopability reasons as well. ** these values are supported even though they are not...

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
('./register', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription }), }); then the globaleventhandlers.onclick function on the subscribe button is defined: document.getelementbyid('doit').onclick = function() { const payload = document.getelementbyid('notification-payload').value; const delay = document.getelementbyid('notification-delay').value; const ttl = document.getelementbyid('notification-ttl').value; fetch('./sendnotification', { method: 'post', headers: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription, payload: payload, delay: delay, tt...
...aders: { 'content-type': 'application/json' }, body: json.stringify({ subscription: subscription, payload: payload, delay: delay, ttl: ttl, }), }); }; when the button is clicked, fetch asks the server to send the notification with the given parameters: payload is the text that to be shown in the notification, delay defines a delay in seconds until the notification will be shown, and ttl is the time-to-live setting that keeps the notification available on the server for a specified amount of time, also defined in seconds. now, onto the next javascript file. server.js the server part is written in node.js and needs to be hosted somewhere suitable, which is a subject for an entirely separate article. we wil...
... console.log(webpush.generatevapidkeys()); return; } webpush.setvapiddetails( 'https://serviceworke.rs/', process.env.vapid_public_key, process.env.vapid_private_key ); next, a module defines and exports all the routes an app needs to handle: getting the vapid public key, registering, and then sending notifications. you can see the variables from the index.js file being used: payload, delay and ttl. module.exports = function(app, route) { app.get(route + 'vapidpublickey', function(req, res) { res.send(process.env.vapid_public_key); }); app.post(route + 'register', function(req, res) { res.sendstatus(201); }); app.post(route + 'sendnotification', function(req, res) { const subscription = req.body.subscription; const payload = req.body.payload; const ...
...event.data.text() : 'no payload'; event.waituntil( self.registration.shownotification('serviceworker cookbook', { body: payload, }) ); }); all it does is add a listener for the push event, ...

lang/functional - Archive of obsolete content
t(" ")[1]; } getlineage("homer simpson"); // computes and returns information for "simpson" getlineage("lisa simpson"); // returns cached for "simpson" parameters fn : function the function that becomes memoized. hasher : function an optional function that takes the memoized function's parameter and returns a hash key for storing the result. returns function : the memoized version of fn. ...
...mputes and returns information for "simpson" getlineage("lisa simpson"); // returns cached for "simpson" parameters fn : function the function that becomes memoized. hasher : function an optional function that takes the memoized function's parameter and returns a hash key for storing the result. returns function : the memoized version of fn. ...
...tion an optional function that takes the memoized function's parameter and returns a hash key for storing the result. returns function : the memoized version of fn. delay(fn, ms, arguments) much like settimeout, delay invokes a function after waiting a set number of milliseconds. if you pass additional, optional, arguments, they will be forwarded on to the function when it is invoked. let { delay } = require("sdk/lang/functional"); delay(printadd, 2000, 5, 10); // prints "5+10=15" in two seconds (2000ms) function printadd (a, b) { console.log(a + "+" + b + "=" + (a+b)); } parameters fn : function a function to be delayed. ms : number number of milliseconds to delay the execution of fn. arguments : mixed additional arguments to pass to fn upon execution once(fn) creates a versio...

Learn XPI Installer Scripting by Example - Archive of obsolete content
w components, new themes, new packages) with the chrome registry, you must use the registerchrome function of the install object. if successful, this function returns a "0" and makes entries into theinstalled-chrome.txt file in the chrome subdirectory, which is then used to regenerate the various rdf files that make up the chrome registry. ...
...rchrome function of the install object. if successful, this function returns a "0" and makes entries into theinstalled-chrome.txt file in the chrome subdirectory, which is then used to regenerate the various rdf files that make up the chrome registry. ...
...ries into theinstalled-chrome.txt file in the chrome subdirectory, which is then used to regenerate the various rdf files that make up the chrome registry. var cf = getfolder("chrome"); registerchrome(content | delayed_chrome, getfolder(cf,"toolkit.xpi"),"content/global/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/communicator/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/editor/"); registerchrome(content | delayed_chrome, getfolder(cf,"browser.xpi"),"content/navigator/"); registerchrome(skin | delayed_chrome, getfolder(cf,"modern.jar"),"skin/modern/communicator/"); registerchrome(skin | delayed_chrome, getfolder(cf,"modern.jar"),"skin/modern/editor/"); ... in lines 42-58, registerchrome is called as many times ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
paint completion. 148 first contentful paint glossary, performance, reference, web performance first contentful paint (fcp) is when the browser renders the first bit of content from the dom, providing the first feedback to the user that the page is actually loading. the question "is it happening?" is "yes" when the first contentful paint completes. 149 first input delay glossary, reference, web performance first input delay (fid) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, javascript-powered control) to the time when the browser is actually able to respond to that interaction. 150 first interactive glossary, lighthouse, web performance first inter...
...ht) is a locale property indicating that text is written from left to right. for example, the en-us locale (for us english) specifies left-to-right. 247 latency audio, glossary, media, networking, reference, video, web performance, latency latency is the network time it takes for a requested resource to reach its destination. low latency is good, meaning there is little or no delay. high latency is bad, meaning it takes a long time for the requested resource to reach its destination. 248 layout viewport codingscripting, glossary, layout, layout viewport, viewport the layout viewport is the viewport into which the browser draws a web page. essentially, it represents what is available to be seen, while the visual viewport represents what is currently visi...
...ing, glossary, layout, layout viewport, viewport the layout viewport is the viewport into which the browser draws a web page. essentially, it represents what is available to be seen, while the visual viewport represents what is currently visible on the user's display device. 249 lazy load glossary, lazy loading, reference, web performance lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view. 250 ligature css, design, glossary a ligature is a joining of two characters into one shape. for example, in french "œ" is a ligature of "oe". 251 local scope ...

Preference reference
...
... ...
... ...

Work with animations - Firefox Developer Tools
see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out. if the animation used css transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. if the animation used css @keyframes, there is one bar for each animation, labeled with its name. ...
...d the second is convex, representing ease-out. if the animation used css transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. if the animation used css @keyframes, there is one bar for each animation, labeled with its name. if the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and enddelay are both represented. if you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including: the type of animation: css transition, css animation, or web animations api the duration of the animation the animation's start and end delay the animation's easing (or timing function). the animation's fill the playback rate ...
...pplying all this to our example, we can see that: the animation involved two elements, span#note and img#icon. hovering over these selectors, we can see that those elements are, respectively, the browser name "firefox developer edition" and the browser icon. the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar. the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex shape of the green bar. a...

Document: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. ...
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. ...
... bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. ...

EffectTiming.fill - Web APIs
cating the fill type to use in order to properly render an affected element when outside the animation's active interval (that is, when it's not actively animating). the default is "auto". "none" the animation's effects are only visible while the animation is iterating or its playhead is positioned over an iteration. ...
...an affected element when outside the animation's active interval (that is, when it's not actively animating). the default is "auto". "none" the animation's effects are only visible while the animation is iterating or its playhead is positioned over an iteration. the animation's effects are not visible when its playstate is pending with a delay, when its playstate is finished, or during its enddelay or delay. in other words, if the animation isn't in its active interval, the affected element is not visible. "forwards" the affected element will continue to be rendered in the state of the final animation framecontinue to be applied to the after the animation has completed playing, in spite of and during any enddelay or when its playstate is finished. "backwards" the animation's effects s...
...element is not visible. "forwards" the affected element will continue to be rendered in the state of the final animation framecontinue to be applied to the after the animation has completed playing, in spite of and during any enddelay or when its playstate is finished. "backwards" the animation's effects should be reflected by the element(s) state prior to playing, in spite of and during any delay and pending playstate. "both" combining the effects of both forwards and backwards: the animation's effects should be reflected by the element(s) state prior to playing and retained after the animation has completed playing, in spite of and during any enddelay, delay and/or pending or finished playstate. "auto" if the animation effect the fill mode is being applied to is a keyframe effect (ke...

HTMLElement: transitionend event - Web APIs
to none, then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. examples this code gets an element that has a transition defined and adds a listener to the transitionend event: const transition = document.queryselector('.transition'); transition.addeventlist...
...'.transition'); transition.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitio...
...nstart fired'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment css transitionsthe definition of 'transitionend' in that specification. working draft initial definition. ...

HTMLElement: transitionrun event - Web APIs
the transitionrun event is fired when a css transition is first created, i.e. before any transition-delay has begun. ...
...s this code adds a listener to the transitionrun event: el.addeventlistener('transitionrun', () => { console.log('transition is running but hasn\'t necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transi...
...r('transitionrun', function() { message.textcontent = 'transitionrun fired'; }); el.addeventlistener('transitionstart', function() { message.textcontent = 'transitionstart fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the difference is that: transitionrun fires when the transition is created (i.e. at the start of any delay). transitionstart fires when the actual animation has begun (i.e. at the end of any delay). the transitionrun will occur even if the transition is canceled before the delay expires. if there is no transition delay or if transition-delay is negative, both transitionrun and transitionstart are fired. specifications specification status comment css transitionsthe def...

Navigator.sendBeacon() - Web APIs
may miss some possible data collection. for example, which link the user clicked before navigating away and unloading the page. ensuring that data has been sent during the unloading of a document has traditionally been difficult, because user agents typically ignore asynchronous xmlhttprequests made in an unload handler. historically, this was addressed with some of the following workarounds to delay the page unload long enough to send data to some url: submitting the data with a blocking synchronous xmlhttprequest call in unload or beforeunload event handlers. creating an <img> element and setting its src in the unload handler. most user agents will delay the unload to load the image. creating a no-op loop for several seconds in the unload handler. all of these methods block unloading...
...hese methods block unloading the document, which slows down the next navigation. there is nothing the next page can do to avoid this, so the new page seems slow, even though it's the previous page's fault. the following example shows theoretical analytics code that attempts to submit data to a server with a synchronous xmlhttprequest in an unload handler. ...
...e next page load to be delayed. window.addeventlistener("unload", function logdata() { var xhr = new xmlhttprequest(); xhr.open("post", "/log", false); // third parameter of `false` means synchronous xhr.send(analyticsdata); }); this is what sendbeacon() replaces. with the sendbeacon() method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation. this solves all of the problems with submission of analytics data: the data is sent reliably it's sent asynchronously it doesn't impact the loading of the next page in addition, the code is simpler to write than any of the older techniques! the following example shows a theoretical analytics code pattern that submits data to a server using the sendbeacon(...

Migrating from webkitAudioContext - Web APIs
ork on the standards based audiocontext out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on webkitaudiocontext have been renamed in audiocontext. creategainnode() has been renamed to creategain. ...
...t out of the box, but it currently doesn't handle all of the cases below. please consult the readme file for that library to see a list of apis that are automatically handled by it. changes to the creator methods three of the creator methods on webkitaudiocontext have been renamed in audiocontext. creategainnode() has been renamed to creategain. createdelaynode() has been renamed to createdelay. ...
...has been renamed to creategain. createdelaynode() has been renamed to createdelay. createjavascriptnode() has been renamed to createscriptprocessor. these are simple renames that were made in order to improve the consistency of these method names on audiocontext. if your code uses either of these names, like in the example below : // old method names var gain = context.creategainnode(); var delay = context.createdelaynode(); var js = context.createjavascriptnode(1024); you can simply rename the methods to look like this: // new method names var gain = context.creategain(); var delay = context.createdelay(); var js = context.createscriptprocessor(1024); the semantics of these methods remain the same in the renamed versions. changes to starting and stopping nodes in webkitaudiocontex...

Event reference
fired when animationstart a css animation has started. animationcancel a css animation has aborted. animationend a css animation has completed. animationiteration a css animation is repeated. css transition events event name fired when transitionstart a css transition has actually started (fired after any delay). transitioncancel a css transition has been cancelled. transitionend a css transition has completed. transitionrun a css transition has begun running (fired before any delay starts). form events event name fired when reset the reset button is pressed submit the submit button is pressed printing eve...
... method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the media has finished loading. loadedmetadata the metadata has been loaded. pause playback has been paused. play playback has begun. playing playback is ready to start after having been paused or delayed due to lack of data. ratechange the playback rate has changed. seeked a seek operation completed. seeking a seek operation began. stalled the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime att...
...tectable hover range. pointerover pointerevent pointer events the pointing device is moved into the hit-testing boundary. pointerup pointerevent pointer events the pointer leaves the active button state. play event html5 media playback has begun. playing event html5 media playback is ready to start after having been paused or delayed due to lack of data. popstate popstateevent html5 a session history entry is being navigated to (in certain cases). progress progressevent progress and xmlhttprequest in progress. push pushevent push api a service worker has received a push message. pushsubscriptionchange pushevent push api a pushsubscription has expire...

Concurrency model and the event loop - JavaScript
es are added anytime an event occurs and there is an event listener attached to it. if there is no listener, the event is lost. so a click on an element with a click event handler will add a message—likewise with any other event. the function settimeout is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to 0). the time value represents the (minimum) delay after which the message will actually be pushed into the queue. if there is no other message in the queue, and the stack is empty, the message is processed right after the delay. however, if there are messages, the settimeout message will have to wait for other messages to be processed. for this reason, the second argument indicates a minimum time—not a guaranteed time. here is an example th...
...ately after its timer expires): const s = new date().getseconds(); settimeout(function() { // prints out "2", meaning that the callback is not called immediately after 500 milliseconds. console.log("ran after " + (new date().getseconds() - s) + " seconds"); }, 500) while (true) { if (new date().getseconds() - s >= 2) { console.log("good, looped for 2 seconds") break; } } zero delays zero delay doesn't actually mean the call back will fire-off after zero milliseconds. calling settimeout with a delay of 0 (zero) milliseconds doesn't execute the callback function after the given interval. the execution depends on the number of waiting tasks in the queue. in the example below, the message ''this is just a message'' will be written to the console before the message in the call...
... basically, the settimeout needs to wait for all the code for queued messages to complete even though you specified a particular time limit for your settimeout. ...

Understanding latency - Web Performance
mount of time it takes from when a request is made by the user to the time it takes for the response to get back to that user. on a first request, for the first 14kb bytes, latency is longer because it includes a dns lookup, a tcp handshake, the secure tls negotiation. subsequent requests will have less latency because the connection to the server is already set. latency describes the amount of delay on a network or internet connection. low latency implies that there are no or almost no delays. high latency implies that there are many delays. one of the main aims of improving performance is to reduce latency. the latency associated with a single asset, especially a basic html page, may seem trivial. but websites generally involve multiple requests: the html includes requests for multiple cs...
...may seem trivial. but websites generally involve multiple requests: the html includes requests for multiple css, scripts, and media files. the greater the number and size of these requests, the greater the impact of high latency on user experience. on a connection with low latency, requested resources will appear almost immediately. on a connection with high latency, there will be a discernible delay between the time that a request is sent, and the resources are returned. we can determine the amount of latency by measuring the speed with which the data moves from one network location to another. latency can be measured one way, for example, the amount of time it takes to send a request for resources, or the length of the entire round-trip from the browser’s request for a resource to the mo...
...d have been nearly instantaneous. had we throttled, receiving could have been 43seconds! measuring latency network latency is the time it takes for a data request to get from the computer making the request, to the computer responding. including the time it takes for a byte of data to make it from the responding computer back to the requesting computer. it is generally measured as a round trip delay. disk latency is the time it takes from the moment a computer, usually a server, receives a request, to the time the computer returns the response. ...

Appendix A: Add-on Performance - Archive of obsolete content
keep as much of your code in jsm, make it as modular as you can, and only load modules as you require them. if your add-on is too simple for jsm, don’t worry about it. there’s still one more thing you can do. do as little as possible in your load handler. ask yourself: is there anything i can’t run 100 ms or even 500 ms later? if there is, just use an nsitimer or the settimeout function to delay running this code . the firefox window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. the browser will now load faster, and your code will still load at startup for all practical purposes. the code is simple enough: // this is the function that is called in the load event handler...
...le with your add-on installed. page loads this is another critical route that many add-ons tap into. the intercepting page loads section details several techniques to do this, and you should read all of them carefully to figure out which one you need. some of these events are fired multiple times during a single page load, and having inefficient code in the event handlers can cause a noticeable delay that users may have hard time figuring out. look at the source samples in the article and notice how they mostly consist of nested if statements. this is what you should do first to make sure that you filter out all cases that don't interest you so that your add-on doesn't slow down other requests. a very common filter is the url of the page, since most add-ons are limited to one or a few domain...

JavaScript Object Management - Archive of obsolete content
re are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs. the window has to finish loading before it can do any of these things. they are bad ui practices anyway and you should avoid them. if you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay: init : function(aevent) { let that = this; this._stringbundle = document.getelementbyid("xs-hw-string-bundle"); window.settimeout( function() { window.alert(that._stringbundle.getstring("xulschoolhello.greeting.label")); }, 0); } the settimeout function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter. in this ca...
...nction(aevent) { let that = this; this._stringbundle = document.getelementbyid("xs-hw-string-bundle"); window.settimeout( function() { window.alert(that._stringbundle.getstring("xulschoolhello.greeting.label")); }, 0); } the settimeout function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter. in this case we set the delay to 0, which means the function should be executed as soon as possible. firefox has a minimum delay of 10-15ms (taken from this blog post), so it won't really run instantly. it is more than enough to let the window finish its load. use window.settimeout and window.setinterval to control timed code execution. in case you're using javascript code modules or xpcom objects, where a window object is...

Performance best practices in extensions - Archive of obsolete content
ve the performance and speed of your extension, but also of firefox itself. improving startup performance extensions are loaded and run whenever a new browser window opens. that means every time a window opens, your extension can have an impact on how long it takes the user to see the content they're trying to view. there are several things you can do to reduce the amount of time your extension delays the appearance of the user's desired content. load only what you need, when you need it don't load things during startup that are only needed if the user clicks a button, or if a given preference is enabled when it's not. if your extension has features that only work when the user has logged into a service, don't load the resources for those features until the user actually logs in. use javas...
... in the main overlay that runs their startup functions. do as little as possible here. the browser window is blocked while your add-on's load handler runs, so the more it does, the slower firefox will appear to the user. if there is anything that can be done even a fraction of a second later, you can use an nsitimer or the window.settimeout() method to schedule that work for later. even a short delay can have a big impact. general performance tips avoid creating memory leaks memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance. zombie compartments are a particular kind of memory leak that you can detect with minimal effort. see the zombie compartments page, especially the proactive checking of add-ons section. see...

CSS3 - Archive of obsolete content
s in the refining phase specifications that are deemed to be in the refining phase are already fairly stable. though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases. css animations working draft allows the definition of animations effects by adding the css animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value...
... translate3d(), translatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), and perspective(). note: this specification is a merge of css 2d-transforms, css 3d-transforms and svg transforms. css transitions working draft allows the definition of transitions effects between two properties values by adding the css transition, transition-delay, transition-duration, transition-property, and transition-timing-function properties. css box alignment module level 3 working draft selectors level 4 working draft css lists module level 3 working draft extends the list counter mechanism so that list markers can be styled and web developers can define new list ...

Index - Archive of obsolete content
boxes code snippets make the box style="display: block" and the wrapping behavior will occur when the box is resized: 176 canvas code snippets canvas, code snippets, graphics no summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! 178 customizing the download progress bar no summary! 179 delayed execution code snippets no summary! 180 dialogs and prompts add-ons, code snippets, extensions, xul no summary! 181 downloading files code snippets to download a file, create an instance of nsiwebbrowserpersist and call its nsiwebbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file n...
...some of you. however, since it affects the portability of code, it was deemed prudent to include a short memo describing the issue. 682 using cross commit tools no summary! 683 using gdb on wimpy computers if your computer has less than 256 mb of memory, your computer will become unhappy as gdb loads mozilla's shared libraries. the solution to this is to delay loading shared libraries until they are actually needed. however, you need to make sure that the base libraries like libc and pthreads are loaded before you tell gdb to stop loading shared libraries. if you don't allow those libraries to be loaded then gdb will not be able to properly debug threads on linux. mozilla uses pthreads for its networking library so you need to be able to work in a thre...

registerChrome - Archive of obsolete content
the registerchrome method has the following parameters: switch switch is the chrome switch indicating what type of file is being registered. skin is used to register skins, locale is used to register language packs. package, a third possibility is the equivalent of skin and/or locale, and ensures that everything in the xpi is registered. one final option for the switch parameter is delayed_chrome, which registers the switch only after a relaunch of the browser. note that you can combine switches as in the example below. srcdir srcdir is a filespecobject representing the source destination of the installation. filespecobjects like that required by this function are created using the getfolder method on the install object. xpipath xpipath is the pat...
...istered your package with the chrome registry. ...

Install Scripts - Archive of obsolete content
url. this can be done with the registerchrome() function. it takes two arguments, the first is the type of chrome to register (content, skin or locale). the second is the directory containing the contents.rdf file to register. because the find files dialog contains content, a skin file and a locale file, registerchrome() will need to be called three times. registerchrome(install.content | install.delayed_chrome, getfolder(finddir, "content")); registerchrome(install.skin | install.delayed_chrome, getfolder(finddir, "skin")); registerchrome(install.locale | install.delayed_chrome, getfolder(finddir, "locale")); the delayed_chrome flag is used to indicate that the chrome should be installed the next time mozilla is run. installation completion the adddirectory() and addfile() functions don't cop...
...tered. to complete the process and begin copying files, call the performinstall() function. it takes no arguments. the final script for installing the find files component is shown below: source initinstall("find files","/xulplanet/find files","0.5.0.0"); finddir = getfolder("chrome","findfile"); setpackagefolder(finddir); adddirectory("findfile"); registerchrome(install.content | install.delayed_chrome, getfolder(finddir, "content")); registerchrome(install.skin | install.delayed_chrome, getfolder(finddir, "skin")); registerchrome(install.locale | install.delayed_chrome, getfolder(finddir, "locale")); performinstall(); next, we'll look at some additional install functions. « previousnext » ...

PRSockOption
pr_sockopt_linger time to linger on close if data is present in the socket send buffer. pr_sockopt_reuseaddr allow local address reuse. pr_sockopt_keepalive periodically test whether connection is still alive. pr_sockopt_recvb...
...er size. pr_sockopt_iptimetolive ip time-to-live. pr_sockopt_iptypeofservice ip type-of-service and precedence. pr_sockopt_addmember join an ip multicast group. pr_sockopt_dropmember leave an ip multicast group. pr_sockopt_mcastinterface ip multicast interface address. pr_sockopt_mcasttimetolive ip multicast time-to-live. pr_sockopt_mcastloopback ip multicast loopback. pr_sockopt_nodelay disable nagle algorithm. don't delay send to coalesce packets. pr_sockopt_maxsegment maximum segment size. pr_sockopt_last always one greater than the maximum valid socket option numerator. description the prsockoption enumeration consists of all the socket options supported by nspr. the option field of prsocketoptiondata should be set to an enumerator of type prsockoption. ...

PRSocketOptionData
ture used with pr_getsocketoption and pr_setsocketoption to specify options for file descriptors that represent sockets. syntax #include <prio.h> typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_ttl; pruintn mcast_ttl; pruintn tos; prbool non_blocking; prbool reuse_addr; prbool keep_alive; prbool mcast_loopback; prbool no_delay; prsize max_segment; prsize recv_buffer_size; prsize send_buffer_size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip type-of-service and precedence. non_block...
...etaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip type-of-service and precedence. non_blocking nonblocking (network) i/o. reuse_addr allow local address reuse. keep_alive periodically test whether connection is still alive. mcast_loopback ip multicast loopback. no_delay disable nagle algorithm. don't delay send to coalesce packets. max_segment tcp maximum segment size. recv_buffer_size receive buffer size. send_buffer_size send buffer size. linger time to linger on close if data are present in socket send buffer. add_member join an ip multicast group. drop_member leave an ip multicast group. mcast_if ip multicast interface address. description ...

nsIAppShell
nly. ...
... dispatch code which to favor. the default is to prevent native event starvation. calls to this function may be nested. when the number of calls that pass pr_true is subtracted from the number of calls that pass pr_false is greater than 0, performance is given precedence over preventing event starvation. void favorperformancehint( in boolean favorperfoverstarvation, in unsigned long starvationdelay ); parameters favorperfoverstarvation true to favor event performance over event starvation, false to favor event starvation over event performance. starvationdelay is only used when favorperfoverstarvation is pr_false. it is the amount of time in milliseconds to wait before the pr_false actually takes effect. getnativeevent() obsolete since gecko 1.9 (firefox 3) afte...

nsIFocusManager
d by: @mozilla.org/focus-manager;1 as a service: var focusmanager = components.classes["@mozilla.org/focus-manager;1"] .getservice(components.interfaces.nsifocusmanager); method overview void clearfocus(in nsidomwindow awindow); void contentremoved(in nsidocument adocument, in nsicontent aelement); native code only! obsolete since gecko 2.0 void firedelayedevents(in nsidocument adocument); native code only! void focusplugin(in nsicontent aplugin); native code only! nsidomelement getfocusedelementforwindow(in nsidomwindow awindow, in prbool adeep, out nsidomwindow afocusedwindow); pruint32 getlastfocusmethod(in nsidomwindow window); void movecarettofocus(in nsidomwindow awindow); void elementisfocusable...
...gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. called when content has been removed. void contentremoved( in nsidocument adocument, in nsicontent aelement ); parameters adocument aelement native code only!firedelayedevents fire any events that have been delayed due to synchronized actions. void firedelayedevents( in nsidocument adocument ); parameters adocument native code only!focusplugin indicate that a plugin wishes to take the focus. this is similar to a normal focus except that the widget focus is not changed. updating the widget focus state is the responsibility of the caller. void foc...

nsITreeSelection
read only. currentcolumn nsitreecolumn the current column. currentindex long the current item (the one with focus). note: this property indicates only the index of the row with ...
...clearing out anything else. if false, everything is cleared except for the specified range. select() deselect all rows and select the row at the specified index. void select( in long index ); parameters index index of the row to select. selectall() selects all rows. void selectall(); parameters none. timedselect() perform a timed select. void timedselect( in long index, in long delay ); parameters index index of the row to select. delay time in miliseconds to delay selection. toggleselect() toggle the selection state of the row at the specified index. void toggleselect( in long index ); parameters index row to toggle. ...

Taking screenshots - Firefox Developer Tools
browser's "downloads" directory: copying screenshots to the clipboard from firefox 53, you can also copy the screenshot to the clipboard. just check the box in settings labeled "screenshot to clipboard": now, whenever you take a screenshot, the screenshot is also copied to the clipboard. taking screenshots with the web console if you need to specify a different device-pixel-ratio, set a delay before taking the screenshot, or specify your own file name, starting in firefox 62 you can use the :screenshot helper function in the web console. type :screenshot in the web console to create a screenshot of the current page. by default, the image file will be named screen shot yyy-mm-dd at hh.mm.ss.png. tip: you could type :s and then hit tab to autocomplete :screenshot. the command has t...
...-dd at hh.mm.ss.png. tip: you could type :s and then hit tab to autocomplete :screenshot. the command has the following optional parameters: command type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard. prevents saving to a file unless you use the --file option to force file writing. --delay number the number of seconds to delay before taking the screenshot; you can use an interger or floating point number. this is useful if you want to pop open a menu or invoke a hover state for the screenshot. --dpr number the device pixel ratio to use when taking the screenshot. values above 1 yield "zoomed-in" images, whereas values below 1 create "zoomed-out" images. ...

AudioNode.connect() - Web APIs
dex optional an index describing which input of the destination you want to connect the current audionode to; the default is 0. the index numbers are defined according to the number of input channels (see audio channels). it is possible to connect an audionode to another audionode, which in turn connects back to the first audionode, creating a cycle. this is allowed only if there is at least one delaynode in the cycle. otherwise, a notsupportederror exception is thrown. this parameter is not allowed if the destination is an audioparam. return value if the destination is a node, connect() returns a reference to the destination audionode object, allowing you to chain multiple connect() calls. in some browsers, older implementations of this interface return undefined. if the destination is an...
... returns undefined. exceptions indexsizeerror the value specified as outputindex or inputindex doesn't correspond to an existing input or output. invalidaccesserror the destination node is not part of the same audio context as the source node. notsupportederror the specified connection would create a cycle (in which the audio loops back through the same nodes repeatedly) and there are no delaynodes in the cycle to prevent the resulting waveform from getting stuck constructing the same audio frame indefinitely. examples connecting to an audio input the most obvious use of the connect() method is to direct the audio output from one node into the audio input of another node for further processing. for example, you might send the audio from a mediaelementaudiosourcenode—that is, the ...

Beacon API - Web APIs
the unloading of a document is something that has traditionally been difficult for developers. user agents will typically ignore asynchronous xmlhttprequests made in an unload handler. to solve this problem, analytics and diagnostics code will typically make a synchronous xmlhttprequest in an unload or beforeunload handler to submit the data. the synchronous xmlhttprequest forces the browser to delay unloading the document, and makes the next navigation appear to be slower. there is nothing the next page can do to avoid this perception of poor page load performance. there are other techniques used to ensure that data is submitted. one such technique is to delay the unload to submit data by creating an image element and setting its src attribute within the unload handler. as most user agents ...
...ading the document, and makes the next navigation appear to be slower. there is nothing the next page can do to avoid this perception of poor page load performance. there are other techniques used to ensure that data is submitted. one such technique is to delay the unload to submit data by creating an image element and setting its src attribute within the unload handler. as most user agents will delay the unload to complete the pending image load, data can be submitted during the unload. another technique is to create a no-op loop for several seconds within the unload handler to delay the unload and submit data to a server. not only do these techniques represent poor coding patterns, some of them are unreliable and result in the perception of poor page load performance for the next navigation...

EffectTiming - Web APIs
mate(), keyframeeffectreadonly(), and keyframeeffect() to describe timing properties for animation effects. these properties are all optional, although without setting a duration the animation will not play. simply put, these properties describe how the user agent should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends. properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of...
...imation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". defaults to "linear". enddelay optional the number of milliseconds to delay after the end of an animation. this is primarily of use when sequencing animations based on the end time of another animation. defaults to 0. fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. defaults ...

Element.animate() - Web APIs
ither an array of keyframe objects, or a keyframe object whose property are arrays of values to iterate over. see keyframe formats for more details. options either an integer representing the animation's duration (in milliseconds), or an object containing one or more timing properties: id optional a property unique to animate(): a domstring with which to reference the animation. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of...
...imation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". defaults to "linear". enddelay optional the number of milliseconds to delay after the end of an animation. this is primarily of use when sequencing animations based on the end time of another animation. defaults to 0. fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. defaults ...

Element: mouseout event - Web APIs
erlying <ul>. ...
... target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseout' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'mouseout' in that specification. obsolete ...

HTMLElement: transitioncancel event - Web APIs
ncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, trans...
...addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitioncancel event is fired if the transition is cancelled in either direction after the transitionrun event occurs and before the transitionend is fired. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment css transitionsthe definition of 'transitioncancel' in that specification. working draft initial definition. ...

HTMLImageElement.loading - Web APIs
he image to only be loaded shortly before it will appear in the window's visual viewport. usage notes timing of the load event the load event is fired when the document has been fully processed. when images are loaded eagerly (which is the default), every image in the document must be fetched before the load event can fire. by specifying the value lazy for loading, you prevent the image from delaying the load attribute by the amount of time it takes to request, fetch, and process the image. images whose loading attribute is set to lazy but are located within the visual viewport immediately upon initial page load are loaded as soon as the layout is known, but their loads do not delay the firing of the load event. in other words, these images aren't loaded immediately when processing the <i...
...ese images aren't loaded immediately when processing the <img> element, but are still loaded as part of the initial page load. they justt don't affect the timing of the load event. that means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible. preventing element shift during image lazy loads when an image whose loading has been delayed by the loading attribute being set to lazy is finally loaded, the browser will determine the final size of the <img> element based on the style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image. to prevent this reflow from occurring, you should explicitly specify the size of the ...

Using microtasks in JavaScript with queueMicrotask() - Web APIs
performing cleanup, after the main body of a javascript execution context exits, but before any event handlers, timeouts and intervals, or other callbacks are processed. when is that useful? the main reason to use microtasks is simply that: to ensure consistent ordering of tasks, even when results or data is available synchronously, but while simultaneously reducing the risk of user-discernible delays in operations. ensuring ordering on conditional use of promises one situation in which microtasks can be used to ensure that the ordering of execution is always consistent is when promises are used in one clause of an if...else statement (or other conditional statement), but not in the other clause. consider code such as this: customelement.prototype.getdata = url => { if (this.cache[url]) ...
...he json.stringify() method. after that, the array's contents aren't needed anymore, so we empty the messagequeue array. finally, we use the fetch() method to send the json string to the server. this lets every call to sendmessage() made during the same iteration of the event loop add their messages to the same fetch() operation, without potentially having other tasks such as timeouts or the like delay the transmission. the server will receive the json string, then will presumably decode it and process the messages it finds in the resulting array. examples simple microtask example in this simple example, we see that enqueueing a microtask causes the microtask's callback to run after the body of this top-level script is done running. html <pre id="log"> </pre> javascript the code belo...

KeyframeEffect.KeyframeEffect() - Web APIs
frames); parameters the first type of constructor (see above) creates a completely new keyframeeffect object instance. its parameters are: element the dom element to be animated, or null. keyframeset an keyframe object or null. keyframeoptions optional either an integer representing the animation's duration (in milliseconds), or an object containing one or more of the following: delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of...
...imation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". defaults to "linear". enddelay optional the number of milliseconds to delay after the end of an animation. this is primarily of use when sequencing animations based on the end time of another animation. defaults to 0. fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. defaults ...

KeyframeEffectOptions - Web APIs
r(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. pseudoelement optional the selector of the pseudo-element to be targeted, if any. defaults to null. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of...
...imation takes to complete. defaults to 0. although this is technically optional, keep in mind that your animation will not run if this value is 0. easing optional the rate of the animation's change over time. accepts the pre-defined values "linear", "ease", "ease-in", "ease-out", and "ease-in-out", or a custom "cubic-bezier" value like "cubic-bezier(0.42, 0, 0.58, 1)". defaults to "linear". enddelay optional the number of milliseconds to delay after the end of an animation. this is primarily of use when sequencing animations based on the end time of another animation. defaults to 0. fill optional dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. defaults ...

Page Visibility API - Web APIs
s typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. these may include: most browsers stop sending requestanimationframe() callbacks to background tabs or hidden <iframe>s in order to improve performance and battery life. timers such as settimeout() are throttled in background/inactive tabs to help improve performance. see reasons for delays longer than specified for more details. budget-based background timeout throttling is now available in modern browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage. this operates in a similar way across modern browsers, with the details being as follows: in firefox, windows in background tabs each have their own time budget in milliseconds — a max...
... this operates in a similar way across modern browsers, with the details being as follows: in firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. chrome is very similar except that the budget is specified in seconds. windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see reasons for delays longer than specified). in chrome, this value is 10 seconds. timer tasks are only permitted when the budget is non-negative. once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget. the budget regenerates at a rate of 10 ms per second, in both firef...

Synchronous and asynchronous requests - Web APIs
with the keepalive flag. when fetch with keepalive isn't available, you can consider using the navigator.sendbeacon() api, which can support these use cases while typically delivering a good ux. the following example shows theoretical analytics code that attempts to submit data to a server by using a synchronous xmlhttprequest in an unload handler. this results in the unloading of the page to be delayed. window.addeventlistener('unload', logdata, false); function logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr. :( client.setrequestheader("content-type", "text/plain;charset=utf-8"); client.send(analyticsdata); } using the sendbeacon() method, the data will be transmitted asynchronously to the web server...
...ion logdata() { var client = new xmlhttprequest(); client.open("post", "/log", false); // third parameter indicates sync xhr. :( client.setrequestheader("content-type", "text/plain;charset=utf-8"); client.send(analyticsdata); } using the sendbeacon() method, the data will be transmitted asynchronously to the web server when the user agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation. the following example shows a theoretical analytics code pattern that submits data to a server by using the sendbeacon() method. window.addeventlistener('unload', logdata, false); function logdata() { navigator.sendbeacon("/log", analyticsdata); } ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while. ...
...ation-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up ...

CSS reference - CSS: Cascading Style Sheets
es varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...n-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-...

Media buffering, seeking, and time ranges - Developer guides
this article discusses how to build a buffer/seek bar using timeranges, and other features of the media api. buffered the buffered attribute will tell us which parts of the media has been downloaded. it returns a timeranges object, which will tell us which chunks of media have been downloaded. this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. ...
... } this works better with longer pieces of audio or video, but press play and click about the player progress bar and you should get something like this. each red filled white rectangle represents a time range. note: you can see the timerange code running live on js bin. seekable the seekable attribute returns a timeranges object and tells us which parts of the media can be played without delay; this is irrespective of whether that part has been downloaded or not. some parts of the media may be seekable but not buffered if byte-range requests are enabled on the server. byte range requests allow parts of the media file to be delivered from the server and so can be ready to play almost immediately — thus they are seekable. var seekabletimeranges = myaudio.seekable; creating our own bu...

Connection management in HTTP/1.x - HTTP
still common and these lead to strange and erratic behaviors that web developers cannot foresee and diagnose easily. pipelining is complex to implement correctly: the size of the resource being transferred, the effective rtt that will be used, as well as the effective bandwidth, have a direct incidence on the improvement provided by the pipeline. without knowing these, important messages may be delayed behind unimportant ones. the notion of important even evolves during page layout! http pipelining therefore brings a marginal improvement in most cases only. pipelining is subject to the hol problem. for these reasons, pipelining has been superseded by a better algorithm, multiplexing, that is used by http/2. by default, http requests are issued sequentially. the next request is only issue...
...pipelining is subject to the hol problem. for these reasons, pipelining has been superseded by a better algorithm, multiplexing, that is used by http/2. by default, http requests are issued sequentially. the next request is only issued once the response to the current request has been received. as they are affected by network latencies and bandwidth limitations, this can result in significant delay before the next request is seen by the server. pipelining is the process to send successive requests, over the same persistent connection, without waiting for the answer. this avoids latency of the connection. theoretically, performance could also be improved if two http requests were to be packed into the same tcp message. the typical mss (maximum segment size), is big enough to contain several...

The "codecs" parameter in common media types - Web media technologies
reserved 19 er aac ltp (error resilient aac long term prediction) hq 20 er aac scalable (error resilient aac scalable) mobile internetworking 21 er twinvq (error resilient twinvq) mobile internetworking 22 er bsac (error reslient bit-sliced arithmetic coding) mobile internetworking 23 er aac ld (error resilient aac low-delay; used for two-way communication) ld, mobile internetworking 24 er celp (error resilient code-excited linear prediction) hq, ld 25 er hvxc (error resilient harmonic vector excitation coding) ld 26 er hiln (error resilient harmonic and individual line plus noise) 27 er parametric (error resilient parametric) 28 ssc (sinuso...
...und 31 escape 32 mpeg-1 layer-1 33 mpeg-1 layer-2 (mp2) 34 mpeg-1 layer-3 (mp3) 35 dst (direct stream transfer) 36 als (audio lossless) 37 sls (scalable lossless) 38 sls non-core (scalable lossless non-core) 39 er aac eld (error resilient aac enhanced low delay) 40 smr simple (symbolic music representation simple) 41 smr main (symbolic music representation main) 42 reserved 43 saoc (spatial audio object coding)[1] 44 ld mpeg surround (low delay mpeg surround)[1] 45 and up reserved [1] saoc and ld mpeg surround are defined in iso/iec 14496-3:2009/am...

Performance fundamentals - Web Performance
tical path. shorten the critical path by simplifying the scene. the web platform is highly dynamic. javascript is a dynamically-typed language, and the web platform allows loading code, html, css, images, and other resources dynamically. these features can be used to defer work that's off the critical path by loading unnecessary content "lazily" some time after startup. another problem that can delay startup is idle time, caused by waiting for responses to requests (like database loads). to avoid this problem, applications should issue requests as early as possible in startup (this is called "front-loading"). then when the data is needed later, hopefully it's already available and the application doesn't have to wait. note: for much more information on improving startup performance, read op...
...he background and some other task is operating). this will save battery life and prevent users from cursing your name into the night sky. make events immediate as old-school, accessibility-aware web developers we love click events since they also support keyboard input. on mobile devices, these are too slow. you should use touchstart and touchend instead. the reason is that these don’t have a delay that makes the interaction with the app appear sluggish. if you test for touch support first, you don’t sacrifice accessibility, either. for example, the financial times uses a library called fastclick for that purpose, which is available for you to use. keep your interface simple one big performance issue we found in html5 apps was that moving lots of dom elements around makes everything slu...

Alerts and Notifications - Archive of obsolete content
it uses nsialertsservice. ...

Code snippets - Archive of obsolete content
miscellaneous miscellaneous useful code fragments html to dom using a hidden browser element to parse html to a window's dom javascript libraries here are some javascript libraries that may come in handy. stringview a library that implements a stringview view for javascript typed arrays. this lets you access data in typed arrays using c-li...

Appendix F: Monitoring DOM changes - Archive of obsolete content
when they significantly change their content, either via a change to the fragment identifier (hash) or more recently via the history.pushstate method. the former triggers a hashchange event while the latter triggers a popstate event. event listeners for those events are the preferred method for detecting dom modifications when feasible. often times, this must be used in combination with a slight delay, or even polling, via settimeout, for cases where the url change happens before the page is fully loaded. this method works particularly well with services like google instant, and the gawker family of sites. network listeners ajax-based page changes are almost universally tied to xmlhttprequests. these requests can be tracked from chrome code using a variety of methods, including web progress...

Custom XUL Elements with XBL - Archive of obsolete content
nvoke if you have a reference to the object that corresponds to the node. we have experienced problems when calling methods and setting properties on xbl nodes right after they are created and inserted to the document. this is likely due to some asynchronous operation related to node insertion. if you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well). handlers the handlers and handler xbl elements are used to define event handlers for the element. we have a "click" handler that displays the greeting when the "person" element is clicked: <handler phase="bubbling" event="click"><![cdata[ window.alert(this.greeting); ]]></handler> handlers are not necessary all that often, since in most c...

Tabbed browser - Archive of obsolete content
tabbrowser.selectedtab = tabbrowser.tabcontainer.childnodes[index]; // focus *this* browser-window browserwin.focus(); found = true; break; } } } // our url isn't open. open it now. if (!found) { var recentwindow = wm.getmostrecentwindow("navigator:browser"); if (recentwindow) { // use an existing browser window recentwindow.delayedopentab(url, null, null, null, null); } else { // no browser windows are open, so open a new one. window.open(url); } } } reusing by other criteria sometimes you want to reuse a previously-opened tab regardless of which url/uri it displays. this assumes the tab is opened by your extension, not by some other browser component. we can do re-use an arbitrary tab by atta...

Index of archived content - Archive of obsolete content
rome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom java...

Install.js - Archive of obsolete content
// find directory to install into var installpath; if (this.profileinstall) installpath = profiledir; else installpath = install.getfolder('chrome'); // add jar file install.addfile(null, 'chrome/' + jarname, installpath, null); // register chrome var jarpath = install.getfolder(installpath, jarname); var installtype = this.profileinstall ? ...

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
make sure that file and directory are on th...

Download Manager preferences - Archive of obsolete content
while they're ongoing. 0 indicates that the downloads should be paused and resumed automatically the next time firefox is run; 1 indicates that the downloads should be paused but will not automatically resume when the application is restarted; and 2 indicates that the downloads will be canceled on quit. default value is 0 (resume on next launch). browser.download.manager.resumeonwakedelay an integer value indicating the number of milliseconds to wait after the system wakes up from sleep before resuming downloads. default value is 10000. browser.download.manager.retention indicates how long downloads are retained in the download manager's queue after the download is completed successfully. 0 indicates that the download should be removed upon completion; 1 indicates...

Layout System Overview - Archive of obsolete content
rting flicker or other artifacts that might bother the user. consider a text entry field: the user types text into a form on the web. as the user types a new character it is inserted into the content model. this causes layout to be notified that a new piece of content has been entered, which causes layout to create a new frame and format it. this must happen very fast, so the user's typing is not delayed. in the case of the wysiwyg html editor, the user expects that the modifications they make to the document will appear immediately, not seconds later. this is especially critical when the user is typing into the document: it would be quite unusable if typing a character at the end of a document in the html editor caused the entire document to be reformatted - it would be too slow, at least on l...

Mozilla Application Framework in Detail - Archive of obsolete content
s for detecting and maintaining application versions high-level objects for manipulating local directories and files complete reference documentation, including useful example installations the following snippet from an xpinstall installation gives you some idea about how easy it is to write cross-platform installations that use the mozilla browser: // register chrome registerchrome(package | delayed_chrome, getfolder("chrome","xmlterm.jar"), "content/xmlterm/"); registerchrome(skin | delayed_chrome, getfolder("chrome","xmlterm.jar"), "skin/modern/xmlterm/"); registerchrome(locale | delayed_chrome, getfolder("chrome","xmlterm.jar"), "locale/xmlterm/"); if (getlasterror() == success) performinstall(); else { alert("error detected: "+getlasterror()); cancelinstall(); } other featu...

Tuning Pageload - Archive of obsolete content
ich preferences to tweak to affect your pageload time. you use the url about:config or the file prefs.js in your profile to change these. to best understand what the following preferences affect, there are a few things you should know. the data flows in gecko as follows: network -> necko -> parser -> content sink -> content model -> rendering model -> layout -> painting. nglayout.initialpaint.delay this is a preference that specifies a delay, in milliseconds, after the data from the server has started coming in. during this delay, the page that's coming in is not painted, unless it ends up fully loaded before the delay expires. the idea here is twofold.this reduces ugly visual jitter as the new page comes in by not starting painting till after we have a bunch of the data.this makes overal...

Using gdb on wimpy computers - Archive of obsolete content
however, you need to make sure that the base libraries like libc and pthreads are loaded before you tell gdb to stop loading shared libraries. if you don't allow those libraries to be loaded then gdb will not be able to properly debug threads on linux. ...

Creating XPI Installer Modules - Archive of obsolete content
note also the use of resource attributes specified in the contents.rdf file in the jar. it is the correspondence of this installation script, the resources th...

confirm - Archive of obsolete content
tton_title_is_string: custom title specified by the corresponding abuttonxtitle parameter other constants button_pos_0_default: specifies button 0 as the default button. unless specified otherwise, this is the default. button_pos_1_default: specifies button 1 as the default button. button_pos_2_default: specifies button 2 as the default button. button_delay_enable: specifies that the buttons should only become clickable after a certain delay. note that this only applies to buttons 0 and 2, not button 1 (the "cancel" button). std_ok_cancel_buttons: use this instead of the constants above to have standard 'ok' and 'cancel' buttons. if you leave out abuttonflags, this is the default. std_yes_no_buttons: use this instead of the constants abo...

WinReg Object - Archive of obsolete content
g object, it is set to operate with hkey_classes_root as its root key. to use a different root key, use the setrootkey method. typically values in the windows registry are strings. to manipulate such values, use the getvaluestring and setvaluestring methods. to manipulate other values, use the getvalue and setvalue methods. reading registry values is immediate. however, writing to the registry is delayed until performinstall is called. ...

textbox.type - Archive of obsolete content
command event is only fired if the user presses the search button or presses the enter key. you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses the enter key. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. xbl-specific note beware that if you create an xbl binding for a textbox, you need to use the appropriate extends attribute and changing type attribute on the tree won't have effect. e.g. if you have <bind...

How to implement a custom XUL query processor component - Archive of obsolete content
yprocessor.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplatequeryprocessor]), classdescription: "sample xul template query processor", classid: components.id("{282cc4ea-a49c-44fc-81f4-1f03cbb7825f}"), contractid: "@mozilla.org/xul/xul-query-processor;1?name=simpledata", getdatasource: function(adatasources, arootnode, aistrusted, abuilder, ashoulddelaybuilding) { // todo: parse the adatasources variable // for now, ignore everything and let's just signal that we have data return this._data; }, initializeforbuilding: function(adatasource, abuilder, arootnode) { // perform any initialization that can be delayed until the content builder // is ready for us to start }, done: function() { // called when the builder ...

textbox (Toolkit autocomplete) - Archive of obsolete content
command event is only fired if the user presses the search button or presses the enter key. you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses the enter key. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. value type: string the string attribute allows you to associate a data value with an element. it is not used for any specific purpose, but you can access it with a script for your own use. be aware,...

Textbox (XPFE autocomplete) - Archive of obsolete content
command event is only fired if the user presses the search button or presses the enter key. you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses the enter key. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. useraction type: one of the values below this attribute will be set to the action the user is currently performing. possible values: none the user is not interacting with the textbox. typi...

Complete - Archive of obsolete content
istic. the approach that is normally recommended is pessimistic. the extension is assumed to fail in any future version of the application. to adopt this approach, set the maxversion to the latest actual version where you have tested your extension. the problem with this approach is that you have to release a new xpi every time there is a new release of any of the applications it supports. if you delay releasing a new xpi, you risk annoying users who cannot upgrade until you do. the approach used here is optimistic. the extension is assumed to work in any future version of the application. to adopt this approach, set the maxversion to a large number like 99. the problem with this approach is that when changes in an application do make the extension fail, users might have bad experiences ranging...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
that you like for this directory. 3. in your working directory, create a plain text file named: install.js copy the following content, and paste it into the new file: const title = "custom toolbar button" const name = "custombutton" const version = "1.0" r = initinstall(title, name, version) || adddirectory(null, "content", getfolder("chrome"), name) || registerchrome(content + delayed_chrome, getfolder("chrome", name), "") if (r) cancelinstall(r) else performinstall(), alert("now restart seamonkey") customize the title, name and (optionally) version definitions, changing the text between double-quote characters on those three lines. the name must match the change that you made in step 1. 4. in your working directory, create a new directory named content. move ...

textbox - Archive of obsolete content
command event is only fired if the user presses the search button or presses the enter key. you may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500). timed this textbox will fire a command event after the user types characters and a certain time has passed. the delay is set with the timeout attribute. the command event will fire if the user presses the enter key. the timed type is deprecated in gecko 1.9.1 and the search textbox may be used instead. value type: string the default value entered in a textbox. the attribute only holds the default value and is never modified when the user enters text. to get the updated value, use the value property...

XULRunner tips - Archive of obsolete content
ref("browser.download.folderlist", 0); pref("browser.download.manager.showalertoncomplete", true); pref("browser.download.manager.showalertinterval", 2000); pref("browser.download.manager.retention", 2); pref("browser.download.manager.showwhenstarting", true); pref("browser.download.manager.usewindow", true); pref("browser.download.manager.closewhendone", true); pref("browser.download.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime", 4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x8000ffff (ns_error_...

Encryption and Decryption - Archive of obsolete content
gth and encryption strength symmetric-key encryption with symmetric-key encryption, the encryption key can be calculated from the decryption key and vice versa. with most symmetric algorithms, the same key is used for both encryption and decryption, as shown in figure 1. implementations of symmetric-key encryption can be highly efficient, so that users do not experience any significant time delay as a result of the encryption and decryption. symmetric-key encryption also provides a degree of authentication, since information encrypted with one symmetric key cannot be decrypted with any other symmetric key. thus, as long as the symmetric key is kept secret by the two parties using it to encrypt communications, each party can be sure that it is communicating with the other as long as the de...

Audio for Web games - Game development
n with the first parameter, which takes the absolute time of when that playback should commence. note the second parameter (where to start playing from in the new track) is relative: if (offset == 0) { source.start(); offset = context.currenttime; } else { var relativetime = context.currenttime - offset; var beats = relativetime / tempo; var remainder = beats - math.floor(beats); var delay = tempo - (remainder*tempo); source.start(context.currenttime+delay, relativetime+delay); } note: you can try our wait calculator code here, on jsfiddle (i've synched to the bar in this case). note: if the first parameter is 0 or less than the context currenttime, playback will commence immediately. positional audio positional audio can be an important technique in making audio a key pa...

Animations and tweens - Game development
d when the tween finishes. the last thing do to is to start the tween right away using start(). that's the expanded version of the tween definition, but we can also use the shorthand syntax: game.add.tween(brick.scale).to({x:2,y:2}, 500, phaser.easing.elastic.out, true, 100); this tween will double the brick's scale in half a second using elastic easing, will start automatically, and have a delay of 100 miliseconds. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps animations and tweens look very nice, but we can add even more to our game — in the next section we'll look at handling button inputs. « previousnext » ...

Latency - MDN Web Docs Glossary: Definitions of Web-related terms
high latency is bad, meaning it takes a long time for the requested resource to reach its destination. ...

Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view. if correctly implemented, this delay in asset loading is seamless to the user experience and might help improve initial load performance, including time to interactive, as fewer assets are required for the page to start working. see also lazy loading ...

Main thread - MDN Web Docs Glossary: Definitions of Web-related terms
owser uses a single thread to run all the javascript in your page, as well as to perform layout, reflows, and garbage collection. this means that long-running javascript functions can block the thread, leading to an unresponsive page and a bad user experience. unless intentionally using a web worker, such as a service worker, javascript runs on the main thread, so it's easy for a script to cause delays in event processing or painting. the less work required of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user. ...

UDP (User Datagram Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms
ol protocol (tcp) or stream control transmission protocol (sctp) which are designed for this purpose. udp is suitable for purposes where error checking and correction are either not necessary or are performed in the application; udp avoids the overhead of such processing in the protocol stack. time-sensitive applications often use udp because dropping packets is preferable to waiting for packets delayed due to retransmission, which may not be an option in a real-time system. general knowledge user datagram protocol on wikipedia technical reference specification ...

MDN Web Docs Glossary: Definitions of Web-related terms
encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint first-class function flex flex container flex item flexbox forbidden header name forbidden response header name fork fragmentainer frame rate (fps) ftp ftu function fuzz testing g ...

Client-side form validation - Learn web development
javascript. objective: to understand what client-side form validation is, why it's important, and how to apply various techniques to implement it. client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the user can fix it straight away. if it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data. however, client-side validation should not be considered an exhaustive security measure! your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can s...

Sending forms through JavaScript - Learn web development
files[0] ); } // if not, read the file once the user selects it. ...

Tips for authoring fast-loading HTML pages - Learn web development
download a page, thereby reducing the time for these requests to be sent, and for their responses to be received. depending on a browser's cache settings, it may send a request with the if-modified-since header for each referenced file, asking whether the file has been modified since the last time it was downloaded. too much time spent querying the last modified time of the referenced files can delay the initial display of the web page, since the browser must check the modification time for each of these files, before rendering the page. if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite. then you just apply the same image each time you need it for a background and adjust the x/y coordina...

Multimedia: video - Learn web development
i original.mp4 -an -c:v copy audiofreeversion.mp4 video preload the preload attribute has three available options: auto|metadata|none. the default setting is metadata. these settings control how much of a video file downloads with page load. you can save data by deferring download for less popular videos. setting preload="none" results in none of the video being downloaded until playback. it delays startup, but offers significant data savings for videos with a low probability of playback. offering more modest bandwidth savings, setting preload="metadata" may download up to 3% of the video on page load. this is a useful option for some small or moderately sized files. changing the setting to auto tells the browser to automatically download the entire video. do this only when playback is v...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
to batch things more effectively. in this case, when editing is false, the edit <input> is not visible because it does not exist in the dom. inside the onedit() function we set editing = true and immediately afterwards try to access the nameel variable and execute nameel.focus(). the problem here is that svelte hasn't yet updated the dom. one way to solve this problem is to use settimeout() to delay the call to nameel.focus() until the next event cycle, and give svelte the opportunity to update the dom. try this now: function onedit() { editing = true // enter editing mode settimeout(() => nameel.focus(), 0) // asynchronous call to set focus to name input } the above solution works, but it is rather inelegant. svelte provides a better way to handle these cases...

Working with Svelte stores - Learn web development
om the svelte/transition module. put the following import statement below the existing ones: import { fly } from 'svelte/transition' to use it, update your opening <div> tag like so: <div role="alert" on:click={() => visible = false} transition:fly > transitions can also receive parameters, like this: <div role="alert" on:click={() => visible = false} transition:fly="{{delay: 250, duration: 300, x: 0, y: -100, opacity: 0.5}}" > note: the double curly braces are not special svelte syntax. it's just a literal javascript object being passed as a parameter to the fly transition. try your app out again — you'll see that the notifications now look a bit more appealing. note: being a compiler allows svelte to optimize the size of our bundle by excludin...

Understanding client-side JavaScript frameworks - Learn web development
elpful. we want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. we just think they score highly on the above criteria. note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. if your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! get in touch with us via matrix, or discourse, or drop us a mail on the mdn-admins list. ...

Introducing a complete toolchain - Learn web development
the body of development to ensure that your software makes it to the web and continues to run. in this case study we'll look at adding tests to your code, and deploying your app using netlify so it is available for all the web to see. let's start working on these, beginning with our development environment. creating a development environment this part of the toolchain is sometimes seen to be delaying the actual work, and it can be very easy to fall into a "rabbit hole" of tooling where you spend a lot of time trying to get the environment "just right". but you can look at this in the same way as setting up your physical work environment. the chair needs to be comfortable, and set up in a good position to help with your posture. you need power, wifi, and usb ports! there might be important...

Browser chrome tests
ed into the test scope for each test living in the same folder. notice that any function call in head.js main scope will run before the main test() method. asynchronous tests when writing async tests, you can use the add_task method with promises. the test suite also supports asynchronous tests, using the same function names as mochitest. call waitforexplicitfinish() from test() if you want to delay reporting a result until after test() has returned. call finish() once the test is complete. be aware that the test harness will mark tests that take too long to complete as failed (the current timeout is 30 seconds). function test() { waitforexplicitfinish(); settimeout(completetest, 1000); } function completetest() { ok(true, "timeout ran"); finish(); } if your test is rando...

Eclipse CDT Manual Setup
format settings under "general > editors > text editors" have no effect in c/c++ views, since the c/c++ settings are more specific and override those settings. however, you may still want to tweak those settings if you'll be editing other file types in eclipse.) select "c/c++ > editor" and set "workspace default" to "doxygen". select "c/c++ > editor > content assist" and set the auto-activation delay to 0 so that autocomplete suggestions don't seem to be laggy. (sadly, there is no auto-activation option to activate autocomplete suggestion., so as soon as you type any alphabetical character that may begin with a symbol name like there is in other ides.) select "c/c++ > editor > save actions" and deselect "ensure newline at the end of file". select "c/c++ > editor > scalability" and set "enab...

Listening to events on all tabs
lean onrefreshattempted( nsidomxulelement abrowser, nsiwebprogress webprogress, nsiuri arefreshuri, long amillis, boolean asameuri ); parameters abrowser the browser that fired the notification. awebprogress the nsiwebprogress instance that fired the notification. arefreshuri the new uri that awebprogress has requested redirecting to. amillis the delay (in milliseconds) before refresh. asameuri true if awebprogress is requesting a refresh of the current uri. false if awebprogress is requesting a redirection to a different uri. return value true if the refresh may proceed. false if the refresh should be aborted. onlinkiconavailable notification that the site icon for a browser has been found. void onlinkiconavailable( nsidomxule...

Process scripts
smessagemanager sendasyncmessage("hello"); in this example, the dump() statement will run once in each content process as well as in the main process. this example also figures out whether it is running in the chrome or in a content process by looking at the process type in services.appinfo. in just about every respect, using process scripts is like using frame scripts: you can pass the allowdelayedload to loadprocessscript(). if you do, you must call removedelayedprocessscript() when your extension is disabled or removed the message-passing apis are the same: sendasyncmessage() is available in both directions, while sendsyncmessage() is available from content to chrome only process scripts are system-privileged, and have access to the components object. however, process scripts are subj...

Performance best practices for Firefox front-end engineers
ms of its impact on other parts of firefox. always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements. avoid the main thread where possible the main thread is where we process user events and do painting. it's also important to note that most of our javascript runs on the main thread, so it's easy for script to cause delays in event processing or painting. that means that the more code we can get off of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user. you might want to consider using a worker if you need to do some computation that can be done off of the main thread. if you need more elevated privileges than a standard worker allows, consider using a...

HTMLIFrameElement.getScreenshot()
firefox 65. the getscreenshot() method of the htmliframeelement lets you request a screenshot of a content <iframe>, scaled to fit within a specified maximum width and height. the image will be cropped if necessary but will not be distorted vertically or horizontally. note: getscreenshot() waits for the event loop to go idle before it takes the screenshot. it won't wait more than 2000ms (this delay is defined by the gecko dom.browserelement.maxscreenshotdelayms preference). syntax var instanceofdomrequest = instanceofhtmliframeelement.getscreenshot(maxwidth, maxheight, mimetype); returns a domrequest for handling the screenshot request. its request.onsuccess handler handles the success case (the screenshot is contained in request.result as a blob object), and its request.onerror handle...

IME handling guide
ication::mtextchangedata::mcausedonlybycomposition is set to true. this is useful if native ime handler wants to ignore all text changes which are expected by native ime. if at least one text change of the merged text changes was caused by current composition, imenotification::mtextchangedata::mincludingchangesduringcomposition is set to true. this is useful if native ime handler wants to ignore delayed text change notifications. if at least one text change of the merged text changes was caused when there was no composition, imenotification::mtextchangedata::mincludingchangeswithoutcomposition is set to true. notify_ime_of_selection_change when selection (or caret position) is changed in focused editor, widget is notified of this. if the last selection change was occurred by a composition ...

CustomizableUI.jsm
ing. this can be useful if other parts of the code need to react to changes in the customization of the user interface. in order to use this facility, you should create a plain js object which defines some of the event handlers defined below. not all event handler methods need to be defined. customizableui will catch exceptions. events are dispatched synchronously on the ui thread, so if you can delay any/some of your processing, that is advisable. the following event handlers are supported: onwidgetadded(awidgetid, aarea, aposition) fired when a widget is added to an area. awidgetid is the widget that was added, aarea the area it was added to, and aposition the position in which it was added. onwidgetmoved(awidgetid, aarea, aoldposition, anewposition) fired when a widget is moved withi...

Examples
-collection and if the promise is at the end of a promise chain (i.e. thatpromise.then has never been called), then we print a warning. note: this warning is generated some time after the error occurred, and may provide less information about the error location. it generally indicates the need to insert a proper error handler. when a proper rejection handler is used, it effectively replaces this delayed reporting. let deferred = promise.defer(); let p = deferred.promise.then(); deferred.reject(new error("i am an uncaught error")); deferred = null; p = null; in this snippet, since deferred.promise is not the last in the chain, no error will be reported for that promise. however, since p is the last promise in the chain, the error will be reported for p. note that this may, in some cases,...

JavaScript code modules
functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files. ctypes.jsm provides an interface that allows javascript code to call native libraries without requiring the development of an xpcom component. customizableui.jsm allows you to interact with customizable buttons and items in firefox's main window ui. deferredtask.jsm run a task after a delay. dict.jsm provides an api for key/value pair dictionaries. downloadlastdir.jsm supplies the path to the directory into which the last download occurred. downloads.jsm provides a single entry point to interact with the downloading capabilities of the platform. fileutils.jsm provides helpers for dealing with files. geometry.jsm provides routines for performing basic geometric operations o...

Gecko Profiler FAQ
es that only show up after extended uptime? by running into them. i wish i had a better answer to this question. in general, the gecko profiler is a profiling tool that helps you figure out what happens inside the browser as a performance issue is happening, it doesn’t help with reproducing the performance issues in the first place. tasktracer: how to diagnose dispatch delays? (a demo) tasktracer is currently not in a usable state. sorry. tasktracer: from the above, how do we decide on prioritization on the same thread event queue? see above. do we profile memory page faults? (i.e. when we are accessing a virtual memory page that needs to reload from disk) the gecko profiler does not know about page faults...

Profiling with the Firefox Profiler
ault]', we can see what's occurring on the latter thread that is preventing it from responding to the former. x (time) axis: the timelines go from left to right as wall clock time increases along the x axis. elements in the timeline are spaced at the sampling frequency with an attempt to align them with time. factors such as sampling or stack-walking variance and system load can lead to sampling delays which manifest as gaps in the timeline. note: because this is a sampling profiler, be cautious when examining running time that is equal to the sampling interval. for very time-sensitive profiling, you may want to consider a non-sampling profiler. y (stack) axis: the y axis is the stack depth, not the cpu activity. the change in stack height is useful to find patterns like long blocking call...

Scroll-linked effects
100px; width: 100px; height: 20px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div. as the scroll event listener runs in the javascript on the browser's main thread, it will be asynchronous relative to the user-visible scrolling. therefore, with asynchronous scrolling, the event handler will be delayed relative to the user-visible scroll, and so the div will not stay visually fixed as intended. instead, it will move with the user's scrolling, and then "snap" back into position when the scroll event handler runs. this constant moving and snapping will result in a jittery visual effect. one way to implement this without the scroll event listener is to use the css property designed for this purp...

TimerFirings logging
or from web content. the informative labels are only present on function timers that have had their creation site annotated. for unannotated function timers, there are three possible behaviours. first, on mac the code uses dladdr to get the name immediately, and the output will look like the following. 2082435840[100445640]: [81190] fn timer (one_shot 8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dladdr to get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py. the following two lines show the output before and after being post-processed by that script. 2088737280[7f606bf68140]: [30710] fn timer (one_shot 16 ms): [from dladdr] #0: ???[/home/njn/moz/mi1/o64/dist/bin/libxul.so +0x2144f...

Optimizing Applications For NSPR
n may fail because of threads being preempted during critical sections. to disable thread preemption call <tt>pr_disableclockinterrupts()</tt>during initialization. interrupting threads (via <tt>pr_interrupt()</tt>) on threads blocked in i/o functions is implemented to various degrees on different platforms. the unix based platforms all implement the function though there may be up to a 5 second delay in processing the request. the mechanism used to implement <tt>pr_interrupt()</tt> on the pthreads versions of nspr is flawed. no failure attributable to the flaw has shown up in any tests or products - yet. the specific area surrounding pthread's continuation thread has been both observed and empirically proven faulty, and a correction identified. macintosh the current port of nspr for maci...

PR_Interrupt
or code (see pr_geterror) for blocking operations that return a prstatus (such as i/o operations, monitor waits, or waiting on a condition). to check whether the thread was interrupted, compare the result of pr_geterror with pr_pending_interrupt_error. pr_interrupt may itself fail if the target thread is invalid. bugs pr_interrupt has the following limitations and known bugs: there can be a delay for a thread to be interrupted from a blocking i/o function. in all nspr implementations, the maximum delay is at most five seconds. in the pthreads-based implementation on unix, the maximum delay is 0.1 seconds. file i/o is considered instantaneous, so file i/o functions cannot be interrupted. unfortunately the standard input, output, and error streams are treated as files by nspr, so a pr_read...

NSS 3.15.1 release notes
ommon name in libpkix when no subjectaltname is present. bug 875156 - add const to the function arguments of sec_certnicknameconflict. bug 877798 - fix ssltap to print the certificate_status handshake message correctly. bug 882829 - on windows, nss initialization fails if nss cannot call the rtlgenrandom function. bug 875601 - secmod_closeuserdb/secmod_openuserdb fails to reset the token delay, leading to spurious failures. bug 884072 - fix a typo in the header include guard macro of secmod.h. bug 876352 - certutil now warns if importing a pem file that contains a private key. bug 565296 - fix the bug that shlibsign exited with status 0 even though it failed. the nss_survive_double_bypass_failure build option is removed. bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org...

NSS 3.35 release notes
ing the sql type (either explicitly, or because of the new default), with a database directory which already contains a dbm type database, nss will automatically perform a one time migration of the information contained in the dbm files to the newer sql files. if a master password was set on the dbm database, then the initial migration may be partial, and migration of keys from dbm to sql will be delayed, until this master password is provided to nss. (conversely, nss will never synchronize data from sql to dbm format.) additional information can be found on this fedora linux project page: https://fedoraproject.org/wiki/changes/nssdefaultfileformatsql added formally verified implementations of non-vectorized chacha20 and non-vectorized poly1305 64-bit. for stronger security, when crea...

Scripting Java
tput from the new thread may appear in either order, depending on thread scheduling. behind the scenes, rhino generates the bytecode for a new java class that implements runnable and forwards all calls to its run method over to an associated javascript object. the object that implements this class is called a java adapter. because the forwarding to javascript occurs at runtime, it is possible to delay defining the methods implementing an interface until they are called. while omitting a required method is bad practice for programming in the large, it's useful for small scripts and for exploratory programming. the javaadapter constructor in the previous section we created java adapters using the new operator with java interfaces. this approach has its limitations: it's not possible to impleme...

Index
resentation. js_versiontostring may return any of the following values: 504 js_yieldrequest jsapi_reference, spidermonkey momentarily suspend the current jsapi request, allowing garbage collection to run if another thread has requested it. 505 js_freeop jsapi reference, reference, référence(2), spidermonkey js_freeop is a wrapper for js_free(p) that may delay js_free(p) invocation as a performance optimization as specified by the given jsfreeop instance. 506 js_malloc jsapi reference, spidermonkey js_malloc allocates a region of memory nbytes in size. on success, js_malloc returns a pointer to the beginning of the region. as with the standard c function malloc, memory allocated by js_malloc is uninitialized. 507 js_upda...

JS_FlushCaches
obsolete since jsapi 15this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.5 flushes the code cache for the current thread. the operation might be delayed if the cache cannot be flushed currently because native code is currently executing. syntax void js_flushcaches(jscontext *cx); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. description . see also bug 737364 ...

JS_freeop
features introduced in spidermonkey 17 a wrapper for js_free. syntax void js_freeop(jsfreeop *fop, void *p); name type description fop jsfreeop * a pointer to jsfreeop structure to be used to get the implementation of free. p void * a pointer to the allocated memory to be freed. description js_freeop is a wrapper for js_free(p) that may delay js_free(p) invocation as a performance optimization as specified by the given jsfreeop instance. see also mxr id search for js_freeop jsfreeop js_free bug 737365 ...

Places Expiration
the storage async api, that ensures i/o is in a separate thread, plus it won't block any read thanks to the use of the wal journaling system. common expiration runs on a timer, every 3 minutes and uses a simple adaptive algorithm: if the last step was unable to expire enough entries the next one will expire more entries, otherwise if the previous step completed the cleanup the next step will be delayed. this ensures expiration doesn't lag behind without hitting performances when there is no need for it. apart this periodic expiration, there are other steps on idle, on shutdown on clear history. on idle on idle it expires a larger chunk of pages, then timed expiration is stopped. this ensures to not interfere with standby tasks and preserves battery on mobile. on shutdown most of the time...

Avoiding leaks in JavaScript XPCOM components
ion object for the filter each time this code is executed). this same problem can also happen if the function is inside of an object. consider the example of bug 170022 (which also demonstrates a leak via a global variable, fixed later in bug 231266): const observer = { observe: function(subject, topic, data) { if (topic != "open-new-tab-request" || subject != window) return; delayedopentab(data); } }; const service = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); service.addobserver(observer, "open-new-tab-request", false); in this example, there is a similar cycle between observe and service. (but since service is a global variable, just fixing the cycle doesn't fix the leak.) don't store short-lived obj...

Component Internals
d, it is important to understand the xpcom initalization process. when an application starts up, that application may initialize xpcom. the sequence of events that kicks off this xpcom initialization may be triggered by user action or by the application startup itself. a web browser that embeds gecko, for example, may initialize xpcom at startup through the embedding apis. another application may delay this startup until xpcom is needed for the first time. in either case, the initialization sequence within xpcom is the same. xpcom starts when the application makes a call to initialize it. parameters passed to this startup call allow you to configure some aspects of xpcom, including the customization of location of specific directories. the main purpose of the api at this point is to change whi...

Starting WebLock
tter_addrefs(appdir)); if (ns_failed(rv)) return -1; most of the useful functionality is exposed by the nsiproperties interface, but the directory service also implements nsidirectoryservice. this interface allows you to extend and override nsifile objects registered with the directory service. there are currently two ways to add a file location to the directory service: directly and using the delayed method. the direct method is to add a new nsifile object using the nsiproperties interface, in which case you pass the nsifile object as an nsisupports to the set() method of the nsiproperties interface. in the delayed method, you register to be a callback that can provide an nsifile. to do this, you must get the implementation like we did above. when you have it, queryinterface for the nsidir...

Index
able, threads, xpcom, xpcom api reference, xpcom interface reference the nsithreadpoollistener interface represents objects that listen to notifications generated by the nsithreadpool. 1013 nsitimer interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference the nsitimer interface offers a functionality to invoke a function after a specified delay. 1014 nsitimercallback interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference initialize a timer to fire after the given millisecond interval. this version takes a function to call and a closure to pass to that function. 1015 nsitoolkit interfaces, xpcom, xpcom interface reference initialize this toolkit with athread. ...

Observer Notifications
d manager or preferences. the data value is an nsisupportsprbool. recipients may set this to true to abort the close. browser-lastwindow-close-granted sent when all interested parties have responded to the browser-lastwindow-close-requested notification and none of them requested that the close be aborted. after this is sent and handled, the browser window will close. browser-delayed-startup-finished sent when the browser window and all its components have been loaded and initialized. documents these topics indicate notifications you can monitor related to dom documents. topic subject data description chrome-document-global-created nsidomwindow null sent immediately after a chrome document window has been set up, but before an...

imgIEncoder
otal number of frames in the image. the first frame, even if skipped, is always included in the count. plays=# -- default: "0" number of times to play the animation sequence. "0" will repeat forever. the following options can be used for each frame, with addimageframe(): transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. delay=# -- default: "500" number of milliseconds to display the frame, before moving to the next frame. dispose=[none|background|previous] -- default: "none" what to do with the image's canvas before rendering the next frame. see apng spec. blend=[source|over] -- default: "source" how to render the new frame on the canvas. see apng spec. xoffset=# -- default: "0" yoffset=# -- defa...

nsIFrameLoader
this can be used to decide what operations may or may not be allowed on the loader's docshell. read only. docshell nsidocshell get the docshell from the frame loader. read only. messagemanager nsichromeframemessagemanager the...

nsIIdleService
'idle' and when they get back, the observer topic is 'back' in gecko 15 and earlier or 'active' in gecko 16 and later. the data parameter for the notification contains the current user idle time in gecko 15 and earlier or 0 in gecko 16 and later. you can add the same observer twice. most implementations need to poll the os for idle info themselves, meaning your notifications could arrive with a delay up to the length of the polling interval in that implementation. current implementations use a delay of 5 seconds. gecko 1.9.2 note starting in gecko 1.9.2, there is a once a day notification sent out if the user remains idle for an extended period: 'idle-daily'. the data parameter for the notification contains the current user idle time. void addidleobserver( in nsiobserver observer, ...

nsIProtocolProxyService
alues from resolve/asyncresolve as well as from getfailoverforproxy. nsiproxyinfo getfailoverforproxy( in nsiproxyinfo aproxyinfo, in nsiuri auri, in nsresult areason ); parameters aproxyinfo the proxy that was unavailable. auri the uri that was originally passed to resolve/asyncresolve. areason the error code corresponding to the proxy failure. this value may be used to tune the delay before this proxy is used again. the proxy that was unavailable. return value an nsiproxyinfo object or null for a direct connection. exceptions thrown ns_error_not_available if there is no alternate proxy available. registerfilter() this method may be used to register a proxy filter instance. each proxy filter is registered with an associated position that determines the order in whic...

nsIScriptableIO
dicates to append to the file rather than overwrite the existing file. the write position will be set to the end of the file before each write. if used in conjuction with the create mode, an existing file may be opened for appending, or a new file created. block: when this mode is specified, writing to a transport such as a socket doesn't return until all data has been written. this may cause a delay if the socket's underlying buffer is full. if you don't specify this mode, an exception is thrown if the buffer is full. nocreate: if the file doesn't already exist, don't create a new file. notruncate: if the file already exists, overwrite the existing content instead of resetting the file size to 0 bytes. syncsave: writing methods do not return until the data is properly saved. a...

nsISound
is opened. event_menu_execute 5 a menu item is executed. event_menu_popup 6 a popup menu is shown. event_editor_max_len 7 more characters than the maximum allowed are typed into a text field. methods beep() plays a beep sound. void beep(); parameters none. init() not strictly necessary, but avoids a delay before the first sound. other methods will call init if they need to. void init(); parameters none. play() plays a sound specified by url. void play( in nsiurl aurl ); parameters aurl the url of the sound file to play. playeventsound() plays the system sound for the specified event. if the user's system is configured to not play system sound effects for the event, this will do...

nsIWebProgressListener2
requested in awebprogress. for example, via a <meta http-equiv="refresh"> or an http refresh: header. boolean onrefreshattempted( in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri ); parameters awebprogress the nsiwebprogress instance that fired the notification. arefreshuri the new uri that awebprogress has requested redirecting to. amillis the delay (in milliseconds) before refresh. asameuri true if awebprogress is requesting a refresh of the current uri. false if awebprogress is requesting a redirection to a different uri. return value true if the refresh may proceed. false if the refresh should be aborted. ...

nsPIPromptService
e dialog. enumbereditfields the value is 3. this is the number of the visible text fields on the dialog. eeditfield1password the value is 4. if this value is 1, the first text field becomes a password field. otherwise, it's a normal edit field. note that the second is always password field. edefaultbutton the value is 5. this is the button number which should be the default button on the dialog. edelaybuttonenable the value is 6. if this is not 0, the all buttons are disabled when the dialog is shown. and they will be enabled later. esoundeventid the value is 7. this is the sound event id which should be played when the dialog is shown. see also nsisound.playeventsound(). method overview void dodialog(in nsidomwindow aparent, in nsidialogparamblock aparamblock, in string achromeurl); me...

Performance
e problem as much. however, there is still overhead, and using a transaction will still be faster. one major problem is that the queue of file operations will get very long if there are many transactions. some operations require walking this queue to see what operations have been pending, and they will be slower. if the user shuts down the browser soon after you do this type of operation, you can delay shutdown (possibly for many tens of seconds for large numbers of transactions and slow disks), making it look like the browser is hung. queries careful reordering of the sql statement, or creating the proper indices, can often improve performance. see the sqlite optimizer overview on the sqlite web site for information on how sqlite uses indices and executes statements. you might also want to try...

Using nsIDirectoryService
you can directly add a new nsifile with any property string using the nsiproperties interface: components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .set("myfilename", file); now, if your cost is too high to set all of these properties at once, you can register to be a callback that can provide an ...

Thunderbird Binaries
es will be accepted. therefore, over time, the branch becomes more stable. why branch? wouldn't it be better to have everyone working towards a release? many developers prefer to work on areas of the code which are too risky to change when approaching a release. some of their changes may also take months to test and implement correctly. their changes will be made to the trunk so that they don't delay the release and will be picked up in future branches. distinguishing between different nightly builds the main way you can determine if you are using a trunk or branch build is to click the "help" menu and choose "about". you should see a string that looks something like this: comm-central-1.9.2 branch: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.9.2.2pre) gecko/20100308 lanikai/3.

Zombie compartments
first tab, the same compartment will continue to be used. so i'll end up with a compartment whose name doesn't match the only page open from that origin. this can be confusing at first, so be ready for it. when are compartments destroyed? compartments are destroyed when they are garbage collected. this happens some time after the last reference to them disappears. this means there can be a delay between a page being closed and its compartments disappearing. explicitly minimizing the memory (a couple of times), i.e. running the garbage collector, with the corresponding about:memory button will help. zombie compartments sometimes, due to bugs in firefox, the add-on sdk and/or add-ons, compartments are created that are never destroyed. these are a particular kind of memory leak, and they...

Debugger.Memory - Firefox Developer Tools
r string, and points to that string for its storage. this representation may result in a small string retaining a very large string. however, the memory consumed by the string itself is a small constant independent of its size, since it is simply a reference to the larger string, a start position, and a length. concatenations: when asked to concatenate two strings, spidermonkey may elect to delay copying the strings’ data, and represent the result simply as a pointer to the two original strings. again, such a string retains other strings, but the memory consumed by the string itself is a small constant independent of its size, since it is simply a pair of pointers. spidermonkey converts strings from the more complex representations to the simpler ones when it pleases. such conversio...

DevTools API - Firefox Developer Tools
el is an interface the toolbox uses to manage the panel of a tool. the object that tooldefinition.build() returns should implement the methods described below. methods open() optional. a method that can be used to perform asynchronous initialization. if the method returns a promise, many operations (e.g. gdevtools.showtoolbox() or toolbox.selecttool()) and events (e.g. toolbox-ready) are delayed until the promise has been fulfilled. return value: the method should return a promise that is resolved with the toolpanel object once it's ready to be used. destroy() a method that is called when the toolbox is closed or the tool is unregistered. if the tool needs to perform asynchronous operations during destruction the method should return a promise that is resolved once the proc...

Animation inspector example: Web Animations API - Firefox Developer Tools
eset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions); iconanimation.pause(); noteanimation.pause(); var fir...

Web Audio Editor - Firefox Developer Tools
notice: this tool has been deprecated and will soon be removed from firefox. for details, see deprecated tools. with the web audio api, developers create an audio context. within that context they then construct a number of audio nodes, including: nodes providing the audio source, such as an oscillator or a data buffer source nodes performing transformations such as delay and gain nodes representing the destination of the audio stream, such as the speakers each node has zero or more audioparam properties that configure its operation. for example, the gainnode has a single gain property, while the oscillatornode has frequency and detune properties. the developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream. the web audio editor ex...

Web Console Helpers - Firefox Developer Tools
with the supplied filename. if you don't supply a filename, the image file will be named with the following format: screen shot yyy-mm-dd at hh.mm.ss.png the command has the following optional parameters: command type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard. --delay number the number of seconds to delay before taking the screenshot. --dpr number the device pixel ratio to use when taking the screenshot. --file boolean when present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included. --filename string the name to use in saving the file. the file shoul...

The JavaScript input interpreter - Firefox Developer Tools
nshot of the current page with the supplied filename. if you don't supply a filename, the image file will be named: screen shot yyy-mm-dd at hh.mm.ss.png the command has the following optional parameters: command type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard. --delay number the number of seconds to delay before taking the screenshot. --dpr number the device pixel ratio to use when taking the screenshot. --file boolean when present, the screenshot will be saved to a file, even if other options (e.g. --clipboard) are included. --filename string the name to use in saving the file. the file shoul...

Animation.currentTime - Web APIs
can go from small to large or large to small. at the start of the game, her height is set between the two extremes by setting her animation's currenttime to half her keyframeeffect's duration: alicechange.currenttime = alicechange.effect.timing.duration / 2; a more generic means of seeking to the 50% mark of an animation would be: animation.currenttime = animation.effect.getcomputedtiming().delay + animation.effect.getcomputedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20us in firefox 59; in 60 it will be 2ms. // reduced time precisi...

Animation.playState - Web APIs
property. example in the growing/shrinking alice game example, players can get an ending with alice crying into a pool of tears. in the game, for performance reasons, the tears should only be animating when they're visible. so they must be paused as soon as they are animated like so: // setting up the tear animations tears.foreach(function(el) { el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)' }); el.pause(); }); // play the tears falling when the ending needs to be shown. tears.foreach(function(el) { el.play(); }); // reset the crying tears animations and pause...

Animation.updatePlaybackRate() - Web APIs
the updateplaybackrate() method of the web animations api's animation interface sets the speed of an animation after first synchronizing its playback position. in some cases, an animation may run on a separate thread or process and will continue updating even while long-running javascript delays the main thread. in such a case, setting the playbackrate on the animation directly may cause the animation's playback position to jump since its playback position on the main thread may have drifted from the playback position where it is currently running. updateplaybackrate() is an asynchronous method that sets the speed of an animation after synchronizing with its current playback position, ensuring that the resulting change in speed does not produce a sharp jump. after calling updateplaybackra...

AnimationEffect.getComputedTiming() - Web APIs
urned using window.getcomputedstyle(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. return value a computedeffecttiming dictionary object, which contains the following properties: endtime the end time of the animation in milliseconds from the animation's start (if the keyframeeffect is associated with an animation). (also includes effecttiming.enddelay in that calculation.) activeduration the length of time in milliseconds that the animation's effects will run. this is equal to the iteration duration multiplied by the iteration count. localtime the current time of the animation in milliseconds. if the keyframeeffect is not associated with an animation, its value is null. progress indicates how far along the animation is through its curren...

AnimationEvent() - Web APIs
ame optional a domstring containing the value of the animation-name css property associated with the transition. it defaults to "". elapsedtime optional a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). it defaults to 0.0. pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". it defaults to "". return value a new animationevent, initialize...

AnimationEvent.elapsedTime - Web APIs
the animationevent.elapsedtime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an animationstart event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). syntax time = animationevent.elapsedtime specifications specification status comment css animationsthe definition of 'animationevent.elapsedtime' in that specification. working draft initial definition. ...

AnimationEvent.initAnimationEvent() - Web APIs
). animationnamearg a domstring containing the value of the animation-name css property associated with the transition. elapsedtimearg a float indicating the amount of time the animation has been running, in seconds, as of the time the event was fired, excluding any time the animation was paused. for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). ...

AnimationEvent - Web APIs
.animationname read only is a domstring containing the value of the animation-name that generated the animation. animationevent.elapsedtime read only is a float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an animationstart event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). animationevent.pseudoelement read only is a domstring, starting with '::', containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element, an empty string: ''. methods also inherits methods from its parent event. animationevent.initanimati...

AudioListener.speedOfSound - Web APIs
the speedofsound property of the audiolistener interface is a double value representing the speed of sound, in meters per second. the speedofsound property's default value is 343.3 m/s and is used to calculate the doppler shift appropriate for the speed the panner is travelling at (as defined by pannernode.setvelocity.) note: bear in mind that no propagation delay is automatically applied to a sound far from the listener. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.speedofsound = 343.3; value a double. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. generally you will define the position in 3d space that your audio lis...

AudioNode.channelCountMode - Web APIs
nnels must be matched between the node's inputs and outputs. the possible values of channelcountmode and their meanings are: value description the following audionode children default to this value max the number of channels is equal to the maximum number of channels of all connections. in this case, channelcount is ignored and only up-mixing happens. gainnode, delaynode, scriptprocessornode, channelmergernode, biquadfilternode, waveshapernode clamped-max the number of channels is equal to the maximum number of channels of all connections, clamped to the value of channelcount. pannernode, convolvernode, dynamicscompressornode explicit the number of channels is defined by the value of channelcount. audiodestinationnode, analyserno...

AudioWorkletProcessor.process - Web APIs
orms its input, but has a so-called tail-time — this means that it will produce an output for some time even after its inputs are disconnected or are inactive (producing zero-channels). a processor implementing such a node should return true from the process method for the period of the tail-time, beginning as soon as inputs are found that contain zero-channels. an example of such a node is the delaynode — it has a tail-time equal to its delaytime property. note: an absence of the return statement means that the method returns undefined, and as this is a falsy value, it is like returning false. omitting an explicit return statement may cause hard-to-detect problems for your nodes. exceptions as the process() method is implemented by the user, it can throw anything. if an uncaught error ...

BaseAudioContext - Web APIs
dio streams into a single audio stream. baseaudiocontext.createchannelsplitter() creates a channelsplitternode, which is used to access the individual channels of an audio stream and process them separately. baseaudiocontext.createconvolver() creates a convolvernode, which can be used to apply convolution effects to your audio graph, for example a reverberation effect. baseaudiocontext.createdelay() creates a delaynode, which is used to delay the incoming audio signal by a certain amount. this node is also useful to create feedback loops in a web audio api graph. baseaudiocontext.createdynamicscompressor() creates a dynamicscompressornode, which can be used to apply acoustic compression to an audio signal. baseaudiocontext.creategain() creates a gainnode, which can be used to control ...

BiquadFilterNode() - Web APIs
w width. frequency: the center frequency of the attenuation range. gain: not used. allpass: an allpass filter allows all frequencies through, but changes the phase relationship between the various frequencies. it implements a second-order allpass filter. q: the sharpness of the phase transition at the center frequency. a larger value implies a sharper transition and a larger group delay. frequency: the frequency where the center of the phase transition occurs. viewed another way, this is the frequency with maximal group delay. gain: not used. return value a new biquadfilternode object instance. specifications specification status comment web audio apithe definition of 'biquadfilternode()' in that specification. working draft initial def...

BiquadFilterNode.type - Web APIs
rough; frequencies inside it are attenuated. the center of the range of frequencies. controls the width of the frequency band. the greater the q value, the larger the frequency band. not used allpass standard second-order allpass filter. it lets all frequencies through, but changes the phase-relationship between the various frequencies. the frequency with the maximal group delay, that is, the frequency where the center of the phase transition occurs. controls how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-mati...

BiquadFilterNode - Web APIs
equencies inside it are attenuated. the center of the range of frequencies. controls the width of the frequency band. the greater the q value, the smaller the frequency band. not used allpass standard second-order allpass filter. it lets all frequencies through, but changes the phase-relationship between the various frequencies. the frequency with the maximal group delay, that is, the frequency where the center of the phase transition occurs. controls how sharp the transition is at the medium frequency. the larger this parameter is, the sharper and larger the transition will be. not used methods inherits methods from its parent, audionode. biquadfilternode.getfrequencyresponse() from the current filter parameter settings this method calc...

A basic ray-caster - Web APIs
current version of safari, i had to try a little experiment. the canvas overview and tutorial i found here at mdn are great, but nobody had written about animation yet, so i thought i'd try a port of a basic raycaster i'd worked on a while ago, and see what sort of performance we can expect from a javascript-controlled pixel buffer. how? the basic idea is to use setinterval() at some arbitrary delay that corresponds to a desired frame rate. after every interval an update function will repaint the canvas showing the current view. i know i could have started with a simpler example, but i'm sure the canvas tutorial will get to that, and i wanted to see if i could do this. so every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if y...

Basic animations - Web APIs
o an animation from within a for loop. that means we need a way to execute our drawing functions over a period of time. there are two ways to control an animation like this. scheduled updates first there's the window.setinterval(), window.settimeout(), and window.requestanimationframe() functions, which can be used to call a specific function over a set period of time. setinterval(function, delay) starts repeatedly executing the function specified by function every delay milliseconds. settimeout(function, delay) executes the function specified by function in delay milliseconds. requestanimationframe(callback) 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. if you don't wa...

Console.profileEnd() - Web APIs
see bug 1240249. the profileend method stops recording a profile previously started with console.profile(). you can optionally supply an argument to name the profile. doing so enables you to stop only that profile if you have multiple profiles being recorded. if console.profileend() is passed a profile name, and it matches the name of a profile being recorded, then that profile is stopped. ...

DedicatedWorkerGlobalScope - Web APIs
.btoa() creates a base-64 encoded ascii string from a string of binary data. windowtimers.clearinterval() cancels the repeated execution set using windowtimers.setinterval(). windowtimers.cleartimeout() cancels the repeated execution set using windowtimers.settimeout(). windowtimers.setinterval() schedules the execution of a function every x milliseconds. windowtimers.settimeout() sets a delay for executing a function. events message fired when the worker receives a message from its parent. also available via the onmessage property. messageerror fired when a worker receives a message that can't be deserialized. also available via the onmessageerror property. specifications specification status comment html living standardthe definition of 'dedica...

Document: DOMContentLoaded event - Web APIs
as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets. if loaded as usual, stylesheets slow down dom parsing as they're loaded in parallel, "stealing" traffic from the main html document. examples basic usage document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); delaying domcontentloaded <script> document.addeventlistener('domcontentloaded', (event) => { console.log('dom fully loaded and parsed'); }); for( let i = 0; i < 1000000000; i++) {} // this synchronous script is going to delay parsing of the dom, // so the domcontentloaded event is going to launch later. </script> checking whether loading is already complete domcontentloaded may fire be...

Document: animationstart event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. ...

Document: transitionend event - Web APIs
to none, then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full de...

Document: transitionrun event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionrun the original target for this event is the element that had the transition applied. you can listen for this event on the document interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionrun. ...

EffectTiming.duration - Web APIs
s than zero, nan, or some other type of object entirely. examples in the pool of tears example, each tear is passed a random duration via its timing object: // randomizer function var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment web animationsthe definition of 'duration' in that specification. working draft editor's draf...

Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.

ExtendableEvent - Web APIs
vent. extendableevent.waituntil() extends the lifetime of the event. it is intended to be called in the install eventhandler for the installing worker and on the activate eventhandler for the active worker. examples this code snippet is from the service worker prefetch sample (see prefetch example live.) the code calls extendableevent.waituntil() in serviceworkerglobalscope.oninstall, delaying treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully. the promise resolves when all resources have been fetched and cached, or else when any exception occurs. the code snippet also shows a best practice for versioning caches used by the service worker. though there's only one cache in this example, the same approach can be used f...

GlobalEventHandlers.onanimationend - Web APIs
the onanimationend property of the globaleventhandlers mixin is the eventhandler for processing animationend events. the animationend event fires when a css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay). syntax var animendhandler = target.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. example html content <div class="main"> <div id="box"> <div id="text">box<...

GlobalEventHandlers.onplaying - Web APIs
the onplaying property of the globaleventhandlers mixin is the eventhandler for processing playing events. the playing event is fired when playback is ready to start after having been paused or delayed due to lack of media data. syntax element.onplaying = handlerfunction; var handlerfunction = element.onplaying; handlerfunction is either null or a javascript function specifying the handler for the event. specification specification status comment html living standardthe definition of 'onplaying' in that specification. living standard ...

GlobalEventHandlers.ontransitioncancel - Web APIs
lement), document (document), or window (window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration. note: elapsedtime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elapsedtime, which is zero until the delay period ends and the animation begins. example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition. this could also be used to trigger animations or other effects, to allow chaining of reactions. in addition, ...

GlobalEventHandlers.ontransitionend - Web APIs
(htmlelement), document (document), or window (window). the function receives as input a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration. elapsedtime does not include time prior to the transition effect beginning; that means that the value of transition-delay doesn't affect the value of elapsedtime, which is zero until the delay period ends and the animation begins. example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition. this could also be used to trigger animations or other effects, to allow chaining of reactions. html this si...

HTMLElement: animationstart event - Web APIs
the animationstart event is fired when a css animation has started. if there is an animation-delay, this event will fire once the delay period has expired. a negative delay will cause the event to fire with an elapsedtime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence). bubbles yes cancelable no interface animationevent event handler property onanimationstart examples this listens for the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = docu...

HTMLImageElement.decode() - Web APIs
olves when the image is decoded and it is safe to append the image to the dom. this can be used to initiate loading of the image prior to attaching it to an element in the dom (or adding it to the dom as a new element), so that the image can be rendered immediately upon being added to the dom. this, in turn, prevents the rendering of the next frame after adding the image to the dom from causing a delay while the image loads. syntax var promise = htmlimageelement.decode(); parameters none. return value a promise which is resolved once the image data is ready to be used. exceptions encodingerror a domexception indicating that an error occurred while decoding the image. usage notes one potential use case for decode(): when loading very large images (for example, in an online photo al...

HTMLImageElement.decoding - Web APIs
oding property of the htmlimageelement interface represents a hint given to the browser on how it should decode the image. syntax refstr = imgelem.decoding; imgelem.decoding = refstr; values a domstring representing the decoding hint. possible values are: sync: decode the image synchronously for atomic presentation with other content. async: decode the image asynchronously to reduce delay in presenting other content. auto: default mode, which indicates no preference for the decoding mode. the browser decides what is best for the user. usage notes the decoding property allows you to control whether or not the browser is allowed to try to parallelize loading your image. if doing so would cause problems, you can specify sync to disable asynchronous loading. this can be usefu...

HTMLMarqueeElement - Web APIs
ls or percentage value. htmlmarqueeelement.hspace sets the horizontal margin. htmlmarqueeelement.loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. htmlmarqueeelement.scrollamount sets the amount of scrolling at each interval in pixels. the default value is 6. htmlmarqueeelement.scrolldelay sets the interval between each scroll movement in milliseconds. the default value is 85. note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is true. htmlmarqueeelement.truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is true, then those values are not ignored. htmlmarqueeelement.vspace sets the vertical margin. h...

HTMLMediaElement.play() - Web APIs
prepared to handle this situation. for example, a site should not present a user interface that assumes playback has begun automatically, but should instead update their ui based on whether the returned promise is resolved or rejected. see the example below for more information. note: the play() method may cause the user to be asked to grant permission to play the media, resulting in a possible delay before the returned promise is resolved. be sure your code doesn't expect an immediate response. for even more in-depth information about autoplay and autoplay blocking, see our article autoplay guide for media and web audio apis. example this example demonstrates how to confirm that playback has begun and how to gracefully handle blocked automatic playback: let videoelem = document.geteleme...

HTMLMediaElement: playing event - Web APIs
bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onplaying specification html5 media examples these examples add an event listener for the htmlmediaelement's playing event, then post a message when that event handler has reacted to the event firing. ...

HTMLMediaElement - Web APIs
fired when a request to pause play is handled and the activity has entered its paused state, most commonly occurring when the media's htmlmediaelement.pause() method is called. play fired when the paused property is changed from true to false, as a result of the htmlmediaelement.play() method, or the autoplay attribute playing fired when playback is ready to start after having been paused or delayed due to lack of data progress fired periodically as the browser loads a resource. ratechange fired when the playback rate has changed. seeked fired when a seek operation completes seeking fired when a seek operation begins stalled fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend fired when the media data loading has been susp...

HTMLVideoElement - Web APIs
of parsed video frames that have been decoded into images. htmlvideoelement.mozpresentedframes read only returns an unsigned long with the count of decoded frames that have been presented to the rendering pipeline for painting. htmlvideoelement.mozpaintedframes read only returns an unsigned long with the count of presented frames which were painted on the screen. htmlvideoelement.mozframedelay read only returns an double with the time which the last painted video frame was late by, in seconds. htmlvideoelement.mozhasaudio read only returns a boolean indicating if there is some audio associated with the video. microsoft extensions htmlvideoelement.msframestep() steps the video by one frame forward or one frame backward. htmlvideoelement.mshorizontalmirror gets or sets...

InstallEvent - Web APIs
nherits properties from its ancestor, event. installevent.activeworker read only returns the serviceworker that is currently controlling the page. methods inherits methods from its parent, extendableevent. examples this code snippet is from the service worker prefetch sample (see prefetch running live.) the code calls extendableevent.waituntil() in serviceworkerglobalscope.oninstall and delays treating the serviceworkerregistration.installing worker as installed until the passed promise resolves successfully. the promise resolves when all resources have been fetched and cached, or when any exception occurs. the code snippet also shows a best practice for versioning caches used by the service worker. although this example has only one cache, you can use this approach for multiple cach...

LockManager.request() - Web APIs
use a lock called my_resource. the do_read() requests a lock in 'shared' mode meaning that multiple calls may occur simultaneously across different event handlers, tabs, or workers. async function do_read() { await navigator.locks.request('my_resource', {mode: 'shared'}, async lock => { // read code here. }); } the do_write() function use the same lock but in 'exclusive' mode which will delay invocation of the request() call in do_read() until the write operation has completed. this applies across event handlers, tabs, or workers. function do_write() { await navigator.locks.request('my_resource', {mode: 'exclusive'}, async lock => { // write code here. }); } ifavailable example to grab a lock only if it isn't already being held, use the ifavailable option. in this function ...

Long Tasks API - Web APIs
high/variable input latency. high/variable event handling latency. janky animations and scrolling. ...

Recording a media element - Web APIs
econds (5 seconds); this specifies the length of the videos we'll record. utility functions next, we create some utility functions that will get used later. function log(msg) { logelement.innerhtml += msg + "\n"; } the log() function is used to output text strings to a <div> so we can share information with the user. not very pretty but it gets the job done for our purposes. function wait(delayinms) { return new promise(resolve => settimeout(resolve, delayinms)); } the wait() function returns a new promise which resolves once the specified number of milliseconds have elapsed. it works by using an arrow function which calls window.settimeout(), specifying the promise's resolution handler as the timeout handler function. that lets us use promise syntax when using timeouts, which can b...

MediaTrackConstraints.latency - Web APIs
th values specified in seconds. in audio processing, latency is the time between the start of processing (when sound occurs in the real world, or is generated by a hardware device) and the data being made available to the next step in the audio input or output process. in most cases, low latency is desirable for performance and user experience purposes, but when power consumption is a concern, or delays are otherwise acceptable, higher latency might be acceptable. if this property's value is a number, the user agent will attempt to obtain media whose latency tends to be as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to ...

Notification.close() - Web APIs
a valid use for this api would be to remove a notification that is no longer relevant (e.g. ...

Using the Notifications API - Web APIs
cations from notification trays on other browsers. var n = new notification('my great song'); document.addeventlistener('visibilitychange', function() { if (document.visibilitystate === 'visible') { // the tab has become visible so clear the now-stale notification. n.close(); } }); note: this api shouldn't be used just to have the notification removed from the screen after a fixed delay (on modern browsers) since this method will also remove the notification from any notification tray, preventing users from interacting with it after it was initially shown. note: when you receive a "close" event, there is no guarantee that it's the user who closed the notification. this is in line with the specification, which states: "when a notification is closed, either by the underlying no...

PannerNode.refDistance - Web APIs
distance = 1; value a non-negative number. if the value is set to less than 0, a rangeerror is thrown. exceptions rangeerror the property has been given a value that is outside the accepted range. example this example demonstrates how different values of refdistance affect how the volume of a sound decays as it moves away from the listener. unlike rollofffactor, changing this value also delays the volume decay until the sound moves past the reference point. const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and schedules it to move away from the listener along the z (depth-wise) axis //...

PerformanceEventTiming - Web APIs
it is not removed. methods performanceeventtiming.tojson() converts the performanceeventtiming object to json. examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const inputduration = entry.duration; // input delay (before processing event) const inputdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch). const inputsyncprocessingtime = entry.processingend - entry.processingstart; }); }); // register observer for event. observer.observe({entrytypes: ["event"]}); we can also directly query the first input delay. /...

RTCConfiguration.iceServers - Web APIs
e array is empty, or if the iceservers option isn't specified, the ice agent will negotiate without the use of any servers, which will limit the connection to local peers. description how the list of servers you provide is used is up to the implementation of the user agent. while it can be useful to provide a second server as a fallback in case the first is offline, listing too many servers can delay the user's connection being established, depending on the network's performance and how many servers get used for negotiation before a connection is established. if the list of servers is changed while a connection is already active by calling the the rtcpeerconnection method setconfiguration(), no immediate effect occurs. however, the new list of servers is used for any future renegotiation, su...

RTCDTMFSender.insertDTMF() - Web APIs
e current tone buffer, so that those tones play after the previously-enqueued tones. syntax rtcdtmfsender.insertdtmf(tones[, duration[, intertonegap]]); parameters tones a domstring containing the dtmf codes to be transmitted to the recipient. specifying an empty string as the tones parameter clears the tone buffer, aborting any currently queued tones. a "," character inserts a two second delay. duration optional the amount of time, in milliseconds, that each dtmf tone should last. this value must be between 40 ms and 6000 ms (6 seconds), inclusive. the default is 100 ms. intertonegap optional the length of time, in milliseconds, to wait between tones. the browser will enforce a minimum value of 30 ms (that is, if you specify a lower value, 30 ms will be used instead); the default i...

SVGImageElement.decoding - Web APIs
the svgimageelement interface represents a hint given to the browser on how it should decode the image. syntax var refstr = svgimageelement.decoding svgimageelement.decoding = refstr; values a domstring representing the decoding hint. possible values are: sync: decode the image synchronously for atomic presentation with other content. async: decode the image asynchronously to reduce delay in presenting other content. auto: default mode, which indicates no preference for the decoding mode. the browser decides what is best for the user. examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.svg'; specifications specification status comment html living standardthe definition of 'decoding' in that specification. living standar...

Screen.lockOrientation() - Web APIs
cked. otherwise, the screen orientation will change from an orientation to another as long as the orientations are amongst the orientations the device has been locked to. return value returns true if the orientation was authorized to be locked or false if the orientation locking was denied. note that the return value doesn't indicate that the screen orientation is indeed locked: there may be a delay. examples usage with a domstring argument screen.lockorientationuniversal = screen.lockorientation || screen.mozlockorientation || screen.mslockorientation; if (screen.lockorientationuniversal("landscape-primary")) { // orientation was locked } else { // orientation lock failed } usage with an array argument screen.lockorientationuniversal = screen.lockorientation || screen.mozlockorie...

ServiceWorkerContainer.ready - Web APIs
it returns a promise that will never reject, and which waits indefinitely until the serviceworkerregistration associated with the current page has an active worker. once that condition is met, it resolves with the serviceworkerregistration. syntax navigator.serviceworker.ready.then(function(serviceworkerregistration) { ... }); value a promise that will never reject, and which may eventually resolve with a serviceworkerregistration. ...

ServiceWorkerContainer - Web APIs
not the current page is actively controlled. properties serviceworkercontainer.controller read only returns a serviceworker object if its state is activated (the same object returned by serviceworkerregistration.active). this property returns null during a force-refresh request (shift + refresh) or if there is no active worker. serviceworkercontainer.ready read only provides a way of delaying code execution until a service worker is active. it returns a promise that will never reject, and which waits indefinitely until the serviceworkerregistration associated with the current page has an serviceworkerregistration.active worker. once that condition is met, it resolves with the serviceworkerregistration. events controllerchange occurs when the document's associated serviceworke...

SharedWorkerGlobalScope - Web APIs
.btoa() creates a base-64 encoded ascii string from a string of binary data. windowtimers.clearinterval() cancels the repeated execution set using windowtimers.setinterval(). windowtimers.cleartimeout() cancels the repeated execution set using windowtimers.settimeout(). windowtimers.setinterval() schedules the execution of a function every x milliseconds. windowtimers.settimeout() sets a delay for executing a function. events listen to this event using addeventlistener() or by assigning an event listener to the oneventname property of this interface. connect fired on shared workers when a new client connects. also available via the onconnect property. specifications specification status comment html living standardthe definition of 'sharedworkergl...

SyncManager.register() - Web APIs
ation. the available options are: allowonbattery: a boolean that determines whether synchronization is allowed when the user agent is on a battery-powered device. the default is true. id: the unique identifier of the specified syncregistration object. idlerequired: a boolean that determines whether synchronization is allowed when the user agent's device is idle. the default is false. maxdelay: the maximum delay in milliseconds before the next sync event (or the first sync event if it is periodic). the default is 0, meaning there is no maximum delay. mindelay: the minimum delay in milliseconds before the next sync event (or the first sync event if it is periodic). the default is 0. minperiod: the minimum time in milliseconds between periodic sync events. the default is 0, meaning e...

TransitionEvent() - Web APIs
optional is a domstring containing the value of the property-name css property associated with the transition. it defaults to "". elapsedtime optional is float giving the amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. for an "animationstart" event, elapsedtime is 0.0 unless there was a negative value for animation-delay, in which case the event will be fired with elapsedtime containing (-1 * delay). it defaults to 0.0. pseudoelement optional is a domstring, starting with "::", containing the name of the pseudo-element the animation runs on. if the animation doesn't run on a pseudo-element but on the element, an empty string: "". it defaults to "". specifications specification status comment ...

TransitionEvent.elapsedTime - Web APIs
the transitionevent.elapsedtime read-only property is a float giving the amount of time the animation has been running, in seconds, when this event fired. this value is not affected by the transition-delay property. syntax name = transitionevent.elapsedtime specifications specification status comment css transitionsthe definition of 'transitionevent.elapsedtime' in that specification. working draft initial definition. ...

TransitionEvent.initTransitionEvent() - Web APIs
d the transition completed. canbubblearg is a boolean flag indicating if the event can bubble (true) or not (false). cancelablearg is a boolean flag indicating if the event associated action can be avoided (true) or not (false). transitionnamearg is a domstring containing the name of the css property associated with the transition. this value is not affected by the transition-delay property. elapsedtimearg is float giving the amount of time the transition has been running, in seconds, when this event fired. specifications this method is non-standard and not part of any specification, though it was present in early drafts of css transitions. ...

TransitionEvent - Web APIs
the given parameters. properties also inherits properties from its parent event. transitionevent.propertyname read only is a domstring containing the name css property associated with the transition. transitionevent.elapsedtime read only is a float giving the amount of time the transition has been running, in seconds, when this event fired. this value is not affected by the transition-delay property. transitionevent.pseudoelement read only is a domstring, starting with ::, containing the name of the pseudo-element the animation runs on. if the transition doesn't run on a pseudo-element but on the element, an empty string: ''. types of transitionevent transitioncancel an event fired when a css transition has been cancelled. transitionend an event fired when a css transitio...

Vibration API - Web APIs
specifications specification status comment vibration api recommendation linked to spec is the latest editor's draft; w3c version is a rec. ...

VideoPlaybackQuality - Web APIs
videoelement. totalvideoframes read only an unsigned long giving the number of video frames created and dropped since the creation of the associated htmlvideoelement. obsolete properties corruptedvideoframes read only an unsigned long giving the number of video frames corrupted since the creation of the associated htmlvideoelement. a corrupted frame may be created or dropped. totalframedelay read only a double containing the sum of the frame delay since the creation of the associated htmlvideoelement. the frame delay is the difference between a frame's theoretical presentation time and its effective display time. methods the videoplaybackquality interface has no methods, and does not inherit any. specifications specification status comment media playb...

Using WebRTC data channels - Web APIs
tes when a message is the last one in a series that should be treated as a single payload. this is implemented in firefox 57, but is not yet implemented in chrome (see chromium bug 7774). with eor support in place, rtcdatachannel payloads can be much larger (officially up to 256kib, but firefox's implementation caps them at a whopping 1gib). even at 256kib, that's large enough to cause noticeable delays in handling urgent traffic. if you go even larger, the delays can become untenable unless you are certain of your operational conditions. in order to resolve this issue, a new system of stream schedulers (usually referred to as the "sctp ndata specification") has been designed to make it possible to interleave messages sent on different streams, including streams used to implement webrtc data c...

Rendering and the WebXR frame animation callback - Web APIs
least in part to render the scene is shown in the diagram below. this is important because as the computer becomes increasingly busy, it may not be able to accurately call your callback every frame and may have to skip frames. this is called dropping frames. this happens when the amount of time it takes to render a frame exceeds the time available between frames, whether because rendering was delayed or because rendering itself took more time than was available. in the diagram above, frame 3 is dropped because frame 2 did not complete rendering until after frame 3 was due to be painted. the next frame drawn will be frame 4 instead. this is another reason the timestamp passed into your render callback is useful. by configuring the scene based on time rather than frame number, you can ensu...

Web Audio API - Web APIs
filternode interface represents a simple low-order filter. it is an audionode that can represent different kinds of filters, tone control devices, or graphic equalizers. a biquadfilternode always has exactly one input and one output. convolvernode the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, and is often used to achieve a reverb effect. delaynode the delaynode interface represents a delay-line; an audionode audio-processing module that causes a delay between the arrival of an input data and its propagation to the output. dynamicscompressornode the dynamicscompressornode interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur ...

Window: animationstart event - Web APIs
bubbles yes cancelable no interface animationevent event handler property onanimationstart the original target for this event is the element that had the animation applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. ...

Window: load event - Web APIs
...

Window: popstate event - Web APIs
ari always emit a popstate event on page load, but firefox doesn't. note: when writing functions that process popstate event it is important to take into account that properties like window.location will already reflect the state change (if it affected the current url), but document might still not. ...

Window: transitionend event - Web APIs
to none, then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full deta...

Window: transitionrun event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionrun the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionrun. ...

Window: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property globaleventhandlers.ontransitionstart the original target for this event is the element that had the transition applied. you can listen for this event on the window interface to handle it in the capture or bubbling phases. for full details on this event please see the page on htmlelement: transitionstart. ...

Window - Web APIs
event. windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-64 encoding. windoworworkerglobalscope.btoa() creates a base-64 encoded ascii string from a string of binary data. windoworworkerglobalscope.clearinterval() cancels the repeated execution set using windoworworkerglobalscope.setinterval(). windoworworkerglobalscope.cleartimeout() cancels the delayed execution set using windoworworkerglobalscope.settimeout(). windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap. optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh. windoworworkerglobalscope.fetch() starts the process of fetching a reso...

WindowOrWorkerGlobalScope - Web APIs
cope. windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-64 encoding. windoworworkerglobalscope.btoa() creates a base-64 encoded ascii string from a string of binary data. windoworworkerglobalscope.clearinterval() cancels the repeated execution set using windoworworkerglobalscope.setinterval(). windoworworkerglobalscope.cleartimeout() cancels the delayed execution set using windoworworkerglobalscope.settimeout(). windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap. optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh. windoworworkerglobalscope.fetch() starts the process of fetching a reso...

WorkerGlobalScope - Web APIs
where windoworworkerglobalscope.atob() decodes a string of data which has been encoded using base-64 encoding. windoworworkerglobalscope.btoa() creates a base-64 encoded ascii string from a string of binary data. windoworworkerglobalscope.clearinterval() cancels the repeated execution set using windoworworkerglobalscope.setinterval(). windoworworkerglobalscope.cleartimeout() cancels the delayed execution set using windoworworkerglobalscope.settimeout(). windoworworkerglobalscope.createimagebitmap() accepts a variety of different image sources, and returns a promise which resolves to an imagebitmap. optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh. windoworworkerglobalscope.fetch() starts the process of fetching a reso...

Web APIs
d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist domlocator dommatrix dommatrixreadonly domobject domparser dompoint dompointinit dompointreadonly domquad domrect domrectreadonly domstring domstringlist domstringmap domtimestamp domtokenlist domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot documenttimeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_mi...

Using CSS animations - CSS: Cascading Style Sheets
ion property are: animation-name specifies the name of the @keyframes at-rule describing the animation’s keyframes. animation-duration configures the length of time that an animation should take to complete one cycle. animation-timing-function configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves. animation-delay configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction configures whether or not the animation should alternate direction on each run through the sequence or reset to the star...

CSS Animations - CSS: Cascading Style Sheets
css animations is a module of css that lets you animate the values of css properties over time, using keyframes. the behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes. reference css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations. using css animations step-by-step tutorial about how to create animations using css. this article describes each relevant css property and at-rule and explains how they...

CSS Transitions - CSS: Cascading Style Sheets
css transitions is a module of css that lets you create gradual transitions between the values of specific css properties. the behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. reference properties transition transition-delay transition-duration transition-property transition-timing-function guides using css transitions step-by-step tutorial about how to create transitions using css. this article describes each relevant css property and explains how they interact with each other. specifications specification status comment css transitions working draft initial definition. ...

animation-fill-mode - CSS: Cascading Style Sheets
the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions. ...

touch-action - CSS: Cascading Style Sheets
ntal panning gestures. may be combined with pan-y, pan-up, pan-down and/or pinch-zoom. pan-y enable single-finger vertical panning gestures. may be combined with pan-x, pan-left, pan-right and/or pinch-zoom. manipulation enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. this is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid). pan-left, pan-right, pan-up, pan-down enable single-finger gestures that begin by scrolling in the given direction(s). once scrolling has started, the direction may still be reversed. note that scrolling "up" (pan-up) means that the ...

Audio and Video Delivery - Developer guides
rowser audio basics this article provides a basic guide to creating an html5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the media api. media buffering, seeking, and time ranges sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. this article discusses how to build a buffer/seek bar using timeranges, and other features of the media api. html5 playbackrate explained the playbackrate property allows us to change the speed or rate at which a piece of web audio or video is playing. this article explains it in detail. using the web audio ap...

Media events - Developer guides
ppen either because the download has completed or because it has been paused for any other reason. timeupdate the time indicated by the element's currenttime attribute has changed. volumechange sent when the audio volume changes (both when the volume is set and when the muted attribute is changed). waiting sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). you can easily watch for these events, using code such as the following: var v = document.getelementsbytagname("video")[0]; v.addeventlistener("seeked", function() { v.play(); }, true); v.currenttime = 10.0; this example fetches the first video element in the document and attaches an event listener to it, watching for the s...

Index - Developer guides
d devices. this is a fairly complex and nascent subject with a lot of variables, so in this article, we'll introduce you to the subject and let you know how you can get started. 11 media buffering, seeking, and time ranges apps, buffer, html5, timeranges, video, buffering, seeking sometimes it's useful to know how much <audio> or <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. this article discusses how to build a buffer/seek bar using timeranges, and other features of the media api. 12 setting up adaptive streaming media sources audio, hls, html5, http live streaming, mpeg-dash, video, adaptive streaming let's say you want to set up an adaptive streaming media sou...

Mobile-friendliness - Developer guides
s life easy for users on mobile device. goal #2 (content) “adjust your content for mobile users.” think about what your users want to do at your site if they are on a phone. a great example of this is alaska air’s website. their desktop site focuses on getting visitors to book trips. mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. they’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users. goal #3 (performance) “give your users a smooth experience, even on a slow connection.” though things have been getting better in recent years, browsing the internet over a wireless data connection can still be pretty painful. this makes it more essential than ever to practice good performanc...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the media has finished loading. loadedmetadata the metadata has been loaded. pause playback has been paused. play playback has begun. playing playback is ready to start after having been paused or delayed due to lack of data. ratechange the playback rate has changed. seeked a seek operation completed. seeking a seek operation began. stalled the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been suspended. timeupdate the time indicated by the currenttime att...

<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
r the margin shorthand property. to include shorter quotes inline rather than in a separate block, use the <q> (quotation) element. example this example demonstrates the use of the <blockquote> element to quote a passage from rfc 1149, a standard for the transmission of ip datagrams on avian carriers. <blockquote cite="https://tools.ietf.org/html/rfc1149"> <p>avian carriers can provide high delay, low throughput, and low altitude service. the connection topology is limited to a single point-to-point path for each carrier, used with standard carriers, but many carriers can be used without significant interference with each other, outside of early spring. this is because of the 3d ether space available to the carriers, in contrast to the 1d ether used by ieee802.3. the carri...

<img>: The Image Embed element - HTML: Hypertext Markup Language
ss to its image data. if the attribute has an invalid value, browsers handle it as if the anonymous value was used. see cors settings attributes for additional information. decoding provides an image decoding hint to the browser. allowed values: sync decode the image synchronously, for atomic presentation with other content. async decode the image asynchronously, to reduce delay in presenting other content. auto default: no preference for the decoding mode. the browser decides what is best for the user. height the intrinsic height of the image, in pixels. must be an integer without a unit. importance indicates the relative download importance of the resource. priority hints allow the values: auto: no preference. the browser may use its own heuristics to ...

<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
lue is specified, the default value is left. height sets the height in pixels or percentage value. hspace sets the horizontal margin loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll continuously. scrollamount sets the amount of scrolling at each interval in pixels. the default value is 6. scrolldelay sets the interval between each scroll movement in milliseconds. the default value is 85. note that any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is specified. truespeed by default, scrolldelay values lower than 60 are ignored. if truespeed is present, those values are not ignored. vspace sets the vertical margin in pixels or percentage value. width ...

<video>: The Video Embed element - HTML: Hypertext Markup Language
method is called to reload it. ended playback has stopped because the end of the media was reached. loadeddata the first frame of the media has finished loading. loadedmetadata the metadata has been loaded. pause playback has been paused. play playback has begun. playing playback is ready to start after having been paused or delayed due to lack of data. progress fired periodically as the browser loads a resource. ratechange the playback rate has changed. seeked a seek operation completed. seeking a seek operation began. stalled the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. suspend media data loading has been su...

Configuring servers for Ogg media - HTTP
...

Retry-After - HTTP
oo many requests) response, this indicates how long to wait before making a new request. when sent with a redirect response, such as 301 (moved permanently), this indicates the minimum time that the user agent is asked to wait before issuing the redirected request. header type response header forbidden header name no syntax retry-after: <http-date> retry-after: <delay-seconds> directives <http-date> a date after which to retry. see the date header for more details on the http date format. <delay-seconds> a non-negative decimal integer indicating the seconds to delay after the response is received. examples dealing with scheduled downtime support for the retry-after header on both clients and servers is still inconsistent. however, some crawlers and...

X-DNS-Prefetch-Control - HTTP
ncy can be reduced significantly at certain times, such as when the user clicks the link. in some cases, latency can be reduced by a second. the implementation of this prefetching in some browsers allows domain name resolution to occur in parallel with (instead of in serial with) the fetching of actual page content. by doing this, the high-latency domain name resolution process doesn't cause any delay while fetching content. page load times – especially on mobile networks – can be measurably improved in this way. if the domain names for images can be resolved in advance of the images being requested, pages that load many images can see an improvement of 5% or more in the time of loading images. configuring prefetching in the browser in general, you don't need to do anything to manage pr...

Link prefetching FAQ - HTTP
eader is typically generated by webservers when serving up static content. when the user visits a prefetched document for real, the remaining portion of the document will be fetched using a http byte-range request. what if i'm downloading something in the background? will link prefetching compete for bandwidth? yes and no. if you are downloading something using mozilla, link prefetching will be delayed until any background downloads complete. for example, if you load a bookmark group (which opens several tabs), any prefetch requests initiated by one of the bookmarked pages will not begin until all of the tabs finish loading. if you are using another application which uses the network, link prefetching in mozilla may compete for bandwidth with the other application. this is a problem that we h...

getter - JavaScript
() { return 'bar'; } }; console.log(obj.foo); // "bar" smart / self-overwriting / lazy getters getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed. a getter defers the cost of calculating the value until the value is needed. if it is never needed, you never pay the cost. an additional optimization technique to lazify or delay the calculation of a property value and cache it for later access are smart (or "memoized") getters. the value is calculated the first time the getter is called, and is then cached so subsequent accesses return the cached value without recalculating it. this is useful in the following situations: if the calculation of a property value is expensive (takes much ram or cpu time, spawns worker thr...

Function.prototype.bind() - JavaScript
with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or global) object. when working with class methods that require this to refer to class instances, you may explicitly bind this to the callback function, in order to maintain the instance. ...

Promise.all() - JavaScript
new promise((resolve, reject) => { reject(new error('reject')); }); // using .catch: promise.all([p1, p2, p3, p4, p5]) .then(values => { console.log(values); }) .catch(error => { console.error(error.message) }); //from console: //"reject" it is possible to change this behaviour by handling possible rejections: var p1 = new promise((resolve, reject) => { settimeout(() => resolve('p1_delayed_resolution'), 1000); }); var p2 = new promise((resolve, reject) => { reject(new error('p2_immediate_rejection')); }); promise.all([ p1.catch(error => { return error }), p2.catch(error => { return error }), ]).then(values => { console.log(values[0]) // "p1_delayed_resolution" console.error(values[1]) // "error: p2_immediate_rejection" }) specifications specification ...

Codecs used by WebRTC - Web media technologies
with an aspect ratio of 1:1). other notes the network payload format for sharing vp8 using rtp (such as when using webrtc) is described in rfc 7741: rtp payload format for vp8 video. avc / h.264 support for avc's constrained baseline (cb) profile is required in all fully-compliant webrtc implementations. cb is a subset of the main profile, and is specifically designed for low-complexity, low-delay applications such as mobile video and videoconferencing, as well as for platforms with lower performing video processing capabilities. our overview of avc and its features can be found in the main video codec guide. special parameter support requirements avc offers a wide array of parameters for controlling optional values. in order to improve reliability of webrtc media sharing across multipl...

CSS and JavaScript animation performance - Web Performance
mation with css transitions or animations. both of them are classified under the same css-based umbrella in this article. requestanimationframe the requestanimationframe() api provides an efficient way to make animations in javascript. the callback function of the method is called by the browser before the next repaint on each frame. compared to settimeout()/setinterval(), which need a specific delay parameter, requestanimationframe() is much more efficient. developers can create an animation by simply changing an element's style each time the loop is called (or updating the canvas draw, or whatever.) note: like css transitions and animations, requestanimationframe() pauses when the current tab is pushed into the background. for more details read animating with javascript from setinterval...

Critical rendering path - Web Performance
port width. the device-width changes when a user rotates their phone between landscape and portrait mode. layout happens every time a device is rotated or browser is otherwise resized. layout performance is impacted by the dom -- the greater the number of nodes, the longer layout takes. layout can become a bottleneck, leading to jank if required during scrolling or other animations. while a 20ms delay on load or orientation change may be fine, it will lead to jank on animation or scroll. any time the render tree is modified, such as by added nodes, altered content, or updated box model styles on a node, layout occurs. to reduce the frequency and duration of layout events, batch updates and avoid animating box model properties. paint the last step is painting the pixels to the screen. once t...

Populating the page: how browsers work - Web Performance
ion is the first step in loading a web page. it occurs whenever a user requests a page by entering a url into the address bar, clicking a link, submitting a form, as well as other actions. one of the goals of web performance is to minimize the amount of time a navigation takes to complete. in ideal conditions, this usually doesn't take too long, but latency and bandwidth are foes which can cause delays. dns lookup the first step of navigating to a web page is finding where the assets for that page are located. if you navigate to https://example.com, the html page is located on the server with ip address of 93.184.216.34. if you’ve never visited this site, a dns lookup must happen. your browser requests a dns lookup, which is eventually fielded by a name server, which in turn responds with...

Lazy loading - Web Performance
elivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. <link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that. fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css font-display property, and the font loading api. see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load. m...

Optimizing startup performance - Web Performance
chronous should i get? it's worth keeping in mind that most browsers typically start complaining that your script is blocking the main thread for too long at around 10 seconds or so. ideally, you won't block anywhere near that long, but as long as you keep it below that, you should be okay. keep in mind, though, that if someone has an older, slower computer than yours, they may experience longer delays than you do! other suggestions there are other things beyond going asynchronous, which can help you improve your app's startup time. here are a few of them: download time keep in mind how long it will take the user to download your game's data. if your game is really big, really popular, or has to re-download content frequently, you should try to have as fast a hosting server as possible. ...

Web Performance
stand the performance features in your developer tools, including waterfall, call tree, and flame charts. profiling with the built-in profiler learn how to profile app performance with firefox's built-in profiler. ...