浅析CSS 的加载及加载顺序-css教程-PHP中文网

首页

web前端

css教程

浅析CSS 的加载及加载顺序

小云云

Dec 26, 2017 am 09:20 AM

css 顺序

本文很适合基础及小伙伴们，本文主要给大家介绍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&#39;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=&#39;stylesheet&#39;">

登录后复制

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

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel=&#39;stylesheet&#39;">

登录后复制

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

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel=&#39;stylesheet&#39;">
<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=&#39;stylesheet&#39;">
</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标签之后，这样就不会出现加载的冲突了。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7478

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么看日期 Apr 07, 2025 pm 03:03 PM

答案：可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤：引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。