首頁 > web前端 > html教學 > CSS性能优化_html/css_WEB-ITnose

CSS性能优化_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:37:59
原創
999 人瀏覽過

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后,会出现如果页面比较大加载较慢,则用户一开始会看见未渲染的页面,直到页面加载完后才开始渲染。





相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板