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

資訊專欄INFORMATION COLUMN

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

U2FsdGVkX1x / 3462人閱讀

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

雅虎規(guī)則

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

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

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

靜態(tài)資源

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

頁(yè)面加載

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

所以說(shuō)，我們?cè)谧鲰?yè)面優(yōu)化的時(shí)候，基本都是從這些方面來(lái)考慮的，那么我今天要說(shuō)的是，另外的角度考慮優(yōu)化或者說(shuō)從體驗(yàn)上來(lái)做的優(yōu)化。

回憶過去

優(yōu)化后

優(yōu)化前

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

優(yōu)化前截圖

優(yōu)化后截圖

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

尋找目的地

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

怎么搞？

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

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

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

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

2.在移動(dòng)端使用scroll方法來(lái)判斷是否滾屏，會(huì)有誤差，因?yàn)闉g覽器觸發(fā)這個(gè)事件是在滾動(dòng)停止后才觸發(fā)的，也就是滾動(dòng)不停止就會(huì)一直不觸發(fā)，造成了加載的誤差。

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

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

第二道--通天河

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

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

代碼順序

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

其實(shí)也就是說(shuō)，瀏覽器先分析了頁(yè)面的情況，才決定是否需要加載相關(guān)字體（過于智能有時(shí)候好麻煩?。。。杂幸粋€(gè)辦法來(lái)優(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)然了，思路就如上所述，其實(shí)還有優(yōu)化的空間，例如再精簡(jiǎn)我們js大小，css大小，把一個(gè)前置的js動(dòng)畫依賴，mo.min.js變成延遲加載等等。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115326.html

相關(guān)文章

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

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

    waltr 評(píng)論0 收藏0

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

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

    Galence 評(píng)論0 收藏0

  • 攜程小程序初體驗(yàn)

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

    Charlie_Jade 評(píng)論0 收藏0

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

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

    cooxer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<