HTML documentation index - HTML: Hypertext Markup Language
rce's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin. 225 link types: manifest app, attribute, html, link, link types, manifest, reference the manifest keyword for the rel attribute of the <link> element indicates that the target resource is a web app manifest. 226 link types: modulepreload attribute, html, link, link types, reference the modulepreload keyword for the rel attribute of the <link> element provides a declarative way to preemptively fetch a module script and its dependencies, and store them in the document's module map for later evaluation. 227 link types: noopener attribute, html, link types, reference the noopener keyword for the rel att...
...n. 230 link types: prefetch attribute, html, link, link types, reference the prefetch keyword for the rel attribute of the <link> element is a hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource. 231 link types: preload attribute, html, link, link types, reference the preload keyword for the rel attribute of the <link> element indicates the user is highly likely to require the target resource for the current navigation, and therefore the browser must preemptively fetch and cache the resource. 232 link types: prerender attribute, html, link, link types, reference the prerender keywo...
...perties. the properties are carried in class attributes that can be added to any html element, while the data values re-use html element content and semantic attributes. microformats2 is an update to microformats that provides a simpler way of annotating html structured syntax & vocabularies than previous approaches of using rdfa and microdata which require learning new attributes. ...
...arried in class attributes that can be added to any html element, while the data values re-use html element content and semantic attributes. microformats2 is an update to microformats that provides a simpler way of annotating html structured syntax & vocabularies than previous approaches of using rdfa and microdata which require learning new attributes. 235 preloading content with rel="preload" guide, html, javascript, link, media, performance, web performance, as, preload, rel the preload value of the <link> element's rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. 236 quirks m...

Populating the page: how browsers work - Web Performance
he number of dom nodes, the longer it takes to construct the dom tree. when the parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. parsing can continue when a css file is encountered, but <script> tags—particularly those without an async or defer attribute—block rendering, and pause the parsing of html. ...
...non-blocking resources, such as an image, the browser will request those resources and continue parsing. parsing can continue when a css file is encountered, but <script> tags—particularly those without an async or defer attribute—block rendering, and pause the parsing of html. though the browser's preload scanner hastens this process, excessive scripts can still be a significant bottleneck. preload scanner while the browser builds the dom tree, this process occupies the main thread. as this happens, the preload scanner will parse through the content available and request high priority resources like css, javascript, and web fonts. thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. it will retrieve resources in the ...
... and request high priority resources like css, javascript, and web fonts. thanks to the preload scanner, we don't have to wait until the parser finds a reference to an external resource to request it. it will retrieve resources in the background so that by the time the main html parser reaches requested assets, they may possibly already be in flight, or have been downloaded. the optimizations the preload scanner provides reduce blockages. <link rel="stylesheet" src="styles.css"/> <script src="myscript.js" async></script> <img src="myimage.jpg" alt="image description"/> <script src="anotherscript.js" async></script> in this example, while the main thread is parsing the html and css, the preload scanner will find the scripts and image, and start downloading them as well. to ensure the script doe...
... the cssom tree, and recursively calculate computed styles. in terms of web performance optimization, there are lower hanging fruit, as the total time to create the cssom is generally less than the time it takes for one dns lookup. other processes javascript compilation while the css is being parsed and the cssom created, other assets, including javascript files, are downloading (thanks to the preload scanner). javascript is interpreted, compiled, parsed and executed. the scripts are parsed into abstract syntax trees. some browser engines take the abstract syntax tree and pass it into an interpreter, outputting bytecode which is executed on the main thread. this is known as javascript compilation. building the accessibility tree the browser also builds an accessibility tree that assistive de...

Audio for Web games - Game development
ange its capabilities. in the case of autoplay on ios, this appears to be the case currently. if possible, you should try your code on several devices and platforms to see how it works. volume programmatic volume control may be disabled in mobile browsers. the reason often given is that the user should be in control of the volume at the os level and this shouldn't be overridden. buffering and preloading likely as an attempt to mitigate runaway mobile network data use, we also often find that buffering is disabled before playback has been initiated. buffering is the process of the browser downloading the media in advance, which we often need to do to ensure smooth playback. the htmlmediaelement interface comes with lots of properties to help determine whether a track is in a state to be play...
...th playback. the htmlmediaelement interface comes with lots of properties to help determine whether a track is in a state to be playable. note: in many ways the concept of buffering is an outdated one. as long as byte-range requests are accepted (which is the default behavior), we should be able to jump to a specific point in the audio without having to download the preceding content. however, preloading is still useful — without it, there would always need to be some client-server communication required before playing can commence. concurrent audio playback a requirement of many games is the need to play more than one piece of audio at the same time; for example, there might be background music playing along with sound effects for various things happening in the game. although the situat...
...pported method — using the vanilla <audio> element — leads to patchy results on mobile devices. element — results in patchy results on mobile devices. testing and support here's a table that shows what mobile platforms support the features talked about above. ...

