成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

圖片懶加載的一些想法與實(shí)踐

xietao3 / 2583人閱讀

摘要：圖片懶加載簡單的來說就是一些需要加載的圖片，我們先使用占位的方式用于判斷是否存在視圖內(nèi)。簡單的替換圖片進(jìn)行這種獲取轉(zhuǎn)換的方法可以看出來上面這段代碼實(shí)際上是很糟糕的。并且還攜帶一些屬性。圖片增加的處理。

圖片懶加載

簡單的來說:

就是一些需要加載的圖片，我們先使用占位的方式(用于判斷是否存在視圖內(nèi)。)，減少網(wǎng)絡(luò)下載圖片對(duì)首屏渲染的壓力，從而使得首屏更快的load

(以下希望結(jié)合源碼服用)

step 1：

第一步肯定是run一個(gè)簡單的demo能實(shí)現(xiàn)替換占位符。并且進(jìn)行判斷是否在view視圖內(nèi)。

https://github.com/ZWkang/jav...

這個(gè)demo可以看得出，是實(shí)現(xiàn)了之前提到的幾點(diǎn)。

它使用offset類的api進(jìn)行獲取位置，并進(jìn)行遍歷,再計(jì)算從而獲得相對(duì)整個(gè)視圖的位置。簡單的替換圖片進(jìn)行這種獲取轉(zhuǎn)換src的方法

可以看出來上面這段代碼實(shí)際上是很糟糕的。

它沒有任何的封裝

它沒有可以讓我輸入的配置

它的獲取性能太低效。（我們應(yīng)該知道offset之類的api為了獲得大小，總會(huì)觸發(fā)一次Reflow，來進(jìn)行位置的獲取。）

它支持項(xiàng)太少了。只支持了我們特定的data-src

step 2:

前端迭代過程我們可以發(fā)現(xiàn)。很多時(shí)候新的api的出現(xiàn)，是一部分是為了支持新的特性，一部分是為了彌補(bǔ)不夠用

前面說到很低效的offset類api

并不夠用。所以出現(xiàn)了

此處經(jīng)過一段時(shí)間的思考

https://github.com/ZWkang/jav...

進(jìn)行迭代到這一版、

事實(shí)上這一版的代碼寫的也是非常的糟糕的。因?yàn)槲业膃s6在那個(gè)時(shí)候并不是很好。

可以在變量的聲明上看出。很多時(shí)候我是沒轉(zhuǎn)變過來的。但是那不影響

簡單的講一下

首先當(dāng)然是聲明一些將被緩存的變量

然后可以發(fā)現(xiàn)，這一版本引入了Setting可配置。

lazyload是一個(gè)對(duì)象，一些實(shí)例方法掛載在上面。這里沒有用class之類的，也就是使用，下面會(huì)說一下這種寫法。頁面共享一個(gè)實(shí)例。

在這一版我們引入了getBoundingClientRect

使用getBoundingClientRect來判斷。明顯是比較高效的。而且性能損耗并不會(huì)比offset類的高。

可以說這一版解決了第一版我們發(fā)現(xiàn)的幾個(gè)問題。

引入了配置。UMD的模塊寫法。獲取的api判斷是否在視圖內(nèi)優(yōu)雅降級(jí)。支持了更多項(xiàng)，srcset backgroundImage(當(dāng)然對(duì)于srcset的處理其實(shí)并沒有很好的方法。它還是有一些坑的。)

當(dāng)然我們可以看看這樣寫法的用處。

我們可以很簡單的侵入式的使用在vue上。

https://github.com/ZWkang/sim...

可以看看這個(gè)。核心代碼基本是完全一致的。

只是獲取元素需要在渲染后獲取。不然會(huì)導(dǎo)致獲取不了元素。當(dāng)然這個(gè)涉及到了vue的執(zhí)行時(shí)機(jī)。

Vue.use(lazy, {
  background: true,
  backgroundTag: "data-background",
  imgSrc: true,
  imgTag: "data-src",
  parent: null,
  srcset: false,
  srcsetTag: "data-srcset",
  delayTime: 200,
  rendered: function () { },
  deleleData: true,
  firstLoad: true
})

在use 安裝的時(shí)候設(shè)置配置文件，注入在vue組件的實(shí)例實(shí)際上在這個(gè)時(shí)候就已經(jīng)有了對(duì)應(yīng)的配置

  updated: function () {
    this.lazyload.init({})
  },
  destroyed: function () {
    this.lazyload.cache = []
  }

然后只需要簡單的配置就可以使用我們的lazyload組件了。

實(shí)際上這種方法。是完全的將vue當(dāng)成普通的html dom來處理了。

很多vue的高級(jí)東西并沒有用到。但是這樣確實(shí)是很簡單不是么。

而這樣子的做法很便捷，但是也有缺陷。那就是，多個(gè)子組件的時(shí)候。

