<link />Only in the<head />Insert in?

It isn’t. In some cases, can also be inserted into , depending on whether the current has a body-OK link type. For example, in daily development, it is used

  • <link rel="stylesheet" href="main.css" />To link toThe stylesheet;
  • <link rel="icon" href="favicon.ico" />To link toSite icon.

But only the stylesheet type is body-OK and can be inserted into . For other types, see HTML Standard.

We can use it this way (highly recommended)

// index.html <head> <link rel="stylesheet" href="./styles/head.css"> </head> <body> <! -- demo 1 --> <link rel="stylesheet" href="./styles/body.css"> <h5 class="title">Hello world</h5> <! </body> </body>Copy the code

But this is not a good practice to follow; It makes more sense to separate your element from your body content and place it in .

<link />Of the labelmediaattribute

In daily development, sometimes you run into situations that require media queries, such as

@media screen and (max-width: 900px) {. Title {color: red; @media screen and (max-width: 600px) {. Title {color: green; }}Copy the code

This can be done if the business is not complex, but when there are many styles, the current stylesheet is complex and not unclear. We can separate styles by using , which specifies the media type for external resources.

<link /> 的 disabledattribute

Often used to enable or disable stylesheets, for example

document.querySelector('link[href="red.css"]').disabled = false;
Copy the code

Red. CSS can be disabled, usually with title, rel to achieve site skin function, see details

Use disabled to achieve website skin link rel=alternate website skin function best.

using<link />The tag completes the browser preloading mechanism

When optimizing the first screen of a page, the first thing to do is to limit the size and number of resources requested for the first time, but this will require reloading every time you jump to a page that has no cached resources. If it can be satisfied at page load time

  • The resources needed for the first screen are immediate resources that you want to acquire early in the page loading process and pre-load before the browser’s main rendering mechanism kicks in.
  • After the first screen is loaded, the resources of other pages are loaded, so that the time of the first screen is not occupied, and other pages can be optimized.

The rel attribute value of the tag, preload, does this to indicate which resources are needed immediately after the page loads. To complete the basic configuration, you also need to specify the resource path and type, instance, of the resource to be preloaded using the href and as attributes

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</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> <h5 class="title">Hello world</h5> <! * 2048 --> <script SRC ="main.js"></script> </body> </ HTML >Copy the code

When using preloading, waterfall follows

When preloading is not used

From the diagram, it is clear that the loading of main.js is actually quite different, which is the benefit of preloading. We can preload the resources on the first screen, and the loading time of other resources, we can control through scripting, by creating a new HTMLLinkElement to achieve.

Var preloadLink = document.createElement("link"); var preloadLink = document.createElement("link"); preloadLink.href = "myscript.js"; preloadLink.rel = "preload"; preloadLink.as = "script"; document.head.appendChild(preloadLink); }Copy the code

<link />The onload event

Like the window.onload event, it gives us the ability to listen when the stylesheet has finished loading (but not yet applied to the content), as well as to listen through error to see if an exception occurred during loading.

<script> function sheetLoaded() { // Do something interesting; the sheet has been loaded } function sheetError() { alert("An error occurred loading the stylesheet!" ); } </script> <link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">Copy the code