Scaling - Game development
« previousnext » this is the 2nd step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen sizes. ...
...aser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. the phaser scale object there's a special scale object available in phaser with a few handy methods and properties available. update your existing preload() function as follows: function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled. exact_fit — scale the canvas to fill all the available space both vertically and hori...
...en, but we can live with that. resize — creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode. user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the preload() function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size. adding a custom canvas background colour we can also add a custom background color to our canvas, so it won't stay black. the stage object has a backgroundcolor property for this purpose, which we can set using css color definition syntax. add the follow...

Multimedia: video - Learn web development
sed on each browsers file type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential for very large bandwidth savings that translate into better website performance. optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video preload, and consider streaming the video. the sections below describe each of these optimization techniques. compress all videos most video compression work compares adjacent frames within a video, with the intent of removing detail that is identical in both frames. compress the video and export to multiple video formats, including webm, mpeg-4/h.264, and ogg/theora. your video editing software proba...
...dwidth. there is no reason to serve audio with video that is always muted. removing audio can save 20% of the bandwidth. depending on your choice of software, you might be able to remove audio during export and compression. if not, a free utility called ffmpeg can do it for you. this is the ffmpeg command string to remove audio: ffmpeg -i original.mp4 -an -c:v copy audiofreeversion.mp4 video preload the preload attribute has three available options: auto|metadata|none. the default setting is metadata. these settings control how much of a video file downloads with page load. you can save data by deferring download for less popular videos. setting preload="none" results in none of the video being downloaded until playback. it delays startup, but offers significant data savings for videos wit...
...this is a useful option for some small or moderately sized files. changing the setting to auto tells the browser to automatically download the entire video. ...

