EffectTiming.easing - Web APIs
the effecttiming dictionary's easing property in the web animations api specifies the timing function used to scale the time to produce easing effects, where easing is the rate of the animation's change over time. element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including easing. the value of easing corresponds directly to animationeffecttimingreadonly.easing in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { easing: single-transition-timing-function } timingproperties.easing = single-transition-timing-function value a string defining the timing function to use for easing transitions during the animation process. accepts several pre-defi...
...iming objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { easing: single-transition-timing-function } timingproperties.easing = single-transition-timing-function value a string defining the timing function to use for easing transitions during the animation process. accepts several pre-defined domstring values, a steps() timing function like steps(5, end), or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1). defaults to linear. available values include: linear a constant rate of change, neither accelerating nor deccelerating. cubic-bezier(<number>, <number>, <number>, <number>) specifies a cubic bézier timing function. the four numbers specify points p1 and p2 of the curve as (x1, y1, x2, y2). b...
...bic-bezier(0.25, 0.1, 0.25, 1). ease-in an accelerated rate of change, going from slow to fast. equivalent to cubic-bezier(0.42, 0, 1, 1). ease-out another decelerated rate of change, going from fast to slow. equivalent to cubic-bezier(0, 0, 0.58, 1). ease-in-out this rate of change speeds up in the middle. equivalent to cubic-bezier(0.42, 0, 0.58, 1). frames(<integer>) specifies a frames timing function, which breaks the animation down into a number of equal time intervals but also displays the start (0%) and end (100%) states for an equal amount of time to the other intervals. the browser flips to a different static frame when each interval is reached, rather than animating smoothly. see github for a simple example that illustrates the difference between steps() and frames(). steps(<i...
...number of equal time intervals but also displays the start (0%) and end (100%) states for an equal amount of time to the other intervals. the browser flips to a different static frame when each interval is reached, rather than animating smoothly. see github for a simple example that illustrates the difference between steps() and frames(). steps(<integer>[, [ start | end ] ]?) specifies a step timing function, which breaks the animation down into a number of equal time intervals. the browser flips to a different static frame when each interval is reached, rather than animating smoothly. the first parameter specifies the number of intervals in the function. it must be a positive integer (greater than 0). the second parameter, which is optional, specifies the point at which the change of values...

EffectTiming.endDelay - Web APIs
this is useful for sequencing animations based on the end time of another animation; note, however, that many of the sequence effectst that will benefit most from this property have not been defined in the specification yet. for now, its main purpose is to represent the value of the svg min attribute. ...
... this is useful for sequencing animations based on the end time of another animation; note, however, that many of the sequence effectst that will benefit most from this property have not been defined in the specification yet. for now, its main purpose is to represent the value of the svg min attribute. ...
...ay. this is useful for sequencing animations based on the end time of another animation; note, however, that many of the sequence effectst that will benefit most from this property have not been defined in the specification yet. for now, its main purpose is to represent the value of the svg min attribute. ...
...ever, that many of the sequence effectst that will benefit most from this property have not been defined in the specification yet. for now, its main purpose is to represent the value of the svg min attribute. element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including enddelay. the value of enddelay corresponds directly to animationeffecttimingreadonly.enddelay in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { enddelay: delayinmilliseconds } timingproperties.enddelay = delayinmilliseconds; value a number representing the end delay, specified in milliseconds. the default value is 0. specifications specification status comment ...

Using Navigation Timing - Web APIs
the navigation timing api lets you easily obtain detailed and highly accurate timing information to help isolate performance problems with your site's code or resources. unlike other tools or libraries, the navigation timing api lets you gather information that only the browser can provide at a level of accuracy much improved over other techniques. it also offers the advantage of being able to provide timing information as perceived by the user rather than data that has no correlation to what the user experiences. collecting timing information using the api is as simple as obtaining the performance object using window.performance and looking up what you need within the object returned. for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() {...
...correlation to what the user experiences. collecting timing information using the api is as simple as obtaining the performance object using window.performance and looking up what you need within the object returned. for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting it into an element. html <div class="output"> </d...
...igationstart), and outputs that information to the screen by inserting it into an element. html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above. for a list of the available timing values you can look for in performancetiming, see the performancetiming interface's properties section. determining navigation type to put the timing information obtained from performancetiming into the correct perspective, you need to know more about what sort of load operation occurred. in particular, you need to know: was this a load or a reload? was this a navigation or a move forward o...
...e required in order to complete the navigation? this information is provided by the performance.navigation property, which returns a performancenavigation object that includes the needed information. let's add this information to the example above. ...

Performance: resourcetimingbufferfull event - Web APIs
the resourcetimingbufferfull event is fired when the browser's resource timing buffer is full. bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
...rcetimingbufferfull event is fired when the browser's resource timing buffer is full. bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
...'s resource timing buffer is full. bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
...vent handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification. candidate recommendation ...

PerformanceFrameTiming - Web APIs
a frame represents the amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc.. a frame rate of 60fps (frames per second) for a 60hz refresh rate is the target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event. this information can be used to help identify areas that take too long to provide a good user experience. ...
...ake too long to provide a good user experience. ...
... performanceentry.name returns the document's address. performance...
...llows: performanceentry.entrytype returns "frame". performanceentry.name returns the document's address. performanceentry.starttime returns the timestamp when the frame was started. performanceentry.duration returns a timestamp indicating the difference between the starttimes of two successive frames. methods this interface has no methods. example see the example in using the frame timing api. specifications specification status comment frame timingthe definition of 'performanceframetiming' in that specification. draft initial definition. ...

PerformanceLongTaskTiming - Web APIs
the performancelongtasktiming interface of the the long tasks api reports instances of long tasks. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dd...
...e="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties perform...
...op"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances. specifications specification status comment long tasks api 1the definition of 'performancelongtasktiming' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contr...
...browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

