网页平台项目页面加载速度优化

楼主^#

更多发布于：2019-05-09 14:13

前言：
目前网页平台开发的页面，部署到服务器上后，会出现加载资源过多导致页面加载速度慢的问题，针对这个现象，这里列出三种解决方案。
一、使用CDN
针对可以使用外网的系统，推荐使用CDN的方式引用页面的公用js或css资源。
原理：CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
使用：直接将资源的地址替换成CDN地址即可

图片：TIM截图20190509113111.png

二、页面资源添加缓存
主要是通过设置expires头和cache-control的方式给资源添加缓存，通过设置过滤器，只针对特定资源添加缓存即可。
使用：入下图所示，在过滤器中对资源设置头部内容即可。

图片：TIM截图20190509114153.png

关键代码：
1.设置缓存：
response.setDateHeader("Expires", 691200);
response.setHeader("Cache-Control", "max-age=691200");
2.不设置缓存：
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("expires", -1);
三、使用gzip压缩页面资源
介绍：
1. HTTP 协议支持GZIP 压缩机制，也称协议压缩。 HTTP GZIP压缩是由WEB服务器和浏览器共同遵守的协议，也就是说WEB服务器和浏览器都必须遵守。目前主流的服务器和浏览器都支持GZIP压缩技术。包括 IE、FireFox、Opera 等；服务器有 tomcat、Apache 和 IIS 等。
2. GZIP 主要用来压缩html,css,javascript,等静态文本文件，也支持对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩。
3. GZIP 压缩的比率通常在3~10 倍之间，这样可以大大节省服务器的网络带宽，大大提升浏览器的浏览速度。
使用：
tomcat服务器配置：修改tomcat目录conf/server.xml文件，修改节点如下：

图片：TIM截图20190509115229.png

内容：<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443"
compression="on"
compressionMinSize="2048"
compressableMimeType= "text/html,text/css,application/javascript,image/png" />
参数说明：

1、compression="on" 开启压缩。可选值："on"开启，"off"关闭，"force"任何情况都开启。
2、compressionMinSize="2048"大于2KB的文件才进行压缩。用于指定压缩的最小数据大小，单位B，默认2048B。注意此值的大小，如果配置不合理，产生的后果是小文件压缩后反而变大了，达不到预想的效果。
3、compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,text/json"会被压缩的MIME类型列表，多个逗号隔，表明支持html、xml、js、css、json等文件格式的压缩。compressableMimeType很重要，它用来告知tomcat要对哪一种文件进行压缩，如果类型指定错误了，肯定是无法压缩的。那么，如何知道要压缩的文件类型呢？可以通过以下这种方法找到：

图片：TIM截图20190509120040.png

优化结果：1949KB→531KB
原文件大小：

图片：TIM截图20190509140406.png

压缩过后：

图片：TIM截图20190509140600.png

JBOSS配置：修改jboss路径server/default/deploy/jboss-web.deployer/server.xml文件，修改节点如下：

图片：TIM截图20190509140954.png

内容：<Connector port="8888" address="0.0.0.0"
   maxThreads="250" maxHttpHeaderSize="8192"
   emptySessionPath="true" protocol="HTTP/1.1"
   enableLookups="false" redirectPort="8443" acceptCount="100"
connectionTimeout="20000"
disableUploadTimeout="true"
compression="on"
compressableMimeType="text/html,text/css,text/javascript,application/x-javascript,application/javascript,image/png"/>
优化结果：同上

喜欢4

网页平台项目页面加载速度优化

最新喜欢：