mozIStorageConnection
table(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistorageprogresshandler removeprogresshandler(); void rollbacktransaction(); void setgrowthincrement(in print32 aincrement, in autf8string adatabasename); mozistorageprogresshandler setprogresshandler(in print32 agranularity, in mozistorageprogresshandler ahandler); ...
...is strongly discouraged! void executesimplesql( in autf8string asqlstatement ); parameters asqlstatement the sql statement to execute. indexexists() this method determines whether or not the given index exists. boolean indexexists( in autf8string aindexname ); parameters aindexname the index to check. return value true if the index exists, false otherwise. preload() obsolete since gecko 1.9 (firefox 3) this is used to preload the database cache. it loads pages from the start of the database file until the memory cache (specified by "pragma cache_size=") is full or the entire file is read. the cache must be active on the database for this to work. this means that you must have a transaction open on the connection, or have a transaction op...
...tart of the database file until the memory cache (specified by "pragma cache_size=") is full or the entire file is read. the cache must be active on the database for this to work. this means that you must have a transaction open on the connection, or have a transaction open on another connection that shares the same pager cache. this cached data will go away when the transaction is closed. this preload operation can dramatically speed up read operations because the data is loaded as one large block. normally, pages are read in on demand, which can cause many disk seeks. void preload(); parameters none. removefunction() deletes a custom sql function that was created with either mozistorageconnection.createfunction() or mozistorageconnection.createaggregatefunction(). void removefunction(...

Network Information API - Web APIs
changes to the user's connection. var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. this example would be called soon after page load to check for a connection type where preloading a video may not be desirable. if a cellular connection is found, then the preloadvideo flag is set to false. for simplicity and clarity, this example only tests f...
...d, then the preloadvideo flag is set to false. for simplicity and clarity, this example only tests for one connection type. a real-world use case would likely use a switch statement or some other method to check all of the possible values of networkinformation.type. regardless of the type value you can get an estimate of connection speed through the networkinformation.effectivetype property. ...
...me other method to check all of the possible values of networkinformation.type. regardless of the type value you can get an estimate of connection speed through the networkinformation.effectivetype property. let preloadvideo = true; var connection = navigator.connection || navigator.mozconnection || navigator.webkitconnection; if (connection) { if (connection.effectivetype === 'slow-2g') { preloadvideo = false; } } interfaces networkinformation provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes. the networkinformation interfaces cannot be instantiated. it is instead accessed through the navigator interface. specifications specification status comm...

Creating a cross-browser video player - Developer guides
on github. html markup to start off with, let's take a look at the html that makes up the player. the video first of all the <video> element is defined, contained within a <figure> element that acts as the video container. to anyone familiar with html5 markup and the <video> element, there should be nothing here that surprises you. ...
...ven though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript. doing things this way still allows users who have javascript turned off (for whatever reason) to still have access to the browser's native controls. a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file. this provides the player with data such as video duration and format. note: ie9 behaves differently than most other browsers when a poster attribute is set. most browsers interpret the presence of a poster attribute to mean tha...
...than the entire video file. this provides the player with data such as video duration and format. note: ie9 behaves differently than most other browsers when a poster attribute is set. most browsers interpret the presence of a poster attribute to mean that the specified image is to be displayed until the user chooses to play the video. ie9 will only use the specified poster image in this way if preload="none" is set; otherwise, it will take the first still of the video and display that instead. three different video sources are provided for the player: mp4, webm, and ogg. using these different source formats gives the best chance of being supported across all browsers that support html5 video. for further information on video formats and browser compatibility, see supported media formats. fo...

Link types - HTML: Hypertext Markup Language
uish between a hyperlink applying to a specific part of the document or to the document as a whole. only the data on the page can indicate this. note: although recognized, the synonym copyright is incorrect and must be avoided. <a>, <area>, <form>, <link> none. manifest indicates that the linked file is a web app manifest. <link> <a>, <area>, <form> modulepreload initiates early (and high-priority) loading of module scripts. <link> <a>, <area>, <form> next indicates that the hyperlink leads to the next resource of the sequence the current page is in. note: other link types related to linking resources in the same sequence are first, prev, last. <a>, <area>, <form>, <link> none. nofollow indicates that the li...
...ests that the browser fetch the linked resource in advance, as it is likely to be requested by the user. starting with firefox 44, the value of the crossorigin attribute is taken into consideration, making it possible to make anonymous prefetches. note: the link prefetch faq has details on which links can be prefetched and on alternative methods. <link> <a>, <area>, <form> preload tells the browser to download a resource because this resource will be needed later during the current navigation. see preloading content with rel="preload" for more details. <link> <a>, <area>, <form> prerender suggests that the browser fetch the linked resource in advance, and that it also render the prefetched content offscreen so it can be quickly presented to the user ...
...<link>, <form> up indicates that the page is part of a hierarchical structure and that the hyperlink leads to the higher level resource of that structure. the number of up link types indicates the depth difference between the current page and the linked resource. <a>, <area>, <link> <form> specifications specification status comment preloadthe definition of 'preload' in that specification. candidate recommendation added preload. resource hintsthe definition of 'preconnect' in that specification. working draft added dns-prefetch, preconnect, and prerender values. html living standardthe definition of 'link types' in that specification. living standard added opener and made noopener the default beha...

Configuring servers for Ogg media - HTTP
, so it's helpful to include key frames at regular intervals. by default, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance. ...
...ault, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file size and seek performance. consider using the preload attribute the html <audio> and <video> elements provide the preload attribute, which tells the browser to attempt to download the entire media when the page loads. without preload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration. preload is off by default, so if getting to video is the point of your web page, your users may appreciate it if you include preload in your video elements. using pr...
...setting payload to auto tells the browser to automatically begin downloading the media as soon as the page is loaded, under the assumption that the user will play it. ...

Implementing game control mechanisms - Game development
or squeezing bananas. setting up the environment let's start with a quick overview of the game's folder structure, javascript files and in-game states, so we know what's happening where. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. ...
... states, so we know what's happening where. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. the src folder contains the javascript files split as a separate states — boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order. the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay. every state has its own default methods: preload(), create(), and update(). the first one is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame. for example, you can define a button in the create() f...

Load the assets and print them on screen - Game development
s/lesson03.html. our game will feature a ball rolling around the screen, bouncing off a paddle, and destroying bricks to earn points — familiar, huh? in this article we'll look at how to add sprites into our gameworld. having a ball let's start by creating a javascript variable to represent our ball. add the following line between the game initialization code (our var game... block) and the preload() function: var ball; note: for the sake of this tutorial, we will use global variables. the purpose of the tutorial is to teach phaser-specific approaches to game development rather than dwelling on subjective best approaches. loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript. to load the asset, we will use the g...
... the tutorial is to teach phaser-specific approaches to game development rather than dwelling on subjective best approaches. loading the ball sprite loading images and printing them on our canvas is a lot easier using phaser than using pure javascript. to load the asset, we will use the game object created by phaser, executing its load.image() method. add the following new line just inside the preload() function, at the bottom: function preload() { // ... game.load.image('ball', 'img/ball.png'); } the first parameter we want to give the asset is the name that will be used across our game code — for example, in our ball variable name — so we need to make sure it is the same. the second parameter is the relative path to the graphic asset. in our case, we will load the image for ou...

Video and audio content - Learn web development
resources. refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right mime types to specify for each. other <video> features there are a number of other features you can include when displaying an html video. take a look at our next example: <video controls width="400" height="400" autoplay loop muted preload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the resulting ui looks something like this: the new features are: width and height you can control the video size either with these a...
...ecause users can find it really annoying. loop makes the video (or audio) start playing again whenever it finishes. this can also be annoying, so only use if really necessary. muted causes the media to play with the sound turned off by default. poster the url of an image which will be displayed before the video is played. it is intended to be used for a splash screen or advertising screen. ...

Experimental features in Firefox
09527), but we still need to make other changes too, like making it available on contenteditable content. see also bug 1205133 for details. release channel version added enabled by default? nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering. read preloading content with rel="preload" for more details. for more details on the status of this feature, see bug 1639607. release channel version ad...
... see bug 1099557 for more details. ...

Using the Browser API
p/reload button next, let's talk about the stop/reload button. as in a traditional browser, this is a single button that acts as a reload button when the page has finished loading, and a stop button while the page is loading (each with a different icon displayed). this is implemented in our sample app with the following functions: browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function(e) { canmovebwd(); canmovefwd(); stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); when the mozbrowserloadstart event fires, the latest page request has started loading, and we change the button to a cross to indicate "stop". when th...
...d is rgb(0, 83, 159). back to the stop/reload button — updating the icon is nice, but we also need to update the functionality that is invoked when each icon is displayed. we do this with the following function, which runs the htmliframeelement.stop() method to stop the page loading if the button is displaying a cross, and the htmliframeelement.reload() method to reload the page otherwise. stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); implementing the search bar let's now turn our attention to implementing browser search using the browser api. tap the "s" button and try it out. try searching for "firefox" on the default page when the app first loads. so how do we do this? first, we d...

mozbrowserloadend
background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...
...a.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...

mozbrowserloadstart
not. cancelable read only boolean whether the event is cancellable or not. example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. ...
... example in this example the mozbrowserloadend and mozbrowserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. ...

FUEL
the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); ...
...the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); ...

Mail composition back end
of the first attachment is provided via `attachment1_type' `attachment1_body' and `attachment1_body_length'. these may all be 0 if all attachments are provided externally. const struct nsmsgattachmentdata *attachments, - subsequent attachments are provided as urls to load, described in the nsmsgattachmentdata structures. ...
...h'. these may all be 0 if all attachments are provided externally. const struct nsmsgattachmentdata *attachments, - subsequent attachments are provided as urls to load, described in the nsmsgattachmentdata structures. const struct nsmsgattachedfile *preloaded_attachments, - attachments that are already locally stored on disk (note: both attachments and preloaded_attachments cannot be specified on a single call void *relatedpart /* nsmsgsendpart */, - a related part for multipart related operations nsimsgsendlistener **alistenerarray) = 0; - an array of listeners for the send operation. this can be nsnull if you want to do the delivery operation "blind" ...

prefers-reduced-data - CSS: Cascading Style Sheets
o user agent implements this feature, although various operating systems do support such preferences and if this media query is ever implemented user agents will likely rely on the settings provided by the operating system. examples note: no browser currently implements this feature so the following example will not work. ...
... will likely rely on the settings provided by the operating system. examples note: no browser currently implements this feature so the following example will not work. ...

Cross-browser audio basics - Developer guides
r media and web audio apis for details. loop the loop attribute will ensure that upon getting to the end of the audio clip, the audio clip will loop back to the beginning and start playing again. <audio loop> ... </audio> muted if you want the audio to start muted (no volume), add the muted attribute. <audio muted> ... </audio> note: this value is often ignored on mobile platforms. preload the preload attribute allows you to specify a preference for how the browser preloads the audio, in other words, which part of the file it downloads when the <audio> element is initialized, and before the play button is pressed. preload can take 3 different values: none: don't download anything before the play button is pressed. metadata: download the audio metadata; this is usually the bes...
...s usually the best option, as it allows you to access and display information such as audio length, and allow the browser to work out which audio file it should use. auto: download the whole audio file as soon as possible. this is generally not a good option unless you can guarantee your users will have a fast network connection. note: this value is often ignored on mobile platforms. <audio preload="auto"> ... </audio> controls we specify the controls attribute when we require the browser to provide us with its default playback controls. <audio controls> ... </audio> src as mentioned above, you can use the <source> element to specify one or more source audio files. alternatively, you can include the src attribute directly on the <audio> element to specify a single source file. <au...

Audio and Video Delivery - Developer guides
n (usually a choice of two, as stated above). if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want to play/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback. no...
... <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback. note: the preload attribute may be ignored by some mobile browsers. for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subti...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
a has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. loop a boolean attribute: if specified, the audio player will automatically seek back to the start upon reaching the end of the audio. muted a boolean attribute that indicates whether the audio will be initially silenced. its default value is false. preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. it may have one of the following values: none: indicates that the audio should not be preloaded. metadata: indicates that only audio metadata (e.g. length) is fetched. auto: indicates that the whole audio file can be downloaded, even if the user is no...
...if autoplay is specified, the browser would obviously need to start downloading the audio for playback. the browser is not forced by the specification to follow the value of this attribute; it is a mere hint. src the url of the audio to embed. this is subject to http access controls. ...

<video>: The Video Embed element - HTML: Hypertext Markup Language
video is to be played "inline", that is within the element's playback area. note that the absence of this attribute does not imply that the video will always be played in fullscreen. poster a url for an image to be shown while the video is downloading. if this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame. preload this enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. it may have one of the following values: none: indicates that the video should not be preloaded. metadata: indicates that only video metadata (e.g. length) is fetched. auto: indicates t...
...if autoplay is specified, the browser would obviously need to start downloading the video for playback. the specification does not force the browser to follow the value of this attribute; it is a mere hint. src the url of the video to embed. this is optional; you may instead use the <source> element within the video block to specify the video to embed. ...

HTML: Hypertext Markup Language
ader, allows images defined by the <img> element to be loaded from foreign origins and used in a <canvas> element as if they were being loaded from the current origin. cors settings attributes some html elements that provide support for cors, such as <img> or <video>, have a crossorigin attribute (crossorigin property), which lets you configure the cors requests for the element's fetched data. preloading content with rel="preload" the preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your html <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. this ensures that they are made ...
... references html reference html consists of elements, each of which may be modified by some number of attributes. html documents are connected to each other with links. html element reference browse a list of all html elements. ...