PerformancePaintTiming - Web APIs
"paint" refers to conversion of the render tree to on-screen pixels. an application can register a performanceobserver for "paint" performance entry types and the observer can retrieve the times that paint events occur. use this information to help identify areas that take too long to provide a good user experience. ...
...roke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interfa...
...t" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint". performanceentry.name returns either "first-paint" or "first-contentful-paint". performanceentry.starttime returns the timestamp when the paint ocurred. performanceentry.duration returns 0. methods this interface has no methods. ...
...unction showpainttimings() { if (window.performance) { let performance = window.performance; let performanceentries = performance.getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console output something like the following: the time to first-paint was 2785.915 milliseconds. the time to first-contentful-paint was 2787.460 milliseconds. specifications specification status comment paint timingthe definition of 'performancepainttiming' in that specification. working draft initial definition. ...

TaskAttributionTiming - Web APIs
the frame context, also called the container, is the iframe, embed or object that is being implicated, on the whole, for a long task. ...
...troke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattribu...
...rget="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object. taskattributiontiming.containersrc read only returns the container's src attribute. taskattributiontiming.containerid read only returns the container's id attribute. taskattributiontiming.containername read only returns the container's name attribute. specifications specification ...
...embed, or object. taskattributiontiming.containersrc read only returns the container's src attribute. taskattributiontiming.containerid read only returns the container's id attribute. taskattributiontiming.containername read only returns the container's name attribute. specifications specification status comment long tasks api 1the definition of 'taskattributiontiming' in that specification. working draft initial definition. ...

Using the User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's performance timeline. there are two types of user defined timing entry types: the "mark" entry type and the "measure" entry type. mark events are named by the application and can be set at any location in an application. measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks. this document shows how to create mark and measure performance entry types and how to use user timing methods (which are extensions of the performance interface) to retrieve and remove entries from the browser's performance timeline. a live version of the examples is available on github, as is the source code. pull r...
...return; } log("clear measures", 1); if (typeof obj == "string") { log("... cleared '" + obj + "' measure(s)", 1); performance.clearmeasures(obj); } else { // no argument specified so clear all measures log("... ...
...} else { // no argument specified so clear all measures log("... ...
...g("... ...

User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's performance timeline. there are two types of user defined timing event types: the "mark" event type and the "measure" event type. mark events are named by the application and can be set at any location in an application. measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks. this document provides an overview of the mark and measure performance event types including the four user timing methods that extend the performance interface. for more details and example code regarding these two performance event types and the methods, see using the user timing api. performance marks a performanc...
...removing performance measures to remove a specific measure from the performance timeline, call performance.clearmeasures(name) where name is the name of the measure(s) you want removed. if this method is called with no arguments, all measure type entries will be removed from the performance timeline. ...
...mance timeline. interoperability as shown in the performance interface's browser compatibility table, the user timing methods are broadly implemented by desktop and mobile browsers (the only exceptions are desktop safari and mobile safari, however the safari technology preview 24 has support). to test your browser's support for this api, run the perf-api-support application. ...
...er compatibility table, the user timing methods are broadly implemented by desktop and mobile browsers (the only exceptions are desktop safari and mobile safari, however the safari technology preview 24 has support). to test your browser's support for this api, run the perf-api-support application. ...

Server Timing - MDN Web Docs Glossary: Definitions of Web-related terms
the server timing specification enables the server to communicate performance metrics from the request-response cycle to the user agent, and utilizes a javascript interface to allow applications to collect, process, and act on these metrics to optimize application delivery. ...
... the server timing specification enables the server to communicate performance metrics from the request-response cycle to the user agent, and utilizes a javascript interface to allow applications to collect, process, and act on these metrics to optimize application delivery. ...
... the server timing specification enables the server to communicate performance metrics from the request-response cycle to the user agent, and utilizes a javascript interface to allow applications to collect, process, and act on these metrics to optimize application delivery. ...

AnimationEffect.getComputedTiming() - Web APIs
the getcomputedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect. although many of the attributes of the returned object are common to the effecttiming contained in the object returned by the animationeffect.gettiming() method, the values returned by this object differ in the following ways: duration returns the calculated value of the iteration duration. if effecttiming.duration is the string auto, this attribute will return 0. fill the auto value is replaced with the appropriate effecttiming.fill value. these values are comparable to the computed styles of an element returned using window.getcomputedstyle(elem). syntax var currenttimevalues = animation.getcomputedtiming(); parameters none. return value a co...
...ion duration. if effecttiming.duration is the string auto, this attribute will return 0. fill the auto value is replaced with the appropriate effecttiming.fill value. these values are comparable to the computed styles of an element returned 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 multipl...
... working draft editor's draft. ...

EffectTiming.iterationStart - Web APIs
web animations api's effecttiming dictionary's iterationstart property specifies the repetition number which repetition the animation begins at and its progress through it. element.animate(), keyframeeffectreadonly.keyframeeffectreadonly(), and keyframeeffect.keyframeeffect() all accept an object of timing properties including iterationstart. the value of iterationstart corresponds directly to animationeffecttimingreadonly.iterationstart in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. ...
...ess through it. element.animate(), keyframeeffectreadonly.keyframeeffectreadonly(), and keyframeeffect.keyframeeffect() all accept an object of timing properties including iterationstart. the value of iterationstart corresponds directly to animationeffecttimingreadonly.iterationstart in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { iterationstart = iterationnumber }; timingproperties.iterationstart = iterationnumber; value a floating-point value whose value is at least 0 and is not +infinity, indicating the offset into the number of iterations the animation sequence is to run at which to start animating. iterationstart represents the iteration index at which the animation effect begins as well as its pro...
...owed. since all animations' iteration indexes start at 0, a value of 0.5 would start the animation halfway through its first iteration or loop. meanwhile, a value of 1.2 means the animation will begin playback 20% of the way through its second iteration, and so forth. it's currently undefined what happens if you specify a value of iterationstart which is greater than the value of animationeffecttimingproperties.iterations. see issue 170 in the web animations api specification's issue tracker for details and status of any changes to the specification in this regard. specifications specification status comment web animationsthe definition of 'iterationstart' in that specification. working draft editor's draft. ...

performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" performance entry type objects. a browser's recommended resource timing buffer size is at least 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. ...
...ffer size is at least 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("... ...
...should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("... performance.setresourcetimingbuffersize() = yes"); performance.setresourcetimingbuffersize(maxsize); } else { log("... performance.setresourcetimingbuffersize() = not supported"); } } specifications specification status comment resource timing level 1the definition of 'setresourcetimingbuffersize()' in that specification. candidate recommendation initial definition. ...

Interval Timing
the type of such arguments is printervaltime. such parameters are common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. ...
...t due to some administrative action). the counters have no fixed epoch and have a finite period. to make use of these counters, the application must declare a point in time, the epoch, and an amount of time elapsed since that epoch, the interval. in almost all cases the epoch is defined as the value of the interval timer at the time it was sampled. ...

EffectTiming.direction - Web APIs
the direction property of the web animations api dictionary effecttiming indicates an animation's playback direction along its timeline, as well as its behavior when it reaches the end of an iteration element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including direction. the value of direction corresponds directly to animationeffecttimingreadonly.direction in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. ...
...ine, as well as its behavior when it reaches the end of an iteration element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including direction. the value of direction corresponds directly to animationeffecttimingreadonly.direction in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { direction: "normal" | "reverse" | "alternate" | "alternate-reverse" }; timingproperties.direction = "normal" | "reverse" | "alternate" | "alternate-reverse"; value a domstring which specifies the direction in which the animation should play as well as what to do when the playback reaches the end of the animation sequence in the current direction. it can take one of the followi...

EffectTiming.duration - Web APIs
the duration property of the dictionary effecttiming in the web animations api specifies the duration in milliseconds that a single iteration (from beginning to end) the animation should take to complete. element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including duration. the value of duration corresponds directly to animationeffecttimingreadonly.duration in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { duration: durationinmilliseconds | "auto" }; timingproperties.duration = durationinmilliseconds | "auto"; value the number of milliseconds long a single beginning-to-end iteration of the animation should take. the default is "auto". th...
...since in the future, "auto" will be expanded to take into account the duration of any child effects. consider using "auto" rather than 0 if that makes sense. exceptions typeerror the specified value is either a string other than "auto", a number less than zero, nan, or some other type of object entirely. ...

EffectTiming.iterations - Web APIs
the web animations api dictionary effecttiming's iterations property specifies the number of times the animation should repeat. the default value is 1, indicating that it should only play once, but you can set it to any floating-point value (including positive infinity defaults to 1, and can also take a value of infinity to make it loop infinitely. element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including iterations. the value of iterations corresponds directly to animationeffecttimingreadonly.iterations in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. ...
...nd can also take a value of infinity to make it loop infinitely. element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including iterations. the value of iterations corresponds directly to animationeffecttimingreadonly.iterations in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { iterations: numberofiterations }; timingproperties.iterations = numberofiterations; value a floating-point value specifying the number of times the animation sequence will play through. any value from 0 (don't play the animation at all) to positive infinity (run the animation indefinitely) is supported. defaults to 1, meaning the animation sequence plays through once then stop...

EffectTiming - Web APIs
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. ...
... working draft initial definition ...

Using the Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the browser's event loop. a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer will have data about the duration of each frame event. this data can be used to help identify areas that take too long to provide a good user experience. ...
...nsive user experience. this means the browser should process a frame in about 16.7ms. an application can register a performanceobserver for "frame" performance entry types and the observer will have data about the duration of each frame event. this data can be used to help identify areas that take too long to provide a good user experience. this document describes how to use the performanceframetiming interfaces including example code. for an overview of these interfaces see frame timing api. frame observers the performance observer interfaces allow an application to register an observer for specific performance event types. when one of those event types is added to the browser's performance timeline, the application is notified of the event via the observer's callback function that was spe...

Frame Timing API - Web APIs
a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc. a frame rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience. this means the browser should process a frame in about 16.7 ms. an application can register a performanceobserver for "frame" performance entry types. the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available. ...
...for "frame" performance entry types. the observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's duration (length of time) will be available. this data can be used to help identify areas that take too long to provide a good user experience. example code of the interfaces described in this document is included in using the frame timing api. performance frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame". performanceentry.name set to the document's address. performanceentry.starttime set to the domhighrestimestamp when the frame was started.

Performance.onresourcetimingbufferfull - Web APIs
the onresourcetimingbufferfull property is an event handler that will be called when the resourcetimingbufferfull event is fired. this event is fired when the browser's resource timing performance buffer is full. note: this feature is available in web workers. syntax callback = performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired. examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
...te: this feature is available in web workers. syntax callback = performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired. examples the following example sets a callback function on the onresourcetimingbufferfull property. function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification. candid...

PerformanceEventTiming - Web APIs
the performanceeventtiming interface of the event timing api provides timing information for the event types listed below. auxclick beforeinput click compositionend compositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. ...
...mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started. performanceeventtiming.processingend returns the time at which the event dispatch ended. performanceeventtiming.cancelable returns the associated event's cancelable attribute. performanceeventtiming.target returns the associated event's last target, if 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) { ...

PerformanceNavigationTiming.domComplete - Web APIs
iately before the user agent sets the current document readiness of the current document to complete. syntax perfentry.domcomplete; return value a timestamp representing a time value equal to the time immediately before the user agent sets the current document readiness of the current document to complete. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
presenting the time value equal to the time immediately after the current document's domcontentloaded event completes. syntax perfentry.domcontentloadedeventend; return value a timestamp representing the time value equal to the time immediately after the current document's domcontentloaded event completes. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
he time immediately before the user agent fires the domcontentloaded event at the current document. syntax perfentry.domcontentloadedeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent fires the domcontentloaded event at the current document. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.domInteractive - Web APIs
re the user agent sets the current document readiness of the current document to interactive. syntax perfentry.dominteractive; return value a timestamp representing the time value equal to the time immediately before the user agent sets the current document readiness of the current document to interactive. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.loadEventEnd - Web APIs
the loadeventend read-only property returns a timestamp which is equal to the time when the load event of the current document is completed. syntax perfentry.loadeventend; return value a timestamp representing the time when the load event of the current document is completed. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.loadEventStart - Web APIs
rty returns a timestamp representing the time value equal to the time immediately before the load event of the current document is fired. syntax perfentry.loadeventstart; return value a timestamp representing a time value equal to the time immediately before the load event of the current document is fired. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.redirectCount - Web APIs
representing the number of redirects since the last non-redirect navigation under the current browsing context. this property is read only . syntax perfentry.redirectcount; return value a number representing the number of redirects since the last non-redirect navigation under the current browsing context. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.toJSON() - Web APIs
the tojson() method is a serializer - it returns a json representation of the performancenavigationtiming object. syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performancenavigationtiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. ...
...ncenavigationtiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. example // get a resource performance entry var perfentries = performance.getentriesbytype("navigation"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performancenavigationtiming.tojson() = " + s); specifications specification status comment navigation timing level 2the definition of 'tojson()' in that specification. working draft initial definition. ...

PerformanceNavigationTiming.type - Web APIs
the browser's reload operation or location.reload(). back_forward navigation is through the browser's history traversal operation. prerender navigation is initiated by a prerender hint. this property is read only . syntax perfentry.type; return value a string which is one of the values listed above. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.unloadEventEnd - Web APIs
er agent finishes the unload event of the previous document. if there is no previous document, this property value is 0. syntax perfentry.unloadeventend; return value a timestamp representing a time value equal to the time immediately after the user agent finishes the unload event of the previous document. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceNavigationTiming.unloadEventStart - Web APIs
er agent starts the unload event of the previous document. if there is no previous document, this property returns 0. syntax perfentry.unloadeventstart; return value a timestamp representing the time value equal to the time immediately before the user agent starts the unload event of the previous document. example the following example illustrates this property's usage. ...
... working draft initial definition. ...

PerformanceResourceTiming.initiatorType - Web APIs
a string that represents the type of resource that initiated the performance event. the value of this string is as follows: if the initiator is a element, the property returns the element's localname. if the initiator is a css resource, the property returns "css". if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest". if the initiator is a performancenavigationtiming object, the property returns an empty string (""). note: this feature is available in web workers. syntax resource.initiatortype; return value a string representing the type of resource that initiated the performance event, as specified above. example function print_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype...
... candidate recommendation initial definition. ...

PerformanceResourceTiming.redirectEnd - Web APIs
the redirectend read-only property returns a timestamp immediately after receiving the last byte of the response of the last redirect. when fetching a resource, if there are multiple http redirects, and any of the redirects have an origin that is different from the current document, and the timing allow check algorithm passes for each redirected resource, this property returns the time immediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned. note: this feature is available in web workers. syntax resource.redirectend; return value a timestamp immediately after receiving the last byte of the response of the last redirect. example in the following example, the value of the *start and *end properties of all "resource" type events are logg...
... candidate recommendation initial definition. ...

PerformanceResourceTiming.redirectStart - Web APIs
note: this feature is available in web workers. ...
... candidate recommendation initial definition. ...

PerformanceResourceTiming.toJSON() - Web APIs
the tojson() method is a serializer that returns a json representation of the performanceresourcetiming object. syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceresourcetiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes. ...
...ith entries for each of the serializable attributes. example // get a resource performance entry var perfentries = performance.getentriesbytype("resource"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performanceentry.tojson = " + s); specifications specification status comment resource timing level 2the definition of 'tojson' in that specification. working draft ...

PerformanceResourceTiming.workerStart - Web APIs
if the resource is not intercepted by a service worker the property will always return 0. note: this feature is available in web workers. syntax resource.workerstart; value a domhighrestimestamp. example in the following example, the value of the *start and *end properties of all "resource" type events are logged. ...
... working draft initial definition. ...

PerformanceTiming.connectEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the connection is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. ...
...is opened network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment end time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. a connection is considered as opened when all secure connection handshake, or socks authentication, is terminated. syntax time = performancetiming.connectend; specifications specification status comment navigation timingthe definition of 'performancetiming.connectend' in that specification. recommendation initial definition. ...

PerformanceTiming.connectStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.connectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. ...
...g long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network. if the transport layer reports an error and the connection establishment is started again, the last connection establisment start time is given. if a persistent connection is used, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.connectstart; specifications specification status comment navigation timingthe definition of 'performancetiming.connectstart' in that specification. recommendation initial definition. ...

PerformanceTiming.domInteractive - Web APIs
this property can be used to measure the speed of loading web sites that users feels. nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts. ...
...is thrown. this property can be used to measure the speed of loading web sites that users feels. nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom web fonts. check if you are in one of these cases before using this property as a proxy for the user experience of a web site's speed of loading. syntax time = performancetiming.dominteractive; specifications specification status comment navigation timingthe definition of 'performancetiming.dominteractive' in that specification. recommendation initial definition. ...

Timing-Allow-Origin - HTTP
the timing-allow-origin response header specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. header type response header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources. <origin> specifies a uri that may see the timing resources. you can specify multiple origins, separated by commas. ...
...se header forbidden header name no syntax timing-allow-origin: * timing-allow-origin: <origin>[, <origin>]* directives * the server may specify "*" as a wildcard, thereby allowing any origin to see timing resources. <origin> specifies a uri that may see the timing resources. you can specify multiple origins, separated by commas. examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://developer.mozilla.org specifications specification status comment resource timing level 3the definition of 'timing-allow-origin' in that specification. editor's draft initial definition. ...

Resource Timing - MDN Web Docs Glossary: Definitions of Web-related terms
diagnosing performance issues requires performance data at the granularity of the resource. the resource timing api is a javascript api that is able to capture timing information for each individual resource that is fetched when a page is loaded. ...

AnimationEffect.getTiming() - Web APIs
the animationeffect.gettiming() method of the animationeffect interface returns an effecttiming object containing the timing properties for the animation effect. syntax animationtiming = animation.gettiming(); returns an effecttiming object. specifications specification status comment web animationsthe definition of 'animationeffect.gettiming()' in that specification. working draft editor's draft. ...

AnimationEffect.updateTiming() - Web APIs
the updatetiming() method of the animationeffect interface updates the specified timing properties for an animation effect. syntax animation.updatetiming(timing); parameters timing an optionaleffecttiming object containing the timing properties to update. return value none. specifications specification status comment web animationsthe definition of 'animationeffect.updatetiming()' in that specification. working draft editor's draft. ...

Performance.timing - Web APIs
this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performance.timing read-only property returns a performancetiming object containing latency-related performance information. this property is not available in workers. syntax timinginfo = performance.timing; specifications specification status comment navigation timing level 2 working draft initial definition. ...

PerformanceLongTaskTiming.attribution - Web APIs
specifications specification status comment long tasks api 1the definition of 'attribution' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

PerformanceResourceTiming.connectEnd - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.connectStart - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.decodedBodySize - Web APIs
working draft initial definition. ...

PerformanceResourceTiming.domainLookupEnd - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.domainLookupStart - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.encodedBodySize - Web APIs
working draft initial definition. ...

PerformanceResourceTiming.fetchStart - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.nextHopProtocol - Web APIs
working draft initial definition. ...

PerformanceResourceTiming.requestStart - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.responseEnd - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.responseStart - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.secureConnectionStart - Web APIs
candidate recommendation initial definition. ...

PerformanceResourceTiming.transferSize - Web APIs
working draft initial definition. ...

PerformanceServerTiming.description - Web APIs
the description read-only property returns a domstring value of the server-specified metric description, or an empty string. syntax servertiming.description; specifications specification status comment server timingthe definition of 'description' in that specification. working draft initial definition. ...

PerformanceServerTiming.duration - Web APIs
the duration read-only property returns a double that contains the server-specified metric duration, or value 0.0. syntax servertiming.duration; specifications specification status comment server timingthe definition of 'duration' in that specification. working draft initial definition. ...

PerformanceServerTiming.name - Web APIs
the name read-only property returns a domstring value of the server-specified metric name. syntax servertiming.name; specifications specification status comment server timingthe definition of 'name' in that specification. working draft initial definition. ...

PerformanceServerTiming.toJSON - Web APIs
the tojson() method of the performanceservertiming interface returns a domstring that is the json representation of the performanceservertiming object. syntax var json = performanceservertiming.tojson() parameters none. return value a domstring containing json. exceptions none. specifications specification status comment server timingthe definition of 'tojson' in that specification. working draft initial definition. ...

PerformanceTiming.domComplete - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domcomplete read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser finished its work on the main document, that is when its document.readystate changes to 'complete' and the corresponding readystatechange event is thrown. syntax time = performancetiming.domcomplete; specifications specification status comment navigation timingthe definition of 'performancetiming.domcomplete' in that specification. recommendation initial definition. ...

PerformanceTiming.domContentLoadedEventEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domcontentloadedeventend read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after all the scripts that need to be executed as soon as possible, in order or not, has been executed. syntax time = performancetiming.domcontentloadedeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventend' in that specification. recommendation initial definition. ...

PerformanceTiming.domContentLoadedEventStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domcontentloadedeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing has been executed. syntax time = performancetiming.domcontentloadedeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.domcontentloadedeventstart' in that specification. recommendation initial definition. ...

PerformanceTiming.domLoading - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domloading read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown. syntax time = performancetiming.domloading; specifications specification status comment navigation timingthe definition of 'performancetiming.domloading' in that specification. recommendation initial definition. ...

PerformanceTiming.domainLookupEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domainlookupend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup is finished. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.domainlookupend; specifications specification status comment navigation timingthe definition of 'performancetiming.domainlookupend' in that specification. recommendation initial definition. ...

PerformanceTiming.domainLookupStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.domainlookupstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup starts. if a persistent connection is used, or the information is stored in a cache or a local resource, the value will be the same as performancetiming.fetchstart. syntax time = performancetiming.domainlookupstart; specifications specification status comment navigation timingthe definition of 'performancetiming.domainlookupstart' in that specification. recommendation initial definition. ...

PerformanceTiming.fetchStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.fetchstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the browser is ready to fetch the document using an http request. this moment is before the check to any application cache. syntax time = performance.timing.fetchstart; specifications specification status comment navigation timingthe definition of 'performancetiming.fetchstart' in that specification. recommendation initial definition. ...

PerformanceTiming.loadEventEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface's performancenavigationtiming.loadeventend read-only property instead. the legacy performancetiming.loadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event handler terminated, that is when the load event is completed. if this event has not yet been sent, or is not yet completed, it returns 0. syntax time = performancetiming.loadeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.loadeventend' in that specification. recommendation initial definition. ...

PerformanceTiming.loadEventStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface's performancenavigationtiming.loadeventstart read-only property instead.. the legacy performancetiming.loadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event was sent for the current document. if this event has not yet been sent, it returns 0. syntax time = performancetiming.loadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.loadeventstart' in that specification. recommendation initial definition. ...

PerformanceTiming.navigationStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.navigationstart read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after the prompt for unload terminates on the previous document in the same browsing context. if there is no previous document, this value will be the same as performancetiming.fetchstart. syntax time = performancetiming.navigationstart; specifications specification status comment navigation timingthe definition of 'performancetiming.navigationstart' in that specification. recommendation initial definition. ...

PerformanceTiming.redirectEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.redirectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the last http redirect is completed, that is when the last byte of the http response has been received. if there is no redirect, or if one of the redirect is not of the same origin, the value returned is 0. syntax time = performancetiming.redirectend; specifications specification status comment navigation timingthe definition of 'performancetiming.redirectend' in that specification. recommendation initial definition. ...

PerformanceTiming.redirectStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.redirectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the first http redirect starts. if there is no redirect, or if one of the redirect is not of the same origin, the value returned is 0. syntax time = performancetiming.redirectstart; specifications specification status comment navigation timingthe definition of 'performancetiming.redirectstart' in that specification. recommendation initial definition. ...

PerformanceTiming.requestStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.requeststart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the browser sent the request to obtain the actual document, from the server or from a cache. if the transport layer fails after the start of the request and the connection is reopened, this property will be set to the time corresponding to the new request. syntax time = performancetiming.requeststart; specifications specification status comment navigation timingthe definition of 'performancetiming.requeststart' in that specification. recommendation i...

PerformanceTiming.responseEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.responseend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server from a cache or from a local resource. syntax time = performancetiming.responseend; specifications specification status comment navigation timingthe definition of 'performancetiming.responseend' in that specification. recommendation initial definition. ...

PerformanceTiming.responseStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.responsestart read-only property returns an unsigned long long representing the moment in time (in milliseconds since the unix epoch) when the browser received the first byte of the response from the server, cache, or local resource. syntax time = performancetiming.responsestart; specifications specification status comment navigation timingthe definition of 'performancetiming.responsestart' in that specification. recommendation initial definition. ...

PerformanceTiming.secureConnectionStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.secureconnectionstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the secure connection handshake starts. if no such connection is requested, it returns 0. syntax time = performancetiming.secureconnectionstart; specifications specification status comment navigation timingthe definition of 'performancetiming.secureconnectionstart' in that specification. recommendation initial definition. ...

PerformanceTiming.unloadEventEnd - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.unloadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event handler finishes. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. syntax time = performancetiming.unloadeventend; specifications specification status comment navigation timingthe definition of 'performancetiming.unloadeventend' in that specification. recommendation initial definition. ...

PerformanceTiming.unloadEventStart - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancetiming.unloadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event has been thrown. if there is no previous document, or if the previous document, or one of the needed redirects, is not of the same origin, the value returned is 0. syntax time = performancetiming.unloadeventstart; specifications specification status comment navigation timingthe definition of 'performancetiming.unloadeventstart' in that specification. recommendation initial definition. ...

TaskAttributionTiming.containerId - Web APIs
specifications specification status comment long tasks api 1the definition of 'containerid' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...

TaskAttributionTiming.containerName - Web APIs
the containername readonly property of the taskattributiontiming interface returns the container's name attribute. a container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. syntax var containername = taskattributiontiming.containername; value a domstring containing the container's name attribute. specifications specification status comment long tasks api 1the definition of 'containername' in that specification. working draft initial definition. ...

TaskAttributionTiming.containerSrc - Web APIs
the containersrc readonly property of the taskattributiontiming interface returns the container's src attribute. a container is the iframe, embed or object etc. that is being implicated, on the whole, for a long task. syntax var containersrc = taskattributiontiming.containersrc; value a domstring containing the container's src attribute. specifications specification status comment long tasks api 1the definition of 'containersrc' in that specification. working draft initial definition. ...

TaskAttributionTiming.containerType - Web APIs
specifications specification status comment long tasks api 1the definition of 'containertype' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

Index - Web APIs
neffect api, animation, experimental, interface, reference, web animations, web animations api the animationeffect interface of the web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by css animations and transitions). ...
...tions, web animations api the animationeffect interface of the web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by css animations and transitions). ...
...erface of the web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by css animations and transitions). 83 animationeffect.getcomputedtiming() api, animation, experimental, method, reference, getcomputedtiming, waapi, web animations api the getcomputedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect. ...
...And 144 more matches

