摘要:圖片懶加載簡單的來說就是一些需要加載的圖片,我們先使用占位的方式用于判斷是否存在視圖內。簡單的替換圖片進行這種獲取轉換的方法可以看出來上面這段代碼實際上是很糟糕的。并且還攜帶一些屬性。圖片增加的處理。
圖片懶加載
簡單的來說:
就是一些需要加載的圖片,我們先使用占位的方式(用于判斷是否存在視圖內。),減少網絡下載圖片對首屏渲染的壓力,從而使得首屏更快的load
(以下希望結合源碼服用)
step 1:第一步肯定是run一個簡單的demo能實現替換占位符。并且進行判斷是否在view視圖內。
https://github.com/ZWkang/jav...
這個demo可以看得出,是實現了之前提到的幾點。
它使用offset類的api進行獲取位置,并進行遍歷,再計算從而獲得相對整個視圖的位置。簡單的替換圖片進行這種獲取轉換src的方法
可以看出來上面這段代碼實際上是很糟糕的。它沒有任何的封裝
它沒有可以讓我輸入的配置
它的獲取性能太低效。(我們應該知道offset之類的api為了獲得大小,總會觸發一次Reflow,來進行位置的獲取。)
它支持項太少了。只支持了我們特定的data-src
step 2:前端迭代過程我們可以發現。很多時候新的api的出現,是一部分是為了支持新的特性,一部分是為了彌補不夠用
前面說到很低效的offset類api
并不夠用。所以出現了
此處經過一段時間的思考
https://github.com/ZWkang/jav...
進行迭代到這一版、
事實上這一版的代碼寫的也是非常的糟糕的。因為我的es6在那個時候并不是很好。
可以在變量的聲明上看出。很多時候我是沒轉變過來的。但是那不影響
簡單的講一下
首先當然是聲明一些將被緩存的變量
然后可以發現,這一版本引入了Setting可配置。
lazyload是一個對象,一些實例方法掛載在上面。這里沒有用class之類的,也就是使用,下面會說一下這種寫法。頁面共享一個實例。
在這一版我們引入了getBoundingClientRect
使用getBoundingClientRect來判斷。明顯是比較高效的。而且性能損耗并不會比offset類的高。
可以說這一版解決了第一版我們發現的幾個問題。
引入了配置。UMD的模塊寫法。獲取的api判斷是否在視圖內優雅降級。支持了更多項,srcset backgroundImage(當然對于srcset的處理其實并沒有很好的方法。它還是有一些坑的。)
當然我們可以看看這樣寫法的用處。
我們可以很簡單的侵入式的使用在vue上。
https://github.com/ZWkang/sim...
可以看看這個。核心代碼基本是完全一致的。
只是獲取元素需要在渲染后獲取。不然會導致獲取不了元素。當然這個涉及到了vue的執行時機。
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 安裝的時候設置配置文件,注入在vue組件的實例實際上在這個時候就已經有了對應的配置
updated: function () { this.lazyload.init({}) }, destroyed: function () { this.lazyload.cache = [] }
然后只需要簡單的配置就可以使用我們的lazyload組件了。
實際上這種方法。是完全的將vue當成普通的html dom來處理了。
很多vue的高級東西并沒有用到。但是這樣確實是很簡單不是么。
而這樣子的做法很便捷,但是也有缺陷。那就是,多個子組件的時候。
你的組件init初始需要放在相對的父級組件使用,而不是多個子組件使用。。
更好的方式是應該使用一個component的組件來承載整個lazyload的流程
step 3:其實上面步驟的lazyload組件已經是可用了。
那么第三版我們還可以對它進行什么改造。
https://github.com/ZWkang/jav...
在第三版我們引入一個更新的api
IntersectionObserver
這個observer也是更為強勁。它可以直接進行判斷是否在視圖內,有一個boolean的處理值。并且還攜帶一些屬性。
使用也很簡單。
只需要new初始化時候傳入對應的回調函數。然后observe element節點即可
第三版我們還可以進行更好的優化
例如加入loading圖片 error圖片 之類的配置文件
并且將我們的邏輯代碼更抽象,例如一些判斷的if else 可以用iife直接判斷返回一個函數
減少一些if else的判斷。而是在第一次解析的時候就確定了。
這里。我們可以看一下代碼職責分離 耦合度低的好處
我在第二版寫的srcChange 是獨立的函數,傳入對應的節點處理對應的事情。
而在第三版即使我們添加新的處理api
這個srcChange也是完全復用的。是完全。
圖片增加loading error的處理。
就是new Image代理我們獲取圖片。onload成功之后就再替換。預加載的原理跟這個差不多,預加載就是將所有圖片獲取再進行Image獲取
唔。大概這個時候這個lazyload插件就到達可用的程度了(當然可不可用我也不知道,因為我沒有在實際情況下生產情況使用(歡迎使用后的反饋),從簡單測試來看,它是可行的)
我很喜歡寫小demo,因為它不大。我可以任意重構,想怎么搞就怎么搞。
唔。很歡迎很歡迎交流啊!!!!!!
但是不要噴我。我讀書少,你噴不贏我的。最后是祝福語。
希望閱讀這篇文章能有一點點幫助到你。
也厚臉皮求一下下star。當然該倉庫還有一些寶藏~~
Intersection_Observer_API
getBoundingClientRect API
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88763.html
摘要:前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點,特別是針對的優化。如果你對前端性能優化有自己的想法,歡迎騷擾我。 前端優化已經是一個被寫爛的題材了。 雖千萬人吾往矣,這里我僅分享我的一些實踐經驗。 歡迎一起交流 歡迎關注我的個人公眾號,不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
摘要:前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點,特別是針對的優化。如果你對前端性能優化有自己的想法,歡迎騷擾我。 前端優化已經是一個被寫爛的題材了。 雖千萬人吾往矣,這里我僅分享我的一些實踐經驗。 歡迎一起交流 歡迎關注我的個人公眾號,不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
摘要:前端優化已經是一個被寫爛的題材了。前端模板方案有很多。重繪是瀏覽器性能優化的一個重點,特別是針對的優化。如果你對前端性能優化有自己的想法,歡迎騷擾我。 前端優化已經是一個被寫爛的題材了。 雖千萬人吾往矣,這里我僅分享我的一些實踐經驗。 歡迎一起交流 歡迎關注我的個人公眾號,不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...
閱讀 1617·2021-11-22 14:45
閱讀 1063·2021-11-17 09:33
閱讀 3322·2021-09-02 09:48
閱讀 969·2019-08-30 15:54
閱讀 2766·2019-08-30 15:53
閱讀 2552·2019-08-30 12:54
閱讀 2241·2019-08-29 12:37
閱讀 2420·2019-08-26 13:58