说走就走的性能优化之旅

雅虎规则

熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。优化规则&&原文，仔细阅读这些规则，能够总结到3个方面：

Http层面上的优化

减小http请求数，http请求cookie减少，减小DNS查询，避免跳转，ajax利用缓存之类，都是在http层面上的考虑。

静态资源

压缩js和css代码，使用gzip，利用CDN（也能够算http层面上），避免CSS表达式，优化和裁剪图片之类的，均可以算做为静态资源上的优化，其实和Http不少有交集的。

页面加载

前置css，后置js，首屏无关的不加载，图片懒加载，精简DOM之类的，都是在网页加载层面上的优化，能够算做请求都结束了以后作的东西。

因此说，咱们在作页面优化的时候，基本都是从这些方面来考虑的，那么我今天要说的是，另外的角度考虑优化或者说从体验上来作的优化。

回忆过去

优化后

优化前

若是网速不错，在电脑上，基本感受不出2个有什么区别，加上浏览器的缓存的话，后面的区别就更小了。

优化前截图

优化后截图

为何没有区别，由于资源都是同样的，并且都放在阿里的CDN上面，去除掉网络波动，整体上来讲就是应该没有什么区别，那么为何仍是要优化，若是你使用一点弱网络（不要太弱，太弱又差很少了）就慢慢能看出来，优化后明显页面出来的速度比优化前要快，嘿嘿!!!

寻找目的地

先分析咱们目的是什么，是加快页面显示的速度，并不是加快页面整个加载速度，由于基本上这个页面能从Http和静态上优化的点快作完了，静态都在CDN上面，就一个html，没了。因此咱们只能用页面显示速度上作文章了。

怎么搞？

注意截图中红色画框的部分和红色箭头，这部分明显的是有区别的，这个红线的时间，表示的是什么，就是你浏览器转圈圈的时间，放在微信下就是那个绿条的时间，表示你页面首屏加载完成了，要优化的也是这个。

第一道风景--火焰山

最早想到的是图片问题，懒加载模式，这样子，全部的图片就会像优化后的页面同样，在红线的后面。可是这种懒加载有几个问题：

1. 咱们页面是放在App里面的，会记录文章浏览位置，再次进来的时候，Native会设置position来到达自动回到阅读位置的效果，这个效果会致使咱们判断图片是否在当前屏幕有偏差，就会显示背景色，体验很很差。

2.在移动端使用scroll方法来判断是否滚屏，会有偏差，由于浏览器触发这个事件是在滚动中止后才触发的，也就是滚动不中止就会一直不触发，形成了加载的偏差。

对于2能够换监听方式来解决，例如监听touchmove。

可是第一个就比较尴尬了，除非用回调之类的形式，因此我换了一个思路，咱们的使用懒加载的缘由是为了把图片延后，让其余的静态提早加载。并不是像淘宝同样，由于图片众多，要分屏幕一屏一屏的分批加载，基于上面的考虑，我修改彻底的懒加载模式变成延迟加载模式，意思是在js最前面执行文章内容的全部图片当即加载，也就解决了上述的1，2问题。同时达到了最初的目的。

第二道--通天河

刚翻过了几座山
又越过了几条河
崎岖坎坷怎么他就这么多

不由自主的哼了起来，解决了图片的问题以后，发现一个原来一直没有注意的问题，静态加载资源也是有优先级的，看页面代码，咱们其实把font-face放置的很前，在css，img，js以前，可是仔细看
font加载的顺序一直在css和js以后，因为使用了font-face，就致使了，字体没有加载出来以前，页面文字不显示或者闪烁一下，这就是我前面说到的弱网络的环境下，优化后的页面显示（不是加载）的快。

代码顺序

如何解决呢？ 方案相似于图片，延迟加载，怎么个延迟 --- 我使用的方案是在html最后，嵌入一段script，里面代码用setTimeout，0ms，添加咱们的业务js代码，这样子就变成优化后截图的效果了，很明显的最后一个js在红线以后，font加载顺序提早了。

最后在翻查了各类文档以后，找到了缘由，字体官方文档

注意这里：if a font face isn’t *currently* used by anything on a page, most user agents will not download its associated file. This means that later use of the font face will incur a delay as the user agent finally notices a usage and begins downloading and parsing the font file.

font-load事件

其实也就是说，浏览器先分析了页面的状况，才决定是否须要加载相关字体（过于智能有时候好麻烦！！！），因此有一个办法来优先加载字体资源就是用浏览器给的API：

var f = new FontFace("newfont", "url(newfont.woff)", {});
  f.load().then(function (loadedFace) {
  document.fonts.add(loadedFace);
  document.body.style.fontFamily = "newfont, serif";
});

固然了，思路就如上所述，其实还有优化的空间，例如再精简咱们js大小，css大小，把一个前置的js动画依赖，mo.min.js变成延迟加载等等。

文章的主旨并不是讲解通用的优化方法，而是我当时优化的思路，经过当时思考的思路，来启示你们在作优化的时候，不要盲目的就只会按照别人的方法来，要多思考，多查阅相关文档。