快速提高网站性能三步骤【操作篇】（二）

taro

浏览: 136541 次
性别:
来自: 东京

最近访客更多访客>>

dddlstudio

m635674608

jimlaren

katty

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网站性能优化

Javascript CSS Sprite 网站优化雪碧图

标题干枯无力，太残念了，一个从小语文不及格的理科生写技术文章实在压力山大，尽请体谅。这篇搓文介绍提高网站性能的再三个步骤，是上篇的姊妹篇。

背景知识：

浏览器加载网页的顺序与我们读书一样，自上而下逐行加载。

先加载<head>...</head>中的内容，其次<body>...</body>直接的内容。当浏览器加载到<script><link><img>等这些带有src属性链接的标签时，会向相应链接服务器发送请求读取内容，浏览器会限制并行请求数量。

网页并不是全部加载完后一并显示在用户面前，而是会边加载边显示。利用这一加载机制，我们可以快速实现一些提高网站性能的目标。

步骤：

将script标签放置在页面底部
将CSS标签放置在HTML头部
适当使用雪碧图（又叫精灵图，css image sprite）

详细介绍：

1. 将script标签放置在页面底部

将<script>标签放置在页面底部</body> body结束标签之前，并紧挨着body结束标签（中文实在太绕口Put your script tag just before the end tag of body）。

理由一：javascript代码一般不影响页面布局，往往被用来实现页面元素的动作事件以及动画效果。没有必要在页面内容加载完成之前加载，所以放置到最后无可厚非。

理由二：拒绝站着茅坑不拉屎；如果放在页面头部，占用浏览器有限的下载带宽，延缓或阻止页面内容的快速加载，是一件很xx的事。

2.将CSS标签放置在HTML头部

CSS样式表决定了页面的布局显示效果，放在页面头部加载可以保证内容呈现在用户面前即为最终的页面表现形式。假如CSS样式表放置在页面底部加载，起初加载时会出现一个很糟糕的结果：

CSS加载完毕后，页面迅速变成：

这绝对不是我们想看到的。所以请将CSS标签放置在HTML头部吧。

3.适当使用雪碧图（又叫精灵图，css image sprite）

雪碧图：将页面上的频繁使用的图片合并成一张，然后以背景的形式呈现在页面，通过css的background-position属性定义哪一部分被呈现在页面上。

目的：减少HTTP请求数量，提高网页加载速度。

推荐工具：css sprites generator（可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出。）

楼主的个人网站：www.tarobjtu.com的导航栏就使用了雪碧图，可以拿来拍砖

雪碧图为：

雪碧图

雪碧图的使用是一把双刃剑，用不好的话还不如不用。网上有很多文章争论雪碧图：

CSS雪碧图会占用太多浏览器内存吗？

CSS雪碧:要还是不要？

分享到：

苹果官网CSS3应用案例分析 | 快速提高网站性能三步骤【操作篇】

2012-06-11 12:12
浏览 1268
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论