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

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

ygyooo / 1286人閱讀

摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個(gè)應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個(gè)最佳的平衡點(diǎn)對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項(xiàng)目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實(shí)際上

前言 
優(yōu)化！ 又是優(yōu)化！

切圖崽們作為整個(gè)web應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個(gè)最佳的平衡點(diǎn).

對于圖片資源的加載來說，更是如此. 今天我們就來簡單說說，項(xiàng)目開發(fā)中常見的圖片加載優(yōu)化方式.

預(yù)加載 1.遮罩大法

我們經(jīng)常用jquery, jquery中$(function){})實(shí)際上是DOMContentLoaded事件完成的回調(diào)，只是完成了DOM樹的構(gòu)建. 諸如Css的渲染以及頁面內(nèi)圖片等資源的下載不一定完成了.所以如果此時(shí)呈現(xiàn)頁面，頁面會非常難看.

為了解決這個(gè)問題，為了從設(shè)計(jì)和行為的角度提高用戶體驗(yàn)，我們可以在圖片等重要資源完全下載完之前，對頁面加上較為美觀的遮罩，并且彈出loading提示告知用戶資源正在loading.等到圖片完全加載完，才移除遮罩和加載動(dòng)畫.

具體的實(shí)現(xiàn)思路如下:

$(function(){})調(diào)用之后，先彈出蒙板加上loading動(dòng)畫用來提示用戶正在loading中

對頁面中需要預(yù)加載的IMG元素進(jìn)行下載var img = new Image(); img.src="xx.jpg"

圖片下載完成會有一個(gè)onload的回調(diào)img.onload = function(){...}

在這個(gè)回調(diào)中移除loading動(dòng)畫以及遮罩

這樣就可以給用戶帶來順滑如絲般的操作體驗(yàn)了，再也不用擔(dān)心用戶看到那些正在下載的未顯示完全的丑的要死圖片了.

我們的口號是: 要么就不給你看，要么就給你看最好的
應(yīng)用場景: 請?jiān)?首屏中存在圖片的動(dòng)畫，或者和你對接的UI設(shè)計(jì)師極其強(qiáng)勢"的情況下使用

2.有碼大法

有碼大法和遮罩大法略微有區(qū)別,具體實(shí)現(xiàn)思路如下:

首先對你需要預(yù)加載的圖片準(zhǔn)備兩張,一張是高清一張低清. 比如girl_hd大小為60kb. 另一張是girl, 大小是6kb.

html頁面中需要預(yù)加載的image標(biāo)簽的src地址寫的是低清的地址

因?yàn)榈颓鍒D很小，很快就能被加載出來.

$(function(){})調(diào)用之后，獲取頁面需要高清替換的img的src(girl.jpg),以此src為基準(zhǔn)拼接字符串(+"_hd.jpg")獲得高清圖的地址(girl_hd.jpg)，然后用下載該高清圖var img = new Image(); img.src=“girl_hd.jpg”

圖片下載完成會有一個(gè)onload的回調(diào)img.onload = function(){...}

回調(diào)中替換掉頁面中img的src, 所以現(xiàn)在頁面上的image標(biāo)簽為

我們的口號是: 想看無碼高清，請先看有碼低清
應(yīng)用場景: 請?jiān)?首屏中出現(xiàn)大量圖片，且尺寸都不小"的情況下使用

懶加載

如果你仔細(xì)看了上面預(yù)加載的思路，一定往我腦袋上拍磚: 遮罩大法也好，有碼大法也好，這并沒有提高項(xiàng)目的加載速度啊，最后該下載的圖片還不是得下載. 沒錯(cuò)，懶加載只是改變了用戶的操作感受，實(shí)際上項(xiàng)目的加載速度并沒有提高. 但是，現(xiàn)在要說的懶加載，可是實(shí)實(shí)在在的提高了項(xiàng)目的加載速度哦.

什么是懶加載，一句話來解釋， 就是圖片按需加載.

大家一定刷過微博，微博的照片墻就是懶加載的最佳示例.一開始顯示的照片并不多，只有用戶下拉，拉到底部的位置， 照片墻才會被拉長，新的圖片才會被加載.

操作思路:

監(jiān)聽滾動(dòng)條scroll事件(當(dāng)然touchmove事件也可以)

每次事件觸發(fā)的時(shí)候，判斷當(dāng)前照片墻的位置

如果照片墻已經(jīng)被刷到了底部某個(gè)臨界位置點(diǎn)

Js下載新出現(xiàn)的圖片，var img = new Image(); img.src="xx.jpg"

下載完成有一個(gè)onload的回調(diào)img.onload = function(){...}

在下載完成的回調(diào)中向頁面中插入已經(jīng)下載好的圖片

當(dāng)然，根據(jù)項(xiàng)目不同，會有各種各樣的懶加載方式.但核心是不變的:即頁面初始加載的時(shí)候，只加載滿足用戶需求的最小數(shù)量的資源. 拿照片墻舉例，可能用戶的微博里有500張照片，如果你在頁面加載的時(shí)候就加載500張，用戶會卡到爆炸(因?yàn)楹笈_一直處于圖片下載狀態(tài)). 如果頁面加載的時(shí)候只初始加載20張圖片，其他的圖片通過用戶自己的操作(滾動(dòng)下拉)，來按需加載，會極大提升項(xiàng)目運(yùn)行的流暢程度.

