首页营销推广网站设计软件开发案例鉴赏解决方案服务资讯

课堂动态资讯 App开发

谈谈css的加载及加载循序

2018-01-10 09:46:00 3359 4 编辑：深正互联来源：互联网

通常的css加载循序

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

<head>

</head>

<body>

…content…

</body>

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

问题：

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

换个思路

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

<head>

</head>

<body>

</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，我们可以如下写法：

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

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

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

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

<head>

</head>

<body>

</body>

本站文章均为深正网站建设摘自权威资料，书籍，或网络原创文章，如有版权纠纷或者违规问题，请即刻联系我们删除，我们欢迎您分享，引用和转载，但谢绝直接搬砖和抄袭！感谢...

返回首页上一篇：在ThinkPHP中session无法传值的问题下一篇：前端薪资竟最差？程序员跳槽时如何才能谈个好价钱

联络方式：

深圳 · 龙岗 · 大运软件小镇22栋201

电话：400 182 8580

邮箱：szhulian@qq.com

微信公众号

新浪微博

扫描名片

15年

技术从业经验

多一份方案，会有收获... 联系深正互联，免费获得专属《策划方案》及报价

在线咨询

微信交谈

拒绝骚扰，我们只想为给您带来一些惊喜...

深入了解，只为更深度的信任与合作

3000+企业的见证，深正互联希望与你同行，未来在路上...

关于深正互联

深正互联，Since2006年，是深圳地区一家专注于App定制，app开发，微信小程序开发，微商城，分销系统，SaaS系统开发和高端网站设计的技术型公司，公司位于深圳大运软件小镇11栋，至成立以来，坚持从事互联网技术开发和服务，在移动端App开发，小程序定制，响应式网站开发，高端网站设计等技术领域有扎实的技术功底，对移动端数据算法，社交/电商/系统等开发领域有深厚的技术沉淀。目前已经成功服务近5800家企业，遍及101个行业和领域，其中包括一些大型的集团或上市公司，您的参与和支持，相信我们能给您带来好运！
我们的不同

1、专注于技术开发，全程多名设计师/程序开发工程师与你一对一交流；
2、承诺做到您100%满意为准，不满意，承诺全额退款；
3、从客户现实出发，为客户省成本，保效益，创价值，达目标；
4、售后问题及时，承诺2小时内做出响应，24小时内售后完成。
5、从过往经验观察，深正互联能为您带来好运，合作过的客户都已经壮大成长...