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

javascript admin 216400 22 Comment

1、不使用@import

这条手段已经是众所周知,这里简单提一下,@import影响css文件的加载速度

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

有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。

建议选择器的嵌套最好不要超过三层,比如:20160227113231_59344

Homo Symbolicus: The Dawn of Language, Imagination and Spirituality


header.logo.text{}
可以优化成

haeder.logo-text{}
简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

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

很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:

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

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


Reproduced please indicate the source: Feehi CMS demo » 精简页面的样式文件,去掉不用的样式

Like (20) or Share (0)
Guest Post my comment   Change account
Cancel comment

emoj
(22)person posted
  1. adasdad
    游客2020-05-23 14:05 (4 months ago) 回复
  2. asdasdasdasd
    游客2019-11-22 09:35 (10 months ago) 回复
  3. ddd
    游客2019-10-15 12:31 (11 months ago) 回复
  4. <script>alert('hihi')</script>
    游客2019-07-04 13:43 (a year ago) 回复
  5. 恭喜
    游客2019-07-04 13:43 (a year ago) 回复
  6. 777
    游客2019-03-21 17:09 (a year ago) 回复
    • asdasdasdasdasdasd
      游客 2019-11-22 09:35(10 months ago)
  7. 跟大动干戈
    游客2018-08-24 09:49 (2 years ago) 回复

    • 游客 2020-03-10 11:38(6 months ago)

    • 游客 2019-09-08 05:53(a year ago)

    • 游客 2018-11-22 10:02(a year ago)
  8. ss
    游客2018-08-22 16:48 (2 years ago) 回复
  9. hello 你好
    游客2018-08-21 16:21 (2 years ago) 回复
  10. 我是刘兆坤,刘兆坤牛逼!
    游客2018-06-11 08:56 (2 years ago) 回复
  11. 佳强你好
    游客2018-06-11 08:43 (2 years ago) 回复
    • asdasdasdasadasdasdasdasdasdasdasd
      游客 2019-11-22 09:35(10 months ago)
  12. 佳强你好!!!
    游客2018-06-11 08:43 (2 years ago) 回复
  13. ddd
    游客2018-01-10 10:18 (2 years ago) 回复
    • fdsaf
      游客 2018-02-23 16:38(2 years ago)
  14. bhh
    游客2018-01-10 10:18 (2 years ago) 回复

Effective,Professional,Conform to SEO

Contact us