Using CSS transitions - CSS: Cascading Style Sheets
g between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. css transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end). which css properties can be transitioned? the web author can define which property has to be animated and in which way. this allows the creation of complex transitions. as it doesn't make sense to animate some properties, the list of animatable properties is limited to a finite set. note: the set of properties that can be ani...
...v class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left:...
...sform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classn...
...And 28 more matches

Performance API - Web APIs
amp whose value that depends on the navigation start and scope. if the scope is a window, the value is the time the browser context was created and if the scope is a worker, the value is the time the worker was created. the tojson() method returns a serialization of the performance object, for those attributes that can be serialized. properties the performance interface has two properties. the timing property returns a performancetiming object containing latency-related performance information such as the start of navigation time, start and end times for redirects, start and end times for responses, etc. the navigation property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, ...
...tion time, start and end times for redirects, start and end times for responses, etc. the navigation property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the page was navigated to from history, the page was navigated to by following a link, etc. interfaces performance provides methods and properties containing timing-related performance information for the given page. performanceentry provides methods and properties the encapsulate a single performance metric that is part of the performance timeline. performanceframetiming provides methods and properties containing frame timing data about the browser's event loop. performancemark an abstract interface for performance entries with an entry type of "mark"...
...ng performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance timeline. performancemeasure an abstract interface for performance entries with an entry type of "measure". entries of this type are created by calling performance.measure() to add a nameddomhighrestimestamp (the measure) between two marks to the browser's performance timeline. ...
...And 12 more matches

Network request details - Firefox Developer Tools
he network monitor, which provides more detailed information about the request. the screenshots and descriptions in this section reflect firefox 78. earlier versions appeared similarly, but might not include some functionality. the tabs at the top of this pane enable you to switch between the following pages: headers messages (only for websocket items) cookies params response cache timings security (only for secure pages) stack trace (only when the request has a stack trace, e.g. a script called by another script). clicking the icon at the right-hand end of the toolbar closes the details pane and returns you to the list view. headers tab the headers tab has a toolbar, followed by three main sections. this includes: information about the request status: the response...
... value pair is copied. ...
...n 2019 13:01:39 gmt" }, { "name": "mediawiki-login-suppressed", "value": "true" }, { "name": "p3p", "value": "cp=\"this is not a p3p policy! ...
...And 7 more matches

Performance - Web APIs
an object of this type can be obtained by calling the window.performance read-only attribute. note: this interface and its members are available in web workers, except where indicated below. also, note that performance markers and measures are per context. ...
...that performance markers and measures are per context. if you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa. properties the performance interface doesn't inherit any properties. performance.navigation read only a legacy performancenavigation object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth. not available in workers. performance.timing read only a legacy performancetiming object containing latency-related performance information. not available in workers. performance.memory read only a non-standard extension added in chrome, this property provides an object with basic memory u...
...eorigin read only returns the high resolution timestamp of the start time of the performance measurement. methods the performance interface doesn't inherit any methods. performance.clearmarks() removes the given mark from the browser's performance entry buffer. performance.clearmeasures() removes the given measure from the browser's performance entry buffer. performance.clearresourcetimings() removes all performance entries with a entrytype of "resource" from the browser's performance data buffer. performance.getentries() returns a list of performanceentry objects based on the given filter. performance.getentriesbyname() returns a list of performanceentry objects based on the given name and entry type. performance.getentriesbytype() returns a list of performanceentry objects...
...And 7 more matches

Using the Web Animations API - Web APIs
t: 0.3. currently, there should be at least two keyframes specified (representing the starting and ending states of the animation sequence). if your keyframe list has only one entry, element.animate() may throw a notsupportederror exception in some browsers until they are updated. so to recap, the keys are equally spaced by default unless you specify an offset on a key. ...
...pecified (representing the starting and ending states of the animation sequence). if your keyframe list has only one entry, element.animate() may throw a notsupportederror exception in some browsers until they are updated. so to recap, the keys are equally spaced by default unless you specify an offset on a key. handy, no? representing timing properties we’ll also need to create an object of timing properties (an animationeffecttimingproperties object) corresponding to the values in alice’s animation: var alicetiming = { duration: 3000, iterations: infinity } you’ll notice a few differences here from how equivalent values are represented in css: for one, the duration is in milliseconds as opposed to seconds — 3000 not 3s. like windowtimers.settimeout() and window.requestanima...
...rame(), the web animations api only takes milliseconds. the other thing you’ll notice is that it’s iterations, not iteration-count. there are a number of small differences between the terminology used in css animations and the terminology used in web animations. for instance, web animations doesn't use the string "infinite", but instead uses the javascript keyword infinity. and instead of timing-function we use easing. we aren’t listing an easing value here because, unlike css animations where the default animation-timing-function is ease, in the web animations api the default easing is linear — which is what we want here. bring the pieces together now it’s time to bring them both together with the element.animate() method: document.getelementbyid("alice").animate( alicetumbl...
...And 7 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
t start with a hyphen (-), each containing part of the text track to be shown. we can also place comments in our .vtt file, to help us remember important information about the parts of our file. these should be on separate lines, starting with the string note. you'll find more about these in the below section. it is important to not use "extra" blank lines within a cue, for example between the timings line and the cue payload. webvtt is line based; a blank line will close the cue. webvtt comments comments are an optional component that can be used to add information to a webvtt file. comments are intended for those reading the file and are not seen by users. comments may contain newlines but cannot contain a blank line, which is equivalent to two consecutive newlines. a blank line signifies...
... 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% what are you waiting for? webvtt cues a cue is a single su...
...e. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% what are you waiting for? webvtt cues a cue is a single subtitle block that has a single start time, end time, and textual payload. example 6 consists of the header, a blank line, and then five cues separated by blank lines. a cue consists of five components: an optional cue identifier followed by a newline. cue timings. optional cue settings with at least one space before the first and between each setting. one or more newlines. the cue payload text. example 7 - example of a cue 1 - title crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start some time ago in a place rather distant.... cue identifier the identifier is a name that identifies the cue. it can be used to reference the...
...And 6 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. ...
...ration, 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. ...
...ive 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. ...
...And 6 more matches

transition-delay - CSS: Cascading Style Sheets
lass="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width...
...lay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; }...
...class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width he...
...And 5 more matches

transition-duration - CSS: Cascading Style Sheets
div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: ...
...ransform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classnam...
...parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top -webkit-transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px;...
...And 5 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. ...
...tive-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. ...
... set using javascript. ...
...And 5 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
object that is instantiated. the constructor initializes this object and can provide access to its private information. the concept of a constructor can be applied to most object-oriented programming languages. essentially, a constructor in javascript is usually declared at the instance of a class. 89 continuous media glossary, media continuous media is data where there is a timing relationship between source and destination. the most common examples of continuous media are audio and motion video. continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict. 90 control flow codingscripting, glossary, javascript the control flow is the...
...150 first interactive glossary, lighthouse, web performance first interactive, also known as first cpu idle, is a non-standard web performance metric that measures when the user's window is quiet enough to handle user input, or what is termed as minimally interactive. 151 first paint beginner, glossary, performance, web performance first paint, part of the paint timing api, is the time between navigation and when the browser renders the first pixels to the screen, 152 first-class function codingscripting, glossary, javascript a programming language is said to have first-class functions when functions in that language are treated like any other variable. for example, in such a language, a function can be passed as an argument to other funct...
...maincomponents of a network packet are the user data and control information. the user data is known as the payload. the control information is the information for delivering the payload. it consists of network addresses for the source and destination, sequencing information, and error detection codes and is generally found in packet headers and footer. ...
...And 4 more matches

