Requirements: When requesting a web site, you need to load a lot of resources, network requests also affect the speed of web page rendering, when the user clicks on the operation to load some resources may affect the user experience, now the rapid development of the Internet, bandwidth and traffic are no longer so expensive, how to preload resources in advance or establish a link with the target server in advance?
Preconnect
The keyword preconnect for element properties is a hint to the browser that the user may need resources from the target source so that the browser can use themImprove the user experience by preemptively initiating connections to this source。
preconnect allows the browser to perform a number of actions before an HTTP request is officially sent to the server, including DNS resolution, TLS negotiation, TCP handshake, which eliminates round-trip latency and saves time for the user.
Preconnect is an important means of optimization to reduce the round-trip path in many requests - in some cases by hundreds or thousands of milliseconds of latency.
Here's an example of using preconnect for Google Fonts, where by adding a preconnect prompt to fonts.gstatic.com, the browser will immediately initiate a request that will be executed in parallel with the CSS request. In this scenario, preconnect eliminates three RTTs (Round-Trip Time) from the critical path andReduced latency by more than half a second。
The syntax is as follows:
Documentation:The hyperlink login is visible.
DNS-prefetch uses DNS prefetch
The keyword dns-prefetch of the element attribute is to alert the browser to the user that the user may need a resource from the target source, so the browser can improve the user experience by preemptively performing DNS resolution for that source.
DNS prefetching allows the browser to be on the page while the user is browsingRun DNS resolution in the background。 This way, DNS resolution is completed when the user clicks on a link, so latency can be reduced. DNS prefetching of a given URL can be done by adding rel="dns-prefetch' to the properties of a link tag, we recommend handling Google fonts, Google Analytics and CDN.
"DNS requests have very little bandwidth traffic, but latency can be high, especially on mobile devices. DNS specified by prefetching can significantly reduce latency in certain scenarios, such as when a user clicks on a link. Sometimes, even a one-second delay can be reduced - Mozilla Developer Network"
The syntax is as follows:
Documentation:The hyperlink login is visible.
Preload preloaded
The preload value of the element property allows you to declare a fetch request in HTML, specifying the resources that the page will need soon, and you want to start loading early in the page's lifecycle, before the browser's main rendering mechanism starts. This ensures that they are available earlier and less likely to block the rendering of the page, improving performance. Even if the name contains the term load, it doesn't load and execute the script, but just schedules it to download and cache with a higher priority.
Preload is a new web standard that controls how specific resources are loaded, an upgrade to the subresource prefetch, which was deprecated in January 2016. This command can <link> be used in , e.g. <link rel="preload">. In general, it's best to use preload to load your most important resources, such as images, CSS, JavaScript, and font files. This is not to be confused with browser preloading, which only preloads resources declared in HTML. The preload directive actually overcomes this limitation and allows preloading resources defined in CSS and JavaScript, and allows decisions about when to apply each resource.
Preload differs from prefetch in that it focuses on the current page and loads resources with high priority, while Prefetch focuses on the resource that the next page will load and loads with low priority. Also note that preload does not block the window's onload event.
Many different content types can be preloaded. The possible as property values are:
audio: An audio file, usually used for <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
embed: The resource to be embedded <embed>in the element.
fetch: A resource to be accessed via fetch or XHR request, such as an ArrayBuffer or JSON file.
font: 字体文件。
image: Image file.
object: The resource to be embedded <object>in the element.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
worker: A JavaScript web worker or shared worker.
video: a video file, usually used for <video>.
The syntax is as follows:
Documentation:The hyperlink login is visible.
|
Posted on 9/26/2022 9:45:08 PM
|
|
|
|
Posted on 9/28/2022 8:54:26 AM
|
