网站速度优化系列的这一篇,我们来谈谈CSS文件的优化。使用CSS文件不仅在网站设计的时候提高效率,在用户浏览的时候也可以加快显示的速度,因为.css文件是缓存到本地的磁盘上,这样每打开一个页面就就不用重新下载css文件。CSS+DIV是现在网站设计的主流,它的效率比以前使用的table标签高很多,现在我们还可以进一步对其进行优化,使网站更加简洁快速。
首先,尽量将分开的代码紧凑的放在一起。比如:
A paragraph of decorated text Second paragraph Third paragraph Forth paragraph A paragraph of decorated text Second paragraph Third paragraph Forth paragraph
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
应该改成:
这段代码:
应该改成:
其次,使用像CleanCSS这样的CSS优化工具,可以合并类似的属性,去除没用的项和回车空格等。
原文:Speed Up Your Site: Optimize your CSS
译文:网站速度优化系列:CSS优化
翻译:sorryle
网站速度优化系列:
1. 图片优化
2. 图片格式
3.CSS 优化
4. 链接地址细节优化
5. 使用width和height标签
6. 减少HTTP请求
8 Responses
网站速度优化系列:图片格式
January 14th, 2008 at 12:21 pm
1[...] 1. 图片优化 2. 图片格式 3.CSS 优化 4. 链接地址细节优化(coming soon) 5. 使用width和height标签(coming soon) 6. [...]
minidxer
January 14th, 2008 at 4:53 pm
2两个例子的写法,并没有优化速度的作用吧。
sorryle
January 14th, 2008 at 8:15 pm
3缩减了代码,整个网页页就变小了,下载速度就会快一点。当然按现在用户的ADSL速度来说影响不会很大,不过还是那句话,不能因为善小而不为,各个细节都优化到了,相信整体的效果还是会很明显的:)
minidxer
January 15th, 2008 at 4:55 pm
4” 1. margin: 10px 20px 10px 20px;”这种写法,浏览器还是要把它分解为
“# margin-top: 10px;…”的写法的,不仅没有加快,反而多了处理的时间啊
sorryle
January 16th, 2008 at 8:56 pm
5具体浏览器怎么解析CSS文件还真没深入研究过,刚才到网上搜了一下,大部分还是认为合并比较好:)
网站速度优化系列:链接地址细节优化
January 17th, 2008 at 10:40 pm
6[...] 1. 图片优化 2. 图片格式 3.CSS 优化 4. 链接地址细节优化 5. 使用width和height标签 6. 减少HTTP请求 sorryle on January [...]
网站速度优化系列:图片优化
January 17th, 2008 at 10:42 pm
7[...] 1. 图片优化 2. 图片格式 3.CSS 优化 4. 链接地址细节优化 5. 使用width和height标签 6. 减少HTTP请求 sorryle on January 8, [...]
网站速度优化系列:使用width和height标签 by sorryle’s blog
April 20th, 2008 at 12:13 pm
8[...] 1. 图片优化 2. 图片格式 3. CSS 优化 4. 链接地址细节优化 5. 使用width和height标签 6. [...]
RSS feed for comments on this post · TrackBack URI
Leave a reply
Categories
Archives
Popular Posts
Copyright © 2008 sorryle’s blog. All rights reserved. Powered by WordPress. BloggingPro Theme.