减少页面加载时间的方法

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

  • 减少调用其他页面、文件的数量。
  • 在使用css格式时,常会采用background载入图形文件,而每个background的图像都会产生1次HTTP 请求,为了让页面生动活泼大量使用background来加载背景图,可以采用css的1个有用的background-position属 性来加载背景图加以改善,将需要频繁加载的多个图片合成为1个单独的图片
  • 加载时采用:background:url(....) no-repeat x-offset y-offset的形式加载,图片加载的HTTP请求缩减为1个。

2. 压缩Javascript、CSS代码

  • 一般js、css文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这个压缩比率还是比较高的,一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。

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

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

4. 在文件末尾放Javascript脚本

  • 网页文件的载入是从上到下加载的,很多Javascript脚本执行效率较低,或者在网页前面都不需要执行的,如果将这些脚本放置到页面比较靠前的位置, 可能导致网站内容载入速度下降或加载不了
  • 将这些脚本放置在网页文件末尾,一定要放 置在前面的脚本要改用所谓的“后载入”方式加载,在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。

5. css、javascript改由外部调用

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

6. 尽可能减少DCOM元素

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

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

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

10. 服务器启用gzip压缩功能

  • 将要传输的文件压缩后传输到客户端再解压,在网络传输数据量会大幅减小
  • 在服务器上的Apache、Nginx可直接启用,也可用代码直接设置传输文件头,增加gzip的设置,也可从 负载均衡设备直接设置
  • 不过需要留意的是,这个设置会略微增加服务器的负担。服务器性能不是很好的网站,要慎重考虑。

11. Ajax采用缓存调用

  • Ajax调用都采用缓存调用方式,一般采用附加特征参数方式实现,注意其中的
    <script src=”xxx.js?{VERHASH}”,
    {VERHASH}就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。

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

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

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

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

  • iframe通常用于不同域名内容的加载,这同时也可能因iframe内容加载速度影响到主网页加载速度,如果可能,把需要加载的内容抓取到本地直接嵌入。如果实在需要iframe加载,采用后载入方式实现。

参考自:参考


版权声明:本文为Rayshaan原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。