你的組件init初始需要放在相對(duì)的父級(jí)組件使用，而不是多個(gè)子組件使用。。

更好的方式是應(yīng)該使用一個(gè)component的組件來承載整個(gè)lazyload的流程

step 3:

其實(shí)上面步驟的lazyload組件已經(jīng)是可用了。

那么第三版我們還可以對(duì)它進(jìn)行什么改造。

https://github.com/ZWkang/jav...

在第三版我們引入一個(gè)更新的api

IntersectionObserver

這個(gè)observer也是更為強(qiáng)勁。它可以直接進(jìn)行判斷是否在視圖內(nèi)，有一個(gè)boolean的處理值。并且還攜帶一些屬性。

使用也很簡單。

只需要new初始化時(shí)候傳入對(duì)應(yīng)的回調(diào)函數(shù)。然后observe element節(jié)點(diǎn)即可

第三版我們還可以進(jìn)行更好的優(yōu)化

例如加入loading圖片 error圖片 之類的配置文件

并且將我們的邏輯代碼更抽象，例如一些判斷的if else 可以用iife直接判斷返回一個(gè)函數(shù)

減少一些if else的判斷。而是在第一次解析的時(shí)候就確定了。

這里。我們可以看一下代碼職責(zé)分離 耦合度低的好處

我在第二版寫的srcChange 是獨(dú)立的函數(shù)，傳入對(duì)應(yīng)的節(jié)點(diǎn)處理對(duì)應(yīng)的事情。

而在第三版即使我們添加新的處理api

這個(gè)srcChange也是完全復(fù)用的。是完全。

圖片增加loading error的處理。

就是new Image代理我們獲取圖片。onload成功之后就再替換。預(yù)加載的原理跟這個(gè)差不多，預(yù)加載就是將所有圖片獲取再進(jìn)行Image獲取

唔。大概這個(gè)時(shí)候這個(gè)lazyload插件就到達(dá)可用的程度了(當(dāng)然可不可用我也不知道，因?yàn)槲覜]有在實(shí)際情況下生產(chǎn)情況使用（歡迎使用后的反饋），從簡單測試來看，它是可行的)

我很喜歡寫小demo，因?yàn)樗淮蟆Ｎ铱梢匀我庵貥?gòu)，想怎么搞就怎么搞。

唔。很歡迎很歡迎交流?。。。。。?！

但是不要噴我。我讀書少，你噴不贏我的。

最后是祝福語。

希望閱讀這篇文章能有一點(diǎn)點(diǎn)幫助到你。

也厚臉皮求一下下star。當(dāng)然該倉庫還有一些寶藏~~

Intersection_Observer_API

getBoundingClientRect API

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

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

相關(guān)文章

  • 實(shí)踐中的電商前端優(yōu)化

    摘要：前端優(yōu)化已經(jīng)是一個(gè)被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個(gè)重點(diǎn)，特別是針對(duì)的優(yōu)化。如果你對(duì)前端性能優(yōu)化有自己的想法，歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個(gè)被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實(shí)踐經(jīng)驗(yàn)。 歡迎一起交流 歡迎關(guān)注我的個(gè)人公眾號(hào)，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

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

  • 實(shí)踐中的電商前端優(yōu)化

    摘要：前端優(yōu)化已經(jīng)是一個(gè)被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個(gè)重點(diǎn)，特別是針對(duì)的優(yōu)化。如果你對(duì)前端性能優(yōu)化有自己的想法，歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個(gè)被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實(shí)踐經(jīng)驗(yàn)。 歡迎一起交流 歡迎關(guān)注我的個(gè)人公眾號(hào)，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

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

  • 實(shí)踐中的電商前端優(yōu)化

    摘要：前端優(yōu)化已經(jīng)是一個(gè)被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優(yōu)化的一個(gè)重點(diǎn)，特別是針對(duì)的優(yōu)化。如果你對(duì)前端性能優(yōu)化有自己的想法，歡迎騷擾我。 前端優(yōu)化已經(jīng)是一個(gè)被寫爛的題材了。 雖千萬人吾往矣，這里我僅分享我的一些實(shí)踐經(jīng)驗(yàn)。 歡迎一起交流 歡迎關(guān)注我的個(gè)人公眾號(hào)，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

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

  • 前端性能優(yōu)化

    摘要：端優(yōu)談?wù)勱P(guān)于前端的緩存的問題我們都知道對(duì)頁面進(jìn)行緩存能夠有利于減少請(qǐng)求發(fā)送，從而達(dá)到對(duì)頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。 優(yōu)化向：單頁應(yīng)用多路由預(yù)渲染指南 Ajax 技術(shù)的出現(xiàn)，讓我們的 Web 應(yīng)用能夠在不刷新的狀態(tài)下顯示不同頁面的內(nèi)容，這就是單頁應(yīng)用。在一個(gè)單頁應(yīng)用中，往往只有一...

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

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

0條評(píng)論

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