HTML减少页面加载的方法
1. 重复的HTTP请求数量应尽量减少
(1)减少调用其他页面、文件的数量。
(2)在使用css格式时,常会采用background载入图形文件,而每个background的图像都会产生1次HTTP 请求,为了让页面生动活泼大量使用background来加载背景图,可以采用css的1个有用的background-position属 性来加载背景图加以改善,将需要频繁加载的多个图片合成为1个单独的图片,加载时采用:background:url(…) no-repeat x-offset y-offset的形式加载,图片加载的HTTP请求缩减为1个。
background:url(....) no-repeat x-offset y-offset
2. 压缩Javascript、CSS代码
一般js、css文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这方面的工具也有很多,可以在百度里搜索一下 关键字“css代码压缩”,或者“js代码压缩”将会发现有很多网站都提供这样的功能,当然了你也可以自己写程序来做这个工作,如果你会的话。就拿我们这 个网站来说吧。刚开始上传这个网站的时候,我的很多Css代码都没有压缩,后面发现了这个问题,我就上网找了相关的网站的压缩代码的功能,最后就把很多 CSS文件都压缩了。这个压缩比率还是比较高的,一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。
3. 在文件头部放置css样式的定义
这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利,可以在网页逐步呈现的同时仍会保持格式信息,不影响网页美感。
4. 在文件末尾放Javascript脚本
网页文件的载入是从上到下加载的,很多Javascript脚本执行效率较低,或者在网页前面都不需要执行的,如果将这些脚本放置到页面比较靠前的位置, 可能导致网站内容载入速度下降或加载不了,将这些脚本放置在网页文件末尾,一定要放 置在前面的脚本要改用所谓的“后载入”方式加载,在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。
5. css、javascript改由外部调用
如果css、js内容比较庞大,尽量不要写到同1个页面中去,改由外部载入比较妥当,因为浏览器本身会对css、js文件进行缓存。
6. 尽可能减少DCOM元素
尽可能减少网页中各种<>元素数量,例如< tabl >的冗余很严重,而我们完全可以用< div >取代之。
7. 避免使用CSS脚本(CSS Expressions)
有时为了要css的参数动态改变,可能会采用css expression来实现,但这样做得不偿失,会使用户端浏览器负担明显加重,所以不建议这样做,如果需要改变,可以使用Javascript脚本去实现。
8. 添加文件过期或缓存头
对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲时间,例如设置24小时过期时间,这样用户在访问过该页面之后再次访问时,同一组图片或JS不会再重复下载,从而减少了HTTP请求,用户访问速度明显有所提升,同时服务器负载也会下降。下面给出nginx配置中缓存控制的例子:
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;#设置30天过期
}
location ~ .*\.(js|css)?$
{
expires 1h;#设置1小时过期
}
`9. 使用CDN(Content Delivery Network)网络加速
现在国内做CDN加速业务的公司很多,简单讲,就是将你的图片、视频扩散到CDN网络所能到达之处,让用户访问时能就近下载到这些文件,从而达到网络提速的目的,这样做,同时能减轻你自己网站的负载。
10. 服务器启用gzip压缩功能
将要传输的文件压缩后传输到客户端再解压,在网络传输数据量会大幅减小。在服务器上的Apache、Nginx可直接启用,也可用代码直接设置传输文件头,增加gzip的设置,也可从 负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。服务器性能不是很好的网站,要慎重考虑。
11. Ajax采用缓存调用
Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的