Chinaunix首页 | 论坛 | 博客
  • 博客访问: 97635
  • 博文数量: 16
  • 博客积分: 782
  • 博客等级: 军士长
  • 技术积分: 210
  • 用 户 组: 普通用户
  • 注册时间: 2010-04-13 14:15
文章分类
文章存档

2012年(2)

2011年(8)

2010年(6)

最近访客

分类: Python/Ruby

2011-12-07 14:07:27

  现在网站非常多,要想让你的网站被更多的网友所喜欢,除了内容和用户体验度外,打开速度也有非常大的影响,没人有耐心长时间的等待。

  网页的打开速度除了服务器及用户自己的网速影响外,我们还可以优化自己的网页代码进一步的提高速度。

  ⒈压缩图片

  现在的网站没有纯文字的,图片占了很大的比重,对网页上的图片,在不明显失真的情况下做压缩以减小大小可以让网站的打开速度更快。另外,不要通过width和height来缩小图片,如果通过height和width属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小),正确的做法是单独制作这样的一个小图片(不是绝对的,某些情况下不制作小图片更好)

  ⒉为图片指定宽和高

  这一点可能是很多网站站长不重视和误解的一点,因为网页上的图片在按默认尺寸显示时不指定width和height也是正常的,在很多站长看来,不指定这些还能精减代码,减少传输的字节数,提高访问速度。但真是这样吗?事实上不指定width和height并不能精减多少字节,对速度的正面效果很小,反而造成浏览器为了能够显示每一个加载的图像,而不断地重新调整页面的布局,浏览器在显示相邻的以及后面的文档内容之前,必须要检查每一个图像文件,并计算它们的屏幕空间,这可能会给文档的显示带来非常大的延迟,从而打断用户的阅读。而为图片指定宽度和高度后,浏览器在下载图像之前就为其预留出了位置,从而可以加速文档的显示,还可以避免文档内容的移动。

  ⒊使用CSSSPRITE

  CSSSprites是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置,利用CSSSprites能很好地减少了网页的http请求,从而大大的提高了页面的性能。对网页中的大量小图片推荐使用CSSSprites,而且多张图整合到一张也能减少图片的大小,其所占字节总是小于单张图片之和。

  ⒋合并JS

  除了CSSSPRITE减少图片请求数外,合并相同域名下的js,也可以减少网络连接次数。

  ⒌压缩CSS和JS

  CSS和JS都可以在不减少信息量的情况下压缩,以提高加载速度,如jquery-1。6。4。js有223KB,压缩后的jquery-1。6。4。min。js只有90KB。前提是这些CSS和JS不经常改动。对经常改动的CSS和JS还是不要压缩,否则那压缩后的代码会看的你一个头N个大。

  ⒍合并域名

  有时网站上极少的图片或资源调用的其它域名上的内容,比如QQ客服图标直接调用使用QQ网站上的图、JQuery库直接调用官方网站上的库文件……这里建议把这些素材放到自己的网站上,减少域名请求数,而且对服务器的负载没有大的影响。

  ⒎CSS代码不要放到

  CSS代码一般在

中,但有的网站可能需要加载多个外部样式表,并且有的把外部调用的CSS放在BODY中,这会造成页面打开时需要重新渲染,影响速度。

  ⒏JS代码最好放在

尾部

  对非必须放在最前面的JS,推荐放到

最后面,可以加快页面打开速度

  ⒐其它

  以上都是最基本的技巧,也是每个网站制作者都能做到的,更多的如启用服务器Gzip减少传输字节数、动态网站静态化、内容与形式分离。

    更多网页设计知识可登录网站了解。 24小时咨询QQ:752009195

阅读(2510) | 评论(1) | 转发(3) |
给主人留下些什么吧!~~

坏坏小丸子2011-12-08 00:38:59

不错的技巧,要是根据这个开发一个浏览器就更好了!