汇总几点前端优化的手段

---

1. 压缩html

标签前面的空白不是文描,可以去掉降低文件大小,对于freemarker,通过<#compress></#compress>指令实现

2. css,js压缩

经过压缩和混淆的css,js代码可以进一步降低文件大小

具体可参考member-vip 使用的yhd-merge-cssjs 插件

3. 引用的多余,或冗余的js

对于多个页面共同使用的js,css,img等,请全部使用一个路径,方便跳转另一个页面时能使用到前一个的缓存

4. 不建议页面标签添加style属性

将其写入css文件中,便于复用和管理

5. 延迟加载js

由于浏览器对html的解析为从上往下,将js文件引入放在body标签之后,可以让页面更快显示,注意css文件必须放在前面,否则在没解析到css文件之前页面会没有样式

6. 开启gzip压缩

通过使用压缩算法,将页面,js,css文件压缩后传输能进一步降低文件大小,减少流量消耗,可以
通过请求头可查看服务器是否使用了gzip压缩.

Gzip压缩只需在tomcat server.xml文件中配置

<Connector port="80" protocol="HTTP/1.1"connectionTimeout="20000" 
redirectPort="8443" executor="tomcatThreadPool" URIEncoding="utf-8" 
compression="on" compressionMinSize="2048" 
noCompressionUserAgents="gozilla, traviata" 
compressableMimeType="text/html,text/xml,text/plain,text/css,text/
javascript,text/json,application/x-javascript,
application/javascript,application/json" />  

属性说明