提高页面加载速度的几个方法小结
很久没写技术方面的东西,是因为在做了一段时间的技术以后我越发发现,学什么技术或者技术应该钻研到什么层次真的不是最重要的,最重要的是解决问题的方法和能力。所以以后如果再写技术类的文章,定要少些技术细节,多一些方法和思路,今天就给大家介绍几个提高页面装载时间的方法,都是我在工作当中实践出来的经验。
首先给大家列出几个阻碍loadtime提高的因素,有不足的欢迎补充:
1、页面大小;
2、页面连接数;
3、服务器抗压能力;
4、网络状况(包括带宽和网段等因素);
一、页面大小
页面大小是指页面内容的字节数。
在同等网络环境下,页面越小自然下载时间越快,所以在合理范围内减少页面大小是可以优化下载速度的。而页面大小主要是由HTML的代码量来决定的(当然也可能包括一些css或者js的代码,不过主体还是HTML代码),要想减小页面的大小,就得根据W3C的标准来优化HTML代码结构,去除一些垃圾无意义的代码,前2年轰轰烈烈的web重构大致就是这个意思。如果你对web标准或者web重构不了解,可以去google一下这方面的内容,不过国内很多学习者对web重构的理解有偏差,单一地认为是用div+css取代table布局,这种观点就不必去理会了。
二、页面连接数
页面连接数是指浏览器从服务器上下载完当前页面以及其所需资源的过程中向服务器发出的请求次数。
举个例子,一个页面文件当中包括一张图片、一个外联的css文件和一个外联的js文件,那么完全下载完这个页面所需要对服务器发送的请求就是4个(当前页面html、图片、css和js各占一个连接数),该页面的连接数也就是4个。
服务器处理连接数是需要耗费资源和时间的,所以多次少取不如少次多取。
就好比方说你和你五个哥们一起去买车票,总共只有一个售票窗口,是5个人排队各买各的快还是一个人排队买5个人的快呢?答案很明显。
所以降低页面连接数是非常有必要并且非常有效的办法。
那么如果来降低页面连接数呢?这里有一些技巧,比如写css需要用到背景图片的时候,能用一张解决问题的绝不用两张,甚至最好不用图片,我本人就非常喜欢无图片的绿色环保的css代码。
还有就是能统一到一个文件里面的尽量统一到一个文件里面,比如js文件和css文件都没有必要外联,都可以吐到一个相应的html代码中间,让服务器一次性发送给浏览器,这样的好处有很多:首先可以减少页面连接数,其次可以避免由于网络问题造成的页面裸奔现象(没有css修饰的页面就是裸奔)和js功能函数没load完造成页面功能不完整的现象。
看到这里,有的哥们可能会问,把js和css代码都写在一个页面里面岂不是很不好维护么?web标准不是崇尚结构和表现分离,结构与行为分离么?然也,web标准确实是对的。但是把js和css代码与HTML搞在一起只是给浏览器看的,有很多的方法可以做到页面生成之前css、js和HTML都是完全分离的,而生成的页面却是三者的综合体。比如apache的页面拼装功能,或者smarty中的模版嵌套功能等。
另外,设置浏览器的页面缓存也是一个不错的办法,能非常有效地降低页面连接数,提高页面加载速度。当然这只是针对那些实时性不强的网站来说。
三、服务器抗压能力
服务器抗压能力通常指的是服务器所能承受的最大访问人数。
这是一个硬件指标,不过也可以通过对软件和页面的优化来提高服务器的抗压能力。
这里的服务器主要包括两项,一个是http的服务器(apache或者iis),还有一个是数据库服务器。
这是所说的优化主要是有效减少服务器的连接数、提高程序执行效率,比如静态化页面或者使用缓存可以减少数据库的压力,减少页面连接数可以减少http服务器的压力等。还可以通过安装一些软件或者模块来达到这个目的,比如zend的php加速引擎,以及apc等。
四、网络状况
网络状况指的是用户当前的网络环境。
比如是拨号用户还是宽带用户,带宽是512k还是1M等等,这些硬件指标就像通向你电脑的管道,管道越大,相同时间内下载的东西就越多,速度自然就越快了。
当然这个因素不是网站开发者可以去控制的。
以上就是我总结出来的几个提高页面loadtime的方法,有什么不足的地方还希望大家能补充一下,多多益善。
相关推荐
-
如何提高MYSQL数据库的查询统计速度 select 索引应用
数据库系统是管理信息系统的核心,基于数据库的联机事务处理(OLTP)以及联机分析处理(OLAP)是银行.企业.政府等部门最为重要的计算机应用之一.从大多数系统的应用实例来看,查询操作在各种数据库操作中所占据的比重最大,而查询操作所基于的SELECT语句在SQL语句中又是代价最大的语句.举例来说,如果数据的量积累到一定的程度,比如一个银行的账户数据库表信息积累到上百万甚至上千万条记录,全表扫描一次往往需要数十分钟,甚至数小时.如果采用比全表扫描更好的查询策略,往往可以使查询时间降为几分钟,由此可见
-
启用IIS6的GZIP功能,提高网站打开速度,减少带宽占用
IIS6默认情况下没有开启GZIP功能,需要我们手动配置,但他又没提供图形化配置功能,所以呀,像我这样的技术人才,都没考虑过使用他,昨天突然看到这个想到,也许对我有用,但从网上找了找,都是一堆手工操作方法,非常麻烦呀,不过以前研究过IIS的配置文件:C:\WINDOWS\system32\inetsrv\MetaBase.xml,所以呀,我知道只要是IIS的功能就可以通过修改这个文件来完成,所以呢,就对这个文件下手吧,根据网上提供的修改的地方,在网上搜索了一圈,找到一个类似ClickOnce 的
-
js 利用image对象实现图片的预加载提高访问速度
大量采用高解析度的图像的确可以让一个Web站点容光焕发.但同样也会造成站点访问速度下降--图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关.现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度. 一些浏览器试图通过在本地缓存中保存这些图片来解决此问题.这样一来可以顺序调用这些图片--但对于首次使用这些图片的时候仍然会存在延时.预装载就是一种在需要图片之前就将图片下载到缓存的技术.采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回
-
利用JS延迟加载百度分享代码,提高网页速度
发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo
-
php 处理上百万条的数据库如何提高处理查询速度
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null 可以在num上设置默认值0,确保表中num列没有null值,然后这样查询: select id from t where num=0 3.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放
-
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
1.说明在使用extjs 的时候,运行起来比较卡,特别是运行数据和js过多的时候,就会出现卡死的情况,或者等待时间比较长. 在解决这个有很多优化方法,今天来说其中一种,那就是在Ant脚本打包的时候,把js中空格.注释去掉.以及合并,合并今天不说了,还未实现这个,在研究中 2.首先,需要准备二个 .jar 文件,分别是 YUIAnt.jar 和 yuicompressor-2.4.x.jar . 3.俩个文件的附件 下载地址 4.build.xml文件如下 复制代码 代码如下: <!-- JS压缩
-
延时加载JavaScript代码提高速度
延时加载js代码提高速度,具体内容如下所示: 如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题. 一.延时加载js文件: 可以使用定时器函数setTimeout()让外部的js文件延迟加载,例如: <script type="text/javascript" src="" id="my"></script> <script type="text/jav
-
如何使用索引提高查询速度
使用索引提高查询速度1.前言在web开发中,页面模板,业务逻辑(包括缓存.连接池)和数据库这三个部分,数据库在其中负责执行SQL查询并返回查询结果,是影响网站速度最重要的性能瓶颈.本文主要针对MySql数据库,双十一的电商大战,引发了淘宝技术热议,而淘宝现在去IOE(I代表IBM的缩写,即去IBM的存储设备和小型机;O是代表Oracle的缩写,也即去Oracle数据库,采用MySQL和Hadoop替代的解决方案,;E是代表EMC2,即去EMC2的设备性,用PC Server替代EMC2),大量采
-
批量处理JDBC语句提高处理速度
有时候JDBC运行得不够快,这使得有些程序员使用数据库相关的存储过程.作为一个替代方案,可以试试使用Statement 的批量处理特性看看能否同时执行所有的SQL以提高速度. 存储过程的最简单的形式就是包含一系列SQL语句的过程,将这些语句放在一起便于在同一个地方管理也可以提高速度.Statement 类可以包含一系列SQL语句,因此允许在同一个数据库事务执行所有的那些语句而不是执行对数据库的一系列调用. 使用批量处理功能涉及下面的两个方法: · addBatch(String) 方法 · ex
-
提高页面加载速度的几个方法小结
很久没写技术方面的东西,是因为在做了一段时间的技术以后我越发发现,学什么技术或者技术应该钻研到什么层次真的不是最重要的,最重要的是解决问题的方法和能力.所以以后如果再写技术类的文章,定要少些技术细节,多一些方法和思路,今天就给大家介绍几个提高页面装载时间的方法,都是我在工作当中实践出来的经验. 首先给大家列出几个阻碍loadtime提高的因素,有不足的欢迎补充: 1.页面大小: 2.页面连接数: 3.服务器抗压能力: 4.网络状况(包括带宽和网段等因素): 一.页面大小 页面大小是指页面内容的字
-
Nginx开启Gzip压缩大幅提高页面加载速度的方法
刚刚给博客加了一个500px相册插件,lightbox引入了很多js文件和css文件,页面一下子看起来非常臃肿,所以还是把Gzip打开了. 环境:Debian 6 1.Vim打开Nginx配置文件 vim /usr/local/nginx/conf/nginx.conf 2.找到如下一段,进行修改 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 2; gzip_typ
-
性能优化之代码优化页面加载速度
页面代码的优化对于页面加载速度也有不小的影响,最广为人知的: HTML头部的JavaScript和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,JavaScript的引入放在页面尾. 其次还有: 1.按需加载,把统计.分享等 JS 在页面 onload 后再进行加载,可以提高访问速度: 2.优化 Cookie ,减少 Cookie 体积: 3.避免 []() 的 src 为空: 4.尽量避免设置图片大小,多次重设图片大小会引发图片的多次重绘,影响性
-
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
问题缘由:负责公司的开发平台研发工作,考虑的知识产权的保护工作,必须要考虑java的加密技术和js脚本的加密技术.在目前java加密很容易破解的情况下,还是先搞定js的加密和压缩,一方面可以提高页面加载性能,另外一方面也希望辛苦研发出来的成果得到一定的保护. 研究过程: 1.先强烈鄙视一下哪些随便转载文章的家伙,给我制造了很大的麻烦!!网上很多帖子都不靠谱.. 2.首先想了解jquery使用什么压缩的, 网上找了半天,说法不一样,后来还是在jquery官网的最频繁问题中找到了答案,但这已经是绕了
-
jQuery页面加载初始化的3种方法(推荐)
jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(function(){ alert("第一种方法."); }); 第二种: $(function(){ alert("第二种方法."); }); 第三种: jQuery(function($) { alert("第三种方法."); }); ps; 不用jQuer
-
vue页面加载闪烁问题的解决方法
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho
-
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况. 解决思路: 1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签. 2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数. 方法1案例:tab页里的子页面如果没有内容就隐藏 父页面代码 <e
-
Windows下使用apache模块实现合并多个js、css提高网页加载速度
现在的网站表现力越来越丰富,页面加载的js和css自然也越来越多.当网站页面上的js和css太多,浏览器打开页面的速度就会很慢,明显降低了用户的体验.使用mod_concatx, 可以合并多个文件在一个http响应报文中,可以有效提高js/css的加载速度. 示例效果如下: mod_concatx模块是在mod_concat基础上修改的,感谢他们的工作. 原有的mod_concat模块有很大的参考价值,但实际作用不大. 该模块存在以下三个问题: 1.每次都会重新向客户端发数据,没有合理利用浏览器
-
提升页面加载速度的插件InstantClick
通常,我们为了减少DNS的查询时间,我们可以使用dns prefetch为该页面中链接的做解析,提升页面的加载速度.类似的,我们可以在鼠标滑到链接上到点击的时间间隙去加载这个页面,通常这个间隙有几百毫秒,利用InstantClick,我们可以充分利用这几百毫秒,让网站能够瞬间显示新页面,几乎没有延迟. InstantClick的安装 安装InstantClick非常简单,只要把InstantClick下载过来放到某一个目录下,然后在</body>之前引用一下代码即可,例如: <scrip
-
jsp的注释可能会影响页面加载速度让代码扔继续执行
在jsp页面使用"<!-- -->"的注释,注释里面的java代码还是会得到执行,可以再查看页面源代码上看到执行完成的内容,这样就会让不希望执行的代码得到执行,影响加载速度.比如如下代码: 复制代码 代码如下: 性别:<select name="qureyItemGroup.sex" class="selinp" style="width:75px;"> <option value="&
随机推荐
- 浅析Linux打包压缩解压缩命令大全(收藏)
- MySQL优化表时提示 Table is already up to date的解决方法
- Node.js的Web模板引擎ejs的入门使用教程
- 为IIS增加svg和woff等字体格式的MIME(2003、2008)
- Spring jpa和mybatis整合遇到的问题解析
- 厚积薄发,拥抱.NET 2016
- python进阶教程之异常处理
- 谈谈Android里的Context的使用实例
- javascript url几种编码方式详解
- 在IE下拖动滚动条时border消失的解决方法
- JavaScript实现班级随机点名小应用需求的具体分析
- jQuery可见性过滤选择器用法示例
- JS实现的数字格式化功能示例
- javascript 初学教程及五子棋小程序的简单实现
- Spring(AbstractRoutingDataSource)实现动态数据源切换示例
- Linux 使用init命令实现关机,重启,切换模式
- mysql获取group by总记录行数的方法
- css配合jquery美化 select
- PHP 实现一种多文件上传的方法
- 获取当前网页document.url location.href区别总结