說走就走的性能優化之旅

雅虎規則

熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。優化規則&&原文，仔細閱讀這些規則，能夠總結到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變成延遲加載等等。

文章的主旨並不是講解通用的優化方法，而是我當時優化的思路，經過當時思考的思路，來啓示你們在作優化的時候，不要盲目的就只會按照別人的方法來，要多思考，多查閱相關文檔。