摘要：雅虎规则熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。页面加载前置，后置，首屏无关的不加载，图片懒加载，精简之类的，都是在网页加载层面上的优化，可以算作请求都结束了之后做的东西。同时达到了最初的目的。
雅虎规则
熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。优化规则&&原文，仔细阅读这些规则，可以总结到3个方面：
Http层面上的优化减少http请求数，http请求cookie减小，减少DNS查询，避免跳转，ajax利用缓存之类，都是在http层面上的考虑。
静态资源压缩js和css代码，使用gzip，利用CDN（也可以算http层面上），避免CSS表达式，优化和裁剪图片之类的，都可以算作为静态资源上的优化，其实和Http很多有交集的。
页面加载前置css，后置js，首屏无关的不加载，图片懒加载，精简DOM之类的，都是在网页加载层面上的优化，可以算作请求都结束了之后做的东西。
所以说，我们在做页面优化的时候，基本都是从这些方面来考虑的，那么我今天要说的是，另外的角度考虑优化或者说从体验上来做的优化。
回忆过去优化后
优化前
如果网速不错，在电脑上，基本感觉不出2个有什么区别，加上浏览器的缓存的话，后面的区别就更小了。
优化前截图
优化后截图
为什么没有区别，因为资源都是一样的，而且都放在阿里的CDN上面，去除掉网络波动，总体上来说就是应该没有什么区别，那么为什么还是要优化，如果你使用一点弱网络（不要太弱，太弱又差不多了）就慢慢能看出来，优化后明显页面出来的速度比优化前要快，嘿嘿!!!
寻找目的地先分析我们目的是什么，是加快页面显示的速度，并非加快页面整个加载速度，因为基本上这个页面能从Http和静态上优化的点快做完了，静态都在CDN上面，就一个html，没了。所以我们只能用页面显示速度上做文章了。
怎么搞？注意截图中红色画框的部分和红色箭头，这部分明显的是有区别的，这个红线的时间，表示的是什么，就是你浏览器转圈圈的时间，放在微信下就是那个绿条的时间，表示你页面首屏加载完成了，要优化的也是这个。
第一道风景--火焰山最先想到的是图片问题，懒加载模式，这样子，所有的图片就会像优化后的页面一样，在红线的后面。但是这种懒加载有几个问题：
我们页面是放在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变成延迟加载等等。
文章的主旨并非讲解通用的优化方法，而是我当时优化的思路，通过当时思考的思路，来启示大家在做优化的时候，不要盲目的就只会按照别人的方法来，要多思考，多查阅相关文档。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50219.html
摘要：雅虎规则熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。页面加载前置，后置，首屏无关的不加载，图片懒加载，精简之类的，都是在网页加载层面上的优化，可以算作请求都结束了之后做的东西。同时达到了最初的目的。 雅虎规则 熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。优化规则&&原文，仔细阅读这些规则，可以总结到3个方面： Http层面上的优化...
摘要：雅虎规则熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。页面加载前置，后置，首屏无关的不加载，图片懒加载，精简之类的，都是在网页加载层面上的优化，可以算作请求都结束了之后做的东西。同时达到了最初的目的。 雅虎规则 熟悉网站优化的开发者应该都知道，只要提到网页性能优化，就绕不开雅虎军规。优化规则&&原文，仔细阅读这些规则，可以总结到3个方面： Http层面上的优化...
摘要：前言为了更好的开发，我们需要准备我们需要的工具这里主要用来具体代码的编写微信开发者工具通过这个看效果图通过这个网站可以伪造一些数据来供我们使用，非常方便。 showImg(https://segmentfault.com/img/remote/1460000015238794); 一场说走就走的旅行开始啦 随着小程序的大热，作为一个程序猿，我也开始接触并且大概了解了一个制作小程序的一...
摘要：今天看定位的课程，了解到一个元素要设置绝对定位，需要确定一个父类或者祖先类参照物，默认是根元素。第三步，在第二步的基础上给添加属性声明小结唉，这次却被擒获了唉，怎么回事没错，做绝对定位的祖先参照物，是设置了相对定位且离最近的那个祖先类元素。 今天看CSS定位的课程，了解到一个元素要设置绝对定位，需要确定一个父类或者祖先类参照物，默认是根元素html。这个默认根元素已经明确，但是祖先类元...
阅读 2413·2021-11-16 11:44
阅读 850·2021-09-10 11:16
阅读 2226·2019-08-30 15:54
阅读 1044·2019-08-30 15:53
阅读 1896·2019-08-30 13:00
阅读 616·2019-08-29 17:07
阅读 3510·2019-08-29 16:39
阅读 3136·2019-08-29 13:30