PerformanceEntry - Web APIs
. a performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. performance entries are also created in indirect ways such as loading a resource (such as an image). performanceentry instances will always be one of the following subtypes: performancemark performancemeasure performanceframetiming performancenavigationtiming performanceresourcetiming performancepainttiming note: this feature is available in web workers. properties performanceentry.name read only a value that further specifies the value returned by the performanceentry.entrytype property. the value of both depends on the subtype. see property page for valid values. performanceentry.entrytype read only a domstr...
... i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("... " + properties[i] + " = " + value); } else { console.log("... ...
...y var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("... " + properties[i] + " = " + value); } else { console.log("... ...
...And 4 more matches

Web Performance
ansitions/animations where possible. if your animations are really complex, you may have to rely on javascript-based animations instead.lazy loadinglazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. it is a way of shorten the critical rendering path length, what would translate into improved page load times. navigation and resource timingsnavigation timings are metrics measuring a browser's document navigation events. resource timings are detailed network timing measurements regarding the loading of an application's resources.optimizing startup performanceregardless of platform, it's always a good idea to start up as quickly as possible. since that's a universal issue, we won't be focusing on it too much here. instead, we're going...
...(rum) are two approaches for monitoring and providing insight into web performance. in this article we define and compare these two performance monitoring approaches.populating the page: how browsers worka developer should strive to achieve these two goals. ...
...website is in milliseconds, is how fast your users perceive your site to be. these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings. web performance basics in addition to the front end components of html, css, javascript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. there are many apis, developer tools, best practices, and bad practices relating to web performance. here we'll introduce many of these features ad the basic...
...And 4 more matches

nsIContentViewer
boolean permitunload([optional] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only! void setdocumentinternal(in nsidocumentptr adocument, in boolean aforcereuseinnerwindow); native code only! ...
...nload([optional] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only! void setdocumentinternal(in nsidocumentptr adocument, in boolean aforcereuseinnerwindow); native code only! ...
...onal] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only! void setdocumentinternal(in nsidocumentptr adocument, in boolean aforcereuseinnerwindow); native code only! ...
...And 3 more matches

Web APIs
though this doesn't always have to be the case. specifications this is a list of all the apis that are available. ...
...edential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto ...
...meline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming element elementcssinlinestyle elementtraversal errorevent event eventlistener eventsource eventtarget extendableevent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrys...
...And 2 more matches

Using CSS animations - CSS: Cascading Style Sheets
letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible. configuring the animation to create a css animation sequence, you style the element you want to animate with the animation property or its sub-properties. this lets you configure the timing, duration, and other details of how the animation sequence should progress. this does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in defining the animation sequence using keyframes below. the sub-properties of the animation property are: animation-name specifies the name of the @keyframes at-rule describing the animation’s k...
... the animation, which is done using the @keyframes at-rule as described in defining the animation sequence using keyframes below. the sub-properties of the animation 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 anim...
...not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode configures what values are applied by the animation before and after it is executing. animation-play-state lets you pause and resume the animation sequence. ...
...And 2 more matches

Web Console remoting - Firefox Developer Tools
"datasize": 1024, "discardrequestbody": false }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsestart", "response": { "httpversion": "http/1.1", "status": "304", "statustext": "not modified", "headerssize": 194, "discardresponsebody": true } }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "eventtimings", "totaltime": 1 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responseheaders", "headers": 6, "headerssize": 194 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecookies", "cookies": 0 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecontent", "mimetype": "text/c...
...": false } the request and response content text value is most commonly sent using a longstringactor grip. for very short request/response bodies we send the raw text. starting with firefox 19: for non-text response types we send the content in base64 encoding (again, most likely a longstringactor grip). to tell the difference just check if response.content.encoding == "base64". ...
...ommonly sent using a longstringactor grip. for very short request/response bodies we send the raw text. starting with firefox 19: for non-text response types we send the content in base64 encoding (again, most likely a longstringactor grip). to tell the difference just check if response.content.encoding == "base64". ...
... very short request/response bodies we send the raw text. starting with firefox 19: for non-text response types we send the content in base64 encoding (again, most likely a longstringactor grip). to tell the difference just check if response.content.encoding == "base64". ...

WebKit CSS extensions - CSS: Cascading Style Sheets
u should use the unprefixed standard properties instead of the prefixed ones listed below. ...
... -webkit-mask-position-x* -webkit-mask-position-y* * supported unprefixed in firefox, with prefix in safari. supported in fire...
...fox 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 standard and are not on track to becoming standard. *** use flex-box properties ins...

Measuring performance - Learn web development
chnologies. objective: to provide information about web performance metrics that you can collect through various web performance apis and tools that you can use to visualize that data. performance apis when writing code for the web, there are a large number of web apis available that allow you to create your own performance measuring tools. you can use the navigation timing api to measure client-side web performance; including the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and more. you can use the api for metrics related to all of the navigation events displayed in the didagram below. the performance api, which provides access to performance-related information for th...
...ime needed to unload the previous page, how long domain lookups take, the total time spent executing the window's load handler, and more. you can use the api for metrics related to all of the navigation events displayed in the didagram below. the performance api, which provides access to performance-related information for the current page, includes the performance timeline api, the navigation timing api, the user timing api, and the resource timing api. these interfaces allows the accurate measurement of the time it takes for javascript tasks to complete. the performanceentry object is part of the performance timeline. a performance entry can be directly created by making a performance mark or measure (for example by calling the mark() method) at an explicit point in an application. perform...
...e also created in indirect ways; such as loading a resource, like an image. the performanceobserver api can be used to observe performance measurement events and it can notify you of new performance entries as they are recorded in the browser's performance timeline. while this article does not dive into using these apis, it is useful to know they exist. you can also refer to the navigation and timings article for further examples on using performance web apis. tools and metrics there are a number of different tools available to help you improve performance. these can generally be classified into two categories: tools that indicate or measure performance, such as pagespeed insights or the firefox network monitor and performance monitor. these tools show you how fast or slow your web app ...

Work with animations - Firefox Developer Tools
it displays animations created using css transitions, css @keyframes rules, or the web animations api. starting in firefox 48, it will show animations applied to the ::before and ::after pseudo-elements. to see how it works, we'll walk through an example. ...
... 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 of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to. if you hover over this selector, the element is highlighted in the page. click the selector to select the element in the inspector. to the left of the selector is a "target" icon (). clicking this ico...
...orm in the screenshot below. hovering over this gives you a tooltip that explains why. in this case, the message is "animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time." edit @keyframes any @keyframes rules associated with the currently selected element are displayed in the rules view and are editable: edit timing functions when you create a css animation you can specify a timing function: this determines the rate at which the animation progresses. one way to specify the timing function is with a cubic bézier curve. timing functions defined as cubic bézier curves get an icon in the rules view. if you click the icon you get a visual editor for the curve, enabling you to drag p1 and p2, and see the resul...

HTMLImageElement.loading - Web APIs
er tells the browser to load the image as soon as the <img> element is processed. lazy tells the user agent to hold off on loading the image until the browser estimates that it will be needed imminently. for instance, if the user is scrolling through the document, a value of lazy will cause the 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 wh...
... 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 <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 intri...
... reflow from occurring, you should explicitly specify the size of the image's presentation using the image element's width and height attributes. by establishing the intrinsic aspect ratio in this manner, you prevent elements from shifting around while the document loads, which can be disconcerting or offputting at best and can cause users to click the wrong thing at worst, depending on the exact timing of the deferred loads and reflows. example the addimagetolist() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed. function addimagetolist(url) { const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; le...

LargestContentfulPaint - Web APIs
largestcontentfulpaint.loadtime the time the element was loaded. ...
... largestcontentfulpaint.loadtime the time the element was loaded. largestcontentfulpaint.size the intrinsic size of the element returned as the area (width * height). largestcontentfulpaint.id the id of the element. this property returns an empty string when there is no id. ...
..._bug.cgi?id=209216 try { let lcp; const po = new performanceobserver((entrylist) => { const entries = entrylist.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`. (note: `rendertime` may not be available on // image elements loaded cross-origin without the `timing-allow-origin` header.) lcp = lastentry.rendertime || lastentry.loadtime; }); po.observe({type: 'largest-contentful-paint', buffered: true}); // send data to the server. addeventlistener('visibilitychange', function fn() { if (lcp && document.visibilitystate === 'hidden') { console.log('lcp:', lcp); removeeventlistener('visibilitychange', fn, true); } }, true); ...

Using the Performance API - Web APIs
erface for these standards is the performance interface and its methods and properties are extended by different standards. this guide describes how to use the performance interfaces that are defined in the high-resolution time standard. other web performance guides (listed in the see also section) describe how to use additional methods and properties of the performance interface. high precision timing high precision timing is achieved by using the domhighrestimestamp type for time values. the unit is milliseconds and should be accurate to 5 µs (microseconds). however, if the browser is unable to provide a time value accurate to 5 microseconds (because of hardware or software constraints, for example), the browser can represent the value as a time in milliseconds accurate to a millisecond. t...
...to do the task can be measured. function calculate_time() { var starttime; var endtime; starttime = performance.now(); do_task(); endtime = performance.now(); return (endtime - starttime); } serializing the performance object json serialization of the performance object is done via the tojson() method. in the following example, json serialization for the performance, performance.timing and performance.navigation objects is printed in the object element. function print_json() { var json; var o = document.getelementsbytagname("output")[0]; if (window.performance.tojson === undefined) { json = "window.performance.tojson() is not supported"; o.innerhtml += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance obje...
...= document.getelementsbytagname("output")[0]; if (window.performance.tojson === undefined) { json = "window.performance.tojson() is not supported"; o.innerhtml += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance object s = json.stringify(json); o.innerhtml = "<p>performance = " + s + "</p>"; // print the performance.timing and performance.navigation objects var perf = json.parse(s); var timing = perf.timing; o.innerhtml += "<p>peformance.timing = " + json.stringify(timing) + "</p>"; var navigation = perf.navigation; o.innerhtml += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this document are defined in the high resolu...

CSS3 - Archive of obsolete content
hey 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 full-width. the css text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple...
...otatex(), 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 counter schemes. motion path module level 1 wo...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
s, however, does not comply with the w3c web standards and simply returns a regular document. javascript differences most differences between mozilla and internet explorer are usually blamed on javascript. however, the issues usually lie in the apis that a browser exposes to javascript, such as the dom hooks. the two browsers possess few core javascript differences; issues encountered are often timing related. javascript date differences the only date difference is the getyear method. as per the ecmascript specification (which is the specification javascript follows), running new date().getyear() in 2004 will return "104". per the ecmascript specification, getyear returns the year minus 1900, originally meant to return "98" for 1998. getyear was deprecated in ecmascript version 3 and replace...
...t> document.getelementbyid("foo").innerhtml = "done."; </script> however, this is not guaranteed. to be sure that all elements exist, you should use the onload event handler on the <body> tag: <body onload="dofinish();"> <div id="foo">loading...</div> <script> function dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block t...

Anatomy of a video game - Game development
indow.requestanimationframe(). the second statement calls the main() function, defined in the first statement. because main() is called once in the second statement and every call of it places itself in the queue of things to do next frame, main() is synchronized to your framerate. of course this loop is not perfect. before we discuss ways to change it, let us discuss what it already does well. timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. you are given control over each frame of animation. it is also very simple because main() is the only function getting looped. a first person shooter (or a similar game) presents a new scene once every frame. you cannot really get more smooth and responsive than that. ...
...ead (such as rasterization or shaders in webgl). long calculations can be performed on a web worker or a gpu at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events. while we are on the topic of budgeting time, many web browsers have a tool called high resolution time. the date object is no longer the recognised method for timing events because it is very imprecise and can be modified by the system clock. high resolution time, on the other hand, counts the number of milliseconds since navigationstart (when the previous document is unloaded). this value is returned as a decimal number accurate to a thousandth of a millisecond. it is known as a domhighrestimestamp but, for all intents and purposes, consider it a floating po...

Time to first byte - MDN Web Docs Glossary: Definitions of Web-related terms
it receives the first byte of information from the server. ...
...rst byte of information from the server. ...

MDN Web Docs Glossary: Definitions of Web-related terms
q quality values quaternion quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive request header resource timing response header responsive web design rest rgb ril robots.txt round trip time (rtt) routers rss rtcp (rtp control protocol) rtf rtl (right to left) rtp (real-time transport protocol) and srtp (secure rtp) rtsp: real-time streaming protocol ruby s ...
... scm scope screen reader script-supporting element scroll container scrollport sctp sdp search engine second-level domain secure sockets layer (ssl) selector (css) self-executing anonymous function semantics seo serialization server server timing session hijacking sgml shadow tree shim signature signature (functions) signature (security) simd simple header simple response header sisd site site map sld sloppy mode slug smoke test smpte (society of motion picture and television eng...

Web performance resources - Learn web development
urces using gzip, brotli, and zopfli. image optimization (use css animation, or svg if possible). lazy loading parts of your application outside the viewport. if you do, have a backup plan for seo (e.g render full page for bot traffic); for example, by using the loading attribute on the <img> element it is also crucial to realize what is really important to your users. it might not be absolute timing, but user perception. quick wins css web performance is all about user experience and perceived performance. as we learned in the critical rendering path document, linking css with a tradional link tag with rel="stylesheet" is synchronous and blocks rendering. optimize the rendering of your page by removing blocking css. to load css asynchronously one can simpy set the media type to print an...
...y aspects of your site including performance, seo and accessibility. ...

About NSPR
history a good portion of the library's purpose, and perhaps the primary purpose in the gromit environment, was to provide the underpinnings of the java vm, more or less mapping the sys layer that sun defined for the porting of the java vm to various platforms. ...
... not declared as opaque, the api provides methods that allow and encourage clients to treat the addresses as polymorphic items. the goal in this area is to provide a migration path between ipv4 and ipv6. to that end it is possible to perform translations of ascii strings (dns names) into nspr's network address structures, with no regard to whether the addressing technology is ipv4 or ipv6. time timing facilities are available in two forms: interval timing and calendar functions. interval timers are based on a free running, 32-bit, platform dependent resolution timer. such timers are normally used to specify timeouts on i/o, waiting on condition variables and other rudimentary thread scheduling. since these timers have finite namespace and are free running, they can wrap at any time. nspr does...

Introduction to NSPR
this chapter introduces key nspr programming concepts and illustrates them with sample code. the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...ng a waiting thread to resume. in such cases the return from the wait operation indicates a failure and definitively indicates that the cause of the failure is an interrupt. a call to pr_waitcondvar may also resume because the interval specified on the wait call has expired. however, this fact cannot be unambiguously delivered, so no attempt is made to do so. if the logic of a program allows for timing of waits on conditions, then the clock must be treated as part of the monitored data and the amount of time elapsed re-asserted when the call returns. philosophically, timeouts should be treated as explicit notifications, and therefore require the testing of the monitored data upon resumption. nspr sample code the documents linked here present two sample programs, including detailed annotations...

Animation.startTime - Web APIs
set. you can read this value to determine what the start time is currently set at, and you can change this value to make the animation start at a different time. examples in the running on web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning = document.getelementbyid ("withwaapi").animate(keyframes, timing); /* a function that makes new cats. */ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.anima...
...ion that makes new cats. */ function addcat(){ var newcat = document.createelement("div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaapi newanimationplayer.starttime = catrunning.starttime; // add the cat to the pile. waapicats.appendchild(newcat); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.starttime might get rounded depending on browser settings. in firefox, the p...

Element.animate() - Web APIs
y calling element.getanimations(). syntax var animation = element.animate(keyframes, options); parameters keyframes either 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 a...
...is animation. can be set to accumulate or replace (see above). defaults to replace. return value returns an animation. examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. notice the array of objects passed as keyframes and also the timing options block. document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer th...

Intersection Observer API - Web APIs
the intersection between the target element and its root container at a specific moment of transition. objects of this type can only be obtained in two ways: as an input to your intersectionobserver callback, or by calling intersectionobserver.takerecords(). a simple example this simple example causes a target element to change its color and transparency as it becomes more or less visible. at timing element visibility with the intersection observer api, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements.. html the html for this example is very short, with a primary element which is the box that we'll be targeting (with the creative id "box...
...hat with the intersectionratio before setting the target element's background-color. finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevratio. result below is the resulting content. scroll this page up and down and notice how the appearance of the box changes as you do so. there's an even more extensive example at timing element visibility with the intersection observer api. specifications specification status comment intersection observer working draft ...

KeyframeEffect - Web APIs
composite gets and sets the iteration composite operation for resolving the property value changes of this keyframe effect. keyframeeffect.composite gets and sets the composite operation property for resolving the property value changes between this and other keyframe effects. methods this interface inherits some of its methods from its parent, animationeffect. animationeffect.getcomputedtiming() returns the calculated, current timing values for this keyframe effect. keyframeeffect.getkeyframes() returns the computed keyframes that make up this effect along with their computed keyframe offsets. animationeffect.gettiming() the effecttiming object associated with the animation containing all the animation's timing values. keyframeeffect.setkeyframes() replaces the set of keyfram...
...r this keyframe effect. keyframeeffect.getkeyframes() returns the computed keyframes that make up this effect along with their computed keyframe offsets. animationeffect.gettiming() the effecttiming object associated with the animation containing all the animation's timing values. keyframeeffect.setkeyframes() replaces the set of keyframes that make up this effect. animationeffect.updatetiming() updates the specified timing properties. examples in the follow the white rabbit example, the keyframeeffect constructor is used to create a set of keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'transl...

msFirstPaint - Web APIs
ent could not be loaded. ...
...e numerical value reported represents the number of milliseconds between the recorded time and midnight january 1, 1970 (utc). this property is supported only for documents displayed in ie9 standards mode. example the following example shows how to calculate the time that is required to request the document before the document begins to display for the user. var otiming = window.performance.timing; var itimems = otiming.msfirstpaint - otiming.navigationstart; ...

performance.mark() - Web APIs
ved by one of the performance interface's getentries*() methods (getentries(), getentriesbyname() or getentriesbytype()). the mark()'s stores its data internally as performanceentry. note: this feature is available in web workers. syntax performance.mark(name); arguments name a domstring representing the name of the mark. if the name given to this method already exists in the performancetiming interface, syntaxerror is thrown. return value void example the following example shows how to use mark() to create and retrieve performancemark entries. // create a bunch of marks. performance.mark("squirrel"); performance.mark("squirrel"); performance.mark("monkey"); performance.mark("monkey"); performance.mark("dog"); performance.mark("dog"); // get all of the performancemark entri...
...ncemark entries. const allentries = performance.getentriesbytype("mark"); console.log(allentries.length); // 6 // get all of the "monkey" performancemark entries. const monkeyentries = performance.getentriesbyname("monkey"); console.log(monkeyentries.length); // 2 // clear out all of the marks. performance.clearmarks(); specifications specification status comment user timing level 2the definition of 'mark()' in that specification. working draft clarifies mark() processing model. user timingthe definition of 'mark()' in that specification. recommendation basic definition. ...

performance.measure() - Web APIs
feature is available in web workers. syntax performance.measure(name); performance.measure(name, startmark); performance.measure(name, startmark, endmark); performance.measure(name, undefined, endmark); arguments name a domstring representing the name of the measure. startmark optional a domstring representing the name of the measure's starting mark. may also be the name of a performancetiming property. if it is omitted, then the start time will be the navigation start time. endmark optional a domstring representing the name of the measure's ending mark. may also be the name of a performancetiming property. if it is omitted, then the current time is used. return value void example the following example shows how measure() is used to create a new measure performance entry in...
...", undefined, markernameb); performance.measure("measure from the start of navigation to now"); // pull out all of the measurements. console.log(performance.getentriesbytype("measure")); // finally, clean up the entries. performance.clearmarks(); performance.clearmeasures(); }, 1000); }, 1000); specifications specification status comment user timing level 2the definition of 'measure()' in that specification. working draft clarifies measure() processing model. user timingthe definition of 'measure()' in that specification. recommendation basic definition. ...

performance.now() - Web APIs
r. for example, firefox rounds the returned time to 1 millisecond increments. the precision of the returned value is subject to change if/when the security concerns are alleviated through other means. syntax t = performance.now(); example const t0 = performance.now(); dosomething(); const t1 = performance.now(); console.log(`call to dosomething took ${t1 - t0} milliseconds.`); unlike other timing data available to javascript (for example date.now), the timestamps returned by performance.now() are not limited to one-millisecond resolution. instead, they represent times as floating-point numbers with up to microsecond precision. also unlike date.now(), the values returned by performance.now() always increase at a constant rate, independent of the system clock (which might be adjusted manua...
...mestamps returned by performance.now() are not limited to one-millisecond resolution. instead, they represent times as floating-point numbers with up to microsecond precision. also unlike date.now(), the values returned by performance.now() always increase at a constant rate, independent of the system clock (which might be adjusted manually or skewed by software like ntp). otherwise, performance.timing.navigationstart + performance.now() will be approximately equal to date.now(). reduced time precision to offer protection against timing attacks and fingerprinting, the precision of performance.now() might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 1ms. // reduced time precision (1ms) in firefox 60 p...

PerformanceEntry.duration - Web APIs
the value returned by this property depends on the performance entry's type: "frame" - returns a timestamp indicating the difference between the starttimes of two successive frames. "mark" - returns "0" (a mark has no duration). "measure" - returns the timestamp that is the duration of the measure. "navigation" - returns the timestamp that is the difference between the performancenavigationtiming.loadeventend and performanceentry.starttime properties, respectively. "resource" - returns the difference between the resource's responseend timestamp and its starttime timestamp. this property is read only . syntax entry.duration; return value a domhighrestimestamp representing the duration of the performance entry. if the duration concept doesn't apply for a particular performance metric...
...d its starttime timestamp. this property is read only . syntax entry.duration; return value a domhighrestimestamp representing the duration of the performance entry. if the duration concept doesn't apply for a particular performance metric, the browser may choose to return a duration of 0. note: if the performance entry has an entrytype of "resource" (i.e. the entry is a performanceresourcetiming object), this property returns the difference between the performanceentry.responseend and performanceentry.starttime timestamps. example the following example shows the use of the duration property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... performance.mark not supported"); return; } // create some p...

PerformanceEntry.entryType - Web APIs
ailable in web workers. syntax var type = entry.entrytype; return value the return value depends on the subtype of the performanceentry object and affects the value of the performanceentry.name property as shown by the table below. performance entry type names value subtype type of name property description of name property frame, navigation performanceframetiming, performancenavigationtiming url the document's address. resource performanceresourcetiming url the resolved url of the requested resource. this value doesn't change even if the request is redirected. mark performancemark domstring the name used when the mark was created by calling performance.mark(). measure performancemeasure domstring ...
...ng url the resolved url of the requested resource. this value doesn't change even if the request is redirected. mark performancemark domstring the name used when the mark was created by calling performance.mark(). measure performancemeasure domstring name used when the measure was created by calling performance.measure(). paint performancepainttiming domstring either 'first-paint' or 'first-contentful-paint'. longtask performancelongtasktiming domstring reports instances of long tasks example the following example shows the use of the entrytype property. function run_performanceentry() { // check for feature support before continuing if (performance.mark === undefined) { console.log("performa...

PerformanceEntry.name - Web APIs
rmanceentry.entrytype property. this property is read only. note: this feature is available in web workers. syntax var name = entry.name; return value the return value depends on the subtype of the performanceentry object and the value of performanceentry.entrytype, as shown by the table below. value subtype entrytype values description url performanceframetiming, performancenavigationtiming frame, navigation the document's address. url performanceresourcetiming resource the resolved url of the requested resource. this value doesn't change even if the request is redirected. domstring performancemark mark the name used when the mark was created by calling performance.mark(). domstring performancemeasure...
...ource the resolved url of the requested resource. this value doesn't change even if the request is redirected. domstring performancemark mark the name used when the mark was created by calling performance.mark(). domstring performancemeasure measure name used when the measure was created by calling performance.measure(). domstring performancepainttiming paint either 'first-paint' or 'first-contentful-paint'. example the following example shows the use of the name property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.mark("begin...

PerformanceNavigation.type - Web APIs
the legacy performancenavigation.type read-only property returns an unsigned short containing a constant describing how the navigation to this page was done. possible values are: value constant name meaning 0 type_navigate the page was accessed by following a link, a bookmark, a form submission, a script, or typing the url in the address bar. 1 type_reload the page was accessed by clicking the reload button or via the location.reload() method. ...
... address bar. 1 type_reload the page was accessed by clicking the reload button or via the location.reload() method. 2 type_back_forward the page was accessed by navigating into the history. 255 type_reserved any other way. syntax type = performancenavigation.type; specifications specification status comment navigation timingthe definition of 'performancenavigation.type' in that specification. recommendation initial definition. ...

PerformanceNavigation - Web APIs
the legacy performancenavigation interface represents information about how the navigation to the current document was done. an object of this type can be obtained by calling the performance.navigation read-only attribute. properties the performancenavigation interface doesn't inherit any properties. performancenavigation.type read only an unsigned short which indicates how the navigation to this page was done. possible values are: type_navigate (0) the page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the url in the address bar. ...
... recommendation initial definition. ...

Rendering and the WebXR frame animation callback - Web APIs
when your callback returns, the browser transfers that backbuffer to the display or xr device, along with anything else that's changed since the last time the screen was refreshed. historically, displays have refreshed 60 times per second. this is due to early displays using the ac electrical grid's current flow waveform, which cycles 60 times per second in the united states (50 in europe), for timing purposes. this figure goes by a number of different names, but they're all equivalent or nearly so: refresh rate vertical refresh rate vertical blanking rate (vbl) vertical sync rate vertical refresh rate there are other similar terms used as well, but regardless of what it's called, the unit of measurement applied is the hertz, or hz. a display that refreshes 60 times per second has a 6...
...iew, deltatime); } } } the mydrawframe() function grabs the xrsession from the xrframe object specified by the frame parameter, then calls the session's requestanimationframe() method to immediately schedule the rendering of the next frame. this ensures we get into the queue right away, allowing the rest of the time spent in this iteration of the mydrawframe() function to count toward the timing of drawing the next frame. we then get the xrviewerpose object that describes the viewer's pose—their position and orientation—using the frame's getviewerpose() method, passing in the viewer's reference space from the viewerrefspace previously obtained while setting up the webxr session. with the viewer's pose in hand, we can then begin to render the frame. the first step is to obtain acces...

Web Animations API - Web APIs
the web animations api allows for synchronizing and timing changes to the presentation of a web page, i.e. animation of dom elements. it does so by combining two models: the timing model and the animation model. concepts and usage the web animations api provides a common language for browsers and developers to describe animations on dom elements. to get more information on the concepts behind the api and how to use it, read using the web animations api. web animations interfaces animation provides playback controls and a timeline for an animation node or source. can take an object created with the keyframeeffect() constructor. keyframeeffect describes sets of animatable properties and values, called keyframes and their timing options. these can then be played using the animation() cons...
...iontimeline represents the timeline of animation. this interface exists to define timeline features (inherited by documenttimeline and future timeline objects) and is not itself accessed by developers. animationevent actually part of css animations. documenttimeline represents animation timelines, including the default document timeline (accessed using the document.timeline property). effecttiming element.animate(), keyframeeffectreadonly.keyframeeffectreadonly(), and keyframeeffect.keyframeeffect() all accept an optional dictionary object of timing properties. extensions to other interfaces the web animations api adds some new features to document and element. extensions to the document interface document.timeline the documenttimeline object representing the default document time...

Advanced techniques: Creating and sequencing audio - Web APIs
we're going to introduce sample loading, envelopes, filters, wavetables, and frequency modulation. if you're familiar with these terms and you're looking for an introduction to their application within with the web audio api, you've come to the right place. demo we're going to be looking at a very simple step sequencer: in practice this is easier to do with a library — the web audio api was built to be built upon. if you are about to embark on building something more complex, tone.js would be a good place to start. ...
...e was sourced from soundbible.com. playing the audio in time a common problem with digital audio applications is getting the sounds to play in time so that the beat remains consistent, and things do not slip out of time. audiocontext object instances have a currenttime property, which allows us to retrieve the number of seconds after we first created the context. this is what we shall use for timing within our step sequencer — it's extremely accurate, returning a float value accurate to about 15 decimal places. we could schedule our voices to play within a for loop, however the biggest problem with this is updating whilst it is playing, and we've already implemented ui controls to do so. also, it would be really nice to consider an instrument-wide bpm control. the best way to get our voic...

Mozilla CSS extensions - CSS: Cascading Style Sheets
accepted] -moz-animation-direction [prefixed version still accepted] -moz-animation-duration [prefixed version still accepted] -moz-animation-fill-mode [prefixed version still accepted] -moz-animation-iteration-count [prefixed version still accepted] -moz-animation-name [prefixed version still accepted] -moz-animation-play-state [prefixed version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-backface-visibility [prefixed version still accepted] -moz-background-clipobsolete since gecko 2 -moz-background-originobsolete since gecko 2 -moz-background-inline-policyobsolete since gecko 32 [superseded by the standard version box-decoration-break] -moz-background-sizeobsolete since gecko 2 -moz-border-end ...
...fixed 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 button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-bu...

CSS reference - CSS: Cascading Style Sheets
this index do not include the javascript names where they differ from the css standard names. ...
...t-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-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 (@v...

<easing-function> - CSS: Cascading Style Sheets
ottom: 20px; } javascript const selectelem = document.queryselector('select'); const startbtn = document.queryselector('button'); const divelem = document.queryselector('div > div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.style.animationtimingfunction = selectelem.value; }); result cubic-bezier() function examples these cubic bézier curves are valid for use in css: /* the canonical bézier curve with four <number> in ...
...) these easing function are invalid: /* the first parameter must be an <integer> and cannot be a real value, even if it is equal to one. */ steps(2.0, jump-end) /* the amount of steps must be non-negative. */ steps(-3, start) /* there must be at least one step.*/ steps(0, jump-none) specifications specification status comment css animationsthe definition of '<timing-function>' in that specification. working draft defines <single-timing-function> as a synonym for <single-transition-timing-function> of the css transitions module. css timing functions level 1the definition of '<easing-function>' in that specification. working draft initial definition. ...

Guide to Web APIs - Developer guides
age you'll find a complete list of all of the apis provided by the full web technology stack. ...
...edential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto ...

Index - HTTP
t header is used in the websocket opening handshake. it would appear in the response headers. that is, this is header is sent from server to client to inform that server is willing to initiate a websocket connection. 98 server http, reference, header the server header contains information about the software used by the origin server to handle the request. 99 server-timing http, performance, reference, header the server-timing header communicates one or more metrics and descriptions for a given request-response cycle. it is used to surface any backend server timing metrics (e.g. database read/write, cpu time, file system access, etc.) in the developer tools in the user's browser or in the performanceservertiming interface. 100 set-cookie co...
...t-security response header (often abbreviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http. 104 te http, reference, header the te request header specifies the transfer encodings the user agent is willing to accept. (you could informally call it accept-transfer-encoding, which would be more intuitive). 105 timing-allow-origin cors, http, reference, timing-allow-origin, header the timing-allow-origin response header specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. 106 tk dnt, http, reference, response, header, tracking the tk response he...

HTTP headers - HTTP
preflight request can be cached. access-control-request-headers used when issuing a preflight request to let the server know which http headers will be used when the actual request is made. access-control-request-method used when issuing a preflight request to let the server know which http method will be used when the actual request is made. origin indicates where a fetch originates from. timing-allow-origin specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. do not track dnt expresses the user's tracking preference. tk indicates the tracking status of the corresponding response. downloads content-disposition indicates if the resource tr...
...ow long the user agent should wait before making a follow-up request. signature the signature header field conveys a list of signatures for an exchange, each one accompanied by information about how to determine the authority of and refresh that signature. signed-headers the signed-headers header field identifies an ordered list of response header fields to include in a signature. server-timing communicates one or more metrics and descriptions for the given request-response cycle. service-worker-allowed used to remove the path restriction by including this header in the response of the service worker script. sourcemap links generated code to a source map. upgrade the relevant rfc document for the upgrade header field is rfc 7230, section 6.7. the standard establishes rules for up...

HTTP Index - HTTP
header is used in the websocket opening handshake. it would appear in the response headers. that is, this is header is sent from server to client to inform that server is willing to initiate a websocket connection. 179 server http, reference, header the server header contains information about the software used by the origin server to handle the request. 180 server-timing http, performance, reference, header the server-timing header communicates one or more metrics and descriptions for a given request-response cycle. it is used to surface any backend server timing metrics (e.g. database read/write, cpu time, file system access, etc.) in the developer tools in the user's browser or in the performanceservertiming interface. 181 set-cookie co...
...t-security response header (often abbreviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http. 185 te http, reference, header the te request header specifies the transfer encodings the user agent is willing to accept. (you could informally call it accept-transfer-encoding, which would be more intuitive). 186 timing-allow-origin cors, http, reference, timing-allow-origin, header the timing-allow-origin response header specifies origins that are allowed to see values of attributes retrieved via features of the resource timing api, which would otherwise be reported as zero due to cross-origin restrictions. 187 tk dnt, http, reference, response, header, tracking the tk response he...

Performance Monitoring: RUM vs synthetic monitoring - Web Performance
ort back performance metrics experienced. rum helps identify how an application is being used, including the geographic distribution of users and the impact of that distribution on the end user experience. unlike synthetic monitoring, rum captures the performance of actual users regardless of device, browser, network or geographic location. as users interact with an application, all performance timings are captured, regardless of what actions are taken or pages viewed. rum monitors actual use cases, not the synthetic, assumed use cases predefined by an engineer, pm, or marketing team. this is particularly important for large sites or complex apps, where the functionality or content is constantly changing, and where the population accessing the application may differ greatly in life experiences...
...s only a narrow view of performance. rum, on the other hand, provides real metrics from real users using the site or application. while this is more expensive and likely less convenient, it provides vital user experience data. performance apis there are many monitoring services. if you do want to roll your own monitoring system, take a look at the performance apis, mainly performancenavigationtiming and performanceresourcetiming, but also performancemark, performancemeasure, and performancepainttiming. ...

JavaScript timers - Archive of obsolete content
s that the browser schedule a repaint of the window for the next animation frame. the method takes as an argument a callback to be invoked before the repaint. performance.now() performance.now() returns a timestamp, measured in milliseconds, accurate to one thousandth of a millisecond. this timestamp is equal to the number of milliseconds since the navigationstart attribute of the performance.timing interface. date.now() date.now() returns the number of milliseconds elapsed since 1 january 1970 00:00:00 utc. using javascript timers within workers workers can use timeouts and intervals just like the main thread can. this can be useful, for example, if you want to have your worker thread run code periodically instead of nonstop. functions available to workers in addition to the standar...

Communication between HTML and your extension - Archive of obsolete content
med relevant (load, change, dominsertnode, dominsertnodeintodocument, domactivate) and i tried them all in many different ways. some of the events only apply to certain types of elements so i included trying to modify the result of the ajax request to be of the appropriate element type (img, which supports "onload," rather than span, which doesn't, for example). the problem with the events is the timing. i wasn't sure about the difference between the capture or bubbling flag that you pass to addeventlistener but every time i would catch the event in the extension, the element from the ajax request wasn't fully updated into the html page. what that meant is that everytime the extension went looking for the element, it wasn't there yet. as a last ditch effort i tried setting a timeout using settim...

Mozilla Application Framework in Detail - Archive of obsolete content
edition 3-compliant javascript engine; java integration with a bridge to xpcom, a java dom api, the open jvm integration (oji) facility, a java webclient api, and java plug-ins; nspr, a runtime engine that provides platform-independence (across over a dozen platforms) for non-gui operating system facilities with support for threads, thread synchronization, normal file and network i/o, interval timing and calendar time, basic memory management (malloc and free) and shared library linking; psm, a set of libraries that perform cryptographic operations including setting up an ssl connection, object signing and signature verification, certificate management (including issuance and revocation), other common pki functions, and s/mime support; an sql support that provides the ability to set up data...

The Implementation of the Application Object Model - Archive of obsolete content
ggregation of data... the list goes on and on. future time-saving. xp development takes much less time than native platform development. but if we pay the cost and get xul into the system now, in the future xul development will take even less time than xp development. the additional cost up front to implement xul is worth it for the amount of time it will save in future versions of the browser. timing. it's now or never. if this approach isn't taken now, then we'll fall back into our old pattern. this is the pivotal point, because the apps are all being re-written from scratch. for this particular codebase, if we don't do this from start, we won't do it at all. why use rdf at all? ok, ok. so you've convinced me that xul is the way and the light. but why do you need to use rdf at all? nsicon...

Extentsions FAQ - Archive of obsolete content
w can we programmatically extract the subject, sender, date and the body of an e- mail when you are reading one (in thunderbird presumably)? could someone make an addressbook enhancer extension that has the ability to put pictures on a contact and other features the thunderbird address book lacks. ...

Audio for Web games - Game development
provide basic audio using the standard <audio> element and, where supported, enhance the experience using the web audio api. element and, where supported, enhance the experience using the web audio api. note: significantly, ios safari now supports the web audio api, which means it's now possible to write web-based games with native-quality audio for ios. as the web audio api allows precise timing and control of audio playback, we can use it to play samples at specific moments, which is a crucial immersive aspect of gaming. you want those explosions to be accompanied by a thundering boom, not followed by one, after all. background music with the web audio api although we can use the <audio> element to deliver linear background music that doesn't change in reaction to the game environment...

Move the ball - Game development
ery frame to make the impression of movement — just like how movement works with the movies. defining a drawing loop to keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. you can run a function over and over again using a javascript timing function such as setinterval() or requestanimationframe(). delete all the javascript you currently have inside your html file except for the first two lines, and add the following below them. the draw() function will be executed within setinterval every 10 miliseconds: function draw() { // drawing code } setinterval(draw, 10); thanks to the infinite nature of setinterval the draw() functio...

Bézier curve - MDN Web Docs Glossary: Definitions of Web-related terms
teadily on the first helper line and the end point on the second helper line. ...

Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms
css can be used in a variety of contexts, including print media and some css, in particular, that used for layout behaves differently depending on the context it is in. continuous media, therefore, identifies a context where the content is not broken up, it flows continuously. ...

First paint - MDN Web Docs Glossary: Definitions of Web-related terms
first paint, part of the paint timing api, is the time between navigation and when the browser renders the first pixels to the screen, rendering anything that is visually different from what was on the screen prior to navigation. it answers the question "is it happening?" ...

Page load time - MDN Web Docs Glossary: Definitions of Web-related terms
load times can vary greatly between users depending on device capabilities, network conditions, and, to a lesser extent, distance from the server. ...

SDP - MDN Web Docs Glossary: Definitions of Web-related terms
here is a typical sdp message: v=0 o=alice 2890844526 2890844526 in ip4 host.anywhere.com s= c=in ip4 host.anywhere.com t=0 0 m=audio 49170 rtp/avp 0 a=rtpmap:0 pcmu/8000 m=video 51372 rtp/avp 31 a=rtpmap:31 h261/90000 m=video 53000 rtp/avp 32 a=rtpmap:32 mpv/90000 sdp is never used alone, but by protocols like rtp and rtsp. ...

The "why" of web performance - Learn web development
year-old ipad while commuting home on public transportation. the same site will be slow to load, possibly verging on unusable depending on cell coverage. you might give up before it finishes loading. imagine loading that same site on a $35 huawei device in a rural india with limited coverage or no coverage. the site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse cpu impact causing browser crashes if it does load. a 22.6 mb site could take up to 83 seconds to load on a 3g network, with domcontentloaded (meaning the site's base html structure) at 31.86 seconds. and it isn't just the time taken to download that is a major problem. a lot of countries still have internet connections that bill per megabyte. our example 22.6 mb cnn.com exper...

Web performance - Learn web development
website is in milliseconds, is how fast your users perceive your site to be. these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings. measuring performance now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and apis and how we can make performance part of the web development workflow. multimedia: images the lowest hanging fruit of web performance is often media optimization. serving different media files based on each user agent's capability, size, and pixel densit...

Adding a new CSS property
ction. you must take the latter approach for properties that are part of shorthands if you want the shorthand parser to be able to reuse the longhand parser. (note that when the longhand property css_property_parse_value_list, the shorthand property parser would be assumed to be reusing the longhand parser once per item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_keyword and add a keyword table to the nscssprops class. the name of this keyword table needs to go in the nscssproplist entry; otherwise that keyword table should be null. if you need a keyword table, you should i...

Browser chrome tests
orting 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 randomly timing out and you think that's just due to it taking too long, you can extend the timeout. be aware that this is not a solution; you should investigate why your test is taking so long, since it's most likely due to a bad test design or a performance problem. if you can rewrite the test to make is shorter, split it into smaller tests, or find why it's taking so long, you should really do that instead! ...

Debugging Table Reflow
ump** **start col dump** colindex=2 isanonymous=0 constraint=3 widths=360 540 -1 -1 -1 -1 -1 -1 540 465 **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=360 540 -1 -1 -1 -1 -1 -1 -1 465 **end col dump** ***end table dump*** the column dump is implemented in nstablecolframe.cpp in the routine:void nstablecolframe::dump(print32 aindent). debug_table_reflow_timing needs to be written original document information author(s): bernd mielke other contributors: bernd mielke, josh soref last updated date: november 20, 2005 ...

mach
y? currently, mach build simply invokes client.mk as an ersatz makefile. there are no differences in terms of how the build is performed (well, at least there should not be any ideally). however - mach does offer some additional features over manual invocation of client.mk: if on windows, mach will automatically use pymake instead of gnu make, as that is preferred on windows. mach will print timings with each line of output from the build. this gives you an idea of how long things take. mach will colorize terminal output (on terminals that support it - typically most terminals except on windows) mach will scan build output for compiler warnings and will automatically record them to a database which can be queried with mach warnings-list and mach warnings-summary. not all warnings are curr...

Performance best practices for Firefox front-end engineers
will-change on the node, though this should be used sparingly. if you’re unsure why something is repainting, consider talking to our always helpful graphics team in the gfx room on matrix, and they can probably advise you. note that a significant number of the graphics team members are in the us eastern time zone (utc-5 or utc-4 during daylight saving time), so let that information guide your timing when you ask questions in the gfx room . adding nodes using documentfragments sometimes you need to add several dom nodes as part of an existing dom tree. for example, when using xul <xul:menupopup>s, you often have script which dynamically inserts <xul:menuitem>s. inserting items into the dom has a cost. if you're adding a number of children to a dom node in a loop, it's often more efficient t...

IME handling guide
es which notification should be sent to widget and/or ime. then, mozilla::imecontentobserver::imenotificationsender tries to send the pending notifications when it might become safe to do that. currently, it's tried: after a native event is dispatched from presshell::handleeventinternal() at changing focus from a windowless plugin when new focused editor receives dom "focus" event the 3rd timing may not be safe actually, but it causes a lot of oranges of automated tests. see also notifications to ime section for the detail of sending notifications. currently, widgetquerycontentevent is handled via imecontentobserver because if it has a cache of selection, it can set reply of equeryselectedtext event only with the cache. that is much faster than using contenteventhandler. e10s support...

GPU performance
works reasonably well with firefox. see also debugging with pix. nvidia perfhud - last i checked required a special build to be used. nvidia parallel nsight - haven't tried. amd gpu shaderanalyzer - will compile a shader and show the machine code and give static pipeline estimations. not that useful for firefox because all of our shaders are pretty simple. amd gpu perfstudio - i had trouble getting this to work, and can't remember whether i actually did or not. ...

Gecko Profiler FAQ
ific approach is: use it for a while, and if you notice slowness, profile it. pay attention to the red jank markers at the top. [ehsan] mike conley’s oh no reflow! add-on is helpful. how do we know when profiler output is statistically significant (for comparing across runs / across machines)? [mstange] hard to say. prefer to do comparisons by measuring your timings with code instead of by inspecting profiles. always keep in mind that profiler overhead has the potential to skew the results. is it better to profile across multiple platforms, or to focus time on windows (since that's the bulk of our users)? [mstange] in my opinion, as long as you double-check that the problems you find are actually present on windows, it doesn’t mat...

JS::PerfMeasurement
it will not have any more bits set than were set in the mask passed to the constructor, but if the os cannot or will not measure all of the requested events, then only those events that will actually be measured have their bits set. all the counter variables for events that are not being measured will have the fixed value (uint64)-1. void start() call this on a perfmeasurement instance to start timing. void stop() and call this to stop timing again. the counter variables do not update in real time; they only change when stop is called. counter values are accumulated across many start/stop cycles, and you can modify their values if you want; stop simply adds counts read back from the os to whatever is already in each counter. void reset() resets all enabled counters to zero. uint64 cpu_cycles...

Date and Time
econd components. in this form, the time zone information is important. for example, without specifying the time zone, the time 8:00am 1 may 1998 is ambiguous. the nspr data type for clock/calendar time, called an exploded time, has the time zone information in it, so that its corresponding point in absolute time is uniquely specified. note that absolute and clock times are not normally used in timing operations. for functions that deal with the measurement of elapsed time and with timeouts, see interval timing. macros for time unit conversion types and constants time parameter callback functions functions macros for time unit conversion macros for converting between seconds, milliseconds, microseconds, and nanoseconds. pr_msec_per_sec pr_usec_per_sec pr_nsec_per_sec pr_usec_per...

NSPR API Reference
descriptors directory i/o functions socket manipulation functions converting between host and network addresses memory-mapped i/o functions anonymous pipe function polling functions pollable events manipulating layers network addresses network address types and constants network address functions atomic operations pr_atomicincrement pr_atomicdecrement pr_atomicset interval timing interval time type and constants interval functions date and time types and constants time parameter callback functions functions memory management operations memory allocation functions memory allocation macros string operations pl_strlen pl_strcpy pl_strdup pl_strfree floating point number to string conversion pr_strtod pr_dtoa pr_cnvtf long long (64-bit) integ...

NSS 3.12.5 release_notes
icate undiscoverable by cert_pkixverifycert bug 518443: pk11_importandreturnprivatekey leaks an arena bug 518446: pk11_derencodepublickey leaks a certsubjectpublickeyinfo bug 518457: seckey_encodedersubjectpublickeyinfo and pk11_derencodepublickey are duplicate bug 522510: add deprecated comments to key.h and pk11func.h bug 522580: nss uses port_memcmp for comparing secret data. bug 525056: timing attack against ssl3ext.c:ssl3_serverhandlesessionticketxtn() bug 526689: ssl3 & tls renegotiation vulnerability documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation. new and revised documents available since the release of nss 3.11 include the following: build instructions nss shared db compatibility nss 3.12.5 shared libraries a...

NSS 3.14.3 release notes
pted block of data. ckm_nss_ssl3_mac_constant_time - constant-time mac operation for use when verifying a padded, mac-then-encrypted block of data using the sslv3 mac. notable changes in nss 3.14.3 cve-2013-1620 recent research by nadhem alfardan and kenny patterson has highlighted a weakness in the handling of cbc padding as used in ssl, tls, and dtls that allows an attacker to exploit timing differences in mac processing. the details of their research and the attack can be found at http://www.isg.rhul.ac.uk/tls/, and has been referred to as "lucky thirteen". nss 3.14.3 includes changes to the softoken and ssl libraries to address and mitigate these attacks, contributed by adam langley of google. this attack is mitigated when using nss 3.14.3 with an nss cryptographic module ("sof...

NSS 3.21.2 release notes
3.21.2 requires nspr 4.10.10 or newer. nss 3.21.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_2_rtm/src/ new in nss 3.21.2 new functionality no new functionality is introduced in this release. security fixes in nss 3.21.2 bug 1293334 / cve-2016-9074 - fixed a timing side channel in the tls cbc code. compatibility nss 3.21.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.21.2 shared libraries without recompiling or relinking. furthermore, applications that restrict their use of nss apis to the functions listed in nss public functions will remain com...

Hacking Tips
4, buffer); system(buf); } if you aren't running on arm, you should omit the -ex 'set arm force-mode arm' and -ex 'set arm force-mode auto'. and you should change the size()/4 to be something more apropriate for your architecture. benchmarking with sub-milliseconds (js shell) in the shell we have 2 simple ways to benchmark a script, we can either use the -b shell option (--print-timing) which will evaluate a script given on the command line without any need to instrument the benchmark and print an extra line showing the run-time of the script. the other way is to wrap the section that you want to measure with the datenow() function call which returns the number of milliseconds, with a decimal part for sub-milliseconds. js> datenow() - datenow() -0.0009765625 benchmarking wi...

Shell global objects
r([exp ...]) evaluate and print expressions to stderr. putstr([exp]) evaluate and print expression without newline. datenow() return the current time with sub-ms precision. help([name ...]) display usage and help messages. quit() quit the shell. asserteq(actual, expected[, msg]) throw if the first two arguments are not the same (both +0 or both -0, both nan, or non-zero and ===). starttimingmutator() start accounting time to mutator vs gc. stoptimingmutator() stop accounting time to mutator vs gc and dump the results. throwerror() throw an error from js_reporterror. intern(str) internalize str in the atom table. getslx(obj) get script line extent. evalcx(s[, o]) evaluate s in optional sandbox object o. if (s == '' && !o) return new o with eager standard classes, if (s == '...

Animated PNG graphics
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. 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 ...

Starting WebLock
rking apis that gecko provides. the netscape portable runtime library thenetscape portable runtime library (nspr) is a platform-independent library that sits below xpcom. as a layer of abstraction above the operating system, the nspr allows gecko applications to be platform independent by providing the following system-level facilities: threads thread synchronization file and network i/o timing and intervals memory management shared library linking the nspr is included in the gecko sdk. to keep things as simple as possible, we'll read the file into memory using standard ansi file i/o, but for examples and information about how to usenecko, the gecko networking libraries, see http://www.mozilla.org/projects/netlib/. using nsilocalfile for reading data an nsifile object returned f...

Migrating from Firebug - Firefox Developer Tools
different kinds of information for the selected request. they contain a headers, params, response and cookies panel. a preview of the response is shown within specifically named panels like html. the network monitor has a preview panel for this purpose. it doesn't provide information about the cached data yet (see bug 859051), but provides a security tab in addition to firebug's information and a timings tab showing detailed information about the network timings. view request timings firebug offers detailed information about the network timings related to a request by hovering the timeline column within its net panel. the network monitor shows this information within a timings side panel when you select a request. view remote address the remote address of a request is shown within the remote...

Network request list - Firefox Developer Tools
ngs to a known tracker that would be blocked with content blocking enabled. timeline the request list also displays a timeline for the different parts of each request. each timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page. for more details on the color-coding used here, see the section on the timings page. starting in firefox 45, the timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered. the red line marks the point at which the page's load event is triggered. blocking specific urls if you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you ...

Animation.currentTime - Web APIs
ber representing the current time in milliseconds, or null to deactivate the animation. examples in the drink me/eat me game, alice's height is animated so it 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...

Animation.onfinish - Web APIs
vent handler is set. examples animation.onfinish is used several times in the alice in web animations api land growing/shrinking alice game. here is one instance where we add pointer events back to an element after its opacity animation has faded it in: // add an animation to the game's ending credits var endingui = document.getelementbyid("ending-ui"); var bringui = endingui.animate(keysfade, timingfade); // pause said animation's credits bringui.pause(); // this function removes pointer events on the credits. hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status comment web animationsthe definition o...

Animation.pause() - Web APIs
eated with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; // when the user releases t...

Animation.play() - Web APIs
change) to play forward, causing her to get bigger, as well as triggering the cake's animation. two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately. nommingcake.pause(); // this function will play when ever a user clicks or taps var growalice = function() { // play alice's animation. alicechange.play(); // play the cake's animation. nommingcake.play(); } // when a user holds their mouse down or taps, call growalice to make all the animations play. cak...

Animation.timeline - Web APIs
animation interface returns or sets the timeline associated with this animation. a timeline is a source of time values for synchronization purposes, and is an animationtimeline-based object. by default, the animation's timeline and the document's timeline are the same. syntax var animationstimeline = animation.timeline; animation.timeline = newtimeline; value a timeline object to use as the timing source for the animation, or null to use the default, which is the document's timeline. examples here we set the animation's timeline to be the same as the document's timeline (this is the default timeline for all animations, by the way): animation.timeline = document.timeline; specifications specification status comment web animationsthe definition of 'animation.tim...

AnimationEffect - Web APIs
the animationeffect interface of the web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by css animations and transitions). methods animationeffect.gettiming() returns the effecttiming object associated with the animation containing all the animation's timing values. animationeffect.getcomputedtiming() returns the calculated timing properties for this animationeffect. animationeffect.updatetiming() updates the specified timing properties of this animationeffect. specifications specification status comment web animationsthe definition of 'animationeffect' in that specification. working draft editor's draft. ...

AnimationPlaybackEvent.currentTime - Web APIs
the currenttime read-only property of the animationplaybackevent interface represents the current time of the animation that generated the event at the moment the event is queued. this will be unresolved if the animation was idle at the time the event was generated. value a number representing the current time in milliseconds, or null. reduced time precision to offer protection against timing attacks and fingerprinting, the precision of playbackevent.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 precision (2ms) in firefox 60 playbackevent.currenttime; // 23.404 // 24.192 // 25.514 // ... // reduced time precision with `...

AnimationTimeline.currentTime - Web APIs
currenttime read-only property of the web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive. syntax var currenttime = animationtimeline.currenttime; value a number representing the timeline's current time in milliseconds, or null if the timeline is inactive. reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animationtimeline.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 precision (2ms) in firefox 60 animationtimeline.currenttime; // 23.404 // 24.192 // 25.514 // ... // reduced time preci...

AudioBufferSourceNode - Web APIs
the audiobuffersourcenode interface is an audioscheduledsourcenode which represents an audio source consisting of in-memory audio data, stored in an audiobuffer. it's especially useful for playing back audio which has particularly stringent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being played from disk or the network. to play sounds which require accurate timing but must be streamed from the network or played from disk, use a audioworkletnode to implement its playback. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" vi...

BaseAudioContext.currentTime - Web APIs
can be used for scheduling audio playback, visualizing timelines, etc. it starts at 0. syntax var curtime = baseaudiocontext.currenttime; example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix ... console.log(audioctx.currenttime); reduced time precision to offer protection against timing attacks and fingerprinting, the precision of audioctx.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 precision (2ms) in firefox 60 audioctx.currenttime; // 23.404 // 24.192 // 25.514 // ... // reduced time precision with `privac...

Battery Status API - Web APIs
the battery status api extends window.navigator with a navigator.getbattery() method returning a battery promise, which is resolved in a batterymanager object providing also some new events you can handle to monitor the battery status. example in this example, we watch for changes both to the charging status (whether or not we're plugged in and charging) and for changes to the battery level and timing. this is done by listening for the chargingchange, levelchange, chargingtimechange, dischargingtimechange events. navigator.getbattery().then(function(battery) { function updateallbatteryinfo(){ updatechargeinfo(); updatelevelinfo(); updatecharginginfo(); updatedischarginginfo(); } updateallbatteryinfo(); battery.addeventlistener('chargingchange', function(){ updatec...

CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
to prevent automatic capture of frames, so that frames are only captured when requestframe() is called, specify a value of 0 for the capturestream() method when creating the stream. ...

console - Web APIs
her stuff..."); console.timeend("answer time"); will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console: notice that the timer's name is displayed both when the timer is started and when it's stopped. note: it's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. if you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output. stack traces the console object also supports outputting a stack trace; t...

Console API - Web APIs
concepts and usage the console api started as a largely proprietary api, with different browsers implementing it, albeit it in inconsistent ways. the console api spec was created to define consistent behavior, and all modern browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions. ...

DOMHighResTimeStamp - Web APIs
), with the fractional part of the number indicating fractions of a millisecond. however, if the browser is unable to provide a time value accurate to 5 µs (due, for example, to hardware or software constraints), the browser can represent the value as a time in milliseconds accurate to a millisecond. also note the section below on reduced time precision controlled by browser preferences to avoid timing attacks and fingerprinting. further, if the device or operating system the user agent is running on doesn't have a clock accurate to the microsecond level, they may only be accurate to the millisecond. reduced time precision to offer protection against timing attacks and fingerprinting, the precision of time stamps might get rounded depending on browser settings. in firefox, the privacy.reduce...

DocumentTimeline.DocumentTimeline() - Web APIs
st that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds into their animations: var cats = document.queryselectorall('.sharedtimelinecat'); cats = array.prototype.slice.call(cats); var sharedtimeline = new documenttimeline({ origintime: 500 }); cats.foreach(function(cat) { var catkeyframes = new keyframeeffect(cat, keyframes, timing); var catanimation = new animation(catkeyframes, sharedtimeline); catanimation.play(); }); specifications specification status comment web animationsthe definition of 'documenttimeline()' in that specification. working draft editor's draft. ...

DocumentTimeline - Web APIs
ions, thus allowing us to manipulate just that group of animations via their shared timeline. this bit of code would start all the cats animating 500 milliseconds into their animations: const cats = document.queryselectorall('.sharedtimelinecat'); const sharedtimeline = new documenttimeline({ origintime: 500 }); for (const cat of cats) { const catkeyframes = new keyframeeffect(cat, keyframes, timing); const catanimation = new animation(catkeyframes, sharedtimeline); catanimation.play(); } specifications specification status comment web animationsthe definition of 'documenttimeline' in that specification. working draft editor's draft. ...

Element: auxclick event - Web APIs
you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button. on windows this is usually autoscroll, and on macos and linux this is usually clipboard paste. this can be done by preventing the default behaviour of the mousedown or pointerdown event. additionally, you may need to avoid opening a system context menu after a right click. due to timing differences between operating systems, this too is not a preventable default behavior of auxclick. instead, this can be done by preventing the default behavior of the contextmenu event. examples in this example we define functions for two event handlers — onclick and onauxclick. the former changes the color of the button background, while the latter changes the button foreground (text) color.

Event.timeStamp - Web APIs
tml <p> focus this iframe and press any key to get the current timestamp for the keypress event. </p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp 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 precision (2ms) in firefox 60 event.timestamp; // 1519211809934 // 1519211810362 // 1519211811670 // ... // reduced time precision wi...

File.lastModified - Web APIs
current time from date.now() at the moment the file object gets created. const filewithdate = new file([], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 1485903600000 const filewithoutdate = new file([], 'file.bin'); console.log(filewithoutdate.lastmodified); //returns current time reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodified 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 precision (2ms) in firefox 60 somefile.lastmodified; // 1519211809934 // 1519211810362 // 1519211811670 // ... // reduced time...

File.lastModifiedDate - Web APIs
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 precision (2ms) in firefox 60 somefile.lastmodifieddate.gettime(); // 1519211809934 // 1519211810362 // 1519211811...

Gamepad.timestamp - Web APIs
the gamepad.timestamp property of the gamepad interface returns a domhighrestimestamp representing the last time the data for this gamepad was updated. the idea behind this is to allow developers to determine if the axes and button data have been updated from the hardware. the value must be relative to the navigationstart attribute of the performancetiming interface. values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. note: this property is not currently supported anywhere. syntax readonly attribute domhighrestimestamp timestamp; example var gp = navigator.getgamepads()[0]; console.log(gp.timestamp); value a domhighrestimestamp. specifications sp...

Using the Gamepad API - Web APIs
the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0). timestamp: this returns a domhighrestimestamp representing the last time the data for this gamepad was updated, allowing developers to determine if the axes and button data have been updated from the hardware. the value must be relative to the navigationstart attribute of the performancetiming interface. values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. note that this property is not currently supported in firefox. note: the gamepad object is available on the gamepadconnected event rather than the window object itself, for security reasons. once we have a ...

HTMLMediaElement.currentTime - Web APIs
dia that have expired from the media buffer. also, media whose timeline doesn't begin at 0 seconds cannot be seeked to a time before its timeline's earliest time. the length of the media in seconds can be determined using the duration property. example var video = document.createelement('video'); console.log(video.currenttime); usage notes reduced time precision to offer protection against timing attacks and fingerprinting, browsers may round or otherwise adjust the value returned by currenttime. specifications specification status comment html living standardthe definition of 'htmlmediaelement.currenttime' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.currenttime' in that specification. rec...

In depth: Microtasks and the JavaScript runtime environment - Web APIs
that's what this section covers introduction javascript is an inherently single-threaded language. it was designed in an era in which this was a positive choice; there were few multi-processor computers available to the general public, and the expected amount of code that would be handled by javascript was relatively low at that time. ...

IntersectionObserverEntry.intersectionRatio - Web APIs
ng is true or 0 if not. example in this simple example, an intersection callback sets each target element's opacity to the intersection ratio of that element with the root. function intersectioncallback(entries) { entries.foreach(function(entry) { entry.target.style.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.intersectionratio' in that specification. working draft initial definition ...

IntersectionObserverEntry.isIntersecting - Web APIs
callback is used to update a counter of how many targeted elements are currently intersecting with the intersection root. function intersectioncallback(entries) { entries.foreach(function(entry) { if (entry.isintersecting) { intersectingcount += 1; } else { intersectingcount -= 1; } }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.isintersecting' in that specification. working draft initial definition ...

IntersectionObserverEntry.target - Web APIs
ntersectionobserver.observe() experienced a change in intersection with the root. example in this simple example, each targeted element's opacity is set to its intersectionratio. function intersectioncallback(entries) { entries.foreach(function(entry) { entry.target.opacity = entry.intersectionratio; }); } to see a more concrete example, take a look at handling intersection changes in timing element visibility with the intersection observer api. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.target' in that specification. working draft initial definition ...

IntersectionObserverEntry.time - Web APIs
intersection change occurred relative to the time at which the document was created. syntax var time = intersectionobserverentry.time; value a domhighrestimestamp which indicates the time at which the target element experienced the intersection change described by the intersectionobserverentry. the time is specified in milliseconds since the creation of the containing document. example see timing element visibility with the intersection observer api for a complete example which uses the time property to track how long elements are visible to the user. specifications specification status comment intersection observerthe definition of 'intersectionobserverentry.time' in that specification. working draft initial definition ...

KeyframeEffect.getKeyframes() - Web APIs
ecifying start and end states in percentages in css stylesheets using @keyframes. this will be null if the keyframe is automatically spaced using keyframeeffect.spacing. computedoffset the computed offset for this keyframe, calculated when the list of computed keyframes was produced according to keyframeeffect.spacing. unlike offset, above, the computedoffset is never null. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be absent if the composite operation specified on the effect is being used. examples in the red queen race example, we can inspect alice and the redqueen's animation to see its...

KeyframeEffect.setKeyframes() - Web APIs
as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be auto if the composite operation specified on the effect is being used. return value void. exceptions exception explanation typeerror one or m...

KeyframeEffect.target - Web APIs
y of a keyframeeffect interface represents the element or pseudo-element being animated. it may be null for animations that do not target a specific element. it performs as both a getter and a setter, except with animations and transitions generated by css. syntax var targetelement = document.getelementbyid("elementtoanimate"); var keyframes = new keyframeeffect( targetelement, keyframeblock, timingoptions ); // returns #elementtoanimate keyframes.target; // assigns keyframes a new target keyframes.target = newtargetelement; value an element, csspseudoelement, or null. examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, ...

KeyframeEffectOptions - Web APIs
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. ...

Long Tasks API - Web APIs
= 0; i < perfentries.length; i++) { // process long task notifications: // report back for analytics and monitoring // ... } }); // register observer for long task notifications observer.observe({entrytypes: ["longtask"]}); // long script execution after this will result in queueing // and receiving "longtask" entries in the observer. interfaces performancelongtasktiming reports instances of long tasks. taskattributiontiming returns information about the work involved in a long task and its associate frame context. specifications specification status comment long tasks api 1 working draft initial definition. ...

Page Visibility API - Web APIs
some processes are exempt from this throttling behavior. in these cases, you can use the page visibility api to reduce the tabs' performance impact while they're hidden. tabs which are playing audio are considered foreground and aren’t throttled. tabs running code that's using real-time network connections (websockets and webrtc) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed. indexeddb processes are also left unthrottled in order to avoid timeouts. example view live example (video with sound). the example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code: // set the name of the hidden property and the change event for visibility var hidden, v...

performance.clearMarks() - Web APIs
nce.mark("dog"); logmarkcount() // "found this many entries: 6" // delete just the "squirrel" performancemark entries. performance.clearmarks('squirrel'); logmarkcount() // "found this many entries: 4" // delete all of the performancemark entries. performance.clearmarks(); logmarkcount() // "found this many entries: 0" specifications specification status comment user timing level 2the definition of 'clearmarks()' in that specification. working draft clarifies clearmarks(). user timingthe definition of 'clearmarks()' in that specification. recommendation basic definition. ...

performance.clearMeasures() - Web APIs
// "found this many entries: 5" // delete just the "from navigation" performancemeasure entries. performance.clearmeasures("from navigation"); logmeasurecount() // "found this many entries: 3" // delete all of the performancemeasure entries. performance.clearmeasures(); logmeasurecount() // "found this many entries: 0" specifications specification status comment user timing level 2the definition of 'clearmeasures()' in that specification. working draft clarifies clearmeasures(). user timingthe definition of 'clearmeasures()' in that specification. recommendation basic definition. ...

Performance.memory - Web APIs
totaljsheapsize the total allocated heap size, in bytes. usedjsheapsize the currently active segment of js heap, in bytes. ...

Performance.navigation - Web APIs
this property is deprecated in the navigation timing level 2 specification. the legacy performance.navigation read-only property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the number of redirections needed to fetch the resource. this property is not available in workers. syntax navobject = performance.navigation; specifications specification status comment navigation timingthe definition of 'performance.navigation' in that specification. recommendation initial definition. ...

PerformanceEntry.startTime - Web APIs
e timestamp with a value of "0". "resource" - returns the timestamp immediately before the browser starts fetching the resource. this property is read only . syntax entry.starttime; return value a domhighrestimestamp representing the first timestamp when the performance entry was created. note: if the performance entry has an entrytype of "resource" (i.e. the entry is a performanceresourcetiming object), this property returns the performanceentry.fetchstart timestamp. example the following example shows the use of the starttime property. function run_performanceentry() { log("performanceentry support ..."); if (performance.mark === undefined) { log("... performance.mark not supported"); return; } // create some performance entries via the mark() method performance.

PerformanceMark - Web APIs
anceentry.entrytype returns "mark". performanceentry.name returns the name given to the mark when it was created via a call to performance.mark(). performanceentry.starttime returns the domhighrestimestamp when performance.mark() was called. performanceentry.duration returns "0". (a mark has no duration.) methods this interface has no methods. example see the example in using the user timing api. specifications specification status comment user timing level 2the definition of 'performancemark' in that specification. working draft user timingthe definition of 'performancemark' in that specification. recommendation basic definition. ...

PerformanceMeasure - Web APIs
a call to performance.measure(). performanceentry.starttime returns a timestamp given to the measure when performance.measure() was called. performanceentry.duration returns a domhighrestimestamp that is the duration of the measure (typically, the measure's end mark timestamp minus its start mark timestamp). methods this interface has no methods. example see the example in using the user timing api. specifications specification status comment user timing level 2the definition of 'performancemeasure' in that specification. working draft user timingthe definition of 'performancemeasure' in that specification. recommendation basic definition. ...

PerformanceNavigation.redirectCount - Web APIs
this interface of this property is deprecated in the navigation timing level 2 specification. please use the performancenavigationtiming interface instead. the legacy performancenavigation.redirectcount read-only property returns an unsigned short representing the number of redirects done before reaching the page. syntax amount = performancenavigation.redirectcount; specifications specification status comment navigation timingthe definition of 'performancenavigation.redirectcount' in that specification. recommendation initial definition. ...

PerformanceObserverEntryList.getEntries() - Web APIs
rmanceentryfilteroptionsoptional is a performanceentryfilteroptions dictionary, having the following fields: "name", the name of a performance entry. "entrytype", the entry type. the valid entry types are listed in the performanceentry.entrytype method. "initiatortype", the type of the initiating resource (for example an html element). the values are defined by the performanceresourcetiming.initiatortype interface. this parameter is currently not supported on chrome or opera. return value a list of explicitly observed performanceentry objects that meets the criteria of the filter. the items will be in chronological order based on the entries' starttime. if no objects that meet the filter are found, an empty list is returned. if no argument is given, all entries are returned. ...

Using Performance Timeline - Web APIs
cument are defined in the performance timeline standard which has two levels: performance timeline level 2; editors draft; work in progress. this version introduces performance observers (and the performanceobserver and performanceobserverentrylist interfaces). performance timeline; w3c recommendation 12 december 2013 see also performance timeline (overview) a primer for web performance timing apis ...

Performance Timeline - Web APIs
le, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices. performance observers : as shown in the performanceobserver interface's browser compatibility table, this interface has no shipping implementations. to test your browser's support for these interfaces, run the perf-api-support application. see also a primer for web performance timing apis ...

RTCRtpSynchronizationSource - Web APIs
since rtcrtpsynchronizationsource implements rtcrtpcontributingsource, its properties are also available. the information provided is based on the last ten seconds of media received. while the published specification describes this as an interface, it has since been changed to a dictionary in follow-up drafts. ...

Using server-sent events - Web APIs
connection is terminated with the .close() method. evtsource.close(); event stream format the event stream is a simple stream of text data which must be encoded using utf-8. messages in the event stream are separated by a pair of newline characters. a colon as the first character of a line is in essence a comment, and is ignored. note: the comment line can be used to prevent connections from timing out; a server can send a comment periodically to keep the connection alive. each message consists of one or more lines of text listing the fields for that message. each field is represented by the field name, followed by a colon, followed by the text data for that field's value. fields each message received has some combination of the following fields, one per line: event a string identify...

A basic 2D WebGL animation example - Web APIs
null; let glcanvas = null; // aspect ratio and coordinate system // details let aspectratio; let currentrotation = [0, 1]; let currentscale = [1.0, 1.0]; // vertex information let vertexarray; let vertexbuffer; let vertexnumcomponents; let vertexcount; // rendering data shared with the // scalers. ...

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
ror, ignoring it, since it doesn't matter in this context. perfect negotiation with the updated api the updated code takes advantage of the fact that you can now call setlocaldescription() with no parameters so it just does the right thing for you, as well as the fact that setremotedescription() automatically rolls back if necessary. this lets us get rid of the need to use a promise to keep the timing in order, since the rollback becomes an essentially atomic part of the setremotedescription() call. let ignoreoffer = false; signaler.onmessage = async ({ data: { description, candidate }}) => { try { if (description) { const offercollision = (description.type == "offer") && (makingoffer || pc.signalingstate != "stable"); ignoreoffer = !polite && ...

Fundamentals of WebXR - Web APIs
ate the imagery shown to the user based on that movement. webxr additionally provides support for accepting inputs from control devices such as handheld vr controllers or specialized mixed reality gamepads. webxr is not a rendering technology, and provides no features for actually managing 3d data or rendering it to the display. this is an important fact to keep in mind; while webxr manages the timing, scheduling, and the various points of view relevant when drawing the scene, it does not actually know how to load and manage models, render and texture them, and so forth. that part is entirely up to you. fortunately, webgl and the various webgl-based frameworks and libraries are available to make it much easier to deal with all of that. how is webxr different from webvr? webvr was generally c...

Geometry and reference spaces in WebXR - Web APIs
een the two units for measuring angles. const radians_per_degree = math.pi / 180.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks. all times and durations in webxr are measured using the domhighrestimestamp type, which is a double-precision floating-point value specifying the time in milliseconds relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform and hardware. time is primarily used to determine th...

Keyframe Formats - Web APIs
as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this value is null or missing, the keyframe will be evenly spaced between adjacent keyframes. easing the timing function used from this keyframe until the next keyframe in the series. composite the keyframeeffect.composite operation used to combine the values specified in this keyframe with the underlying value. this will be auto if the composite operation specified on the effect is being used. specifications specification status comment web animationsthe definition of '...

Web Animations API Concepts - Web APIs
n in earnest among mozilla firefox and google chrome developers to create the one animation spec to rule them all: the web animations api. now we’ve got the waapi for future animation specifications to piggyback on, allowing them to to remain consistent and play well together. it also provides a point of reference all browsers can adhere to with the currently available specs. the two models: timing and animation the web animations api runs on top of two models, one that handles time—timing—and one that handles visual change over time—animation. the timing model keeps track of how far along a set timeline we've come. the animation model determines what the animated object should look like at any given time. timing the timing model is the backbone of working with the waapi. each docu...

Web Audio API best practices - Web APIs
ds to set these values, they will take precedence over the above property setting. if for example, you want the gain value to be raised to 1 in 2 seconds time, you can do this: gainnode.gain.setvalueattime(1, audioctx.currenttime + 2); it will override the previous example (as it should), even if it were to come later in your code. bearing this in mind, if your website or application requires timing and scheduling, it's best to stick with the audioparam methods for setting values. if you're sure it doesn't, setting it with the value property is fine. ...

Web Audio API - Web APIs
io. a simple, typical workflow for web audio would look something like this: create audio context inside the context, create sources — such as <audio>, oscillator, stream create effects nodes, such as reverb, biquad filter, panner, compressor choose final destination of audio, for example your system speakers connect the sources up to the effects, and the effects to the destination. timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. so applications such as drum machines and sequencers are well within reach. the web audio api also allows us to control how audio is spatialized. using a system based on a source-listener model, it allows contr...

Functions and classes available to Web Workers - Web APIs
pi provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). 53.0 (53) only on mobile (yes) only on mobile no support no support notifications allows web pages to control the display of system notifications to the end user 41 (41) ? ? ? performance the performance interface represents timing-related performance information for the given page. 34.0 (34.0) no support 33.0 no support performanceentry, performancemeasure, performancemark, performanceobserver, performanceresourcetiming enables retrieval and analysis of detailed data regarding various aspects of an application's network performance. (yes) (yes) (yes) (yes) promise javascript ...

Window.performance - Web APIs
the window interface's performance property returns a performance object, which can be used to gather performance information about the current document. it serves as the point of exposure for the performance timeline api, the high resolution time api, the navigation timing api, the user timing api, and the resource timing api. syntax performancedata = window.performance; value a performance object offering access to the performance and timing-related information offered by the apis it exposes. specifications specification status comment high resolution timethe definition of 'window.performance' in that specification. recommendation defines now() method. ...

Window.requestAnimationFrame() - Web APIs
obsolete initial definition ...

Window - Web APIs
e browser window. window.outerwidth read only gets the width of the outside of the browser window. window.pagexoffset read only an alias for window.scrollx. window.pageyoffset read only an alias for window.scrolly window.parent read only returns a reference to the parent of the current window or subframe. window.performance read only returns a performance object, which includes the timing and navigation attributes, each of which is an object providing performance-related data. see also using navigation timing for additional information and examples. window.personalbar read only returns the personalbar object, whose visibility can be toggled in the window. window.screen read only returns a reference to the screen object associated with the window. window.screenx and window.s...

ARIA live regions - Accessibility
ent that changed compared to the previous content will be announced. for instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users. one way around this would be to first clear the contents of the live region, and then inject the new content. however, this can sometimes be unreliable, as it's dependent on the exact timing of these two updates. aria-atomic="true" ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "time: 17:34"). <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> note: as observed, setting/updating the innerhtml again would cause the whole text to be read again, whether or not you set aria-atomic="true", so the above ...

ARIA: timer role - Accessibility
ent that changed compared to the previous content will be announced. for instance, when the clock changes from "17:33" to "17:34", assistive technologies will only announce "4", which won't be very useful to users. one way around this would be to first clear the contents of the live region, and then inject the new content. however, this can sometimes be unreliable, as it's dependent on the exact timing of these two updates. aria-atomic="true" ensures that each time the live region is updated, the entirety of the content is announced in full (e.g. "time: 17:34"). <div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> accessibility concerns improperly using the timer role can unintentionally xxx specifications specification status accessible rich inte...

Cognitive accessibility - Accessibility
or control it, unless it's an essential functionality. "essential" means that removing the moving, blinking, scrolling, or auto-updating information would fundamentally change the meaning of the content and/or functionality, and information and functionality cannot be achieved in another way that would conform. this includes animated gifs, if the gif animates for more than 5 seconds. additional timing criteria to consider are: people who have cognitive or language limitations may need more time to read and to understand. for improved usability remove any time limit. timed content should also be avoided, with exceptions for non-interactive synchronized media and real-time events. people with attention deficit disorders should be able to focus on content without distractions. the user should...

Accessibility documentation index - Accessibility
st wcag, for the purposes of this writing). 96 keyboard accessibility, keyboard if an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option). 97 operable accessibility, focus, navigation, principle 2, timing, wcag, web content accessibility guidelines, headings, keyboard, keyboard trap, labels, operable, seizures this article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the operable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. operable states that user interface components and navigation must be o...

Operable - Accessibility
nctionality available from a keyboard. guideline 2.2 — enough time: provide users enough time to read and use content this guideline covers situations in which functionality may have a time limit. for example, purchases sometimes need to be completed within a time limit for security reasons. success criteria how to conform to the criteria practical resource 2.2.1 timing is adjustable (a) for functionality with time limits (e.g. completing a hotel or flight booking often has a time limit), the user should be given controls to allow them to adjust, extend or turn off the time limit. exceptions to this are activities with time limits longer than 20 hours, real time events (e.g. live multiplayer games), and any other activity that requires a time limit ...

Perceivable - Accessibility
he existing audio does not convey the full meaning expressed by the video. 1.2.6 provide sign language equivalent to prerecorded audio (aaa) an equivalent sign language video should be provided for any prerecorded content containing audio. 1.2.7 provide extended video with audio descriptions (aaa) where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g., there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 1.2.8 provide an alternative for prerecorded media (aaa) for all content that features video, a descriptive text transcript should be provided, for example a script of th...

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. ...

CSS data types - CSS: Cascading Style Sheets
see also css units and values introduction to css: values and u...

<alpha-value> - CSS: Cascading Style Sheets
is used. values outside the range of 0 to 1 are permitted, but are clamped to like within the range 0 to 1. if the alpha value is given as a percentage, 0% corresponds to fully transparent while 100% indicates fully opaque. interpolation when animated, values of the <alpha-value> css data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. examples setting text color opacity here an alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold...

animation-direction - CSS: Cascading Style Sheets
mal the animation plays forwards each cycle. in other words, each time the animation cycles, the animation will reset to the beginning state and start over again. this is the default value. reverse the animation plays backwards each cycle. in other words, each time the animation cycles, the animation will reset to the end state and start over again. animation steps are performed backwards, and timing functions are also reversed. for example, an ease-in timing function becomes ease-out. alternate the animation reverses direction each cycle, with the first iteration being played forwards. the count to determine if a cycle is even or odd starts at one. alternate-reverse the animation reverses direction each cycle, with the first iteration being played backwards. the count to determine if a c...

<color> - CSS: Cascading Style Sheets
olor. interpolation in animations and gradients, <color> values are interpolated on each of their red, green, and blue components. each component is interpolated as a real, floating-point number. note that interpolation of colors happens in the alpha-premultiplied srgba color space to prevent unexpected gray colors from appearing. in animations, the interpolation's speed is determined by the timing function. accessibility considerations some people have difficulty distinguishing colors. the wcag 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. see color and color contrast for more information. examples color value tester in this example we provide a <div> and a text input. entering a valid color into the input...

<integer> - CSS: Cascading Style Sheets
her values like 224-1 and 230-1 were also proposed. however, the latest spec doesn't specify a range anymore. interpolation when animated, values of the <integer> data type are interpolated using discrete, whole steps. the calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. the speed of the interpolation is determined by the timing function associated with the animation. examples valid integers 12 positive integer (without a leading + sign) +123 positive integer (with a leading + sign) -456 negative integer 0 zero +0 zero, with a leading + -0 zero, with a leading - invalid integers 12.0 this is a <number>, not an <integer>, though it represents an integer. 12. ...

<length> - CSS: Cascading Style Sheets
s to render at exactly one millimeter regardless of the size or resolution of the display. this is rarely actually what you want, but may be useful in particular for mobile devices. interpolation when animated, values of the <length> data type are interpolated as real, floating-point numbers. the interpolation happens on the calculated value. the speed of the interpolation is determined by the timing function associated with the animation. examples length unit comparison the following demo provides you with an input field in which you can enter a <length> value (e.g. 300px, 50%, 30vw) to set the width of a result bar that will appear below it once you've pressed return. this allows you to compare and contrast the effect of different length units. html <div class="outer"> <div class="i...

<number> - CSS: Cascading Style Sheets
onent. syntax the syntax of <number> extends the syntax of <integer>. a fractional value is represented by a . followed by one or more decimal digits, and may be appended to an integer. there is no unit associated with numbers. interpolation when animated, values of the <number> css data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. examples valid numbers 12 a raw <integer> is also a <number>. 4.01 positive fraction -456.8 negative fraction 0.0 zero +0.0 zero, with a leading + -0.0 zero, with a leading - .60 fractional number without a leading zero 10e3 scientific notation -3.4e-2 complicated scientific notation invalid...

<percentage> - CSS: Cascading Style Sheets
lowed by the percentage sign (%). optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. as with all css dimensions, there is no space between the symbol and the number. interpolation when animated, values of the <percentage> data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. examples width and margin-left <div style="background-color:navy;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="...

<position> - CSS: Cascading Style Sheets
[ <length> | <percentage> ] ] && [ [ top | bottom ] [ <length> | <percentage> ] ] ] note: the background-position property also accepts a three-value syntax. this is not allowed in other properties that use <position>. interpolation when animated, a point's abscissa and ordinate values are interpolated independently. however, because the speed of the interpolation is determined by a single timing function for both coordinates, the point will move in a straight line. examples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px invalid positions left right bottom top 10px 15px 20px 15px specifications specification status comment css values and units module level 3the definition of '<position>' in that specifica...

scroll-behavior - CSS: Cascading Style Sheets
. syntax /* keyword values */ scroll-behavior: auto; scroll-behavior: smooth; /* global values */ scroll-behavior: inherit; scroll-behavior: initial; scroll-behavior: unset; the scroll-behavior property is specified as one of the keyword values listed below. values auto the scrolling box scrolls instantly. smooth the scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. user agents should follow platform conventions, if any. formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav>...

<shape> - CSS: Cascading Style Sheets
to the top border of the element's box. left is a <length> representing the offset for the left of the rectangle relative to the left border of the element's box. interpolation when animated, values of the <shape> data type are interpolated over their top, right, bottom, and left components, each treated as a real, floating-point number. the speed of the interpolation is determined by the timing function associated with the animation. example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment css level 2 (revision 1)the definition of '<shape>' in that specification. recommendation defines with the clip property. browser compatibility the compatibility table on this page is generated from structur...

visibility - CSS: Cascading Style Sheets
ll remove it from the accessibility tree. this will cause the element and all its descendant elements to no longer be announced by screen reading technology. interpolation visibility values are interpolable between visible and not-visible. one of the start or ending values must therefore be visible or no interpolation can happen. the value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint. notes support for visibility: collapse is missing or partially incorrect in some modern browsers. it may not be correctly treated like visibility: hidden on e...

Event reference
html5 media the playback rate has changed. readystatechange event html5 and xmlhttprequest the readystate attribute of a document has changed. repeatevent timeevent svg a smil animation element is repeated. reset event dom l2, html5 a form is reset. resize uievent dom l3 the document view has been resized. resourcetimingbufferfull performance resource timing the browser's resource timing buffer is full. result speechrecognitionevent web speech api the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app. resume speechsynthesisevent web speech api a paused utterance is resu...

Overview of events and handlers - Developer guides
rn web browsers can handle. events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing. events and event handling become central to web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering. initially, browsers wait, until they receive all of the resources associated with a page, to parse, process, draw, and present the page to the u...

Event developer guide - Developer guides
you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on h...

HTML5 Parser - Developer guides
example, firefox-only intranets or webkit-oriented mobile sites), then you might have tags that match this pattern, and they will behave differently with gecko 2. calling document.write() during parsing prior to html5, gecko and webkit allowed calls to document.write() during parsing to insert content into the source stream. this behavior was inherently racy, as the content was inserted into a timing-dependent point in the source stream. if the call happened after the parser was done, the inserted content replaced the document. in ie, such calls are either ignored or imply a call to document.open(), replacing the document. in html5, document.write() can only be called from a script that is created by a <script> tag that does not have the async or defer attributes set. with the html5 parser, c...

Using Promises - JavaScript
rn a new function that accepts an initial value to be passed through the composition pipeline: const transformdata = composeasync(func1, func2, func3); const result3 = transformdata(data); in ecmascript 2017, sequential composition can be done more simply with async/await: let result; for (const f of [func1, func2, func3]) { result = await f(result); } /* use last result (i.e. result3) */ timing to avoid surprises, functions passed to then() will never be called synchronously, even with an already-resolved promise: promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2 instead of running immediately, the passed-in function is put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the javascript event loop, i.e. pr...

JavaScript Guide - JavaScript
ns indexed collections arrays typed arrays keyed collections map weakmap set weakset working with objects objects and properties creating objects defining methods getter and setter details of the object model prototype-based oop creating object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators iterables generators meta programming proxy handlers and traps revocable proxy reflect javascript modules exporting importing default exports renaming features aggregating modules dynamic module loading next » ...

Date.prototype.getTime() - JavaScript
eractive 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. syntax dateobj.gettime() return value a number representing the milliseconds elapsed between 1 january 1970 00:00:00 utc and the given date. reduced time precision to offer protection against timing attacks and fingerprinting, the precision of new date().gettime() might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20µs in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60 new date().gettime(); // 1519211809934 // 1519211810362 // 1519211811670 // ... // reduced time p...

Date.now() - JavaScript
enting the milliseconds elapsed since the unix epoch. polyfill this method was standardized in ecma-262 5th edition. engines which have not been updated to support this method can work around the absence of this method using the following shim: if (!date.now) { date.now = function now() { return new date().gettime(); }; } examples reduced time precision to offer protection against timing attacks and fingerprinting, the precision of date.now() might get rounded depending on browser settings. in firefox, the privacy.reducetimerprecision preference is enabled by default and defaults to 20µs in firefox 59; in 60 it will be 2ms. // reduced time precision (2ms) in firefox 60 date.now() // 1519211809934 // 1519211810362 // 1519211811670 // ... // reduced time precision with `priva...

Autoplay guide for media and Web Audio APIs - Web media technologies
user input event. this is done by calling the media element's play() method. note: it is strongly recommended that you use the autoplay attribute whenever possible, because support for autoplay preferences are more widespread for the autoplay attribute than for other means of playing media automatically. it also lets the browser take responsibility for starting playback, letting it optimize the timing of that taking place. example: playing video this simple example plays the first <video> element found in the document. play() won't let the playback begin unless the document has permission to automatically play media. document.queryselector("video").play(); example: handling play() failures it's much easier to detect a failure to autoplay media when you use the play() method to start it. ...

Performance budgets - Web Performance
to a file, a file type, all files loaded on a page, a specific metric (e.g. time to interactive), a custom metric (e.g. time to hero element), or a threshold over a period of time. why do i need a performance budget? a budget exists to reflect your reachable goals. it's a tradeoff between user experience, against other performance indicators (e.g. conversion rate). these goals can be: timing based (e.g. time to interactive, first contentful paint). quantity-based (e.g. amount of js files/total image size). rule-based (e.g. pagespeed index, lighthouse score). their primary goal is to prevent regressions, but they can provide insights to forecast trends (i.e. on september, 50% of the budget was spent in a week). additionally, it can uncover development needs (i.e. a large library ...

Understanding latency - Web Performance
we can look at how long a 267.5kb svg image asset took to download. when a request is in a queue, waiting for a network connection it is considered blocked. blocking happens when there are too many simultaneous connections made to a single server over http. if all connections are in use, the browser can't download ...

href - SVG: Scalable Vector Graphics
f being the target of the given animation element. if the url points to multiple target elements, if the given target element is not capable of being a target of the given animation element, or if the given target element is not part of the current document, then the animation element will not affect any target element. however, the animation element will still operate normally with regard to its timing properties. specifically, timeevents are dispatched and the animation element can be used as syncbase in an identical fashion to when the url refers to a valid target element. if the href attribute or the deprecated xlink:href attribute is not provided, then the target element will be the immediate parent element of the current animation element. if both xlink:href and href are specified, the va...

SVG Attribute reference - SVG: Scalable Vector Graphics
ecoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload gl...

<animate> - SVG: Scalable Vector Graphics
the svg <animate> element provides a way to animate an attribute of an element over time. ...

<animateColor> - SVG: Scalable Vector Graphics
element specifies a color transformation over time. usage context categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes conditional processing attributes core attributes animation event attributes xlink attributes animation attribute target attributes animation timing attributes animation value attributes animation addition attributes externalresourcesrequired specific attributes by from to dom interface this element implements the svganimatecolorelement interface. example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" fro...

<animateMotion> - SVG: Scalable Vector Graphics
lue type: <string>; default value: none; animatable: no rotate this attribute defines a rotation applied to the elment animated along a path, usually to make it pointing in the direction of the animation. ...

<animateTransform> - SVG: Scalable Vector Graphics
specifications specification status comment svg animations level 2the definition of '<animatetransform>' in that specification. edito...

<set> - SVG: Scalable Vector Graphics
width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation. the value must match the requirements of the target attribute. ...