資訊專欄INFORMATION COLUMN
摘要：雅虎規則熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。頁面加載前置，后置，首屏無關的不加載，圖片懶加載，精簡之類的，都是在網頁加載層面上的優化，可以算作請求都結束了之后做的東西。同時達到了最初的目的。
雅虎規則
熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。優化規則&&原文，仔細閱讀這些規則，可以總結到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變成延遲加載等等。
文章的主旨并非講解通用的優化方法，而是我當時優化的思路，通過當時思考的思路，來啟示大家在做優化的時候，不要盲目的就只會按照別人的方法來，要多思考，多查閱相關文檔。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50219.html
摘要：雅虎規則熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。頁面加載前置，后置，首屏無關的不加載，圖片懶加載，精簡之類的，都是在網頁加載層面上的優化，可以算作請求都結束了之后做的東西。同時達到了最初的目的。 雅虎規則 熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。優化規則&&原文，仔細閱讀這些規則，可以總結到3個方面： Http層面上的優化...
摘要：雅虎規則熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。頁面加載前置，后置，首屏無關的不加載，圖片懶加載，精簡之類的，都是在網頁加載層面上的優化，可以算作請求都結束了之后做的東西。同時達到了最初的目的。 雅虎規則 熟悉網站優化的開發者應該都知道，只要提到網頁性能優化，就繞不開雅虎軍規。優化規則&&原文，仔細閱讀這些規則，可以總結到3個方面： Http層面上的優化...
摘要：前言為了更好的開發，我們需要準備我們需要的工具這里主要用來具體代碼的編寫微信開發者工具通過這個看效果圖通過這個網站可以偽造一些數據來供我們使用，非常方便。 showImg(https://segmentfault.com/img/remote/1460000015238794); 一場說走就走的旅行開始啦 隨著小程序的大熱，作為一個程序猿，我也開始接觸并且大概了解了一個制作小程序的一...
摘要：今天看定位的課程，了解到一個元素要設置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素。第三步，在第二步的基礎上給添加屬性聲明小結唉，這次卻被擒獲了唉，怎么回事沒錯，做絕對定位的祖先參照物，是設置了相對定位且離最近的那個祖先類元素。 今天看CSS定位的課程，了解到一個元素要設置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素html。這個默認根元素已經明確，但是祖先類元...
閱讀 2411·2021-11-16 11:44
閱讀 848·2021-09-10 11:16
閱讀 2224·2019-08-30 15:54
閱讀 1042·2019-08-30 15:53
閱讀 1894·2019-08-30 13:00
閱讀 615·2019-08-29 17:07
閱讀 3509·2019-08-29 16:39
閱讀 3135·2019-08-29 13:30