Web Performance
or https as we tend to call it—is crucial in creating secure and safe user experiences. while hardware has reduced the negative impacts tls has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. this article explains the tls handshake process, and offers some tips for reducing this time, such as ocsp stapling, hsts preload headers, and the potential role of resource hints in masking tls latency for third parties. reading performance charts developer tools provide information on performance, memory, and network requests. knowing how to read waterfall charts, call trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance ...
...rywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion. controlling resource delivery with resource hints browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. when used judiciously, this can make fast experience seem even faster. in this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage. performance budgets marketing, design, and sales needs, and developer experience, often ad bloat, third-party scr...

Scripting - Archive of obsolete content
owed to hold a javascript file named webapp.js (called the webapp script). this file will be loaded into the prism chrome window very much like a firefox extension is loaded into the browser chrome window. it can contain the following functions: startup when the app starts, before the user interface is displayed. since the web application has not yet loaded, the window object is still undefined. preload just before the user interface is displayed. returning false causes the application to terminate. load after the main application windows has finished loading. the window object has been initialized and can be used. error if there is an error loading the main app page (e.g. the server is not accessible). shutdown just before the application terminates. prism exposes desktop integration features ...

Elements - Archive of obsolete content
ag. id - the id attribute is a document-unique identifier. src - the url of the style sheet to apply to the binding content. image <!element image empty> <!attlist image id id #implied src uri #required > declares an image resource used by the binding. the image is loaded as soon as the binding is used. you can use this to preload a number of images for later use. the image tag must be inside the resources tag. id - the id attribute is a document-unique identifier. src - the url of the image to load. ...

Index - Game development
l you've finished all the lessons — congratulations! by this point you would have learnt the basics of phaser and the logic behind simple 2d games. 56 scaling 2d, beginner, canvas, games, javascript, phaser, tutorial scaling refers to how the game canvas will scale on different screen sizes. we can make the game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. 57 the score 2d, beginner, canvas, games, javascript, phaser, tutorial, scoring having a score can also make the game more interesting — you can try to beat your own highscore, or your friend's. in this article we'll add a scoring system to our game. 58 win the game 2d, beginner, canvas, games, javascript, phas...

Animations and tweens - Game development
imations and tweens in our game. animations in phaser, animations, involve taking a spritesheet from an external source and displaying the sprites sequentially. as an example, we will make the ball wobble when it hits something. first of all, grab the spritesheet from github and save it in your /img directory. next, we will load the spritesheet — put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images. we will show the sprites sequentially to create the illusion of animation. the spritesheet() method's two extra paremeters determine the width and height of each single frame in the given spritesheet file, ind...

Build the brick field - Game development
our previous variable definitions: var bricks; var newbrick; var brickinfo; the bricks variable will be used to create a group, newbrick will be a new object added to the group on every iteration of the loop, and brickinfo will store all the data we need. rendering the brick image next, let's load the image of the brick — add the following load.image() call just below the others: function preload() { // ... game.load.image('brick', 'img/brick.png'); } you also need to grab the brick image from github and save it in your /img directory. drawing the bricks we will place all the code for drawing the bricks inside an initbricks function to keep it separated from the rest of the code. add a call to initbricks at the end of the create() function: function create(){ // ... i...

Buttons - Game development
need a variable to store a boolean value representing whether the game is currently being played or not, and another one to represent our button. add these lines below your other variable definitions: var playing = false; var startbutton; loading the button spritesheet we can load the button spritesheet the same way we loaded the ball's wobble animation. add the following to the bottom of the preload() function: game.load.spritesheet('button', 'img/button.png', 120, 40); a single button frame is 120 pixels wide and 40 pixels high. you also need to grab the button spritesheet from github, and save it in your /img directory. adding the button to the game adding the new button to the game is done by using the add.button method. add the following lines to the bottom of your create() functio...

Physics - Game development
again at the bottom of create(): ball.body.velocity.set(150, 150); removing our previous update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...

Player paddle and controls - Game development
le we'll create a paddle to move around and hit the ball with. rendering the paddle from the framework point of view the paddle is very similar to the ball — we need to add a variable to represent it, load the relevant image asset, and then do the magic. loading the paddle first, add the paddle variable we will be using in our game, right after the ball variable: var paddle; then, in the preload function, load the paddle image by adding the following new load.image() call: function preload() { // ... game.load.image('ball', 'img/ball.png'); game.load.image('paddle', 'img/paddle.png'); } adding the paddle graphic just so we don't forget, at this point you should grab the paddle graphic from github, and save it in your /img folder. rendering the paddle, with physics next ...

Certificate authority - MDN Web Docs Glossary: Definitions of Web-related terms
a certificate authority (ca) is an organization that signs digital certificates and their associated public keys. this certifies that an organization that requested a digital certificate (e.g., mozilla corporation) is authorized to request a certificate for the subject named in the certificate (e.g., mozilla.org). web browsers come preloaded with a list of certificate authorities trusted to issue digital certificates. learn more certificate authority on wikipedia mozilla included ca certificate list ...

Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
g link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links. if the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded. the prefetch hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched. <link rel="prefetch" href="https://www.example.com/solutions" /> ...

Tips for authoring fast-loading HTML pages - Learn web development
...

