页面导入样式的几种方式？ | Lacerta

页面导入样式的几种方式？

回答
  1. link标签 <link rel="stylesheet" type="text/css" href="style.css">
  2. import @import url(style.css);
  3. inline-style <div style="display: none;background:red"></div>
  4. style标签
<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>
  1. js 动态添加
document.querySelector("#element").style.textAlign = 'center';

页面导入样式时，使用link和@import有什么区别？

回答
  1. link是HTML标签；@import是css语法
  2. link无兼容性问题；@import在IE5以下不支持
  3. link在页面加载同时进行加载； @import引入的样式在页面加载完成后加载
  4. link是HTML tag，可以通过JS进行动态加载；@import是css语法，无法通过JS进行动态添加
  5. link不光可以加载CSS，还可以定义rss，定义rel连接属性；@import只能加载CSS
  6. 使用方式不同：<link rel="stylesheet" href="a.css"/> @import url('a.css');

页面加载完成的标识是什么？如何知道页面已经加载完成？

回答

document.readyState

document.readyState 一共包含三个state: loading, interactive, complete

  1. loading When document.readyState has a status of “loading”, it means that the document (example: html file) is being parsed and dealt with.

    Other subresources for page are not a factor yet because the initial document is has just begun parsing, so the browser does not know if they exist.

    The html itself is currently downloaded (the browser has the html), but it is being processed.

    The Navigation timing API time stamp “domLoading” fires right before the document has a status of loading.

  2. interactive When document.readyState has a status of “interactive”, it means that the document (example: html file) is now parsed and loaded, but subresources like CSS and images are still being loaded or parsed.

    When document.readyState reports it is interactive, it also means that DOMContentLoaded event has been fired.

     window.addEventListener('DOMContentLoaded', (event) => {
     console.log('DOM fully loaded and parsed');
 });

  3. complete When document.readyState has a status of “complete”, it means that the document (example: html file) is now parsed and loaded and all known document subresources like CSS and images have been parsed and loaded.

    When document.readyState reports it is complete, it also means that the load event has been fired.

     document.onreadystatechange = function () {
   if (document.readyState === "complete") {
     // initApplication();
   }
 }

参考： Document.readyState

link中的rel的作用是？

rel的作用是指明了当前document与link的document的关系，常用的有stylesheet, alternative, prev/next, preload, prefetch, dns-prefetch, prerender, preconnect

  1. stylesheet - 用来引入css样式表

    <link rel="stylesheet" type="text/css" href="style.css">

  2. alternative

    Provides a link to an alternate version of the document (i.e. print page, translated or mirror). <link rel="alternate" type="application/atom+xml" title="W3Schools News" href="/blog/news/atom">

  3. prev/next

    Indicates that the document is a part of a series, and that the previous/next document in the series is the referenced document

    <link rel="prev" href="http://www.example.com/page-2.html">

    <link rel="next" href="http://www.example.com/page-4.html">

  4. preload

    Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the “as” attribute (and the priority associated with that destination).

    <link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>

  5. prefetch

    Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation.

    Prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be needed later, and store them in the browser’s cache. Once a page has finished loading it begins downloading additional resources and if a user then clicks on a prefetched link, it will load the content instantly.

    <link rel="prefetch" href="/images/big.jpeg">

  6. dns-prefetch

    Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin.

    DNS prefetching allows the browser to perform DNS lookups on a page in the background while the user is browsing. This minimizes latency as the DNS lookup has already taken place once the user clicks on a link.

    <link rel="dns-prefetch" href="//fonts.googleapis.com">

  7. prerender

    Specifies that the browser should pre-render (load) the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load (because the page is already loaded).

    Prerendering is very similar to prefetching in that it gathers resources that the user may navigate to next. The difference is that prerendering actually renders the entire page in the background, all the assets of a document.

    Prerendering is resource heavy and can cause bandwidth waste, especially on mobile devices.

    <link rel="prerender" href="https://www.keycdn.com">

  8. preconnect

    Specifies that the browser should preemptively connect to the target resource’s origin.

    Preconnect allows the browser to setup early connections before an HTTP request is actually sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This in turn eliminates roundtrip latency and saves time for users.

    <link href="https://cdn.domain.com" rel="preconnect" crossorigin>

参考： Resource Hints - What is Preload, Prefetch, and Preconnect?