CSS性能优化

CSS的性能也会影响页面的请求数加载速度及渲染效率,总结CSS的性能优化主要有以下几方面:

一、CSS的文件大小压缩,主要对字节数进行压缩,CSS文件带大小会增加网络额外开销,尤其是访问量比较大的页面。主要方法有以下:

1.减少CSS文件中空格等不必要的多余字符,语法上尽可能多的应用缩略写法(如 margin 10px;)。

2.有点浏览器支持解压gzip格式的压缩文件,可设置服务器将相应文件压缩成gzip包。

二、对CSS进行结构上的抽离,拆分,必要时可应用按需加载的方式加载CSS文件,尽可能多的使用浏览器缓存

抽离主要是抽离出共性的属性,将特性的属性拆分出去,每个页面都加载共性属性的文件,只在需要页面或者需要的时候加载特性文件,这样可以避免css文件结构庞大,逻辑混乱。但是有时候拆分会导致页面请求数增加,需要综合页面整体来考虑。

三、CSS语法上主要就是关注选择器的效率:

分析选择器最根本的原则就是选择器的解析是从右到左解析。所以最右面的选择对性能的影响比较大,一般称为关键选择器。关键选择器越具体则速度越快:

常见选择器的效率排序:

ID选择器   > 类选择器  > 标签选择器(div h1) > 相邻选择器 (h1+p) >子选择器 ( ul>li )>后代选择器(li a ) >通配符>属性选择器( a[rel ="external"] ) >伪类选择器( a : hover)

通用规则:

1. ID 选择器前避免父选择器,ID选择器已经可以定位到精确的标签不需要再去筛选父类,如果需要加父类说明页面ID没有遵循唯一性。

2.类 选择器前应避免父选择器,如果必须给类选择器前加上父选择器,说明类选择器的结构问题,最好对CSS进行重构。

3.尽量避免使用后代选择器。后代选择器会一直遍历所有的父结点直到根结点,直到找到符合的标签,所以对性能消耗比较大

4.子选择器的关键选择器应该尽量具体。

四、CSS文件位置最好放到head中,即在页面结构解析时,就可以进行页面渲染。如果放在body中或者body后,会出现如果页面比较大加载较慢,则用户一开始会看见未渲染的页面,直到页面加载完后才开始渲染。

时间: 2024-12-24 19:54:24

CSS性能优化的相关文章

第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport <meta name="viewport" content="width=device-width,initial-scale=1"> [[布局]] [水平居中] 一.text-align和inline

CSS性能优化探讨

大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向左来进行匹配的,因此最右边的选择符就是关键选择符. Descendant selector #toc > li {font-weight: bold} 浏览器首先会查找页面上所有的“li”节点,然后再去做进一步的判断:如果它的父节点的 id 为“toc”,则匹配成功. Descendant sele

CSS 性能优化篇

 CSS 性能优化总结篇 1.命名与备注规范化 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体佈局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:fr

页面中的CSS性能优化

大型网站中会有多个CSS文件,性能优化是不要的.主要有以下几个方法: 一:压缩样式表: 通过构建工具压缩CSS文件,能够减少文件的大小,从而得到更快的下载.解析和执行.对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码. 二:合并多个CSS文件 因为每一个文件就是一个HTTP请求,合并CSS文件.文件数量的减少就会带来请求数量的减少和更快的页面加载速度. 三:使用link标签而不使用@inport 1 <link rel="styl

CSS性能优化的技巧(一)

下面我们开始介绍实践型的4个优化技巧,先从首屏关键CSS开始.1. 内联首屏关键CSS(Critical CSS)性能优化中有一个重要的指标——首次有效绘制(First Meaningful Paint,简称FMP)即指页面的首要内容(primary content)出现在屏幕上的时间.这一指标影响用户看到页面前所需等待的时间,而**内联首屏关键CSS(即Critical CSS,可以称之为首屏关键CSS)**能减少这一时间.大家应该都习惯于通过link标签引用外部CSS文件.但需要知道的是,将

CSS性能优化的技巧(二)

前面已经说完了实践型的4个优化技巧,下面我们介绍下建议型的4个技巧.1. 有选择地使用选择器大多数朋友应该都知道CSS选择器的匹配是从右向左进行的,这一策略导致了不同种类的选择器之间的性能也存在差异.相比于#markdown-content-h3,显然使用#markdown .content h3时,浏览器生成渲染树(render-tree)所要花费的时间更多.因为后者需要先找到DOM中的所有h3元素,再过滤掉祖先元素不是.content的,最后过滤掉.content的祖先不是#markdown

CSS性能优化新属性:will-change

---恢复内容开始--- will-change属性通过告诉浏览器什么属性.什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率. 这个属性可以有4个值: auto: 实行标准浏览器优化. scroll-position: 指明元素的滚动位置将会出现动画变化,浏览器应该为滚动视窗内容的不可见部分事先做好准备. contents: 指明元素的内容将会发生变化,浏览器不要缓存它们的内容. <custom-ident>: 指明will-change实施的目标属性,比如t

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

CSS性能分析,如何优化CSS提高性能

css匹配原理 在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的. 我们可能会这样写上一行代码 //css .con .loulan1 p span{ display: block; } //html<div class="con">     <div class="loulan">         <p><span>文字</span></p>