Search completed in 1.38 seconds.
PerformanceResourceTiming.serverTiming - Web APIs
the server
timing read-only property returns an array of performanceserver
timing entries containing server
timing metrics.
... syntax resource.server
timing; specifications specification status comment server
timingthe definition of 'server
timing' in that specification.
Navigation and resource timings - Web Performance
navigation
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.
... both provide the same read-only properties, but navigation
timing measures the main document's
timings whereas the resource
timing provides the times for all the assets or resources called in by that main document and the resources' requested resources.
...And 32 more matches
PerformanceTiming - Web APIs
this interface is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the performance
timing interface is a legacy interface kept for backwards compatibility and contains properties that offer performance
timing information for various events which occur during the loading and use of the current page.
...And 31 more matches
PerformanceResourceTiming - Web APIs
the performanceresource
timing interface enables retrieval and analysis of detailed network
timing data regarding the loading of an application's resources.
... an application can use the
timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script.
...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/performanceresource
timing" 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">performanceresource
timing</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is...
...And 21 more matches
Using the Resource Timing API - Web APIs
the resource
timing api provides a way to retrieve and analyze detailed network
timing data regarding the loading of an application's resource(s).
... an application can use the
timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.).
... this document shows the use of resource
timing interfaces.
...And 18 more matches
PerformanceNavigationTiming - Web APIs
the performancenavigation
timing interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events.
..."#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/performancenavigation
timing" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigation
timing</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this in...
... performanceentry.duration read only returns a timestamp that is the difference between the performancenavigation
timing.loadeventend and performanceentry.starttime properties.
...And 16 more matches
Resource Timing API - Web APIs
the resource
timing interfaces enable retrieving and analyzing detailed network
timing data regarding the loading of an application's resource(s).
... an application can use the
timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
... this document provides an overview of the resource
timing interfaces.
...And 13 more matches
animation-timing-function - CSS: Cascading Style Sheets
the animation-
timing-function css property sets how an animation progresses through the duration of each cycle.
... syntax /* keyword values */ animation-
timing-function: ease; animation-
timing-function: ease-in; animation-
timing-function: ease-out; animation-
timing-function: ease-in-out; animation-
timing-function: linear; animation-
timing-function: step-start; animation-
timing-function: step-end; /* function values */ animation-
timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-
timing-function: steps(4, end); /* steps function keywords */ animation-
timing-function: st...
...eps(4, jump-start); animation-
timing-function: steps(10, jump-end); animation-
timing-function: steps(20, jump-none); animation-
timing-function: steps(5, jump-both); animation-
timing-function: steps(6, start); animation-
timing-function: steps(8, end); /* multiple animations */ animation-
timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ animation-
timing-function: inherit; animation-
timing-function: initial; animation-
timing-function: unset;
timing functions may be specified on individual keyframes in a @keyframes rule.
...And 10 more matches
transition-timing-function - CSS: Cascading Style Sheets
the transition-
timing-function css property sets how intermediate values are calculated for css properties being affected by a transition effect.
... this acceleration curve is defined using one <
timing-function> for each property to be transitioned.
... you may specify multiple
timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a transition-property list.
...And 10 more matches
Navigation Timing API - Web APIs
the navigation
timing api provides data that can be used to measure the performance of a web site.
... unlike javascript-based libraries that have historically been used to collect similar information, the navigation
timing api can be much more accurate and reliable.
... this article currently describes navigation
timing level 1.
...And 8 more matches
AnimationEffect.getComputedTiming() - Web APIs
the getcomputed
timing() 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 effect
timing contained in the object returned by the animationeffect.get
timing() method, the values returned by this object differ in the following ways: duration returns the calculated value of the iteration duration.
... if effect
timing.duration is the string auto, this attribute will return 0.
...And 5 more matches
EffectTiming.easing - Web APIs
the effect
timing 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 animationeffect
timingreadonly.easing in
timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect.
...And 5 more matches
EffectTiming.fill - Web APIs
the web animations api's effect
timing dictionary's fill property specifies a fill mode, which defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationstart or after animation's end time.
... element.animate(), and keyframeeffect() accept an object of
timing properties including fill.
... the value of fill corresponds directly to fill in effect
timing objects returned by get
timing() in animationeffect and keyframeeffect.
...And 5 more matches
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.
...And 5 more matches
PerformanceServerTiming - Web APIs
the performanceserver
timing interface surfaces server metrics that are sent with the response in the server-
timing http header.
... this interface is restricted to the same origin, but you can use the
timing-allow-origin header to specify the domains that are allowed to access the server metrics.
... properties performanceserver
timing.descriptionread only a domstring value of the server-specified metric description, or an empty string.
...And 5 more matches
Server-Timing - HTTP
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 performanceserver
timing interface.
...And 5 more matches
TaskAttributionTiming - Web APIs
the taskattribution
timing interface of the long tasks api returns information about the work involved in a long task and its associate frame context.
...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/taskattribution
timing" 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">taskattribution
timing</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattribu...
...tion
timing.containertype read only returns the type of frame container, one of iframe, embed, or object.
...And 4 more matches
performance.setResourceTimingBufferSize() - Web APIs
the setresource
timingbuffersize() 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.
... syntax performance.setresource
timingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer.
...And 3 more matches
PerformanceEventTiming - Web APIs
the performanceevent
timing interface of the event
timing api provides
timing information for the event types listed below.
...rt 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 performanceevent
timing.processingstart returns the time at which event dispatch started.
... performanceevent
timing.processingend returns the time at which the event dispatch ended.
...And 3 more matches
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.
... this document provides an overview of the mark and measure performance event types including the four user
timing methods that extend the performance interface.
...And 3 more matches
EffectTiming.delay - Web APIs
the effect
timing dictionary's delay property in the web animations api represents the number of milliseconds to delay the start of the animation.
... element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of
timing properties including delay.
... the value of delay corresponds directly to effect
timing.delay in
timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect.
...And 2 more matches
EffectTiming.duration - Web APIs
the duration property of the dictionary effect
timing 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 animationeffect
timingreadonly.duration in
timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect.
...And 2 more matches
EffectTiming.endDelay - Web APIs
the enddelay property of the effect
timing dictionary (part of the web animations api) indicates the number of milliseconds to delay after the active period of an animation sequence.
... the animation's end time—the time at which an iteration is considered to have finished—is the time at which the animation finishes an iteration (its initial delay, animationeffect
timingreadonly.delay, plus its duration,duration, plus its end delay.
... element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of
timing properties including enddelay.
...And 2 more matches
EffectTiming.iterationStart - Web APIs
web animations api's effect
timing 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 animationeffect
timingreadonly.iterationstart in
timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect.
...And 2 more matches
performance.clearResourceTimings() - Web APIs
the clearresource
timings() method removes all performance entries with an entrytype of "resource" from the browser's performance data buffer and sets the size of the performance data buffer to zero.
... to set the size of the browser's performance data buffer, use the performance.setresource
timingbuffersize() method.
... syntax performance.clearresource
timings(); arguments void return value none this method has no return value.
...And 2 more matches
Performance.onresourcetimingbufferfull - Web APIs
the onresource
timingbufferfull property is an event handler that will be called when the resource
timingbufferfull event is fired.
... this event is fired when the browser's resource
timing performance buffer is full.
... syntax callback = performance.onresource
timingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resource
timingbufferfull event is fired.
...And 2 more matches
PerformanceLongTaskTiming - Web APIs
the performancelongtask
timing interface of the the long tasks api reports instances of long tasks.
...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/performancelongtask
timing" 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">performancelongtask
timing</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties perform...
...ancelongtask
timing.attribution read only returns a sequence of taskattribution
timing instances.
...And 2 more matches
PerformanceTiming.connectEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.connectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the connection is opened network.
...And 2 more matches
PerformanceTiming.connectStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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.
...And 2 more matches
PerformanceTiming.domainLookupEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.domainlookupend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup is finished.
...And 2 more matches
PerformanceTiming.domainLookupStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.domainlookupstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup starts.
...And 2 more matches
PerformanceTiming.navigationStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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.
...And 2 more matches
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.
... 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.
...And 2 more matches
EffectTiming.iterations - Web APIs
the web animations api dictionary effect
timing's iterations property specifies the number of times the animation should repeat.
... element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of
timing properties including iterations.
... the value of iterations corresponds directly to animationeffect
timingreadonly.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.
Performance.timing - Web APIs
this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance.
timing read-only property returns a performance
timing object containing latency-related performance information.
... syntax
timinginfo = performance.
timing; specifications specification status comment navigation
timing level 2 working draft initial definition.
PerformanceFrameTiming - Web APIs
performanceframe
timing is an abstract interface that provides frame
timing data about the browser's event loop.
... <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/performanceframe
timing" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframe
timing</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface...
... example see the example in using the frame
timing api.
... specifications specification status comment frame
timingthe definition of 'performanceframe
timing' in that specification.
PerformancePaintTiming - Web APIs
the performancepaint
timing interface of the paint
timing provides
timing information about "paint" (also called "render") operations during web page construction.
...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/performancepaint
timing" 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">performancepaint
timing</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interfa...
... example function showpaint
timings() { 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...
... specifications specification status comment paint
timingthe definition of 'performancepaint
timing' in that specification.
PerformanceTiming.domComplete - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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 = performance
timing.domcomplete; specifications specification status comment navigation
timingthe definition of 'performance
timing.domcomplete' in that specification.
PerformanceTiming.domContentLoadedEventEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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 = performance
timing.domcontentloadedeventend; specifications specification status comment navigation
timingthe definition of 'performance
timing.domcontentloadedeventend' in that specification.
PerformanceTiming.domContentLoadedEventStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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 = performance
timing.domcontentloadedeventstart; specifications specification status comment navigation
timingthe definition of 'performance
timing.domcontentloadedeventstart' in that specification.
PerformanceTiming.domInteractive - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.dominteractive 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 'interactive' and the corresponding readystatechange event is thrown.
... syntax time = performance
timing.dominteractive; specifications specification status comment navigation
timingthe definition of 'performance
timing.dominteractive' in that specification.
PerformanceTiming.domLoading - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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 = performance
timing.domloading; specifications specification status comment navigation
timingthe definition of 'performance
timing.domloading' in that specification.
PerformanceTiming.fetchStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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.
... syntax time = performance.
timing.fetchstart; specifications specification status comment navigation
timingthe definition of 'performance
timing.fetchstart' in that specification.
PerformanceTiming.loadEventEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface's performancenavigation
timing.loadeventend read-only property instead.
... the legacy performance
timing.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.
... syntax time = performance
timing.loadeventend; specifications specification status comment navigation
timingthe definition of 'performance
timing.loadeventend' in that specification.
PerformanceTiming.loadEventStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface's performancenavigation
timing.loadeventstart read-only property instead..
... the legacy performance
timing.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.
... syntax time = performance
timing.loadeventstart; specifications specification status comment navigation
timingthe definition of 'performance
timing.loadeventstart' in that specification.
PerformanceTiming.redirectEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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.
... syntax time = performance
timing.redirectend; specifications specification status comment navigation
timingthe definition of 'performance
timing.redirectend' in that specification.
PerformanceTiming.redirectStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.redirectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the first http redirect starts.
... syntax time = performance
timing.redirectstart; specifications specification status comment navigation
timingthe definition of 'performance
timing.redirectstart' in that specification.
PerformanceTiming.requestStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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.
... syntax time = performance
timing.requeststart; specifications specification status comment navigation
timingthe definition of 'performance
timing.requeststart' in that specification.
PerformanceTiming.responseEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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 = performance
timing.responseend; specifications specification status comment navigation
timingthe definition of 'performance
timing.responseend' in that specification.
PerformanceTiming.responseStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.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 = performance
timing.responsestart; specifications specification status comment navigation
timingthe definition of 'performance
timing.responsestart' in that specification.
PerformanceTiming.secureConnectionStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.secureconnectionstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the secure connection handshake starts.
... syntax time = performance
timing.secureconnectionstart; specifications specification status comment navigation
timingthe definition of 'performance
timing.secureconnectionstart' in that specification.
PerformanceTiming.unloadEventEnd - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.unloadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event handler finishes.
... syntax time = performance
timing.unloadeventend; specifications specification status comment navigation
timingthe definition of 'performance
timing.unloadeventend' in that specification.
PerformanceTiming.unloadEventStart - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... the legacy performance
timing.unloadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event has been thrown.
... syntax time = performance
timing.unloadeventstart; specifications specification status comment navigation
timingthe definition of 'performance
timing.unloadeventstart' in that specification.
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.
... 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.
Interval Timing
nspr defines a platform-dependent type, printervaltime, for
timing intervals of fewer than approximately 6 hours.
... this chapter describes printervaltime and the functions that allow you to use it for
timing purposes: interval time type and constants interval functions interval time type and constants all timed functions in nspr require a parameter that depicts the amount of time allowed to elapse before the operation is declared failed.
... printervaltime interval functions interval
timing functions are divided into three groups: getting the current interval and ticks per second converting standard clock units to platform-dependent intervals converting platform-dependent intervals to standard clock units getting the current interval and ticks per second pr_intervalnow pr_tickspersecond converting standard clock units to platform-dependent intervals pr_secondstointer...
AnimationEffect.getTiming() - Web APIs
the animationeffect.get
timing() method of the animationeffect interface returns an effect
timing object containing the
timing properties for the animation effect.
... syntax animation
timing = animation.get
timing(); returns an effect
timing object.
... specifications specification status comment web animationsthe definition of 'animationeffect.get
timing()' in that specification.
AnimationEffect.updateTiming() - Web APIs
the update
timing() method of the animationeffect interface updates the specified
timing properties for an animation effect.
... syntax animation.update
timing(
timing); parameters
timing an optionaleffect
timing object containing the
timing properties to update.
... specifications specification status comment web animationsthe definition of 'animationeffect.update
timing()' in that specification.
EffectTiming.direction - Web APIs
the direction property of the web animations api dictionary effect
timing 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 animationeffect
timingreadonly.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.
Using the Frame Timing API - Web APIs
the performanceframe
timing interface provides frame
timing data about the browser's event loop.
... this document describes how to use the performanceframe
timing interfaces including example code.
... for an overview of these interfaces see frame
timing api.
Frame Timing API - Web APIs
the performanceframe
timing interface provides frame
timing data about the browser's event loop.
... example code of the interfaces described in this document is included in using the frame
timing api.
... performance frames the performanceframe
timing interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame".
Performance: resourcetimingbufferfull event - Web APIs
the resource
timingbufferfull event is fired when the browser's resource
timing buffer is full.
... bubbles yes cancelable yes interface event event handler property onresource
timingbufferfull examples the following example sets a callback function on the onresource
timingbufferfull property.
... function buffer_full(event) { console.log("warning: resource
timing buffer is full!"); performance.setresource
timingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresource
timingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resource
timingbufferfull', buffer_full); specifications specification status comment resource
timing level 1the definition of 'onresource
timingbufferfull' in that specification.
PerformanceNavigationTiming.toJSON() - Web APIs
the tojson() method is a serializer - it returns a json representation of the performancenavigation
timing object.
... syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performancenavigation
timing 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("performancenavigation
timing.tojson() = " + s); specifications specification status comment navigation
timing level 2the definition of 'tojson()' in that specification.
PerformanceResourceTiming.toJSON() - Web APIs
the tojson() method is a serializer that returns a json representation of the performanceresource
timing object.
... syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the performanceresource
timing 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("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.
PerformanceServerTiming.toJSON - Web APIs
the tojson() method of the performanceserver
timing interface returns a domstring that is the json representation of the performanceserver
timing object.
... syntax var json = performanceserver
timing.tojson() parameters none.
... specifications specification status comment server
timingthe definition of 'tojson' in that specification.
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.
... see also https://www.w3.org/tr/server-
timing/ resource
timing ...
EffectTiming - Web APIs
the effect
timing dictionary, part of the web animations api, is used by element.animate(), keyframeeffectreadonly(), and keyframeeffect() to describe
timing properties for animation effects.
... specifications specification status comment web animationsthe definition of 'effect
timing' in that specification.
PerformanceLongTaskTiming.attribution - Web APIs
the attribution readonly property of the performancelongtask
timing interface returns a sequence of taskattribution
timing instances.
... syntax var taskattribute
timing = performancelongtask
timing.attribution; value a sequence of taskattribution
timing instances.
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'domcomplete' in that specification.
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'domcontentloadedeventend' in that specification.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'domcontentloadedeventstart' in that specification.
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'dominteractive' in that specification.
PerformanceNavigationTiming.loadEventEnd - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete ...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'loadeventend' in that specification.
PerformanceNavigationTiming.loadEventStart - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'loadeventstart' in that specification.
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'redirectcount' in that specification.
PerformanceNavigationTiming.type - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'type' in that specification.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'unloadeventend' in that specification.
PerformanceNavigationTiming.unloadEventStart - Web APIs
function print_nav_
timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = performance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); consol...
... // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status comment navigation
timing level 2the definition of 'unloadeventstart' in that specification.
PerformanceResourceTiming.initiatorType - Web APIs
if the initiator is a performancenavigation
timing object, the property returns an empty string ("").
...initiatortype = not supported"); } specifications specification status comment resource
timing level 1the definition of 'initiatortype' in that specification.
PerformanceResourceTiming.redirectEnd - Web APIs
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.
..." + properties[i] + " = not supported"); } } } specifications specification status comment resource
timing level 1the definition of 'redirectend' in that specification.
PerformanceResourceTiming.redirectStart - Web APIs
if there are http redirects when fetching the resource and if any of the redirects are not from the same origin as the current document, but the
timing allow check algorithm passes for each redirected resource, this property returns the starting time of the fetch that initiates the redirect; otherwise, zero is returned.
..." + properties[i] + " = not supported"); } } } specifications specification status comment resource
timing level 1the definition of 'redirectstart' in that specification.
PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the performanceresource
timing interface returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running.
..." + properties[i] + " = not supported"); } } } specifications specification status comment resource
timing level 2the definition of 'workerstart' in that specification.
TaskAttributionTiming.containerId - Web APIs
the containerid readonly property of the taskattribution
timing interface returns the container's id attribute.
... syntax var containerid = taskattribution
timing.containerid; value a domstring containing the containers id attribute.
TaskAttributionTiming.containerName - Web APIs
the containername readonly property of the taskattribution
timing interface returns the container's name attribute.
... syntax var containername = taskattribution
timing.containername; value a domstring containing the container's name attribute.
TaskAttributionTiming.containerSrc - Web APIs
the containersrc readonly property of the taskattribution
timing interface returns the container's src attribute.
... syntax var containersrc = taskattribution
timing.containersrc; value a domstring containing the container's src attribute.
TaskAttributionTiming.containerType - Web APIs
the containertype readonly property of the taskattribution
timing interface returns the type of frame container, one of iframe, embed, or object.
... syntax var containertype = taskattribution
timing.containertype; value a domstring containing the container's type, one of iframe, embed, or object.
PerformanceResourceTiming.decodedBodySize - Web APIs
("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource
timing level 2the definition of 'decodedbodysize' in that specification.
PerformanceResourceTiming.encodedBodySize - Web APIs
("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource
timing level 2the definition of 'encodedbodysize' in that specification.
PerformanceResourceTiming.nextHopProtocol - Web APIs
"resource"); for (var i=0; i < p.length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("nexthopprotocol = not supported"); } specifications specification status comment resource
timing level 2the definition of 'nexthopprotocol' in that specification.
PerformanceResourceTiming.transferSize - Web APIs
("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource
timing level 2the definition of 'transfersize' in that specification.
Index - Web APIs
83 animationeffect.getcomputed
timing() api, animation, experimental, method, reference, getcomputed
timing, waapi, web animations api the getcomputed
timing() method of the animationeffect interface returns the calculated
timing properties for this animation effect.
... 84 animationeffect.get
timing() api, animation, experimental, method, reference,
timing, waapi, web animations api the animationeffect.get
timing() method of the animationeffect interface returns an effect
timing object containing the
timing properties for the animation effect.
... 85 animationeffect.update
timing() api, animation, experimental, method, reference, web animations, waapi, web animations api the update
timing() method of the animationeffect interface updates the specified
timing properties for an animation effect.
...And 123 more matches
Using CSS transitions - CSS: Cascading Style Sheets
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.
...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:...
... 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.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box...
...And 23 more matches
Performance API - Web APIs
the
timing property returns a performance
timing 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.
... interfaces performance provides methods and properties containing
timing-related performance information for the given page.
... performanceframe
timing provides methods and properties containing frame
timing data about the browser's event loop.
...And 14 more matches
Performance - Web APIs
it's part of the high resolution time api, but is enhanced by the performance timeline api, the navigation
timing api, the user
timing api, and the resource
timing api.
... 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.
... performance.
timing read only a legacy performance
timing object containing latency-related performance information.
...And 8 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
it is important to not use "extra" blank lines within a cue, for example between the
timings line and the cue payload.
... crédit de transcription 00:04.000 --> 00:05.000 transcrit par célestes™ ::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; } positioning of text tracks is also supported, by including positioning information after the
timings in a cue, as seen below (see cue settings for more information): webvtt 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% where did he go?
... cue
timings.
...And 7 more matches
Using the Web Animations API - Web APIs
representing
timing properties we’ll also need to create an object of
timing properties (an animationeffect
timingproperties object) corresponding to the values in alice’s animation: var alice
timing = { 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 no...
...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.
...And 7 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
89 continuous media glossary, media continuous media is data where there is a
timing relationship between source and destination.
...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.
... 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.
...And 6 more matches
Network request details - Firefox Developer Tools
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.
...if you select copy all, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-
timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "val...
...see https://en.wikipedia.org/wiki/special:centralautologin/p3p for more info.\"" }, { "name": "server", "value": "mw1316.eqiad.wmnet" }, { "name": "server-
timing", "value": "cache;desc=\"pass\"" }, { "name": "strict-transport-security", "value": "max-age=106384710; includesubdomains; preload" }, { "name": "vary", "value": "accept-encoding,treat-as-untrusted,x-forwarded-proto,cookie,authorization,x-seven" }, { "name": "via", "value": "1.1 varnish (varnish/5.1), 1.1 ...
...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: ...
...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.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="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; position:absolute; -webkit-tra...
...And 5 more matches
Web Performance
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.
...to understand how to improve performance and perceived performance, it helps to understand how the browser works.recommended web performance
timings: how long is too long?there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7s) and responding to user input (50 to 200ms).the business case for web performanceyou know web performance is important, but how do you convince clients and management to invest in p...
...And 5 more matches
animation - CSS: Cascading Style Sheets
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.
... /* @keyframes duration |
timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration |
timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </div> <div class="row"> <div class...
... constituent properties this property is a shorthand for the following css properties: animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-
timing-function syntax the animation property is specified as one or more single animations, separated by commas.
...And 4 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...
... 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"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="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 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 height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; ...
...And 4 more matches
Work with animations - Firefox Developer Tools
this article covers three tools you can use to visualize and edit animations: the animation inspector editing @keyframes editing
timing functions animation inspector the page inspector's animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.
... 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).
...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.
...And 2 more matches
PerformanceEntry - Web APIs
performanceentry instances will always be one of the following subtypes: performancemark performancemeasure performanceframe
timing performancenavigation
timing performanceresource
timing performancepaint
timing note: this feature is available in web workers.
..." + properties[i] + " is not supported"); } } } specifications specification status comment resource
timing level 3 editor's draft resource
timing level 2 working draft resource
timing level 1 candidate recommendation adds the performanceresource
timing interface and the resource value for entrytype.
... navigation
timing level 2 working draft navigation
timing recommendation adds the performancenavigation
timing interface and the navigation value for entrytype.
...And 2 more matches
Web APIs
aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential 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 apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that are available.
...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 effect
timing 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
this lets you configure the
timing, duration, and other details of how the animation sequence should progress.
... animation-
timing-function configures the
timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.
... defining the animation sequence using keyframes once you’ve configured the animation’s
timing, you need to define the appearance of the animation.
...And 2 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.
... constituent properties this property is a shorthand for the following css properties: transition-delay transition-duration transition-property transition-
timing-function syntax /* apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration |
timing function */ transition: margin-right 4s ease-in-out; /* property name | duration |
timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* apply to 2 properties */ ...
... zero or one <single-transition-
timing-function> value representing the
timing function to use zero, one, or two <time> values.
...And 2 more matches
performance.measure() - Web APIs
may also be the name of a performance
timing property.
...may also be the name of a performance
timing property.
... performance.clearmarks(); performance.clearmeasures(); }, 1000); }, 1000); specifications specification status comment user
timing level 2the definition of 'measure()' in that specification.
... user
timingthe definition of 'measure()' in that specification.
PerformanceEntry.entryType - Web APIs
performance entry type names value subtype type of name property description of name property frame, navigation performanceframe
timing, performancenavigation
timing url the document's address.
... resource performanceresource
timing url the resolved url of the requested resource.
... paint performancepaint
timing domstring either 'first-paint' or 'first-contentful-paint'.
... longtask performancelongtask
timing domstring reports instances of long tasks example the following example shows the use of the entrytype property.
Web Animations API - Web APIs
the web animations api allows for synchronizing and
timing changes to the presentation of a web page, i.e.
...it does so by combining two models: the
timing model and the animation model.
... keyframeeffect describes sets of animatable properties and values, called keyframes and their
timing options.
... effect
timing element.animate(), keyframeeffectreadonly.keyframeeffectreadonly(), and keyframeeffect.keyframeeffect() all accept an optional dictionary object of
timing properties.
WebKit CSS extensions - CSS: Cascading Style Sheets
a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-
timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -...
...asis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-
timing-function u-w -webkit-user-select -epub-word-break -epub-writing-mode supported in non-webkit browsers without a prefix, but not standard the following properties are supported in at least one browser without a prefix, but are not on the standards track.
... a -webkit-align-content -webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-
timing-function -webkit-appearance* b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit...
... -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-origin t -webkit-text-fill-color** -webkit-text-size-adjust -webkit-text-stroke** -webkit-text-stroke-color** -webkit-text-stroke-width** -webkit-transform -webkit-transform-origin -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-
timing-function u -webkit-user-select *supported with -moz- and -webkit- prefix in firefox, but not supported without a prefix.
<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.animation
timingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.style.animation
timingfunction = 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 ...
...*/ 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.
Index - HTTP
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 performanceserver
timing interface.
... 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.
HTTP Index - HTTP
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 performanceserver
timing interface.
... 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.
Measuring performance - Learn web development
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.
... 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.
...you can also refer to the navigation and
timings article for further examples on using performance web apis.
nsIContentViewer
[noscript,notxpcom,nostdcall] void setnavigation
timing(in nsdomnavigation
timingptr a
timing); void setpagemode(in boolean apagemode, in nsiprintsettings aprintsettings); void show(); void stop(); void unload(); obsolete since gecko 1.8 attributes attribute type description container nsisupports domdocument nsidomdocument enablerendering boolean ...
...void setdocumentinternal( in nsidocumentptr adocument, in boolean aforcereuseinnerwindow ); parameters adocument missing description aforcereuseinnerwindow missing description setnavigation
timing() set collector for navigation
timing data (load and unload events).
... [noscript,notxpcom,nostdcall] void setnavigation
timing( in nsdomnavigation
timingptr a
timing ); parameters a
timing missing description return value missing description setpagemode() void setpagemode( in boolean apagemode, in nsiprintsettings aprintsettings ); parameters apagemode missing description aprintsettings missing description show() void show(); parameters none.
Migrating from Firebug - Firefox Developer Tools
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.
Animation.startTime - Web APIs
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.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.
AnimationEffect - Web APIs
methods animationeffect.get
timing() returns the effect
timing object associated with the animation containing all the animation's
timing values.
... animationeffect.getcomputed
timing() returns the calculated
timing properties for this animationeffect.
... animationeffect.update
timing() updates the specified
timing properties of this animationeffect.
Element.animate() - Web APIs
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.
...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.
HTMLImageElement.loading - Web APIs
usage notes
timing of the load event the load event is fired when the document has been fully processed.
...they justt don't affect the
timing of the load event.
...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.
KeyframeEffect - Web APIs
animationeffect.getcomputed
timing() returns the calculated, current
timing values for this keyframe effect.
... animationeffect.get
timing() the effect
timing object associated with the animation containing all the animation's
timing values.
... animationeffect.update
timing() updates the specified
timing properties.
LargestContentfulPaint - Web APIs
the
timing of this paint is a good heuristic for when the main page content is available during load.
...may not be available if the element is a cross-origin image loaded without the
timing-allow-origin header.
...(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.
performance.mark() - Web APIs
if the name given to this method already exists in the performance
timing interface, syntaxerror is thrown.
...performance.clearmarks(); specifications specification status comment user
timing level 2the definition of 'mark()' in that specification.
... user
timingthe definition of 'mark()' in that specification.
performance.now() - Web APIs
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.
...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.
PerformanceEntry.name - Web APIs
value subtype entrytype values description url performanceframe
timing, performancenavigation
timing frame, navigation the document's address.
... url performanceresource
timing resource the resolved url of the requested resource.
... domstring performancepaint
timing paint either 'first-paint' or 'first-contentful-paint'.
PerformanceMark - Web APIs
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.
PerformanceMeasure - Web APIs
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.
PerformanceNavigation.redirectCount - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... syntax amount = performancenavigation.redirectcount; specifications specification status comment navigation
timingthe definition of 'performancenavigation.redirectcount' in that specification.
PerformanceNavigation.type - Web APIs
this interface of this property is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... syntax type = performancenavigation.type; specifications specification status comment navigation
timingthe definition of 'performancenavigation.type' in that specification.
PerformanceNavigation - Web APIs
this interface is deprecated in the navigation
timing level 2 specification.
... please use the performancenavigation
timing interface instead.
... specifications specification status comment navigation
timingthe definition of 'performancenavigation' in that specification.
Using the Performance API - Web APIs
high precision
timing high precision
timing is achieved by using the domhighrestimestamp type for time values.
...in the following example, json serialization for the performance, performance.
timing and performance.navigation objects is printed in the object element.
...= 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...
Web Animations API Concepts - Web APIs
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.
...
timing the
timing model is the backbone of working with the waapi.
CSS3 - Archive of obsolete content
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.
... 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.
Anatomy of a video game - Game development
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.
...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.
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
it might not be absolute
timing, but user perception.
... apis gather user metrics using https://github.com/akamai/boomerang or directly gather with window.performance.
timing things not to do (bad practices) download everything use uncompressed media files ...
JS::PerfMeasurement
void start() call this on a perfmeasurement instance to start
timing.
... void stop() and call this to stop
timing again.
About NSPR
these facilities include threads, thread synchronization, normal file and network i/o, interval
timing and calendar time, basic memory management (malloc and free) and shared library linking.
... time
timing facilities are available in two forms: interval
timing and calendar functions.
Date and Time
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.
Introduction to NSPR
the netscape portable runtime (nspr) api allows compliant applications to use system facilities such as threads, thread synchronization, i/o, interval
timing, atomic operations, and several other low-level services in a platform-independent manner.
...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.
Shell global objects
start
timingmutator() start accounting time to mutator vs gc.
... stop
timingmutator() stop accounting time to mutator vs gc and dump the results.
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": "event
timings", "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...
... the getevent
timings packet: { "to": "conn0.netevent15", "type": "getevent
timings" } { "from": "conn0.netevent15", "
timings": { "blocked": 0, "dns": 0, "connect": 0, "send": 0, "wait": 16, "receive": 0 }, "totaltime": 16 } the fileactivity packet when a file load is observed the following fileactivity packet is sent to the client: { "from": "conn0.console9", "type": "file...
AudioBufferSourceNode - Web APIs
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.
DOMHighResTimeStamp - Web APIs
also note the section below on reduced time precision controlled by browser preferences to avoid
timing attacks and fingerprinting.
... reduced time precision to offer protection against
timing attacks and fingerprinting, the precision of time stamps might get rounded depending on browser settings.
Intersection Observer API - Web APIs
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..
... there's an even more extensive example at
timing element visibility with the intersection observer api.
Long Tasks API - Web APIs
interfaces performancelongtask
timing reports instances of long tasks.
... taskattribution
timing returns information about the work involved in a long task and its associate frame context.
performance.clearMarks() - Web APIs
performance.clearmarks(); logmarkcount() // "found this many entries: 0" specifications specification status comment user
timing level 2the definition of 'clearmarks()' in that specification.
... user
timingthe definition of 'clearmarks()' in that specification.
performance.clearMeasures() - Web APIs
performance.clearmeasures(); logmeasurecount() // "found this many entries: 0" specifications specification status comment user
timing level 2the definition of 'clearmeasures()' in that specification.
... user
timingthe definition of 'clearmeasures()' in that specification.
Performance.navigation - Web APIs
this property is deprecated in the navigation
timing level 2 specification.
... syntax navobject = performance.navigation; specifications specification status comment navigation
timingthe definition of 'performance.navigation' in that specification.
PerformanceEntry.duration - Web APIs
"navigation" - returns the timestamp that is the difference between the performancenavigation
timing.loadeventend and performanceentry.starttime properties, respectively.
...the entry is a performanceresource
timing object), this property returns the difference between the performanceentry.responseend and performanceentry.starttime timestamps.
Rendering and the WebXR frame animation callback - Web APIs
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 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.
Advanced techniques: Creating and sequencing audio - Web APIs
in this tutorial, we're going to cover sound creation and modification, as well as
timing and scheduling.
...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.
Functions and classes available to Web Workers - Web APIs
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, performanceresource
timing enables retrieval and analysis of detailed data regarding various aspects of an application's network performance.
Window.performance - Web APIs
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.
Window - Web APIs
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.
CSS Animations - CSS: Cascading Style Sheets
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.
CSS Transitions - CSS: Cascading Style Sheets
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.
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
--webkit-line-clampa:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<an-plus-b><angle><angle-percentage>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-
timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorbord...
...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...
Guide to Web APIs - Developer guides
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential 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 apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
HTTP headers - HTTP
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.
... server-
timing communicates one or more metrics and descriptions for the given request-response cycle.
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
as users interact with an application, all performance
timings are captured, regardless of what actions are taken or pages viewed.
...if you do want to roll your own monitoring system, take a look at the performance apis, mainly performancenavigation
timing and performanceresource
timing, but also performancemark, performancemeasure, and performancepaint
timing.
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...
Audio for Web games - Game development
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.
Move the ball - Game development
you can run a function over and over again using a javascript
timing function such as setinterval() or requestanimationframe().
Web performance - Learn web development
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.
Adding a new CSS property
(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.
Browser chrome tests
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.
Debugging Table Reflow
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
mach will print
timings with each line of output from the build.
IME handling guide
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.
Gecko Profiler FAQ
prefer to do comparisons by measuring your
timings with code instead of by inspecting profiles.
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
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.
NSS 3.14.3 release notes
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.
NSS 3.21.2 release notes
security fixes in nss 3.21.2 bug 1293334 / cve-2016-9074 - fixed a
timing side channel in the tls cbc code.
Hacking Tips
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.
Animated PNG graphics
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.
Starting WebLock
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.
Animation.currentTime - Web APIs
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.getcomputed
timing().delay + animation.effect.getcomputed
timing().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.
Animation.onfinish - Web APIs
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.
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
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.
Animation.timeline - Web APIs
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.
AnimationTimeline.currentTime - Web APIs
reduced time precision to offer protection against
timing attacks and fingerprinting, the precision of animationtimeline.currenttime might get rounded depending on browser settings.
BaseAudioContext.currentTime - Web APIs
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.
Battery Status API - Web APIs
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.
console - Web APIs
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.
Console API - Web APIs
the console api provides functionality to allow developers to perform debugging tasks, such as logging messages or the values of variables at set points in your code, or
timing how long an operation takes to complete.
DocumentTimeline.DocumentTimeline() - Web APIs
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.
DocumentTimeline - Web APIs
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.
Event.timeStamp - Web APIs
</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.
File.lastModified - Web APIs
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.
File.lastModifiedDate - Web APIs
fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against
timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.gettime() might get rounded depending on browser settings.
HTMLMediaElement.currentTime - Web APIs
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.
IntersectionObserverEntry.intersectionRatio - Web APIs
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.
IntersectionObserverEntry.isIntersecting - Web APIs
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.
IntersectionObserverEntry.target - Web APIs
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.
IntersectionObserverEntry.time - Web APIs
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.
KeyframeEffect.target - Web APIs
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.
KeyframeEffectOptions - Web APIs
the keyframeeffectoptions dictionary, part of the web animations api, is used by element.animate(), keyframeeffectreadonly() and keyframeeffect() to describe
timing properties for animation effects.
msFirstPaint - Web APIs
var o
timing = window.performance.
timing; var itimems = o
timing.msfirstpaint - o
timing.navigationstart; ...
Page Visibility API - Web APIs
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.
Performance.memory - Web APIs
syntax
timinginfo = performance.memory attributes jsheapsizelimit the maximum size of the heap, in bytes, that is available to the context.
Using server-sent events - Web APIs
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.
A basic 2D WebGL animation example - Web APIs
let uscalingfactor; let uglobalcolor; let urotationvector; let avertexposition; // animation
timing let previoustime = 0.0; let degreespersecond = 90.0; initializing the program is handled through a load event handler called startup(): window.addeventlistener("load", startup, false); function startup() { glcanvas = document.getelementbyid("glcanvas"); gl = glcanvas.getcontext("webgl"); const shaderset = [ { type: gl.vertex_shader, id: "vertex-shader" }, { ...
Fundamentals of WebXR - Web APIs
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.
Geometry and reference spaces in WebXR - Web APIs
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.
Web Audio API - Web APIs
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.
Accessibility documentation index - Accessibility
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 - Accessibility
success criteria how to conform to the criteria practical resource 2.2.1
timing is adjustable (a) for functionality with time limits (e.g.
Perceivable - Accessibility
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).
CSS data types - CSS: Cascading Style Sheets
um> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <
timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.
visibility - CSS: Cascading Style Sheets
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.
Event reference
resource
timingbufferfull performance resource
timing the browser's resource
timing buffer is full.
Overview of events and handlers - Developer guides
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.
Event developer guide - Developer guides
erview of events and handlersevents 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.touch events (mozilla experimental)the experimental touch events api described on this page was available from gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to gecko/firefox 17.
Using Promises - JavaScript
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.
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
reduced time precision to offer protection against
timing attacks and fingerprinting, the precision of new date().gettime() might get rounded depending on browser settings.
Date.now() - JavaScript
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.
Understanding latency - Web Performance
atency (ms) gprs 50 kbps 20 kbps 500 regular 2g 250 kbps 50 kbps 300 good 2g 450 kbps 150 kbps 150 regular 3g 750 kbps 250 kbps 100 good 3g 1.5 mbps 750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network
timings also, on the network tab, you can see how long each request took to complete.
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
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation
timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event at...
<animateColor> - SVG: Scalable Vector Graphics
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.
<animateMotion> - SVG: Scalable Vector Graphics
value type: <number>|auto|auto-reverse; default value: 0; animatable: no note: for <animatemotion> the default value for the calcmode attribute is paced animation attributes animation
timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style e...
<animateTransform> - SVG: Scalable Vector Graphics
from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample 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 type dom interface this element implements the svganimatetransformelement interface.
<set> - SVG: Scalable Vector Graphics
value type: <anything>; default value: none; animatable: no animation attributes animation
timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill other animation attributes most notably: attributename animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesani...