`
taro
  • 浏览: 135508 次
  • 性别: Icon_minigender_1
  • 来自: 东京
社区版块
存档分类
最新评论

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

阅读更多

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


背景知识:

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

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

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


步骤:

  1. 将script标签放置在页面底部
  2. 将CSS标签放置在HTML头部
  3. 适当使用雪碧图(又叫精灵图,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雪碧:要还是不要?

分享到:
评论

相关推荐

    PIC单片机实用教程——提高篇 pdg 李学海

    《PIC单片机实用教程——提高篇》 pdg 李学海 北京航天航空大学出版社 本书兼顾PIC全系列,共分9章,内容包括:基本概念、PIC16F877硬件概况、指令系统、汇编程序设计、集成开发环境、在线调试工具、定时器、中断...

    SYBASE_12.0数据库维护快速参考手册

    2.10 在ASE 11.9.2版中采用了行级加锁机制以提高性能 44 2.10.1 所支持的加锁机制 45 2.10.2 对小量数据的多次并发访问 48 2.10.4 死锁 52 2.11 DBCC 56 2.12 在SCO OPENSERVER 5上安装SQL SERVER 11.0.x 59 2.13 在...

    Sybase ASE快速参考手册

    3.10 在ASE 11.9.2版中采用了行级加锁机制以提高性能 58 3.10.1 所支持的加锁机制 59 3.10.2 对小量数据的多次并发访问 62 3.10.3 堆栈表和热点 64 3.10.4 死锁 66 3.10.5 何时使用不同类型的加锁方法 69 3.10.6 ...

    Sybase ASE快速参考手册.pdf

    3.10 在ASE 11.9.2版中采用了行级加锁机制以提高性能 65 3.10.1 所支持的加锁机制 66 3.10.2 对小量数据的多次并发访问 70 3.10.3 堆栈表和热点 73 3.10.4 死锁 74 3.10.5 何时使用不同类型的加锁方法 77 ...

    asp.net知识库

    2分法-通用存储过程分页(top max模式)版本(性能相对之前的not in版本极大提高) 分页存储过程:排序反转分页法 优化后的通用分页存储过程 sql语句 一些Select检索高级用法 SQL server 2005中新增的排序函数及应用 ...

    PIC单片机选型表

    《PIC单片机实用教程——提高篇》 pdg 李学海 北京航天航空大学出版社 本书兼顾PIC全系列,共分9章,内容包括:基本概念、PIC16F877硬件概况、指令系统、汇编程序设计、集成开发环境、在线调试工具、定时器、中断...

    PIC单片机编程助手

    《PIC单片机实用教程——提高篇》 pdg 李学海 北京航天航空大学出版社 本书兼顾PIC全系列,共分9章,内容包括:基本概念、PIC16F877硬件概况、指令系统、汇编程序设计、集成开发环境、在线调试工具、定时器、中断...

    常用PIC系列8位单片机芯片引脚符号的功能

    《PIC单片机实用教程——提高篇》 pdg 李学海 北京航天航空大学出版社 本书兼顾PIC全系列,共分9章,内容包括:基本概念、PIC16F877硬件概况、指令系统、汇编程序设计、集成开发环境、在线调试工具、定时器、中断...

    IIS6.0 IIS,互联网信息服务

     第二篇 IIS之FTP服务器 一、建立你的FTP站点 第一个FTP站点(即“默认FTP站点”)的设置方法和更多FTP站点的建立方法请参照前文Web服务器中相关操作执行。需要注意的是,如果你要用一个IP地址对应多个不同的FTP...

    PHP和MySQL WEB开发(第4版)

    第三篇 电子商务与安全性 第14章 运营一个电子商务网站 14.1 我们要实现什么目标 14.2 考虑电子商务网站的类型 14.2.1 使用在线说明书公布信息 14.2.2 接收产品或服务的订单 14.2.3 提供服务和数字产品 14.2.4 为...

    PHP和MySQL Web开发第4版pdf以及源码

    第三篇 电子商务与安全性 第14章 运营一个电子商务网站 14.1 我们要实现什么目标 14.2 考虑电子商务网站的类型 14.2.1 使用在线说明书公布信息 14.2.2 接收产品或服务的订单 14.2.3 提供服务和数字产品 14.2.4...

    PHP和MySQL Web开发第4版

    第三篇 电子商务与安全性 第14章 运营一个电子商务网站 14.1 我们要实现什么目标 14.2 考虑电子商务网站的类型 14.2.1 使用在线说明书公布信息 14.2.2 接收产品或服务的订单 14.2.3 提供服务和数字产品 14.2.4...

Global site tag (gtag.js) - Google Analytics