国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

說走就走的性能優(yōu)化之旅

Galence / 1238人閱讀

摘要：雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁性能優(yōu)化，就繞不開雅虎軍規(guī)。頁面加載前置，后置，首屏無關(guān)的不加載，圖片懶加載，精簡之類的，都是在網(wǎng)頁加載層面上的優(yōu)化，可以算作請求都結(jié)束了之后做的東西。同時達到了最初的目的。

雅虎規(guī)則

熟悉網(wǎng)站優(yōu)化的開發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁性能優(yōu)化，就繞不開雅虎軍規(guī)。優(yōu)化規(guī)則&&原文，仔細閱讀這些規(guī)則，可以總結(jié)到3個方面：

Http層面上的優(yōu)化

減少http請求數(shù)，http請求cookie減小，減少DNS查詢，避免跳轉(zhuǎn)，ajax利用緩存之類，都是在http層面上的考慮。

靜態(tài)資源

壓縮js和css代碼，使用gzip，利用CDN（也可以算http層面上），避免CSS表達式，優(yōu)化和裁剪圖片之類的，都可以算作為靜態(tài)資源上的優(yōu)化，其實和Http很多有交集的。

頁面加載

前置css，后置js，首屏無關(guān)的不加載，圖片懶加載，精簡DOM之類的，都是在網(wǎng)頁加載層面上的優(yōu)化，可以算作請求都結(jié)束了之后做的東西。

所以說，我們在做頁面優(yōu)化的時候，基本都是從這些方面來考慮的，那么我今天要說的是，另外的角度考慮優(yōu)化或者說從體驗上來做的優(yōu)化。

回憶過去

優(yōu)化后

優(yōu)化前

如果網(wǎng)速不錯，在電腦上，基本感覺不出2個有什么區(qū)別，加上瀏覽器的緩存的話，后面的區(qū)別就更小了。

優(yōu)化前截圖

優(yōu)化后截圖

為什么沒有區(qū)別，因為資源都是一樣的，而且都放在阿里的CDN上面，去除掉網(wǎng)絡(luò)波動，總體上來說就是應(yīng)該沒有什么區(qū)別，那么為什么還是要優(yōu)化，如果你使用一點弱網(wǎng)絡(luò)（不要太弱，太弱又差不多了）就慢慢能看出來，優(yōu)化后明顯頁面出來的速度比優(yōu)化前要快，嘿嘿!!!

尋找目的地

先分析我們目的是什么，是加快頁面顯示的速度，并非加快頁面整個加載速度，因為基本上這個頁面能從Http和靜態(tài)上優(yōu)化的點快做完了，靜態(tài)都在CDN上面，就一個html，沒了。所以我們只能用頁面顯示速度上做文章了。

怎么搞？

注意截圖中紅色畫框的部分和紅色箭頭，這部分明顯的是有區(qū)別的，這個紅線的時間，表示的是什么，就是你瀏覽器轉(zhuǎn)圈圈的時間，放在微信下就是那個綠條的時間，表示你頁面首屏加載完成了，要優(yōu)化的也是這個。

第一道風(fēng)景--火焰山

最先想到的是圖片問題，懶加載模式，這樣子，所有的圖片就會像優(yōu)化后的頁面一樣，在紅線的后面。但是這種懶加載有幾個問題：

我們頁面是放在App里面的，會記錄文章瀏覽位置，再次進來的時候，Native會設(shè)置position來到達自動回到閱讀位置的效果，這個效果會導(dǎo)致我們判斷圖片是否在當(dāng)前屏幕有誤差，就會顯示背景色，體驗很不好。

2.在移動端使用scroll方法來判斷是否滾屏，會有誤差，因為瀏覽器觸發(fā)這個事件是在滾動停止后才觸發(fā)的，也就是滾動不停止就會一直不觸發(fā)，造成了加載的誤差。

對于2可以換監(jiān)聽方式來解決，例如監(jiān)聽touchmove。

但是第一個就比較尷尬了，除非用回調(diào)之類的形式，所以我換了一個思路，我們的使用懶加載的原因是為了把圖片延后，讓其他的靜態(tài)提前加載。并非像淘寶一樣，因為圖片眾多，要分屏幕一屏一屏的分批加載，基于上面的考慮，我修改完全的懶加載模式變成延遲加載模式，意思是在js最前面執(zhí)行文章內(nèi)容的所有圖片立即加載，也就解決了上述的1，2問題。同時達到了最初的目的。

