雅虎規則

熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。優化規則&&原文，仔細閱讀這些規則，可以總結到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)", {});n f.load().then(function (loadedFace) {n document.fonts.add(loadedFace);n document.body.style.fontFamily = "newfont, serif";n});n

當然了，思路就如上所述，其實還有優化的空間，例如再精簡我們js大小，css大小，把一個前置的js動畫依賴，mo.min.js變成延遲載入等等。

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