Responsive images - Learn web development
ment. this code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below: note: you should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute. why can't we just do this using css or javascript? when the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's css and javascript. that mechanism is useful in general for reducing page load times, but it is not helpful for responsive images — hence the need to implement solutions like srcset. for example, you couldn't load the <img> element, then detect the viewport width with javascript, and then dynamically change the sour...

Web performance resources - Learn web development
should perform as well as possible. below is a quick review of best practices, tools, apis with links to provide more information about each topic. best practices start with learning the critical rendering path of the browser. knowing this will help you understand how to improve the performance of the site. using resource hints such as rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload keep the size of javascript to a minimum. only use as much javascript as needed for the current page. css performance factors use http/2 on your server (or cdn). use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. image optimization (use css animation, or svg if possible). lazy loading parts of your application outside ...

What is web performance? - Learn web development
load time: how long does it take the files required to render the web site to download on to the user's computer? this tends to be affected by latency, how big your files are, how many files there are, and other factors besides. a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as preload) to make files available sooner. making the site usable as soon as possible: this basically means loading your web site assets in a sensible order so that the user can start to actually use it really quickly. any other assets can continue to load in the background while the user gets on with primary tasks, and sometimes we only load assets when they are actually needed (this is called lazy loadi...

Handling common HTML and CSS problems - Learn web development
omplex elements like html <video>, <audio>, and <canvas> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. you can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content. ...

Eclipse CDT
ry (if it exists) from the root of your mozilla tree, and then delete the workspace directory corresponding to your tree. that's it; you can now create a new eclipse workspace and project for your tree from scratch. isn't there a better method of build option discovery? yes, but eclipse doesn't currently support it. instead of processing build console output, eclipse could use something like ld_preload to load its own little library into all the processes that are invoked as part of the build process. this library could then check whether the process is a compiler instance and, if so, use the processes' current working directory and the arguments that were passed to it to reliably obtain the information it needs for each source file that is compiled. this would eliminate the requirement for non...

HTMLIFrameElement.reload()
hange in the future. the reload() method of the htmliframeelement interface is used to reload the content of the <iframe>. syntax instanceofhtmliframeelement.reload(hardreload); returns void. parameters hardreload optional a boolean that indicates whether all the resources to reload must be revalidated (true) or may be taken directly from the browser cache (false). examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification. ...

HTMLIFrameElement.stop()
do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the stop() method of the htmliframeelement interface is used to stop loading the content of the <iframe>. syntax instanceofhtmliframeelement.stop(); returns void. parameters none. examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') { browser.stop(); } else { browser.reload(); } }); specification not part of any specification. ...

HTML parser threading
lag is copied over also. a runnable is dispatched to the parser thread to call to mark the parser uninterrupted and to call nshtml5streamparser::parseavailabledata() on the parser thread. mtokenizermutex is released. speculative loads when the tree builder on the parser thread encounters html script, stylesheet link, video (with a poster frame), base or img or svg script, style or image elements, preload operations are appended to a speculative load queue. there speculative load operations are flushed to the main thread (via the staging area) whenever tree ops are flushed and also whenever nshtml5streamparser::parseavailabledata() is about to stop working. that is, when the parser thread is parsing speculatively, speculative loads continue to be flushed to the main thread even though tree ops acc...

SMILE
een implemented in firefox ("fuel") and in thunderbird ("steel"). objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smileibrowsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/smile/application;1"].getservice(components.interfaces.smileiapplication); ...

STEEL
cation. the library has also been implemented in firefox ("fuel") and in seamonkey ("smile"). objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage steeliapplication objects steeliapplication xpcom although the steel steeliapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/steel/application;1"].getservice(components.interfaces.steeliapplication); other resources steel development plan. bug 408370 bug 1278067 ...

extIApplication
ssful. restart() attempts to restart the application. it is possible for the restart to be canceled. boolean restart() return value boolean value indicating whether the restart was successful. getextensions(acallback) calls acallback with the list of installed extensions. void getextensions(extiextensionscallback acallback) return value none. xpcom although the application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code. the object needs to be accessed like any other xpcom service: var application = components.classes["@mozilla.org/fuel/application;1"].getservice(components.interfaces.fueliapplication); see also fuel (firefox), steel (thunderbird) and smile (seamonkey) ...

Network request details - Firefox Developer Tools
cp=\"this is not a p3p policy! ...

AnalyserNode.getFloatFrequencyData() - Web APIs
lete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too). <!doctype html> <body> <script> const audioctx = new audiocontext(); //create audio source //here, we use an audio file, but this could also be e.g. ...

Manipulating video using canvas - Web APIs
width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2. canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video. the javascript code is imported from a script named processor.js. the javascript code the javascript code in processor.js consists of three methods. initializing the chroma-key player the doload() method is called when the xhtml document initially loads. this method's job is to prepare the variables need...

FetchEvent() - Web APIs
clientid read only the client that the current service worker is controlling. isreload read only a boolean that signifies whether the page was reloaded or not when the event was dispatched. true if yes, and false if not. typically, pressing the refresh button in a browser is a reload, while clicking a link and pressing the back button is not. if not present, it defaults to false. preloadresponse read only a promise which returns a previously-loaded response to the client. replacesclientid read only a domstring which identifies the client which is being replaced by resultingclientid. resultingclientid read only a domstring containing the new clientid if the client changes as a result of the page load. request read only the request object that would have triggered...

