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

資訊專欄INFORMATION COLUMN

React 動(dòng)態(tài)渲染圖片，提升用戶體驗(yàn)

FullStackDeveloper / 3037人閱讀

摘要：給服務(wù)器發(fā)送一個(gè)獲取圖片文件的請求，但是先不在中渲染，直到整個(gè)文件都下載完成以后再渲染出來占位符是提前讓用戶產(chǎn)生預(yù)期，預(yù)期圖片正在加載。

作者：Andrew Wong

編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d14215a6d8a07e449fdd2b

英文原文：Improve Your UX by Dynamically Rendering Images via React

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

市場上競爭是非常殘酷的，眾所周知，僅僅有一個(gè)好的 idea 不足以使你的公司成為獨(dú)角獸，執(zhí)行力也同樣重要。但是最終都會內(nèi)化到產(chǎn)品中，進(jìn)而歸結(jié)為一個(gè)因素——用戶體驗(yàn)。

用戶體驗(yàn)并不是你的產(chǎn)品看起來多好看，還有它的性能如何？使用起來是否方便？——也就是讓你的用戶使用起來感到滿意。

我們都有過這樣的經(jīng)歷，打開一個(gè) app 或者網(wǎng)頁的時(shí)候看到如下的圖片，從上到下一點(diǎn)點(diǎn)顯示：

對于高分辨率的圖片和視網(wǎng)膜屏幕，像這種圖片從上到下慢慢展現(xiàn)的情況非常常見，通常我們只能靜靜地等著它渲染完畢。

這個(gè)問題是可以解決的

通常有兩個(gè)很容易想到的解決方案：CDN 和本地緩存（你的瀏覽器會自動(dòng)做本地緩存）都可以使圖片加載更快。但是從技術(shù)上，我們還可以用很 trick 的方法，通過使用戶感知產(chǎn)生錯(cuò)覺而提升用戶體驗(yàn)。

下面就介紹兩步 trick 的方法提升富媒體應(yīng)用的用戶體驗(yàn)。

第一步 - 使用占位符

（用占位符表明媒體正在加載）

占位符是一個(gè)目前很流行的方法，以前通常是用一個(gè)加載轉(zhuǎn)輪來表示正在加載，使用占位符是和用戶交流的一種方式，告訴用戶正在加載的內(nèi)容是——圖片。

Facebook 和 LinkedIn 是使用技術(shù)來提升用戶體驗(yàn)很好的兩個(gè)例子。

第二步 - 在 DOM 中動(dòng)態(tài)加載圖片

接下來優(yōu)化方法是先把圖片完全下載下來，再顯示在屏幕上。這樣就會避免邊下載邊顯示而產(chǎn)生的從上到下一點(diǎn)點(diǎn)渲染的情況。我們使用 React 的 onLoad 事件來實(shí)現(xiàn)這一功能。給服務(wù)器發(fā)送一個(gè)獲取圖片文件的請求，但是先不在 DOM 中渲染，直到整個(gè)文件都下載完成以后再渲染出來

占位符是提前讓用戶產(chǎn)生預(yù)期，預(yù)期圖片正在加載。而動(dòng)態(tài)加載是在圖片下載完成以后才顯示，有效地避免了圖片從上到下一點(diǎn)點(diǎn)渲染的情況，進(jìn)一步提升了用戶體驗(yàn)。

觀看在線 Demo

我要代碼！ 占位符方法

對于占位符組件（本例子中使用 LoadingItem），我們可以隨心地展示想要展示的圖片，代碼如下：

    export default function () {
      return (
        
          
        
      )
    }

在我們的 Feed 組件的渲染中，只要還有 FeedItems 沒有加載完成，就可以使用 LoadingItem：

    export default class Feed extends Component {
      ...
      render() {
        return (
          

            ...
            {this.props.items.length > this.state.loadedItems.length &&
              
            }
            ...
          

        )
      }
    }
通過 onLoad 動(dòng)態(tài)渲染圖片

我們的 Feed 組件代碼如下：

    export default class Feed extends Component {
      constructor(props) {
        super(props)
        this.state = { loadedItems: [] }
      }
      onLoad(feedItem) {
        this.setState(({ loadedItems }) => {
          return { loadedItems: loadedItems.concat(feedItem) }
        })
      }
      render() {
        return (
          

            
{this.props.name}

            {this.state.loadedItems.map((item, i) =>
              
            )}
            {this.props.items.length > this.state.loadedItems.length &&
              
            }
            

              {this.props.items.map((item, i) =>
                
              )}
            

          

        )
      }
    }

