The difference between

1. Loading time is different

Link refers to the content of the LINK tag that is synchronized when the HTML tag is loaded into the DOM. The resources imported by @import need to be loaded after the DOM is loaded

2. The operability of JS varies

The link tag can be dynamically inserted into a document using JS, but the @import tag cannot

Performance optimization based on Link

The link REL attribute values can be preload, prefetch, or dnS-prefesh

preload

MDN official note

The rel attribute value of the element preload allows you to write declarative resource requests inside the element of your HTML page, specifying which resources are needed immediately after the page loads. For this immediate-need resource, you may want to acquire it early in the page loading lifecycle, preloading it before the browser’s main rendering mechanism kicks in. This mechanism allows resources to be loaded and available earlier and is less likely to block the initial rendering of the page, thus improving performance. This article provides a basic explanation of how to use the Preload mechanism effectively.

Tell the browser that certain resources on the current page need to be loaded first. When the page uses these resources, it will achieve smoother results

<head> <meta charset="utf-8"> <title>JS and CSS preload example</title> <link rel="preload" href="style.css" as="style">  <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js"></script> </body>Copy the code

Here we pre-load style.css and main.js to make them immediately available when the page uses them

prefetch

MDN official note

As the value of rel in the attribute of element , the keyword prefetch is used to remind the browser that users may need to load target resources in future browsing, so the browser may obtain and cache corresponding resources in advance to optimize user experience.

Tell the browser that other pages are likely to use certain resources. When the network thread is idle, it can load these resources first

pageA.html
<head>
  <meta charset="utf-8">
  <title>page A</title>

  <link rel="prefetch" href="pageB/images/B.png">
</head>

<body>
  <h1>page A</h1>
</body>
Copy the code

Here, we load the B.png of pageB page in advance on the pageA page, and when the user jumps to the B page, the B.png can be quickly displayed

dns-prefetch

MDN official note

Dns-prefetch is an attempt to resolve a domain name before requesting a resource. This could be a file to load later, or it could be the target of a link the user is trying to open.

When the browser requests resources from other domain names, it will perform DNS resolution first. Dns-prefetch is to perform DNS resolution in advance. When requesting resources from third-party domain names, it can achieve faster experience of LLDB

<link rel="dns-prefetch" href="https://fonts.googleapis.com/"> 
Copy the code

Here we request the font file under the domain name of the third party, we can do DNS resolution first. To summarize

  1. Preload focuses on the resource load priority of the current page and optimizes the page that is currently displayed
  2. Prefetch focuses on loading resources from other pages and optimizes the display of pages that can be accessed by future users
  3. Dns-prefetch Pays attention to cross-domain resource requests and performs DNS resolution in advance