`

减少页面加载时间的方法

 
阅读更多
1.优化图片

   优化图片文件,减小其尺寸,特别是缩略图,一定要按尺寸生成缩略图然后调用,不要在网页中用resize方法实现,虽然这样看到的图片外形笑了,但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图,其真实尺寸有10M之巨。普通图像、icon也要尽可能压缩后,可以采用web图像保存、减少颜色数等等方法实现。

2.图像格式的选择

    除了优化图片,选择正确的图片格式也是很重要的。JPEG格式适合于照片或真彩图片。GIF格式适用于标志或按钮等平面彩色图片。PNG类似于GIF,但支持更多的色彩。GIF提供的颜色较少,可用在一些对颜色要求不高的地方。

3.压缩Javascript、CSS代码

    一般js、css文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。(压缩合并css,如margin-top,margin-left...)

4.css和js文件在文档位置

  css格式定义放置在文件头部:用户端是慢速网络或网页内容比较庞大的情况,网页逐步呈现的同时仍会保持格式信息,不影响网页美感。
  Javascript脚本放在文件末尾:在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。
 
5.标明高度和宽度

   如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。
   当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。

6.减少http请求(合并文件,合并图片)。

   当加载一个网页时,网页上的每一个对象(图象、文字和线等)将请求服务器的回应。这种请求会延长加载时间。因此要尽量减少对象的数量,并且把CSS的文件和脚本进行结合。
   1)例如:载入图形文件时使用css sprites技术。
   2)Ajax调用尽量采用GET方法调用:实际使用XMLHttpRequest时,如果使用POST方法实现,会发生2次HTTP请求,而使用GET方法只会发生1次HTTP请求。如果改用GET方法,HTTP请求减少50%。

7.使用CDN(Content Delivery Network)网络加速
  
    现在国内做CDN加速业务的公司很多,简单讲,就是将你的图片、视频扩散到CDN网络所能到达之处,让用户访问时能就近下载到这些文件,从而达到网络提速的目的,这样做,同时能减轻你自己网站的负载。

8.网址后加斜杠

   当用户打开一个链接时,服务器会推测链接这个地址包含哪种文件或页面。如果在连接后加上斜线( / ),服务器就知道这是一个目录页,这样做可以减少页面的加载时间。如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。

9.添加文件过期或缓存头

   同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲 时间,例如设置24小时过期时间,这样用户在访问过该页面之后再次访问时,同一组图片或JS不会再重复下载,从而减少了HTTP请求,用户访问速度明显有 所提升,同时服务器负载也会下降。

整理来源:http://www.5icool.org/a/201411/a9105.html
http://jingyan.baidu.com/album/cd4c2979dbdb5f756e6e6028.html
分享到:
评论

相关推荐

    基于时间知觉的移动APP页面加载方式研究.pdf

    同时,对于这两种加载方式,用户的时距估计普遍低于实际的加载时间。这表明,非模态加载和隐藏等待加载能够有效缩短用户感知到的等待时间。 非模态加载允许用户在页面加载过程中继续执行其他操作,减少了用户注意力...

    导航条(滑动门)可以减少网页加载时间

    在构建高效的网页设计时,导航条(滑动门)是一个重要的技术策略,它能显著提升用户体验并优化网页加载时间。滑动门技术是基于CSS(层叠样式表)和JavaScript的一种设计方法,主要用于创建响应式、节省空间且交互性...

    页面加载中js 页面加载中js 页面加载中js

    这有助于减少页面加载时间,但需要注意脚本间的依赖关系,因为它们可能不再按照顺序执行。 3. **延迟加载(defer)**:`defer`属性确保脚本按顺序执行,但同样不会阻塞页面解析。这对于库和框架等需要按特定顺序...

    jquery页面加载效果

    在网页设计中,用户体验是至关重要的,而页面加载效果正是提升用户体验的一种手段。"jQuery页面加载效果"是指利用JavaScript库jQuery实现的动态加载动画,它能够以吸引人的视觉方式展示网页内容正在加载的过程,使...

    手机页面预加载效果

    这在资源有限的移动设备上尤其有用,可以减少初始加载时间,提升页面响应速度。 3. **资源优先级管理**:通过判断哪些资源对用户体验最关键,优先加载这些内容,比如页面布局和主要功能,然后逐步加载非必需的图片...

    javascript页面加载完执行事件代码

    这样可以减少页面加载时间,提升用户体验。 在实现页面加载完毕执行代码的场景中,需要注意以下几点: 1. 确保在DOM元素生成之后执行相关的JavaScript代码,避免在DOM元素还未加载完成时就尝试访问它们,这可能会...

    动态加载时间控件

    在网页开发中,动态加载时间控件是一种常见且实用的技术,它允许用户在页面交互过程中按需加载时间选择组件,从而提高页面性能和用户体验。这种技术尤其适用于数据量大或者资源消耗高的应用,因为它可以避免一次性...

    vue-router懒加载速度缓慢问题及解决方法

    而运用懒加载技术则可以将应用拆分成若干个路由和组件模块,按需加载,有效分摊首页加载的压力,减少首页加载时间。 在Vue-router中,路由懒加载是一种减少初始加载体积和提高应用性能的有效方式。具体实现可以通过...

    H5多种加载效果loading,H5页面加载中动画

    2. 心理暗示:视觉上的反馈可以告诉用户系统正在工作,减少他们对加载时间的感知。 3. 品牌形象:定制的加载动画可以展示品牌特色,增强品牌识别度。 三、H5加载效果的实现方式 1. CSS3动画:利用CSS3的动画属性,...

    延迟加载js代码下载(包括页面延迟加载以及图片延迟加载)

    - 图片尺寸优化:对图片进行压缩和适配不同设备尺寸,减少加载时间。 - 使用WebP或AVIF等高效图片格式:这些格式的图片体积更小,但视觉效果不打折。 综上所述,延迟加载是提升网页性能的有效手段,通过JavaScript...

    ASP.NET实现网页预加载效果

    通过UpdatePanel或ScriptManager组件,可以实现部分页面的预加载,减少整体页面的加载时间。 5. WebAPI 和 SignalR:对于更复杂的预加载需求,比如实时数据或大文件的预加载,可以利用ASP.NET WebAPI来处理后台数据...

    jsp页面加载时提示loading

    1. **页面内容过多**:如果JSP页面包含大量的静态内容(如图片、视频、CSS和JavaScript文件),这可能导致页面加载时间延长。优化方法包括使用CDN(内容分发网络)来加速资源的传输,压缩CSS和JavaScript文件,以及...

    js加载广告 页面加载广告

    - **懒加载**: 对于页面下方的广告,可以采用懒加载(Lazy Loading)技术,只有当用户滚动到广告位置时才开始加载,减少首屏的加载时间。 - **缓存策略**: 重复访问的广告可以被缓存,减少网络请求,提升加载速度...

    页面加载等待效果

    当页面数据量较大,比如包含大量图片、视频或者复杂的JavaScript交互时,加载过程可能会变得较慢,这可能导致用户感到不耐烦或疑惑是否网页已出现问题。为了解决这个问题,"页面加载等待效果"被广泛采用,它在页面...

    一款不错的页面加载插件

    后者是压缩后的版本,用于生产环境以减少页面加载时间。该插件基于jQuery库,这意味着它利用了jQuery的便利性和兼容性,简化了DOM操作和事件处理。在JavaScript代码中,开发者可能找到了启动、暂停、停止加载指示器...

    网络游戏-通过利用网络延迟来缩短页面加载时间的方法和系统.zip

    标题提到的“网络游戏-通过利用网络延迟来缩短页面加载时间的方法和系统”是一个专门探讨如何利用网络特性提高游戏性能的技术方案。这种技术通常被称为延迟渲染或者智能预加载策略,旨在解决网络环境中的延迟问题,...

    加载页面等待提示程序加载页面等待提示程序

    7. **延迟加载(Lazy Loading)**:对于长页面,可以采用延迟加载技术,只在用户滚动到相应位置时才加载相应内容,这样可以减少初始加载时间并优化用户体验。 8. **错误处理**:如果加载失败,提示应当能够传达错误...

    四款由html+css+js实现的精美网页加载页面动画源码

    本资源提供了四款由HTML、CSS和JavaScript共同实现的精美网页加载页面动画源码,旨在帮助开发者或设计师打造更具吸引力的网站。 1. HTML基础与结构 HTML(超文本标记语言)是网页的基础,负责构建页面的结构。在这...

    网页动态加载(loading)GIF图标.zip

    - **延迟加载**:只在用户滚动到相关内容时才加载GIF,减少初始页面加载时间。 - **响应式设计**:针对不同设备和屏幕尺寸调整GIF大小,确保在所有设备上都能正常显示。 - **尺寸优化**:压缩GIF文件大小,减少...

    WEB页面正在加载实例

    7. **Web性能指标**:为了评估和改善页面加载速度,开发者会关注一些关键性能指标,如首字节时间(TTFB)、首屏加载时间、完全加载时间等。这些指标可以帮助我们识别并解决性能瓶颈。 综上所述,"WEB页面正在加载...

Global site tag (gtag.js) - Google Analytics