优化CSS在网页中的加载方式

2016-02-19 23:17 3 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的优化CSS在网页中的加载方式懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

1、应该将 CSS 放置于结构的上方(一般放置于 head 元素内)。CSS 是解释型语言,Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置,才可在浏览器解析结构时,对页面进行渲染。

This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

导致的问题就是,页面会有一段时间朴素,突然之间又华丽,用户体验很不好。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

2、尽量使用 link rel=stylesheet href=http://www.planabc/yuanxin.css type=text/css 的样式导入方式,而减少 @import 的使用,更勿使用多层嵌套的 @import 。因为在 IE 里, @import 相当于将 link 放在页面尾部。

This is a valid syntax, but, even though it’s in the document’s HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.

扩展阅读:

来源:https://www.tulaoshi.com/n/20160219/1629567.html

延伸阅读
标签: Web开发
  本教程假设您没有任何样式表语言的基础,甚至,您可以完全不知道是什么东东,但是,我们同样假设您已经掌握了基本的语法。比如,您肯定知道是表明页面的头部,是表示页面的一个段落。     、正式开始学习之前的几句啰嗦话: l        不是什么高深的东东,它的编写...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div id="nav"这里是网站导航栏/div /div 很多人一般都这...
标签: Web开发
使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中,即你的一张CSS Sprites由10张图片组成,那将避免9次HTTP请求,这减少的9次请求时延,正是加速的加载时间。这也有问题,跟每个HTTP请求的服务器开销一样,需由Apache的子进程管理,占用20MB的内存。你最好帮你的服务器进程减少HTTP请求:卸载媒...
  一般在站点制作中,总难免需要在网页中输入联系的Email。但不知,这样就给那些所谓的网络商家有机可乘,他们会使用软件或者程序进行搜索,然后将你的Email地址放入他们的联系库中,以后就会无休无止的垃圾邮件“光临”你的邮箱,实在让人头痛,Juven也痛苦不堪呀。 这次我们来介绍一种方法,就是使用javascript制作的,并不影响你...
标签: Web开发
上一篇介绍了CSS语法 我们可以用以下四种方式,将CSS套用入HTML文件中:    行內套用(Inline) 行内套用(Inline) 嵌入套用(Embed) 嵌入套用(Embed) 外部連接套用(External Link) 外部连接套用(External Link) 匯入套用(Import) 汇入套用(Import)行內套用行内套用 我們可以在HTML 文件內直接宣告樣式。我们可以在HTML文件内直接...

经验教程

381

收藏

15
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部