雅虎规则熟悉网站优化的开发人员应该知道，只要提到网页性能优化，就绕不开雅虎的军事规则。优化规则&&原文，仔细阅读这些规则，可以归纳为三个方面：http级别优化减少http请求次数、http请求cookie减少、减少DNS查询、避免跳转、ajax使用缓存等，都在Considerations处http级别。静态资源压缩js和css代码，使用gzip，使用CDN（也可以在http层面考虑），避免CSS表达式，优化裁剪图片等，都可以算作静态资源的优化，其实有与HttpIntersecting有很多不同。预加载css、后加载js、不加载不相关的首屏、延迟加载图片、精简DOM等等，都是页面加载层面的优化，可以算作是请求结束后做的事情。那么，我们在做页面优化的时候，基本都是考虑这几个方面，所以今天想说的是换个角度考虑优化，或者说是从体验的角度进行优化。回想以前，如果优化后和优化前网速都不错，在电脑上，两者基本没有区别，如果加上浏览器的缓存，后面的区别就更小了。为什么优化前的截图没有区别？为什么优化后截图没有区别？因为资源都是一样的，而且都放在了阿里的CDN上。去除网络波动后，大体上应该没有区别。那为什么还需要优化呢？如果你用一点Weak网络（不是太弱，太弱也差不多）就可以看的很慢。优化后，可以明显看出页面的速度比优化前要快。呵呵！！！寻找目的地，首先分析一下我们的目的是什么，是为了加快页面的显示速度，并不是为了加快页面整体的加载速度，因为基本上这个页面可以从Http和static上优化，而static都在CDN上了，就一个html，没了。所以只能在页面显示速度上做文章了。该怎么办？注意截图中红框和红色箭头的部分。这部分明显不同。这条红线的时间表示什么？这是您的浏览器转圈的时间。放在微信下面就是绿条的时间，这意味着你的页面首屏加载完成，这就是需要优化的地方。第一风景-火炎山首先想到的是图片问题，懒加载模式，这样一来所有的图片都会像优化页面一样在红线后面。但是这种懒加载有几个问题：我们的页面放在App里面，App里面会记录文章的浏览位置。再次进入时，Native会设置位置，达到自动回到阅读位置的效果。这个效果会导致我们判断如果当前屏幕上的图片有错误，就会显示背景色，体验很不好。2.在移动端使用scroll方法判断是否滚动，会出现错误，因为浏览器是在滚动停止后触发这个事件，也就是直到滚动停止才会触发，导致加载错误.对于2，可以换个监听方式来解决，比如监听touchmove。但是第一个比较尴尬，除非你用回调什么的，所以我改变了主意。我们使用懒加载的原因是为了延迟图片，让其他静态提前加载。不像淘宝，因为图片太多，需要一屏一屏的批量加载。基于以上考虑，我把完全懒加载模式改成懒加载模式，也就是执行完js前面所有文章内容图片立即加载，解决了上面1和2的问题。同时，达到了最初的目的。第二条路——通天河，刚刚翻过几座山，跨过几条河。为什么他情绪激动到忍不住哼起来？解决了图片的问题后，他发现了一个之前没有注意到的问题。静态加载资源也有优先权。看页面代码，其实我们把font-face放在最前面，在css、img、js之前，但是仔细看字体加载的顺序在css和js之后。因为使用了font-face，导致在加载字体之前页面上的文字不显示或者闪烁。这就是我前面提到的弱网环境下优化页面的快速显示（不是加载）。代码顺序如何解决？解决方法和图片类似，延迟加载，什么是延迟---我使用的解决方法是在html最后嵌入一个脚本，里面的代码使用了setTimeout，0ms，加上我们的业务js代码，所以它成为优化的屏幕截图它有效。很明显，最后一个js在红线之后，字体加载顺序提前了。终于在查找各种文档后，找到了原因。官方字体文档在这里要注意：如果一个字体*当前*没有被页面上的任何东西使用，大多数用户代理将不会下载它的关联文件。这意味着稍后使用字体将导致延迟，因为用户代理最终注意到使用并开始下载和解析字体文件。font-load事件其实就是浏览器先分析页面的情况再决定是否加载相关字体（太聪明了，有时还很麻烦！！！），所以有一种优先加载字体资源的方法就是使用浏览器提供的API：varf=newFontFace("newfont","url(newfont.woff)",{});f.load().then(function(loadedFace){document.fonts.add(loadedFace);document.body.style.fontFamily="newfont,serif";});当然思路就是上面说的，其实还是有优化空间的，比如减少我们的js和css的大小，把一个pre-js的动画依赖，mo.min.js改成懒加载，等等。文章的主要目的不是讲解一般的优化方法，而是我当时的优化思路。通过当时的思考思路，给大家做优化的时候开导一下。不要一味的照搬别人的方法，多想多查阅相关文档。