第二道--通天河

剛翻過了幾座山
又越過了幾條河
崎嶇坎坷怎么他就這么多

情不自禁的哼了起來，解決了圖片的問題之后，發(fā)現(xiàn)一個原來一直沒有注意的問題，靜態(tài)加載資源也是有優(yōu)先級的，看頁面代碼，我們其實把font-face放置的很前，在css，img，js之前，但是仔細看
font加載的順序一直在css和js之后，由于使用了font-face，就導(dǎo)致了，字體沒有加載出來之前，頁面文字不顯示或者閃爍一下，這就是我前面說到的弱網(wǎng)絡(luò)的環(huán)境下，優(yōu)化后的頁面顯示（不是加載）的快。

代碼順序

如何解決呢？ 方案類似于圖片，延遲加載，怎么個延遲 --- 我使用的方案是在html最后，嵌入一段script，里面代碼用setTimeout，0ms，添加我們的業(yè)務(wù)js代碼，這樣子就變成優(yōu)化后截圖的效果了，很明顯的最后一個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事件

其實也就是說，瀏覽器先分析了頁面的情況，才決定是否需要加載相關(guān)字體（過于智能有時候好麻煩！！！），所以有一個辦法來優(yōu)先加載字體資源就是用瀏覽器給的API：

 var f = new FontFace("newfont", "url(newfont.woff)", {});
  f.load().then(function (loadedFace) {
  document.fonts.add(loadedFace);
  document.body.style.fontFamily = "newfont, serif";
});

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/50219.html

相關(guān)文章

  • 說走就走的性能優(yōu)化之旅

    摘要：雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁性能優(yōu)化，就繞不開雅虎軍規(guī)。頁面加載前置，后置，首屏無關(guān)的不加載，圖片懶加載，精簡之類的，都是在網(wǎng)頁加載層面上的優(yōu)化，可以算作請求都結(jié)束了之后做的東西。同時達到了最初的目的。 雅虎規(guī)則 熟悉網(wǎng)站優(yōu)化的開發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁性能優(yōu)化，就繞不開雅虎軍規(guī)。優(yōu)化規(guī)則&&原文，仔細閱讀這些規(guī)則，可以總結(jié)到3個方面： Http層面上的優(yōu)化...

    U2FsdGVkX1x 評論0 收藏0

  • 說走就走的性能優(yōu)化之旅

    摘要：雅虎規(guī)則熟悉網(wǎng)站優(yōu)化的開發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁性能優(yōu)化，就繞不開雅虎軍規(guī)。頁面加載前置，后置，首屏無關(guān)的不加載，圖片懶加載，精簡之類的，都是在網(wǎng)頁加載層面上的優(yōu)化，可以算作請求都結(jié)束了之后做的東西。同時達到了最初的目的。 雅虎規(guī)則 熟悉網(wǎng)站優(yōu)化的開發(fā)者應(yīng)該都知道，只要提到網(wǎng)頁性能優(yōu)化，就繞不開雅虎軍規(guī)。優(yōu)化規(guī)則&&原文，仔細閱讀這些規(guī)則，可以總結(jié)到3個方面： Http層面上的優(yōu)化...

    waltr 評論0 收藏0

  • 攜程小程序初體驗

    摘要：前言為了更好的開發(fā)，我們需要準(zhǔn)備我們需要的工具這里主要用來具體代碼的編寫微信開發(fā)者工具通過這個看效果圖通過這個網(wǎng)站可以偽造一些數(shù)據(jù)來供我們使用，非常方便。 showImg(https://segmentfault.com/img/remote/1460000015238794); 一場說走就走的旅行開始啦 隨著小程序的大熱，作為一個程序猿，我也開始接觸并且大概了解了一個制作小程序的一...

    Charlie_Jade 評論0 收藏0

  • 【CSS學(xué)習(xí)筆記】絕對定位的父類參照物的確定

    摘要：今天看定位的課程，了解到一個元素要設(shè)置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素。第三步，在第二步的基礎(chǔ)上給添加屬性聲明小結(jié)唉，這次卻被擒獲了唉，怎么回事沒錯，做絕對定位的祖先參照物，是設(shè)置了相對定位且離最近的那個祖先類元素。 今天看CSS定位的課程，了解到一個元素要設(shè)置絕對定位，需要確定一個父類或者祖先類參照物，默認是根元素html。這個默認根元素已經(jīng)明確，但是祖先類元...

    cooxer 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<