汇总几点前端优化的手段

---

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" />  

属性说明

compression=”on” 打开压缩功能

compressionMinSize=”50” 启用压缩的输出内容大小,单位为字节，默认为2KB

noCompressionUserAgents=”gozilla, traviata” 对于以下的浏览器，不启用压缩

compressableMimeType=” text/html,text/xml,text/plain,text/css, text/javascript,text/json,application/x-javascript,application/javascript,application/json “　哪些资源类型需要压缩

6. 静态分离

将静态文件经过压缩,去冗余后,再使用静态分离分担流量,进一步提升响应速度.

---

对比
Jquery源文件大小为278k ,经过压缩后jquery.min为94k 文件大小降低66%

Tomcat启用gzip压缩后降为32.8k,文件大小降低88%

某freemarker原文件大小为16k

开启gzip压缩后降为11.6k

进一步使用freemarker compress指令后降为9.8k 文件大小降低40%

---

作者：初龙

原文链接:https://chulung.com/article/summary-of-several-front-end-optimization-means

本文由MetaCLBlog于2017-07-17 09:03:09自动同步至cnblogs

本文基于 知识共享-署名-非商业性使用-禁止演绎 4.0 国际许可协议发布，转载必须保留署名及链接。