页面中的CSS性能优化
2024-09-04 16:38:27
大型网站中会有多个CSS文件,性能优化是不要的。主要有以下几个方法:
一:压缩样式表:
通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载、解析和执行。对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码。
二:合并多个CSS文件
因为每一个文件就是一个HTTP请求,合并CSS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。
三:使用link标签而不使用@inport
<link rel="stylesheet" href="style.css">
@import url('style.css');
link与@import区别:
- link是XHTML标签,而@import是CSS提供的一种方式。link处理加载CSS文件还可以加载其他其他文件,还可以定义rel连接属性。而@import只能加载css
- 加载顺序差别:当一个页面被加载的时候,link引入的css文件也会同时被加载。而@import引入的css文件只有在页面加载完成后才会加载。@import加载css会出现闪烁(页面开始没有样式)。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
最新文章
- shiro的使用2 灵活使用shiro的密码服务模块
- 从零开始学习jQuery (三) 管理jQuery包装集
- wordpress-4.4.1 数据库表结构解析
- 应用C#和SQLCLR编写SQL Server用户定义函数
- flow.ci + Github + Slack 一步步搭建 Python 自动化持续集成
- Javascript之document对象用法(很重要)
- Android下拉刷新底部操作栏的隐藏问题
- jquery 获得多选框的值
- 将商户后台_门店管理后台_平台后台管理v1.0 Axure RP项目上传到svn服务器步骤
- Paxos算法 Paxos Made Simple
- PE框架学习之道:PE框架——发送报文流程
- 【C++ Primer每天刷牙】一间 迭代器
- 201521145048《java程序与设计》第9周学习总结
- Java基本语法(一)
- HTTP状态码--含义
- phpstorm 注释模板
- POJ.1830.开关问题(高斯消元 异或方程组)
- 如何提取cocos iOS应用程序APP与游戏安装包里的资源与文件
- java8新特性: lambda表达式:直接获得某个list/array/对象里面的字段集合
- Coprime Arrays CodeForces - 915G (数论水题)
热门文章
- 回文自动机 + DFS --- The 2014 ACM-ICPC Asia Xi’an Regional Contest Problem G.The Problem to Slow Down You
- 随机算法 - HNU 13348 Finding Lines
- SQL Server,MySql,Oracle数据库的默认端口号
- SQL on Hadoop系统的最新进展(1)
- Python之两个列表一起打乱
- pycharm Tab键设置成4个空格
- selenium 获取按钮的笔记
- openssl升级并发症
- VS2013和VS2010工具集和字符集
- swift - SQLite数据库的使用(引用)