欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

一次WEB前端优化尝试 - jerrylsxu

程序员文章站 2022-05-15 09:45:48
...
今天对自己做的项目中的一个设计器界面加载速度上进行了优化,因为页面在加载的时候,感觉有点慢。首先,我用firefox的yslow和chrome的pagespeed进行了测试,效果如下,分数有点不同,但是都是很低的。我其实主要在chrome下用pagespeed的提示进行优化的。

yslow优化前:

一次WEB前端优化尝试 - jerrylsxu

yslow优化后:

一次WEB前端优化尝试 - jerrylsxu

pagespeed优化前:

一次WEB前端优化尝试 - jerrylsxu

pagespeed优化后:

一次WEB前端优化尝试 - jerrylsxu

优化策略:

1.tomcat配置启用gzip压缩

2.tomcat配置静态文件的过期时间

3.css放页面上方

4.javascript放页面下方

5.css和js文件分别合并、压缩

tomcat启用gzip压缩

打开tomcat的conf目录下的server.xml文件,修改如下

  1. Connector port="80" protocol="HTTP/1.1"
  2. connectionTimeout="20000"
  3. redirectPort="8443" executor="tomcatThreadPool" URIEncoding="utf-8"
  4. compression="on"
  5. compressionMinSize="50" noCompressionUserAgents="gozilla, traviata"
  6. compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" />

参考链接:http://blog.csdn.net/hbcui1984/article/details/5666327

tomcat配置静态文件过期时间

打开tomcat的conf目录下的web.xml文件,增加如下:

  1. filter>
  2. filter-name>ExpiresFilterfilter-name>
  3. filter-class>org.apache.catalina.filters.ExpiresFilterfilter-class>
  4. init-param>
  5. param-name>ExpiresByType imageparam-name>
  6. param-value>access plus 10 minutesparam-value>
  7. init-param>
  8. init-param>
  9. param-name>ExpiresByType text/cssparam-name>
  10. param-value>access plus 10 minutesparam-value>
  11. init-param>
  12. init-param>
  13. param-name>ExpiresByType application/javascriptparam-name>
  14. param-value>access plus 10 minutesparam-value>
  15. init-param>
  16. filter>
  17. filter-mapping>
  18. filter-name>ExpiresFilterfilter-name>
  19. url-pattern>/*url-pattern>
  20. dispatcher>REQUESTdispatcher>
  21. filter-mapping>

过期时间:每次请求增加十分钟

参考链接:https://tomcat.apache.org/tomcat-7.0-doc/api/org/apache/catalina/filters/ExpiresFilter.html

css文件合并压缩,js文件合并压缩

合并压缩使用grunt进行处理,简单方便

参考链接:http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html

http://www.cnblogs.com/snandy/archive/2013/05/20/3088613.html

总体来说,页面加载速度有所提升,因页面设计器中,各个组件的js和核心js加起来有30多个,我只针对这方面进行了压缩合并,其他引入的js插件都是使用的压缩后的;css方面我也只压缩合并的我自己增加的文件。图片方面没有把所有图片都合并到一个文件中,只有少部分icon整合了,这方面合并后应该还会有所提升。