减少页面加载时间（感知或实际加载时间）的方法。

Posted 2020-10-04

版权声明：本文为博主原创文章，未经博主允许不得转载。

•    1. 尽量减少页面中重复的HTTP请求数量
  比较直接的理解就是要减少调用其他页面、文件的数量。我们在使用css格式控制的时候，经常会采用background载入很多图形文件，而每个background的图像都会产生1次HTTP请求，一般我们为了让页面生动活泼会大量使用background来加载背景图，要改善这个状况，可以采用css的1个有用的background-position属 性来加载背景图，我们将需要频繁加载的多个图片合成为1个单独的图片，需要加载时可以采用：background:url(....) no-repeat x-offset y-offset;的形式加载即可将这部分图片加载的HTTP请求缩减为1个。
  2. 服务器开启gzip压缩
  即将需要传输的内容压缩后传输到客户端再解压，这样在网络上传输的 数据量就会大幅减小。通常在服务器上的Apache、nginx可以直接开启这个设置，也可以从代码角度直接设置传输文件头，增加gzip的设置，也可以从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。建议服务器性能不是很好的网站，要慎重考虑。
  3. css样式的定义放置在文件头部
  4. Javascript脚本放在文件末尾
  我们都知道网页文件的载人是从上到下的加载的，而有很多javascript脚本执行效率比较低下，或者在网页前面都不需要执行的，如果将这些脚本放置到页面比较靠前的位置，很可能会导致网站内容载入速度下降甚至无**常加载，所以一般将这些脚本放置在网页文件末尾，一定要放 置在前面的脚本要改用所谓的“后载入”方式加载，在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。
  5. 压缩Javascript、CSS代码
  一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。这方面的工具也有很多，可以在百度里搜索一下关键字“css代码压缩”，或者“js代码压缩”将会发现有很多网站都提供这样的功能，当然了你也可以自己写程序来做这个工作，如果你会的话。就拿我们这个网站来说吧。刚开始上传这个网站的时候，我的很多Css代码都没有压缩，后面发现了这个问题，我就上网找了相关的网站的压缩代码的功能，最后就把很多CSS文件都压缩了。这个压缩比率还是比较高的，一般都有50%左右。由此可见，这个代码压缩对于网页的加载还是很有用的。
  6. Ajax采用缓存调用
  Ajax调用都采用缓存调用方式，一般采用附加特征参数方式实现，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征参数，这个参数不变化就使用缓存文件，如果发生变化则重新下载新文件或更新信息。
  7. 尽可能减少DCOM元素
  这个很好理解，就是尽可能减少网页中各种<>元素数量，例如<table>的冗余很严重，而我们完全可以用<div>取代之。
  8. 使用多域名负载网页内的多个文件、图片
• 9. 使用CDN
• 10. 在服务器端配置control-cache  last-modify-date
  
• 11.在服务器配置Entity-Tag     if-none-match