這段代碼中發(fā)生了什么？底部有一個(gè)隱藏的

用來下載圖片文件。當(dāng)文件下載完畢，onLoad 事件被觸發(fā)，更新狀態(tài)。那么新的加載項(xiàng)，也就是剛剛下載好的圖片，將會被渲染到 DOM 中。

本文結(jié)束

是不是很簡單，簡單的說明希望能夠幫助正在受這一問題困擾的朋友。下面給出例子和代碼。

觀看在線 Demo

查看完整源代碼

希望本文能對你的知識提升有所幫助，歡迎大家與我交流，關(guān)注我的【知乎專欄 - 前端大哈】 。

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點(diǎn)。

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

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

相關(guān)文章

  • The Cost Of JavaScript 2018 精讀

    摘要：目前我們的業(yè)務(wù)項(xiàng)目采用的來進(jìn)行優(yōu)化和首屏性能提升?？勺冃孕枰岄_發(fā)人員降低開發(fā)時(shí)的基準(zhǔn)線，來保證每一個(gè)用戶的體驗(yàn)。對于路由的切分以及庫的引入來說，這一個(gè)原則至關(guān)重要?？焖偕梢环菡军c(diǎn)的性能審查報(bào)告。 The Cost Of JavaScript 2018 關(guān)于原文 原文是在Medium上面看到的，Chrome工程師Addy Osmani發(fā)布的一篇文章，這位的Medium上面的自我介紹里...

    lushan 評論0 收藏0

  • 前端每周清單第 34 期：Vue 現(xiàn)狀盤點(diǎn)與 3.0 展望，React 代碼遷移與優(yōu)化，圖片優(yōu)化詳論

    摘要：工程實(shí)踐立足實(shí)踐，提示實(shí)際水平內(nèi)聯(lián)函數(shù)與性能很多關(guān)于性能優(yōu)化的文章都會談及內(nèi)聯(lián)函數(shù)，其也是常見的被詬病為拖慢性能表現(xiàn)的元兇之一不過本文卻是打破砂鍋問到底，論證了內(nèi)聯(lián)函數(shù)并不一定就會拖慢性能，過度的性能優(yōu)化反而會有損于應(yīng)用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

    CoderStudy 評論0 收藏0

  • 在React項(xiàng)目中，如何優(yōu)雅的優(yōu)化長列表

    摘要：合理的優(yōu)化長列表，可以提升用戶體驗(yàn)。這樣保證了無論如何滾動(dòng)，真實(shí)渲染出的節(jié)點(diǎn)只有可視區(qū)內(nèi)的列表元素。具體效果如下圖所示對于比無優(yōu)化的情況，優(yōu)化后的虛擬列表渲染速度提升很明顯。是基于來實(shí)現(xiàn)的，但是是一個(gè)維的列表，而不是網(wǎng)狀。 ??對于較長的列表，比如1000個(gè)數(shù)組的數(shù)據(jù)結(jié)構(gòu)，如果想要同時(shí)渲染這1000個(gè)數(shù)據(jù)，生成相應(yīng)的1000個(gè)原生dom，我們知道原生的dom元素是很復(fù)雜的，如果長列表...

    yearsj 評論0 收藏0

  • 在React項(xiàng)目中，如何優(yōu)雅的優(yōu)化長列表

    摘要：合理的優(yōu)化長列表，可以提升用戶體驗(yàn)。這樣保證了無論如何滾動(dòng)，真實(shí)渲染出的節(jié)點(diǎn)只有可視區(qū)內(nèi)的列表元素。具體效果如下圖所示對于比無優(yōu)化的情況，優(yōu)化后的虛擬列表渲染速度提升很明顯。是基于來實(shí)現(xiàn)的，但是是一個(gè)維的列表，而不是網(wǎng)狀。 ??對于較長的列表，比如1000個(gè)數(shù)組的數(shù)據(jù)結(jié)構(gòu)，如果想要同時(shí)渲染這1000個(gè)數(shù)據(jù)，生成相應(yīng)的1000個(gè)原生dom，我們知道原生的dom元素是很復(fù)雜的，如果長列表...

    Java_oldboy 評論0 收藏0

發(fā)表評論

0條評論

FullStackDeveloper

男|高級講師

TA的文章

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