说走就走的性能优化之旅

雅虎规则

熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。优化规则&&原文，仔细阅读这些规则，可以总结到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变成延迟加载等等。

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