首页 > > 网页制作 > css >

减少页面加载时间的方法

2018-06-24 01:34:33来源：未知阅读 ()

1. 重复的HTTP请求数量应尽量减少

（1）减少调用其他页面、文件的数量。

　　（2）精灵图

2. 压缩Javascript、CSS代码

3. 在文件头部放置css样式的定义

这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利，可以在网页逐步呈现的同时仍会保持格式信息，不影响网页美感。

4. 在文件末尾放Javascript脚本

5. css、javascript改由外部调用

如果css、js内容比较庞大，尽量不要写到同1个页面中去，改由外部载入比较妥当，因为浏览器本身会对css、js文件进行缓存。

6. 尽可能减少DCOM元素

尽可能减少网页中各种<>元素数量，例如<table>的冗余很严重，而我们完全可以用<div>取代之。

7. 避免使用CSS脚本(CSS Expressions)

　　有时为了要css的参数动态改变，可能会采用css expression来实现，但这样做得不偿失，会使用户端浏览器负担明显加重，所以不建议这样做，如果需要改变，可以使用Javascript脚本去实现。

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

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

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调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的

12. Ajax调用尽量采用GET方法调用

　　实际使用XMLHttpRequest时，如果使用POST方法实现，会发生2次HTTP请求，而使用GET方法只会发生1次HTTP请求。如果改用GET方法，HTTP请求减少50%！

13. 养成良好的开发维护习惯，尽量避免脚本重复调用

14. 缩减iframe的使用，如无必要，尽量不要使用

15. 合理使用Flush

用户端发送浏览请求后，服务器端一般要花销200-500ms去处理这些请求，在此期间，用户端浏览器处于等待状态，如果要减少用户等待时间，可以在适当的位置使用flush，将已经就绪的内容推送到用户端，这在php中很容易实现例如：

</head>
<?php flush();?>
<body>
...

16. 避免采用301、302转向

　　当浏览器、代理或搜索引擎派出的"爬虫"对某一页面或网址请求调用时，该调用页面或网址所在的网络服务器将会检查一个名为.htaccess的文件。该文件包含如何处理特定请求的指令，并在安全性上扮演关键角色。用户可对该文件进行修改，通过这个文件来通知浏览器、代理或"爬虫"，被调用页面属于临时移走（302重定向）还是永久性移走（301重定向）。我们也可以通过网络托管服务而不是.htaccess'文件来实现301/302永久性重定向。

17. 优化图片文件　

　　优化图片文件，减小其尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少。

普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等等方法实现。

18. 当页面内容庞大到一定程度，可以采用分页的方式展现，或者taobao的那种翻页后载入方式。

19. 使用多域名负载网页内的多个文件、图片

　　有资料说明，IE在网页载入过程中，在同1时刻，对同1域名并行加的HTTP请求数量最高为2个，如果网页需要加载的文件数量超过2个(通常远远超过..)，要加快网页访问速度，最好将文件分布到多个域名，例如19楼，其js文件采用独立的域名，据说百度的图片服务器数量在20台以上。

20. 配置ETags

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有