HTML基礎(chǔ)知識(shí)（22）

1、Vue 擴(kuò)展插件：

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)羅湖免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

*vue-cli: vue 腳手架

*vue-resource(axios): ajax 請(qǐng)求

*vue-router: 路由

*vuex: 狀態(tài)管理

*vue-lazyload: 圖片懶加載

*vue-scroller: 頁面滑動(dòng)相關(guān)

*mint-ui: 基于 vue 的 UI 組件庫(移動(dòng)端)

*element-ui: 基于 vue 的 UI 組件庫(PC 端)

*它本身只關(guān)注 UI, 可以輕松引入 vue 插件或其它第三方庫開發(fā)項(xiàng)目

2、雙大括號(hào)表達(dá)式

*語法:{{exp}}

*功能: 向頁面輸出數(shù)據(jù)

*可以調(diào)用對(duì)象的方法

3、強(qiáng)制數(shù)據(jù)綁定：

指定變化的屬性值

寫法：v-bind:xxx='yyy'?? //yyy 會(huì)作為表達(dá)式解析執(zhí)行

簡介寫法：:xxx='yyy'

4、綁定事件監(jiān)聽：

綁定指定之間名的回調(diào)函數(shù)

完整寫法：v-on:keyup='xxx'

v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx'

簡潔寫法：@keyup='xxx' @keyup.enter='xxx'

5、計(jì)算屬性：

*在 computed 屬性對(duì)象中定義計(jì)算屬性的方法

*在頁面中使用{{方法名}}來顯示計(jì)算的結(jié)果

6、監(jiān)視屬性：

*通過通過 vm 對(duì)象的$watch()或 watch 配置來監(jiān)視指定的屬性

*當(dāng)屬性變化時(shí), 回調(diào)函數(shù)自動(dòng)調(diào)用, 在函數(shù)內(nèi)部進(jìn)行計(jì)算

7、計(jì)算屬性高級(jí)

*通過 getter/setter 實(shí)現(xiàn)對(duì)屬性數(shù)據(jù)的顯示和監(jiān)視

*計(jì)算屬性存在緩存, 多次讀取只執(zhí)行一次 getter 計(jì)算

8、class 與 style 綁定：

class/style 綁定是專門用來實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)

class綁定：*:class='xxx'

*表達(dá)式是字符串: 'classA'

*表達(dá)式是對(duì)象: {classA:isA, classB: isB}

*表達(dá)式是數(shù)組: ['classA', 'classB']

style綁定：:style="{ color: activeColor, fontSize: fontSize + 'px' }"（其中 activeColor/fontSize 是 data 屬性）

9、條件渲染：

指令：v-if 與 v-else及v-show

注意點(diǎn)：如果需要頻繁切換 v-show 較好

當(dāng)條件不成立時(shí), v-if 的所有子節(jié)點(diǎn)不會(huì)解析

10、列表渲染：

指令：數(shù)組: v-for / index ； 對(duì)象: v-for / key

更新顯示：刪除 item ； 替換 item

高級(jí)處理：列表過濾 ； 列表排序

圖片懶加載和預(yù)加載

懶加載也叫延遲加載，指的是在長網(wǎng)頁中延遲加載圖像，是一種很好優(yōu)化網(wǎng)頁性能的方式 。用戶滾動(dòng)到它們之前，可視區(qū)域外的圖像不會(huì)加載。這與圖像預(yù)加載相反，在長網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快。在某些情況下，它還可以幫助減少服務(wù)器負(fù)載。常適用圖片很多，頁面很長的電商網(wǎng)站場(chǎng)景中。

首先將頁面上的圖片的 src 屬性設(shè)為空字符串，而圖片的真實(shí)路徑則設(shè)置在data-original屬性中， 當(dāng)頁面滾動(dòng)的時(shí)候需要去監(jiān)聽scroll事件，在scroll事件的回調(diào)中，判斷我們的懶加載的圖片是否進(jìn)入可視區(qū)域,如果圖片在可視區(qū)內(nèi)將圖片的 src 屬性設(shè)置為data-original 的值，這樣就可以實(shí)現(xiàn)延遲加載。

資源預(yù)加載是另一個(gè)性能優(yōu)化技術(shù)，我們可以使用該技術(shù)來預(yù)先告知瀏覽器某些資源可能在將來會(huì)被使用到。 預(yù)加載簡單來說就是將所有所需的資源提前請(qǐng)求加載到本地，這樣后面在需要用到時(shí)就直接從緩存取資源 。

在網(wǎng)頁全部加載之前，對(duì)一些主要內(nèi)容進(jìn)行加載，以提供給用戶更好的體驗(yàn)，減少等待的時(shí)間。否則，如果一個(gè)頁面的內(nèi)容過于龐大，沒有使用預(yù)加載技術(shù)的頁面就會(huì)長時(shí)間的展現(xiàn)為一片空白，直到所有內(nèi)容加載完畢。

img src=" 0044449030002.jpg" style="display:none"/

script src="./myPreload.js"/script

PreloadJS提供了一種預(yù)加載內(nèi)容的一致方式，以便在HTML應(yīng)用程序中使用。預(yù)加載可以使用HTML標(biāo)簽以及XHR來完成。默認(rèn)情況下，PreloadJS會(huì)嘗試使用XHR加載內(nèi)容，因?yàn)樗峁┝藢?duì)進(jìn)度和完成事件的更好支持，但是由于跨域問題，使用基于標(biāo)記的加載可能更好。

兩者都是提高頁面性能有效的辦法， 兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力

轉(zhuǎn)：

html 圖片很多的情況下，怎樣實(shí)現(xiàn)先打開頁面，再慢慢加載？

!DOCTYPE?HTML

html

head

titlePage?Title/title

meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/

script

onload?=?function()?{

var?imgs?=?document.querySelectorAll("img");

console.log("加載中...");

for?(var?i?=?0;?i??imgs.length;?i++)?{

var?img?=?imgs[i];

(function(i)?{

setTimeout(function()?{

img.src?=?"a"?+?i?+?".jpg";

img.onload?=?function(){

if(i?==?imgs.length?-?1){

console.info("加載完畢");

}

}

img.onerror?=?function(){

console.error("加載錯(cuò)誤");

}

},?2000?*?i);

})(i);

}

}

/script

/head

body

img?/

img?/

img?/

img?/

/body

/html

JS 實(shí)現(xiàn)頁面的懶加載

頁面加載來自網(wǎng)絡(luò)的圖片時(shí)，可能會(huì)花費(fèi)大量的時(shí)間，因此如果使用懶加載，能夠讓用戶體驗(yàn)不到加載的過程

至此，我們便可以在頁面中使用懶加載來優(yōu)化用戶體驗(yàn)了。

lazyLoad.html

標(biāo)題名稱：html5懶加載,前端頁面懶加載
標(biāo)題鏈接：http://chinadenli.net/article43/dsgsjhs.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、營銷型網(wǎng)站建設(shè)、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)