專業(yè)的APP開發(fā)對于預加載功能處理的步驟,深圳APP開發(fā)公司提醒預加載對于用戶體驗非常重要,有時我們能夠通過用戶的行為統(tǒng)計預判出用戶下一步可能進行的操作。假設我們統(tǒng)計出來針對某個微應用,大部分用戶在首頁渲染完成之后會點擊列表中的第一個項目查看詳情。
那么在首頁渲染完成之后,我們就可以預先加載第一個項目的部分內(nèi)容,這樣大部分用戶就能立即看到新頁面中的內(nèi)容了。頁面資源預加載(Linkprefetch)是瀏覽器提供的一個技巧,目的是讓瀏覽器在空閑時間下載或預讀取一些用戶在將來將會訪問的文檔資源。一個Web頁面可以對瀏覽器設置一系列的預加載指示,當瀏覽器加載完當前頁面后,就會在后臺靜悄悄地加載指定的文檔,并把它們存儲在緩存里。當用戶訪問到這些預加載的文檔后,瀏覽器能快速地從緩存里提取給用戶。例如:
01 < script type=" text/ javascript" src=" script1. js" defer></ script> 02 <!-- 預加 載 整個 頁面 --> 03 < link rel=" prefetch" href=" http:// www. webhek. com/ misc/ 3d- album/" />
04 <!-- 預加 載 一個 圖片 --> 05 < link rel=" prefetch" href=" http:// www. webhek. com/ wordpress/ 06 wp- content/ uploads/ 2014/ 04/ b- 334x193. jpg " />
HTML5頁面資源預加載/預讀取(Linkprefetch)功能是通過Link標記實現(xiàn)的,將rel屬性指定為“prefetch”,在href屬性里指定要加載資源的地址。在頁面中需要加載哪些資源、何時加載,通常要根據(jù)具體頁面的需求情況進行具體考慮。下面是一些建議:當頁面有幻燈片類似的服務時,預加載/預讀取接下來的1~3頁和之前的1~3頁。預加載那些整個網(wǎng)站通用的圖片。
預加載網(wǎng)站上搜索結(jié)果的下一頁。與Linkprefetch對應的另一種是DNS與解析技術(shù)(DNSPrefetch)。當用戶瀏覽網(wǎng)頁時,瀏覽器會在加載網(wǎng)頁時對網(wǎng)頁中的域名進行解析緩存,這樣在用戶點擊當前網(wǎng)頁中的連接時就無須再次進行DNS的解析,減少用戶等待時間,提高用戶體驗。通過DNSPrefetch可以提高訪問的流暢性。如果要瀏覽器端對特定的域名進行解析,可以通過以下兩種方式實現(xiàn)。第一種方式是通過link標簽實現(xiàn),例如:
01 < link rel=" dns- prefetch" href=" //api. twitter. com" />
第二種方式是通過meta標簽實現(xiàn),例如:
01 < meta http- equiv=" x- dns- prefetch- control" content=" on" />
設置DNS與解析的代碼應當盡量寫在網(wǎng)頁的前部,起到減少DNS請求的功能。目前,DNSPrefetch的瀏覽器支持情況如圖9.20所示。
當然,預加載方式也并不是在所有場景下都使用。一方面,需要做好充分的用戶調(diào)研,掌握用戶的使用習慣;另一方面,對于小部分用戶而言,預加載所帶來的就是不必要的流量消耗。好了,APP開發(fā)公司本文關(guān)于“專業(yè)的APP開發(fā)對于預加載功能處理的步驟”的相關(guān)APP開發(fā)制作知識就分享到這里,謝謝關(guān)注,博納網(wǎng)絡編輯整理。