結(jié)語

雖然預(yù)加載還是懶加載實(shí)現(xiàn)原理都非常簡單，給我的啟示確是巨大的:

預(yù)加載除了改善用戶的操作感受，其深層次的核心其實(shí)在于:對資源進(jìn)行碎片化加載, 即預(yù)加載其實(shí)可以出現(xiàn)在任何時(shí)間段，當(dāng)用戶鼠標(biāo)很長時(shí)間沒移動(dòng)的時(shí)候，我可不可以偷偷下載兩張圖片？在用戶目前沒有進(jìn)行大量運(yùn)算操作的時(shí)候，我可不可以偷偷下載兩張圖片？當(dāng)用戶當(dāng)前在一個(gè)很精簡的登陸界面的時(shí)候，我可不可以偷偷下載他登陸成功跳轉(zhuǎn)到的頁面的幾張圖片？等等等等

懶加載的深層次核心在于:按需, 按需這個(gè)詞已經(jīng)被深深刻在我腦子里了. 現(xiàn)在回想起來，很多很多優(yōu)化方式都是圍繞著按需來展開的. 按需加載Js,按需加載圖片等等
首先，我們必須保證項(xiàng)目第一時(shí)間的加載速度，能讓用戶在最短的時(shí)間內(nèi)看到頁面和內(nèi)容.

其次，盡量保證當(dāng)前頁面的精簡程度，不去做無意義的加載. 只有當(dāng)用戶真正需要時(shí)，我們才展現(xiàn)給他.

各自的優(yōu)缺點(diǎn)在于:

預(yù)加載：

優(yōu)點(diǎn):如果提前下好了圖片，等到這張圖片需要用到時(shí)，可以秒開.

缺點(diǎn):下載圖片的時(shí)候會影響項(xiàng)目的加載完成時(shí)間，會影響項(xiàng)目運(yùn)行的流暢程度

懶加載在于:

優(yōu)點(diǎn): 保證用戶加載的項(xiàng)目是最精簡的，最快的， 所下載資源是最少的

缺點(diǎn): 如果用戶的操作觸發(fā)了懶加載，那么需要等待資源下載到完成的時(shí)間,同時(shí)資源下載期間,操作流暢度降低

說到底，項(xiàng)目的優(yōu)化是沒有銀彈的，這一部分的高效很可能導(dǎo)致另一部分的低效.A項(xiàng)目的優(yōu)化方法照搬來B項(xiàng)目可能一文不值.
所以我們切圖崽們能做的，就是深刻理解這些技術(shù)的原理，并且在項(xiàng)目中吸收經(jīng)驗(yàn)，只有深刻地理解了各項(xiàng)技術(shù)的優(yōu)劣，只有深刻的理解了用戶的需求以及行為習(xí)慣，才能針對特定的項(xiàng)目，特定的場景，進(jìn)行最適合的處理.

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

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

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

    摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個(gè)應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個(gè)最佳的平衡點(diǎn)對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項(xiàng)目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實(shí)際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個(gè)web應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個(gè)最佳的平衡點(diǎn). ...

    AaronYuan 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－優(yōu)化圖片加載流程

    摘要：前言優(yōu)化又是優(yōu)化切圖崽們作為整個(gè)應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能而優(yōu)化的最終意義，在于在這兩者之間取得一個(gè)最佳的平衡點(diǎn)對于圖片資源的加載來說，更是如此今天我們就來簡單說說，項(xiàng)目開發(fā)中常見的圖片加載優(yōu)化方式預(yù)加載遮罩大法我們經(jīng)常用中實(shí)際上 前言 優(yōu)化！ 又是優(yōu)化！ 切圖崽們作為整個(gè)web應(yīng)用的紐帶，連接著用戶行為和機(jī)器性能. 而優(yōu)化的最終意義，在于在這兩者之間取得一個(gè)最佳的平衡點(diǎn). ...

    xiaochao 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－提高項(xiàng)目加載速度

    摘要：前言我的項(xiàng)目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好前端作為一個(gè)最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗(yàn)放在第一位而用戶體驗(yàn)，基本正比于頁面的打開速度，特別是做移動(dòng)端的同學(xué)，所以如何優(yōu)化自己的項(xiàng)目，提高頁面的加載速度成為重中之重資源的下載及解析對前 前言 我的項(xiàng)目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好 前端作為一個(gè)最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗(yàn)放在第一位. 而用戶體驗(yàn)，基本正比于頁面的打開...

    yanwei 評論0 收藏0

  • 切圖崽的自我修養(yǎng)－[BUILD] webpack體驗(yàn)記錄

    摘要：體驗(yàn)記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點(diǎn)之前構(gòu)建工具的選擇上，公司也是很早之前就從收攏為的確是個(gè)好工具，作為工具核心的依賴表是非常好的構(gòu)建思路，也是很多大公司一直在用的構(gòu)建工具但是個(gè)人用的非常不習(xí)慣生態(tài)不是很好它太大太重 Webpack體驗(yàn)記錄 webpack大法好 退fis保平安 打包工具前端工程化一直是前端的一塊重點(diǎn).之前構(gòu)建工具的選擇上，公司也是很早之前就從g...

    ZHAO_ 評論0 收藏0

發(fā)表評論

0條評論

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