`

减少页面加载时间的方法

 
阅读更多
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
分享到:
评论

相关推荐

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

    导航条(滑动门)可以减少网页加载时间,优化网页很好的代码

    Android实现WebView懒加载

    Android实现WebView懒加载,提前进行页面JS资源加载。减少WebView加载时间及加载资源问题。Android 8.0以前需要引入X5内核,Android 8.0以后无特殊要求。

    SmartInclude---解决js和css加载时间过长

    减少页面的Http请求,压缩组合js和css使得其加载时间减少

    js异步加载代码

    js加载的速度直接影响页面显示速度,此代码可减少页面打开时的空白时间

    jQuery图片延迟加载插件Lazy Load.zip

    jQuery图片延迟加载插件Lazy Load,在网页上出现大量图片的时候,一下加载全部图片需要加载比较长的时间,懒加载的目的就是减少加载时间,按需加载从而达到提升用户体验的目的。

    异步并行加载工具Asyncload.zip

    最终的出路只能异步 并行,从而诞生了该开源产品项目介绍名称:asyncload译意: async cocurrent load语言: 纯java开发定位: 业务层异步并行加载工具包,减少页面响应时间工作原理原理描述:针对方法调用,...

    tab控件 动态加载数据

    使用javascript实现的tab 控件,能动态加载数据。 使用反射实现了将从数据库 查询出来的数据集 字段转换成...可以为程序员减少负担,节省了时间 求大侠 能给出对tab控件修改的意见。多么希望这个控件的功能更加强大。

    第一次油漆和页面加载时间。「First Paint & Page Load Time」-crx插件

    第一次油漆时间,页面加载时间,优化你的网页。 在浏览器菜单中显示“首次绘画”时间。 现在,您可以看到页面统计信息,例如页面上前十个耗时的请求,页面上资源的分配以及其他统计信息(例如内存)等,并通过漂亮的...

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

    需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。...

    避免用户自定义控件定义的父类多次加载

    一个页面还会引用多个用户自定义控件。 这种情况如果不注意控制就会出现父类中的代码多次运行。 这种情况是真实存在的,我新到现在的公司,参与一个项目的改版的时候,发现了这样的现象,为了避免这样的情况再次出现...

    提升页面加载速度的插件InstantClick

    通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度。类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用...

    通过Xml完成一个配置加载菜单案例

    项目中菜单总是不停变动的,每次增加或者减少后都去操作代码完成很不方便。如果菜单通过配置的形式来完成那就可以减少操作代码的频率。此案例通过xml配置菜单的方式来加载启动对应的界面,希望对你有帮助或者启发。

    spdy, SPDY是一种旨在减少网页延迟的协议.zip

    spdy, SPDY是一种旨在减少网页延迟的协议 SPDYSPDY是一个实验协议,旨在减少网页的延迟。 SPDY v2草案是HTTPbis... 在实验室测试中,SPDY显示页面加载时间减少 64% ! 有关详细信息,请查看官方网站。现在,on支持在

    nodejs实现bigpipe异步加载页面方案

    Facebook首创的一种减少HTTP请求的,首屏快速加载的的异步加载页面方案。是前端性能优化的一个方向。 BigPipe与AJAX的比较 AJAX主要是XMLHttpRequest,前端异步的向服务器请求,获取动态数据添加到网页上。这样的...

    WP Fastest Cache Premium -WP最快的缓存 v1.6.4

    WP Fastest Cache 是一个多功能缓存插件,通过创建HTML文件来帮助减少您网站的页面加载时间,由于 WordPress 网站是通过 PHP 和 MySQL数据库呈现的,因此每次从服务器请求页面时都需要使用 RAM 和 CPU,会减慢加载...

    lunchbox:将 MODX 文件夹转换为分页容器以减少管理器加载时间

    将 MODX 文件夹转换为分页容器,以帮助组织您的站点并减少管理器中的页面加载时间。 安装 您可以通过标准 MODx 包管理器安装 Lunchbox,也可以通过 Repoman 安装 Lunchbox: 将 Lunchbox 存储库从克隆到 MODx Web ...

    在线视频画质增强,支持视频加速

    1. 加速网页加载速度:通过优化浏览器的并发连接数、DNS查找、重试设置等方法,显著缩短网页加载时间。 2. 预读取技术:自动预读取页面可能需要的资源,使网页可以更快显示出来。 3. 资源优先级控制:自动区分webpage的...

    jquery插件lazyload.js延迟加载图片的使用方法

    通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。 Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页...

    通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

    需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。...

    如何提高javascript加载速度

    方法如下: 1、将所有[removed]标签放在尽可能接近<body>标签底部的位置,以保证页面在脚本运行之前完成解析尽量减少对整个页面下载的影响 2、限制页面的[removed]...等页面完成加载之后,再加载 JavaScript 源码

Global site tag (gtag.js) - Google Analytics