当前位置:Gxlcms > css > 浅析CSS的加载及加载顺序

浅析CSS的加载及加载顺序

时间:2021-07-01 10:21:17 帮助过:21人阅读

本文很适合基础及小伙伴们,本文主要给大家介绍CSS 的加载及加载顺序以及遇到的问题思路解析,文中还给大家补充介绍了关于html,css,js三者的加载顺序问题,需要的朋友参考下吧,希望能帮助到大家。

通常的css加载顺序

一般情况下,我们css样式表是放在头部,同时为了减少请求,我们通常对css进行一个合并压缩。 目前我们css一般是如下加载的:

<head>
  <link rel="stylesheet" href="/all-of-my-styles.css">
</head>
<body>
  …content…
</body>

这样可以,但是有几个性能问题,我们可以继续优化:

问题:

所有的css都合并压缩成一个文件,放在页面头部加载。可能首屏我们仅仅用到一点点css,却在头部加载了所有的css,造成资源的不合理加载和浪费。假如css很大,严重影响网页加载速度和首屏显示速度。

换个思路

假如不合并,单个css压缩引用,文件大小是小了,但是请求数量多了一些。 权衡二者,并且进行性能测试对比,发现如下写法确实比我们所有css放在头部一次性加载,首屏显示速度要快些:

<head>
</head>
<body>
  <!-- HTTP/2 push this resource, or inline it, whichever's faster -->
  <link rel="stylesheet" href="/site-header.css">
  <header>…</header>
  <link rel="stylesheet" href="/article.css">
  <main>…</main>
  <link rel="stylesheet" href="/comment.css">
  <section class="comments">…</section>
  <link rel="stylesheet" href="/about-me.css">
  <section class="about-me">…</section>
  <link rel="stylesheet" href="/site-footer.css">
  <footer>…</footer>
</body>

但是还是有性能可以优化的地方!

例如:

我们首屏仅仅显示了头部和文章,其他模块首屏不显示。那么,其他模块的css我们可以完全异步来加载。如何异步加载呢?

请看下面

loadCSS 及 Preload

关于preload,推进2篇文章给大家看下:

1、通过rel="preload"进行内容预加载: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content

2、preload 的w3文档: https://www.w3.org/TR/preload/

对于一些不是首屏加载的css,我们可以如下写法:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">

防止浏览器禁止js,保险起见,也可以如下:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>

为了避免有些浏览器会重新调用处理程序rel='stylesheet'这个属性,我们一般推荐如下写法:

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>

为了更好的兼容rel=preload,可以使用loadCSS ,github地址: https://github.com/filamentgroup/loadCSS

因此, 不考虑浏览器兼容问题的情况下 (考虑兼容问题,可以使用loadCss,这里不多演示),我们对上面代码再次进行优化:

<head>
  <link rel="stylesheet" href="/首屏加载css.css">
  <link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>
<body>
  <header>…</header>
  <main>…</main>
  <section class="comments">…</section>
  <section class="about-me">…</section>
  <footer>…</footer>
</body>

PS:下面看下关于html,css,js三者的加载顺序问题

<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/*.css">
    <script src="js/*.js></script>
</head>

DOM文档的加载顺序是由上而下的顺序加载;

1、DOM加载到link标签

css文件的加载是与DOM的加载并行的,也就是说,css在加载时Dom还在继续加载构建,而过程中遇到的css样式或者img,则会向服务器发送一个请求,待资源返回后,将其添加到dom中的相对应位置中;

2、DOM加载到script标签

由于js文件不会与DOM并行加载,因此需要等待js整个文件加载完之后才能继续DOM的加载,倘若js脚本文件过大,则可能导致浏览器页面显示滞后,出现“假死”状态,这种效应称之为“阻塞效应”;会导致出现非常不好的用户体验;

而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者(function(){})或者window.onload,即是让DOM文档加载完成之后才执行js文件,这样才不会出现查找不到DOM节点等问题;

js阻塞其他资源的加载的原因是:浏览器为了防止js修改DOM树,需要重新构建DOM树的情况出现;

3、解决方法

前提,js是外部脚本;

在script标签中添加 defer=“ture”,则会让js与DOM并行加载,待页面加载完成后再执行js文件,这样则不存在阻塞;

在scirpt标签中添加 async=“ture”,这个属性告诉浏览器该js文件是异步加载执行的,也就是不依赖于其他js和css,也就是说无法保证js文件的加载顺序,但是同样有与DOM并行加载的效果;

同时使用defer和async属性时,defer属性会失效;

可以将scirpt标签放在body标签之后,这样就不会出现加载的冲突了。

相关推荐:

html、css以及js文件加载顺序及执行情况

页面加载顺序问题_html/css_WEB-ITnose

Java中类的加载顺序执行结果详细介绍

以上就是浅析CSS 的加载及加载顺序的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行