FetchEvent - Web APIs
llows us to provide a response to this fetch. constructor fetchevent() creates a new fetchevent object. this constructor is not typically used. the browser creates these objects itself and provides them to fetch event callbacks. properties inherits properties from its ancestor, event. fetchevent.clientid read only the id of the same-origin client that initiated the fetch. fetchevent.preloadresponse read only a promise for a response, or undefined if this fetch is not a navigation, or navigation preload is not enabled. fetchevent.replacesclientid read only the id of the client that is being replaced during a page navigation. fetchevent.resultingclientid read only the id of the client that replaces the previous client during a page navigation. fetchevent.request read only t...

Audio() - Web APIs
r to interact with and/or listen to, or can be used offscreen to manage and play audio. syntax audioobj = new audio(url); parameters url optional an optional domstring containing the url of an audio file to be associated with the new audio element. return value a new htmlaudioelement object, configured to be used for playing back the audio from the file specified by url.the new object's preload property is set to auto and its src property is set to the specified url or null if no url is given. if a url is specified, the browser begins to asynchronously load the media resource before returning the new object. usage notes you can also use other element-creation methods, such as the document object's createelement() method, to construct a new htmlaudioelement. determining when playba...

HTMLLinkElement.as - Web APIs
the as property of the htmllinkelement interface returns a domstring representing the type of content being loaded by the html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch". syntax var as = htmllinkelement.as htmllinkelement.as = as value a domstring. specifications specification status comment preloadthe definition of 'as' in that specification. candidate recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for ...

HTMLLinkElement - Web APIs
ing standard still has it labeled obsolete. until this discrepancy is resolved, you should still assume it is obsolete. htmllinkelement.target is a domstring representing the name of the target frame to which the resource applies. methods no specific method; inherits methods from its parent, htmlelement, and linkstyle. specifications specification status comment preload candidate recommendation defines <link rel="preload">, and the as property. note that currently firefox only supports preloading of cacheable resources. html living standardthe definition of 'htmllinkelement' in that specification. living standard adds the following properties: crossorigin, referrerpolicy, and as. html 5.1the definition of 'htmllinkelement' in that s...

HTMLMediaElement.load() - Web APIs
the htmlmediaelement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning. the amount of media data that is prefetched is determined by the value of the element's preload attribute. this method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's src attribute or by adding or removing <source> elements nested within the media element itself. load() will reset the element and rescan the available sources, thereby causing the changes to take effect. syntax mediaelement.load(); parameters none. return value undefined. usage notes calling load() aborts all ongoing ope...

HTMLMediaElement.networkState - Web APIs
twork_idle 1 htmlmediaelement is active and has selected a resource, but is not using the network. network_loading 2 the browser is downloading htmlmediaelement data. network_no_source 3 no htmlmediaelement src found. examples this example will listen for the audio element to begin playing and then check if it is still loading data. <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('playing', function() { if (obj.networkstate === 2) { // still loading... } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.networkstate' in that specification. living st...

HTMLMediaElement.readyState - Web APIs
. have_enough_data 4 enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption. examples this example will listen for audio data to be loaded for the element `example`. it will then check if at least the current playback position has been loaded. if it has, the audio will play. <audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification. living standard ...

HTMLMediaElement - Web APIs
over the network. htmlmediaelement.paused read only returns a boolean that indicates whether the media element is paused. htmlmediaelement.playbackrate is a double that indicates the rate at which the media is being played back. htmlmediaelement.played read only returns a timeranges object that contains the ranges of the media source that the browser has played, if any. htmlmediaelement.preload is a domstring that reflects the preload html attribute, indicating what data should be preloaded, if any. possible values are: none, metadata, auto. htmlmediaelement.preservespitch is a boolean that determines if the pitch of the sound will be preserved. if set to false, the pitch will adjust to the speed of the audio. this is implemented with prefixes in firefox (mozpreservespitch) and web...

IDBCursor.continuePrimaryKey() - Web APIs
recommendation ...

ServiceWorkerRegistration - Web APIs
installed. this is initially set to null. serviceworkerregistration.active read only returns a service worker whose state is activated. this is initially set to null. an active worker will control a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) serviceworkerregistration.navigationpreload read only returns the instance of navigationpreloadmanager associated with the current service worker registration. serviceworkerregistration.pushmanager read only returns a reference to the pushmanager interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. serviceworkerregistration.sync read only returns a...

Service Worker API - Web APIs
allows us to provide an arbitrary response back to the controlled page. installevent the parameter passed into the oninstall handler, the installevent interface represents an install action that is dispatched on the serviceworkerglobalscope of a serviceworker. as a child of extendableevent, it ensures that functional events such as fetchevent are not dispatched during installation. navigationpreloadmanager provides methods for managing the preloading of resources with a service worker. navigator.serviceworker returns a serviceworkercontainer object, which provides access to registration, removal, upgrade, and communication with the serviceworker objects for the associated document. notificationevent the parameter passed into the onnotificationclick handler, the notificationevent int...

Synchronous and asynchronous requests - Web APIs
sage = function (event) { if (event.data === "hello") { var xhr = new xmlhttprequest(); xhr.open("get", "myfile.txt", false); // synchronous request xhr.send(null); self.postmessage(xhr.responsetext); } }; note: the effect is asynchronous, because of the use of the worker. this pattern can be useful, for example in order to interact with the server in the background, or to preload content. see using web workers for examples and details. adapting sync xhr use cases to the beacon api there are some cases in which the synchronous usage of xmlhttprequest is not replaceable, like during the unload, beforeunload, and pagehide events. you should consider using the fetch() api with the keepalive flag. when fetch with keepalive isn't available, you can consider using the navigato...

Web APIs
mtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints merchantvalidationevent messagechannel messageevent messageport metadata mimetype mimetypearray mouseevent mousescrollevent mousewheelevent mutationevent mutationobserver mutationobserverinit mutationrecord n ndefmessage ndefreader ndefreadingevent ndefrecord ndefwriter namelist namednodemap navigationpreloadmanager navigator navigatorconcurrenthardware navigatorid navigatorlanguage navigatoronline navigatorplugins navigatorstorage networkinformation node nodefilter nodeiterator nodelist nondocumenttypechildnode notation notification notificationaction notificationevent notifyaudioavailableevent o oes_element_index_uint oes_fbo_render_mipmap oes_standard_derivatives oes_texture_float oes_...

Adding captions and subtitles to HTML5 video - Developer guides
ing how subtitles work! html markup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...

Media buffering, seeking, and time ranges - Developer guides
, which will give a valid indication of the end of seekable media. if range requests are enabled this value usually becomes the duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. ...

HTML attribute reference - HTML: Hypertext Markup Language
nt's value will be validated against. ping <a>, <area> the ping attribute specifies a space-separated list of urls to be notified if a user follows the hyperlink. placeholder <input>, <textarea> provides a hint to the user of what can be entered in the field. poster <video> a url indicating a poster frame to show until the user plays or seeks. preload <audio>, <video> indicates whether the whole resource, parts of it or nothing should be preloaded. radiogroup <command> readonly <input>, <textarea> indicates whether the element can be edited. referrerpolicy <a>, <area>, <iframe>, <img>, <link>, <script> specifies which referrer is sent when fetching the resource. rel <a>, <area>, <...

HTTP Index - HTTP
code indicates the protocol the server is switching to as requested by a client which sent the message including the upgrade request header. 220 103 early hints draft, http, informational, needscompattable, needscontent, status code the http 103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response. 221 200 ok http, status code, success the http 200 ok success status response code indicates that the request has succeeded. a 200 response is cacheable by default. 222 201 created http, reference, status code, success the http 201 created success status response code indicates that the request ...

103 Early Hints - HTTP
syntax 103 early hints specifications specification status comments rfc 8297: 103 early hints ietf rfc initial definition browser compatibility the compatibility table in this page is generated from structured data. ...

HTTP response status codes - HTTP
protocol this code is sent in response to an upgrade request header from the client, and indicates the protocol the server is switching to. 102 processing (webdav) this code indicates that the server has received and is processing the request, but no response is available yet. 103 early hints this status code is primarily intended to be used with the link header, letting the user agent start preloading resources while the server prepares a response. successful responses 200 ok the request has succeeded. the meaning of the success depends on the http method: get: the resource has been fetched and is transmitted in the message body. head: the entity headers are in the message body. put or post: the resource describing the result of the action is transmitted in the message body. ...

Lazy loading - Web Performance
eet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to perform some css optimizations to achieve that. fonts by default, font requests are delayed until the render tree is constructed, which can result in delayed text rendering. it is possible to override the default behaviour and preload web font resources using <link rel="preload">, the css font-display property, and the font loading api. see also: element link images and iframes very often, webpages contain many images that contribute to data-usage and how fast a page can load. most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them. loading attribute ...

Optimizing startup performance - Web Performance
don't do one chunk of data after another; do them all at once when possible! don't include scripts or stylesheets that don't participate in the critical path in your startup html file. load them only when needed. reduce the side of your javascript files. try to send the minify version of the file to the browser and use compression like gzip or brotli. utilize resource hints (like preconnect or preload) whenever possible to indicate to the browser which files are more critical for your application. the more stuff you can do asynchronously, the better advantage your app can take of multicore processors. porting issues once the initial loading is done and the app's main code starts to run, it's possible your app may necessarily be single-threaded,especially if it's a port. the most important ...

The building blocks of responsive design - Progressive web apps (PWAs)
create small, medium, and large versions of an image, and then serves the appropriate one according to the browser's resolution and available network speed. mobify.js capturing a very clever technique from mozilla that allows you to capture the source of the page before it's parsed. this way, you can swap out image src values with javascript depending on browser features, circumventing browser preloading issues. this is promising, but doesn't work very well across older browsers. picturefill a javascript-based polyfill for <picture>, which works nicely, but it does require a lot of custom markup. adaptive images a server-side solution, which records the viewport size in a cookie, then resizes images via a combination of php and .htaccess to a more appropriate size, if appropriate. this doe...