减少页面加载时间的方法

Posted 2020-08-04 张三的美丽家园

加载时间是指感知的时间 

1.优化图片文件

　　减小图片尺寸，特别是缩略图，一定要按尺寸生成缩略图然后调用，不要用网页中的resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少。普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等方法实现。

2.减少http请求

　　合并javascript和css文件、CSS Sprites、图像映射(一个图片多个连接)、使用Data URI来编码图片。

3.图像格式的选择

　　GIF：提供的颜色较少，可用在一些对颜色要求不高的地方 

4.优化压缩CSS,JS（压缩合并css，如margin-top,margin-left...)

　　一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。这方面的工具也有很多，可以在百度里搜索一下关键字“css代码压缩”，或者“js代码压缩”将会发现有很多网站都提供这样的功能，当然了你也可以自己写程序来做这个工作，如果你会的话。就拿我们这个网站来说吧。刚开始上传这个网站的时候，我的很多Css代码都没有压缩，后面发现了这个问题，我就上网找了相关的网站的压缩代码的功能，最后就把很多CSS文件都压缩了。这个压缩比率还是比较高的，一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。

 

5.网址后加斜杠

　　如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面。

6.标明高度和宽度

　　如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 

　　当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。

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

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