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

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

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

【 tulaoshi.com - Web开发 】

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

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.

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

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

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

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.

扩展阅读:

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

延伸阅读
标签: Web开发
使用CSS Sprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中,即你的一张CSS Sprites由10张图片组成,那将避免9次HTTP请求,这减少的9次请求时延,正是加速的加载时间。这也有问题,跟每个HTTP请求的服务器开销一样,需由Apache的子进程管理,占用20MB的内存。你最好帮你的服务器进程减少HTTP请求:卸载媒...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...
标签: 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缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100e...
标签: Web开发
看这个网页的底部,为什么会跑到那儿去呢?即使内容很少的情况下,它也始终在页面的底部。 否则页面底部将留下大量空白。 下面是它实现的代码: div id="wrap"     div id="main" class="clearfix"         div id="content"  &...

经验教程

13

收藏

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