`
kenny13
  • 浏览: 44992 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

提高网页打开速度的一些小技巧 (转载)

    博客分类:
  • JSP
阅读更多
互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度还是一个重要的课题。加快网页的打开速度,有三个路径,一是提高网络带宽,二是用户在本机做优化,三是网站设计者对网页做一定的优化。这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代,你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

即使在现在,网络带宽有了很多的提高,56K猫逐渐淡出,优化图片以加快网页速度还是很有必要的。

优化图片包括减少图片数、降低图像质量、使用恰当的格式。

1、减少图片数:去除不必要的图片。

2、降低图像质量:如果不是很必要,尝试降低图像的质量,尤其是jpg格式,降低5%的质量看起来变化不是很大,但文件大小的变化是比较大的。

3、使用恰当的格式:请参阅下一点。

因此,在上传图片之前,你需要对图片进行编辑,如果你觉得photoshop太麻烦,可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果?可以试试用过调用javascript来实现图片特效。

二、图像格式的选择

一般在网页上使用的图片格式有三种,jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容,我们只需要知道在什么时候应该使用什么格式,以减少网页的加载时间。

1、JPG:一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

2、GIF:提供的颜色较少,可用在一些对颜色要求不高的地方,比如网站logo、按钮、表情等等。当然,gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

3、PNG:PNG格式能提供透明背景,是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

三、优化CSS

CSS叠层样式表让网页加载起来更高效,浏览体验也得到提高。有了CSS,表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句,比如这句:

    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;

你可以将它简化为:

    margin: 10px 20px 10px 20px;

又或者这句:

    <p class="decorated">A paragraph of decorated text</p>
    <p class="decorated">Second paragraph</p>
    <p class="decorated">Third paragraph</p>
    <p class="decorated">Forth paragraph</p>

可以用div来包含:

    <div class="decorated">
    <p>A paragraph of decorated text</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
    <p>Forth paragraph</p>
    </div>

简化CSS能去除冗余的属性,提高运行效率。如果你写好CSS后懒得去做简化,你可以使用一些在线的简化CSS工具,比如CleanCSS。

四、网址后加斜杠

有些网址,比如"www.kenengba.com/220",当服务器收到这样一个地址请求的时候,它需要花费时间去确定这个地址的文件类型。如果220是一个目录,不妨在网址后多加一个斜杠,让其变成www.kenengba.com/220/,这样服务器就能一目了然地知道要访问该目录下的index或default文件,从而节省了加载时间。

五、标明高度和宽度

这点很重要,但很多人由于懒惰或其它原因,总是将其忽视。当你在网页上添加图片或表格时,你应该指定它们的高度和宽度,也就是height和 width参数。如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。

下面是一个比较友好的图片代码:

    <img id="moon" height="200" width="450" src="http://www.kenengba.com/moon.png" alt="moon image" />

当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。

六、减少http请求

当浏览者打开某个网页,浏览器会发出很多对象请求(图像、脚本等等),视乎网络延时情况,每个对象加载都会有所延迟。如果网页上对象很多,这可以需要花费大量的时间。

因此,要为http请求减负。如何减负?

1、去除一些不必要的对象。

2、将临近的两张图片合成一张。

3、合并CSS

看看下面这段代码,需要加载三个CSS:

    <link rel="stylesheet" type="text/css" href="/body.css" />
    <link rel="stylesheet" type="text/css" href="/side.css" />
    <link rel="stylesheet" type="text/css" href="/footer.css" />

我们可以将其合成一个:

    <link rel="stylesheet" type="text/css" href="/style.css" />

从而减少http请求。

七、其它小技巧(译者添加)

1、去除不必要加载项。

2、如果在网页上嵌入了其它网站的widget,如果有选择余地,一定要选择速度快的。

3、尽量用图片代替flash,这对SEO也有好处。

4、有些内容可以静态化就将其静态化,以减少服务器的负担。

5、统计代码放在页尾。
分享到:
评论

相关推荐

    提高网页打开速度的一些小技巧

    互联网带宽越来越宽,似乎让网页的加载速度得到了质的飞跃。其实不然,因为随着带宽的提高,网页上的对象也越来越多,因此加快网页打开速度...这篇文章站在一个网站设计者的角度,分享一些优化网页加载速度的小技巧。

    六招提高网页加载速度的小技巧

    下面详细解释六个提高网页加载速度的小技巧: 1. 优化CSS 层叠样式表(CSS)是定义网页内容如何显示在浏览器上的技术。它有助于将内容与设计分离,提高网页维护效率和加载速度。优化CSS主要包含两方面: - 代码优化...

    40种网页常用小技巧

    以下是一些基于"40种网页常用小技巧"的详细解读,这些技巧旨在优化网页设计并提供更好的互动性。 1. 取消右键:通过JavaScript,可以禁用用户的鼠标右键点击事件,防止用户查看源代码或使用快捷方式,这在保护版权...

    电脑与U盘之间提高数据传输效率的小技巧.docx

    本文将为您提供一个简单的小技巧,帮助您提高数据传输速度。 提高数据传输效率的原理 在电脑和U盘之间传输数据时,数据传输速度不仅取决于U盘的读写速度,还取决于电脑的读写能力和系统的缓存机制。为了提高数据...

    C#中的一些小技巧

    C#中的一些小技巧,运用这些技巧能提高开发的效率,达到事半功倍的效果

    批量打开网页

    "批量打开网页"这个主题涉及到了自动化和脚本编程的一些基础知识,它允许用户一次性加载多个网页,而不是逐一点击。这对于需要频繁访问多网站或者进行网页数据抓取的工作者来说尤其有用。 批量打开网页通常涉及到...

    微机常用小技巧

    在计算机使用过程中,掌握一些实用的小技巧可以显著提高我们的工作效率,减少不必要的困扰。以下是一些微机使用中的必备知识和窍门,这些技巧涵盖了多个方面,包括基本操作、软件应用、联网设置等。 1. **快捷键的...

    网页设计技巧及网页制作常见问题

    4. 速度优化:减少图片大小,使用压缩代码,提高页面加载速度。 5. 导航易用:设置直观的导航栏,使用户能快速找到所需信息。 6. 内容优先:设计应服务于内容,而不是反之。 7. 交互设计:增加动态效果,提升用户...

    提高php运行速度的一些小技巧分享

    【提高PHP运行速度的小技巧】 在PHP开发过程中,优化代码性能是提升网站或应用程序响应速度的关键。以下是一些实用的技巧,旨在帮助你优化PHP的运行速度。 1. **代码优化** 代码优化不仅意味着编写整洁易读的代码...

    Win7系统快速提升上网速度的小技巧.docx

    ### Win7系统快速提升上网速度的小技巧 #### 一、清除系统的垃圾加快上网速度 在Windows 7系统中,随着日常使用,系统会积累大量的临时文件、缓存数据等垃圾文件,这些文件不仅占用硬盘空间,还会影响电脑的运行...

    dreamweaver一些小技巧.pdf

    总的来说,熟练掌握这些Dreamweaver的小技巧,将大大提高网页设计的效率和质量,让你的网页更加专业、互动性强。在实践中不断探索和学习,将能更好地驾驭这款强大的工具,创作出更多精彩的网页作品。

    50条网页制作小技巧集锦

    大家好50条网页制作小技巧集锦大家学习学习

    HFSS 使用心得,介绍了如何在 HFSS 仿真中加快速度,提高精度的一些技巧性的东西。

    - **HFSS** 基于有限元方法(Finite Element Method, FEM),该方法通过将连续的电磁场分解成一系列离散的小单元来解决问题。这种方法特别适用于需要在频域内进行分析的情况,例如天线设计、微波组件优化等。 - **...

    网页制作小技巧总结.txt

    网页制作小技巧总结.txt

    网页制作素材和制作技巧

    8. **网页优化**:包括SEO(搜索引擎优化)、加载速度优化和无障碍访问(WCAG标准)等,这些都能提高网页在搜索引擎中的排名,同时确保所有用户都能轻松访问。 9. **网页美化技巧**:这可能涉及动画效果、过渡和...

    LABVIEW打开网页

    5. **显示网页**:虽然LabVIEW本身并不支持直接显示网页,但你可以利用一些技巧,如嵌入Web浏览器控件或者使用外部程序(如系统默认的浏览器)来显示网页内容。例如,可以调用操作系统API(应用程序接口)来启动...

    快速开机技巧,提高开机的速度!

    最后,隐藏或更改Windows的开机标志也是优化开机速度的一个小技巧。减少不必要的资源占用,可以使得系统更快地完成启动。 需要提醒的是,无论是硬件升级还是系统设置的调整,都应该在对电脑操作有一定了解的基础上...

    dreamweaver一些小技巧.docx

    以下是一些Dreamweaver使用的小技巧: 1. **漂亮的字体图形**:Dreamweaver支持使用特殊的字体如Webdings、Wingdings等创建图形,这些字体包含许多图标和符号,可以通过输入相应的字符代码来展示。 2. **上下标的...

Global site tag (gtag.js) - Google Analytics