`
mars李
  • 浏览: 50173 次
  • 性别: Icon_minigender_1
  • 来自: 柳州
社区版块
存档分类
最新评论

网页加速系列(一)、 网页加速之图形处理篇

阅读更多
搜集到一些关于网站提速的资料,做一个系列,一些文章可能转或摘自网络。

(一)、 网页加速之图形处理篇

    在维护网站的过程用,可能遇到过这样的情况:辛辛苦苦做出来的页面,但图片过多,网页结构、表格结构复杂,程序冗长,使得加载速度很慢!网页总是不能完全的展现在浏览者面前。

以后的几篇文章将网页减肥方面的一些经验介绍给大家,希望大家都来讨论,说说自己的观点!

1、合并图片

尽量把几个可能组合在一起的图片制作成一张图片,这是因为浏览器对网页中的每个图片都会做个别请求,也就是说如果网页中有5张图片,那么浏览器就会向WEB服务器提出5次请求,这必然会增加服务器的负担,从而使得速度变慢!当然大图片除外。

2、指定宽高

在网页中镶入图片的时候,一定注明高度和宽度,如:<IMG SRC="TEST.GIF" WIDTH=100 HEIGHT=100>,如果没有注明,浏览器在下载完图片以前,将无法确定图片的大小,页面的提交就会延迟,甚至可能重复向WEB服务器提出请求。

3、选择图片格式

选择适当的图片格式,常见的格式为:JPG和GIF,两种图片分别采用不同的方法压缩图片。JPG支持的颜色数量比较多,一般对于照片或者颜色变化显著的图片用JPG格式,还应该适当的选择压缩比,在基本不损坏效果的前提下尽量压缩。GIF最多支持256种颜色,适合小图片、色彩比较少的图片,对于GIF图片可以在不影响图片效果的前提下尽量减少图片的颜色数量。适当的选择图片的格式,对图片的大小会有不小的影响。可以借助一些图片处理软件。

4、图片处理

应该采用逐步提交方式提交图片,GIF和JPG两种图片格式都支持逐步提交格式,图片在逐步提交时,在浏览器收到完整图片信息之前就开始显示了。这样看起来快一些。GIF保存为交错格式,JPG选择逐步编码来保存。

5、替换文字

对于所有图片应该带有文本,用<IMG>ALT标签实现,因为很多朋友为了增加浏览速度关闭了浏览器的图片功能。提供了文本有助于搞清页面的内容。

最后注意,网页到最后总是以内容来吸引大家的,内容是最重要的!所以,请尽量将一些没有必要的图片去掉!

今天到这里,下次将和大家讨论一下网页和表格的结构对速度的影响!


分享到:
评论

相关推荐

    BL-017_psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip

    在本篇文章中,我们将深入探讨PSD网页模板、网站效果切片以及欧美日韩风格在前端页面设计中的应用。 首先,PSD网页模板是一种预设计的网页布局,通常由专业的网页设计师使用Adobe Photoshop软件创建。它包含了网页...

    Fireworks_网页设计综合实例.doc

    Fireworks是一款专业级的图形设计和原型工具,特别适合网页设计师用于创建和优化网页元素。通过一个完整的网页设计案例,我们将逐一讲解各个关键步骤,使您掌握从图像编辑到HTML输出的全过程。 1. **导入并编辑位图...

    基于HTML5的网页动画背景

    HTML5作为现代网页开发的基石,其强大的功能之一就是提供了丰富的多媒体支持,包括图形、音频和视频。在这个主题中,我们将深入探讨如何利用HTML5来创建引人入胜的网页动画背景,为用户带来更生动、更具吸引力的浏览...

    灰色数码科技展示CSS模板_灰色 数码 科技 展示_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar

    在这个模板中,HTML文件会包含一系列的元素,如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`和`&lt;footer&gt;`等,用于组织网页内容。这些元素会通过类(class)或ID选择器与CSS样式进行关联,以实现设计需求...

    Flash赛车源码下载

    本篇文章将围绕“Flash赛车源码”这一主题,深入探讨Flash游戏开发中的关键技术点,包括图形渲染、物理引擎、用户交互及游戏逻辑。 1. **图形渲染**:Flash中的图形渲染主要依赖ActionScript 3.0(AS3)语言,它...

    matrix:计算机图形学-作业4

    1. **几何变换**:在3D图形中,物体的位置、形状和方向可以通过一系列矩阵变换来描述。例如,平移矩阵可以将物体沿坐标轴移动;旋转矩阵负责物体的旋转;缩放矩阵则用于调整物体的大小。这些变换可以组合成一个复合...

    html5动画基础

    1. Canvas API:Canvas提供了一系列绘图方法,如fillRect()、strokeRect()、arc()等,通过在时间序列中连续调用这些方法,可以创建出动态效果。 2. requestAnimationFrame:用于在下一次重绘之前执行动画帧,保证了...

    WebGL:Up and Running

    WebGL(Web图形库)是用于在网页浏览器中实现3D渲染的一项新技术标准。它允许Web开发者利用JavaScript、浏览器和标准的Web技术栈来创建游戏、动画、数据可视化、产品展示等3D应用程序。本篇内容将详细介绍WebGL的...

    webgl函数库(cuon-matrix、cuon-utils、webgl-debug、webgl-utils)

    cuon-matrix是一个专门处理矩阵运算的库,对于3D图形编程至关重要。在WebGL中,矩阵运算用于表示几何体的位置、旋转和缩放,以及投影和视口变换。cuon-matrix提供了各种矩阵操作函数,如创建单位矩阵、乘法、旋转、...

    3D立体相册,基于HTML5.zip

    4. WebGL:这是一个基于OpenGL标准的JavaScript API,允许在浏览器中实现硬件加速的3D图形渲染,是实现3D相册的关键技术。 二、3D立体相册的实现原理 1. WebGL基础:首先,我们需要理解WebGL的基本概念,包括坐标...

    js实现的3d效果(很炫+转载)

    本篇文章将深入探讨如何利用JavaScript实现3D效果,这在现代网页设计中是一个非常吸引人的特性。 首先,我们要了解JavaScript实现3D效果的核心原理。在WebGL库的帮助下,JavaScript可以与GPU进行通信,创建和渲染...

    3Ddemo.zip

    这个库充分利用了WebGL,这是一个允许JavaScript在浏览器中进行硬件加速3D图形渲染的API。在“3Ddemo.zip”中,THREE.JS被用来构建3D场景、对象、光源和相机等元素,提供了一种高效且易于上手的方式来实现3D效果。 ...

    科技消费流行趋势Big in2008--Computer电脑 CPU内置GPU VISTA 多核心处理器 桌面计算.pdf

    其次,GPU(图形处理单元)在2008年前后开始从独立显卡向CPU内部集成发展。这一转变意味着GPU不再仅用于处理图形,而是开始参与通用计算,减轻CPU的负担。NVIDIA的CUDA和AMD的Stream技术,让GPU能够执行并行计算任务...

    jQuery圣诞下雪花

    本篇文章将深入探讨如何利用jQuery实现这一视觉特效,为您的网页增添浓厚的节日气息。 一、jQuery基础 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。其简洁的...

    flash10 3d 引擎

    本篇文章将详细解析“Flash 10 3D引擎”这一主题。 Flash 10 3D引擎的出现,标志着Adobe Flash平台在图形渲染能力上迈出了重要的一步。在之前版本中,虽然可以通过一些技巧实现2.5D效果,但真正的三维渲染一直是个...

    mui和html5的API文档

    HTML5作为现代网页开发的标准,引入了一系列新的元素、属性和API,极大地扩展了网页的功能性。HTML5的API文档主要涵盖了以下几个方面: 1. **离线存储**:HTML5的`Application Cache`(离线存储)允许开发者创建...

    漂亮的万花筒效果源码(Silverlight)

    本篇文章将深入探讨如何使用Silverlight技术实现一个漂亮的万花筒效果。 **Silverlight简介** Silverlight是由微软开发的一种网络应用程序框架,主要用于创建和部署丰富的、互动的用户界面,特别是在Web应用上。它...

    layer_loading插件

    它通常包含一系列动态图形,如旋转的圈圈、流动的线条或者渐变的色彩,这些视觉元素能够吸引用户的注意力,减轻他们对加载时间的感知。 2. **实现原理**: 这个插件基于Web技术,特别是CSS3动画和JavaScript。CSS3...

    移动终端操作系统架构概览

    - **系统类库**:主要包括C/C++编写的类库,如SSL/TLS支持的Bionic库、用于多媒体处理的Media框架、用于2D/3D图形绘制的OpenGL ES、用于音视频编解码的OpenMAX等。 - **Android运行时**:包括核心库和Dalvik虚拟机,...

Global site tag (gtag.js) - Google Analytics