摘要：
最近一个月在完成一个作品，将用于本月中旬在登封举行的“嵩山论坛”大会上，看官们要记得关注给心心哦！当然了，这个作品也让我学到了不少东西，也是进坑无数，爬坑无数，一直在进坑与爬坑的路上......

一、一个月一个作品

话说有一个多月没有更新网站文章了，其实艺灵我有很多东西想分享，无奈没有时间。这一个多月，我都在完成一个神秘的作品！这个作品要献给国家！哦对了，本月中旬在登封会举行嵩山论坛--华夏文明与世界文明对话，看官们一定要记得关注哦！！！

二、从用户体验的角度优化代码

写代码的姿势千千万，但同一个项目，你是可以用不同的方法来实现的！虽然我写的代码很low，但这次我也学到不少东西。我也是头一回发现原来网页是可以这样优化的！

三、优化就是个坑

3.1、优化角度：页面打开方式

我们都知道，从一个网页跳转到另一个网页，常规的做法都是一个超链接，用a标签就搞定了。此时点击时当前页面内容会全部替换掉，包括页面中的css、js以及页面的公共区域。但这样做有一个弊端就是：每个页面的css、js都会进行加载，太浪费网络流量了。尽管现有70%+的pc端和移动端均用的是传统方法。

3.1.1、解决方案：pjax

想要解决上面的弊端，那我们的页面间的跳转就要变为可控，例如：用ajax进行局部操作。这个大家都知道，但真正用到项目中的没多少。在此推荐另一款加强版的插件jquery-pjax，官网地址：github.com/defunkt/jquery-pjax，操作简单，而且还可以处理浏览器的前进和后退功能。经艺灵测试，唯一的不足就是：如果想让页面实现左右切换或上下切换或缩放展示时非常鸡肋，因为你要判断后退的操作。尽管艺灵用pjax把项目改到了90%，但最终还是放弃了。因为转场动画实在太坑爹了！！！

3.1.2、解决方案：张鑫旭大神的mobilebone.js

几经搜索，艺灵我又在网上看到了张鑫旭大神写的开源插件mobilebone.js，官网地址：www.mobilebone.org/，再次感谢张大神的插件！该插件默认就有了过场动画，但经实战发现还是存在过场动画异常的问题。

可能有很多看官还不知道艺灵这里提到的过场动画异常是个什么鬼。上图：移动端网页底部导航栏这种底部导航多见于移动端项目，我们从左向右点击时，页面都是从右侧展示，当我们操作一遍后，向左点击时，页面应该是从左向右回退展示。但这只是理想状态，如果用户操作不按正常顺序点击，而是各种鬼操作的话，mobilebone.js也会跟着凌乱起来！有兴趣的看官可以在本地写个简单的例子跑跑。

几经折腾，最后还是选择了mobilebone.js。因为艺灵此时的这个项目除了左右滑动显示页面，还有二楼下拉功能，如图：首页下拉加载二楼特效还有文章放大显示，还有一些操作等等。所以自己也做了一些判断来避免过场动画异常，总之填坑很累！......

3.2、优化字体

因为项目是移动端的，所以自然用到了高逼格的苹方字体，但光光是加载字体就已经40M+了！本地打开首页首屏时一共有个36请求，44.6MB，耗时2.34s。如图：用了苹方字体时首页达到了44M

当我把代码扔到服务器上并且不加载苹方字体时，网页立马小了很多，此时是24个请求，2.7MB，耗时5.62s。如图：无苹方字体时网页才2M多此时看官肯定会问：既然你都没加载字体了，而且网页由原来的44.6MB减少到了2.7MB，为什么时间上却翻倍了呢？这个嘛，因为现在是在服务器上跑啊，也就是说网络因素影响了时间。

在此感谢@阿布大神提供的方法，利用font-spider(网址： github.com/aui/font-spider )来实现字体压缩。经过压缩后，效果非常明显！此时是34个请求，1.4MB,耗时671ms，如图：用font-spider压缩字体后效果非常明显怎么样，有没有惊喜！是不是很神奇？！

忘记说了，字体在压缩后比未使用字体时网页还小是因为现在又使用了图片懒加载技术技术！

经测试发现，压缩字体后，网页上某些字体还是跟原字体不一样，这个问题不知道什么原因引起。

3.3、合并css/js

除了可以压缩字体及使用图片懒加载技术外，我们还可以对网页中的css、js进行合并。这个方法早在2016年时，艺灵就已经学会了，当时写的文章minify实战之合并css和js减少网站http请求数就提到过，而且自己的网站一直在用。只是一直没太在意页面请求及耗时的数据。

当艺灵给此项目使用minify合并了css和js后，这下网页的体积又发生了变化。此时请求只有18个，1020KB，耗时399ms。如图：接着用minify把css和js合并后效果更加明显

四、最后

怎么样，神奇吧！网页从未使用苹方字体时的2.7M优化到使用苹文字体后的1.4M再优化到1020kb，这简直就是一个质的跨越！而我，也是头一回体验到了经过各种技术手段优化网页的威力是有多么的神奇！

不说了，转场动画还有坑，我要填坑去了......

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2018-09-14/webapp-minify.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。