网页制作

CSS 的加载及加载顺序简介
网页制作 2024/11/15 佚名
3 2

前言

关于前端css性能优化，网上很多类似文章，我之前也写过，《 网站前端性能优化之javascript和css 》，感兴趣的可以去看下。今天我们旧事重提，再来谈谈css的加载，及加载顺序。

通常的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标签之后，这样就不会出现加载的冲突了。

总结

以上所述是小编给大家介绍的CSS 的加载及加载顺序简介，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
css加载顺序,css加载
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“CSS 的加载及加载顺序简介”

暂无“CSS 的加载及加载顺序简介”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com