performance - How to load CSS asynchronously without using JavaScript?

Question

Welcome To Ask or Share your Answers For Others

performance - How to load CSS asynchronously without using JavaScript?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

performance - How to load CSS asynchronously without using JavaScript?

Suppose if I have a website http://somethingsomething.com

And I have 3 css file

common.css
homepage.css
inner-pages.css

homepage.css is required for homepage and common.css is for whole site but inner-pages.css is for other pages only and it's big file. Is it possible to load inner-pages.css after homepage data download. In the same way like we use async attribute for script tag. As far as I know async attribute is only for JS not CSS

my one friend suggested to use requirejs for this http://requirejs.org/docs/faq-advanced.html#css but I don't want to use javascript to load css and even I would think upon JS way i would not use require.js just for this. So if it is not possible with CSS only. what would be the simple JS way to do this?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:57:53+0000

Async CSS with media="bogus" and a <link> at the foot Say we've got our HTML structured like this:

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

More at http://codepen.io/Tigt/post/async-css-without-javascript

Categories

performance - How to load CSS asynchronously without using JavaScript?

performance - How to load CSS asynchronously without using JavaScript?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags