CSS 的加载及加载顺序简介
|
副标题[/!--empirenews.page--]
关于前端css性能优化，网上很多类似文章，我之前也写过，《 网站前端性能优化之javascript和css 》，感兴趣的可以去看下。今天我们旧事重提，再来谈谈css的加载，及加载顺序。 通常的css加载顺序 一般情况下，我们css样式表是放在头部，同时为了减少请求，我们通常对css进行一个合并压缩。 目前我们css一般是如下加载的： <head> <link rel="stylesheet" href=http://www.jb51.net/css/"/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=http://www.jb51.net/css/"/site-header.css"> <header>…</header> <link rel="stylesheet" href=http://www.jb51.net/css/"/article.css"> <main>…</main> <link rel="stylesheet" href=http://www.jb51.net/css/"/comment.css"> <section class="comments">…</section> <link rel="stylesheet" href=http://www.jb51.net/css/"/about-me.css"> <section class="about-me">…</section> <link rel="stylesheet" href=http://www.jb51.net/css/"/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=http://www.jb51.net/css/"path/to/haorooms.css" as="style" onload="this.rel='stylesheet'"> 防止浏览器禁止js，保险起见，也可以如下： <link rel="preload" href=http://www.jb51.net/css/"path/to/haorooms.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href=http://www.jb51.net/css/"path/to/haorooms.css"></noscript> 为了避免有些浏览器会重新调用处理程序rel='stylesheet'这个属性，我们一般推荐如下写法： <link rel="preload" href=http://www.jb51.net/css/"path/to/haorooms.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href=http://www.jb51.net/css/"path/to/haorooms.css"></noscript> 为了更好的兼容rel=preload，可以使用loadCSS ，github地址： https://github.com/filamentgroup/loadCSS 因此， 不考虑浏览器兼容问题的情况下 （考虑兼容问题，可以使用loadCss，这里不多演示），我们对上面代码再次进行优化： <head> <link rel="stylesheet" href=http://www.jb51.net/css/"/首屏加载css.css"> <link rel="preload" href=http://www.jb51.net/css/"/不是首屏加载的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=http://www.jb51.net/css/"css/*.css"> <script src=http://www.jb51.net/css/"js/*.js></script> </head> DOM文档的加载顺序是由上而下的顺序加载； 1、DOM加载到link标签 css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中； 2、DOM加载到script标签 （编辑：衡阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
