如何提高CSS性能?CSS优化、提高性能提升总汇

时间: 2017-11-13阅读: 667标签: 性能

如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。


 1、尽量将样式写在单独的css文件里面,在head元素中引用

(1)内容和样式分离,易于管理和维护

(2)减少页面体积

(3)css文件可以被缓存、重用,维护成本降低


2、不使用@import  

如果你使用@import属性引入css的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格


3、避免使用复杂的选择器,层级越少越好  

项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。建议选择器的嵌套最好不要超过三层,简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。


4、精简页面的样式文件,去掉不用的样式  

(1)样式文件偏大,影响加载速度

(2)浏览器会进行多余的样式匹配,影响渲染时间。

根据当前页面需要的css去合并那些当前页面用到的CSS文件, 合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。


5、利用CSS继承减少代码量  

我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。  


6、慎重使用高性能属性:浮动、定位;  

一方面,浮动的种种复杂的布局规则注定了它是一种试探性局部 reflow 式的布局算法。浏览器需要花费很多精力来处理它。另一方面,浮动元素的布局牵涉到的因素更多。在同一布局空间中,所有浮动元素均存在于“静态层”之上的“浮动层”,不仅浮动层中的多个浮动元素会相互影响,浮动元素与静态层也有互动。


7、css样式前缀

标准化各种浏览器前缀,带浏览器前缀的在前,标准的在后


8、css属性值 

属性值为0时,不加单位
属性值为浮点数0.**时,可以省略小数点前的0 

 

CSS Lint 


这是一个发现CSS书写问题,提升性能的工具 ,如:

  • 修复解析错误(Parsing errors should be fixed)

  • 避免使用多类选择符(Don't use adjoining classes)

IE6以及更古老的浏览器对类似.foo.bar的多类选择符解析不正确
  • 移除空的css规则(Remove empty rules)

这个规则不包含任何属性,类似:.foo { }
空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
  • 正确使用display的属性(Use correct properties for a display)

由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint会检查一下几点:
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
  • 不滥用浮动(Don't use too many floats)

虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。
  • 不滥用web字体(Don't use too many web fonts)

对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
  • 不声明过多的font-size(Don't use too may font-size declarations)

这是设计层面的问题,设计精良的页面不会有过多的font-size声明。
  • 不在选择符中使用ID标识符(Don't use IDs in selectors)

主要考虑到样式重用性以及与页面的耦合性。
  • 不给h1~h6元素定义过多的样式(Don't qualify headings)

全站统一定义一遍heading元素即可,若需额外定制样式,可使用其他选择符作为代替。
  • 不重复定义h1~h6元素(Heading styles should only be defined once)

  • 值为0时不需要任何单位(Zero values don't need units)

  • 标准化各种浏览器前缀(Vendor prefixed properties should also have the standard)

通常将浏览器前缀置于前面,将标准样式属性置于最后,类似:
.foo {-moz-border-radius: 5px;border-radius: 5px; }
  • 使用CSS渐变等高级特性,需指定所有浏览器的前缀(CSS gradients require all browser prefixes)

  • 避免让选择符看起来像正则表达式(Avoid selectors that look like regular expressions)

CSS3添加了一些类似~=等复杂属性,也不是所有浏览器都支持,需谨慎使用。
  • 遵守盒模型规则(Beware of broken box models)


前端性能的本质是什么?

性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

高性能Javascript总结

Js高性能总结:加载和运行、数据访问、DOM编程、算法和流程控制、响应接口、Ajax 异步JavaScript和XML、编程实践...

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

前端性能优化_css加载会造成哪些阻塞现象?

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

提高js加载速度,实现js无阻塞加载方式,高性能的加载执行JavaScript

为解决JS加载速度慢,采用js的延时加载,和动态加载。由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。