如何改善CSS加载顺序达到友好的显示效果?

ithelloworld
  • 689

有时由于网速,带宽等原因,网页中的CSS加载会很慢,文字出来,但样式没有,要都加载完才能显示css的效果,可不可以先加载css?或者有什么办法可以防止这样的现象发生?

回复
阅读 10.7k
2 个回答
  1. 控制好整个网站的CSS源码,尽量重复使用单独的css文件。这样,访问过a页面后,再访问b页面,浏览器会直接从本地硬盘的缓存加载CSS,这比任何网络访问都要快。

  2. 把多个css文件合并成一个CSS文件,这样,浏览器可以少发起一些http请求。浏览器对同一个hostname能并行发起的http连接数是有限的。 合并CSS文件不仅可以减少了网络开销,也可以少占用【HTTP连接并发数】这个稀缺资源。

  3. 某些极端重要的第一入口页面(如首页),可以违反上述第一条原则,把CSS内容直接写在<head><style>标签中,这样,CSS样式肯定先于BODY加载了,一定能实现你所说的CSS预先加载的效果。京东首页就是这样干的,天猫首页也有,不过head区的CSS代码只有寥寥数行。

  4. 上述第三条与第一条要灵活搭配,特别是第三条,在代码复用角度是脏代码,不可滥用走极端。

  5. HTML设计的时候也要考虑一定的容错性,如果CSS加载不了(网络不行,或者客户端根本不是GUI浏览器,是lynx之类的字符终端),也能保持一定的可用性,不至于面目全非。
    回答完毕,跑题啰嗦几句:

    • 静态化了的新闻详情页(多见于门户和资讯类网站),CSS代码直接写在HEAD区而不是通过独立CSS文件引入,有加载速度上的考虑,也有改版的原因,改版后,独立的CSS文件一般会跟着改,但没必要把所有静态化过的页面再来生成一遍HTML,所以,索性写在HEAD区了。
    • JS预先加载亦同此理
    • 量力而为,不必追求完美,毕竟现在拨号上网的用户不多了,CSS加载不是啥大问题了,跟图片比起来就是毛毛雨。
kxh
  • 1
新手上路,请多包涵

一部分样式表直接嵌入在html里,比如reset.css fix.clear
youtube是这样做的,优雅降级的典范

宣传栏