雅虎划定规矩
熟习网站优化的开发者应当都晓得，只需提到网页机能优化，就绕不开雅虎军规。优化划定规矩&&原文，仔细浏览这些划定规矩，能够总结到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变成耽误加载等等。
文章的宗旨并不是解说通用的优化要领，而是我当时优化的思绪，经由过程当时思索的思绪，来启发人人在做优化的时刻，不要自觉标就只会根据他人的要领来，要多思索，多查阅相干文档。
