1靶累、懶加載
1.什么是懶加載腺毫？
懶加載也就是延遲加載。
當(dāng)訪問(wèn)一個(gè)頁(yè)面的時(shí)候挣柬，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請(qǐng)求一次潮酒，俗稱(chēng)占位圖），只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí)邪蛔，才設(shè)置圖片正真的路徑急黎，讓圖片顯示出來(lái)。這就是圖片懶加載侧到。
2.為什么要使用懶加載叁熔？
很多頁(yè)面，內(nèi)容很豐富床牧，頁(yè)面很長(zhǎng)荣回，圖片較多。比如說(shuō)各種商城頁(yè)面戈咳。這些頁(yè)面圖片數(shù)量多心软，而且比較大，少說(shuō)百來(lái)K著蛙，多則上兆删铃。要是頁(yè)面載入就一次性加載完畢。估計(jì)大家都會(huì)等到黃花變成黃花菜了踏堡。
3.懶加載的原理是什么猎唁？
頁(yè)面中的img元素，如果沒(méi)有src屬性顷蟆，瀏覽器就不會(huì)發(fā)出請(qǐng)求去下載圖片诫隅，只有通過(guò)javascript設(shè)置了圖片路徑，瀏覽器才會(huì)發(fā)送請(qǐng)求帐偎。
懶加載的原理就是先在頁(yè)面中把所有的圖片統(tǒng)一使用一張占位圖進(jìn)行占位逐纬，把正真的路徑存在元素的“data-url”（這個(gè)名字起個(gè)自己認(rèn)識(shí)好記的就行）屬性里，要用的時(shí)候就取出來(lái)削樊，再設(shè)置豁生；
4.懶加載的實(shí)現(xiàn)步驟？
1)首先漫贞，不要將圖片地址放到src屬性中甸箱，而是放到其它屬性(data-original)中。
2)頁(yè)面加載完成后迅脐，根據(jù)scrollTop判斷圖片是否在用戶的視野內(nèi)芍殖，如果在，則將data-original屬性中的值取出存放到src屬性中仪际。
3)在滾動(dòng)事件中重復(fù)判斷圖片是否進(jìn)入視野围小，如果進(jìn)入昵骤，則將data-original屬性中的值取出存放到src屬性中。
5.懶加載的優(yōu)點(diǎn)是什么肯适？
頁(yè)面加載速度快变秦、可以減輕服務(wù)器的壓力、節(jié)約了流量,用戶體驗(yàn)好
2框舔、預(yù)加載
1.什么是預(yù)加載蹦玫？
提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染
2.為什么要使用預(yù)加載刘绣？
圖片預(yù)先加載到瀏覽器中樱溉，訪問(wèn)者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度纬凤。這對(duì)圖片畫(huà)廊及圖片占據(jù)很大比例的網(wǎng)站來(lái)說(shuō)十分有利福贞，它保證了圖片快速、無(wú)縫地發(fā)布停士，也可幫助用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)挖帘。
3.實(shí)現(xiàn)預(yù)加載的方法有哪些？
方法一：用CSS和JavaScript實(shí)現(xiàn)預(yù)加載
方法二：僅使用JavaScript實(shí)現(xiàn)預(yù)加載
方法三：使用Ajax實(shí)現(xiàn)預(yù)加載
詳見(jiàn)：http://web.jobbole.com/86785/
3恋技、懶加載和預(yù)加載的對(duì)比
1)概念：
懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時(shí)才加載某些圖片拇舀。
預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染蜻底。
2)區(qū)別：
兩種技術(shù)的本質(zhì)：兩者的行為是相反的骄崩，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載薄辅。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用要拂，預(yù)加載則會(huì)增加服務(wù)器前端壓力。
3)懶加載的意義及實(shí)現(xiàn)方式有：
意義：
懶加載的主要目的是作為服務(wù)器前端的優(yōu)化长搀，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)宇弛。
實(shí)現(xiàn)方式：
1.第一種是純粹的延遲加載鸡典，使用setTimeOut或setInterval進(jìn)行加載延遲.
2.第二種是條件加載源请，符合某些條件，或觸發(fā)了某些事件才開(kāi)始異步下載彻况。
3.第三種是可視區(qū)加載谁尸，即僅加載用戶可以看到的區(qū)域，這個(gè)主要由監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)纽甘，一般會(huì)在距用戶看到某圖片前一定距離遍開(kāi)始加載良蛮，這樣能保證用戶拉下時(shí)正好能看到圖片。
4)預(yù)加載的意義及實(shí)現(xiàn)方式有：
意義:
預(yù)加載可以說(shuō)是犧牲服務(wù)器前端性能悍赢，換取更好的用戶體驗(yàn)决瞳，這樣可以使用戶的操作得到最快的反映货徙。
實(shí)現(xiàn)方式：
實(shí)現(xiàn)預(yù)載的方法非常多，比如：用CSS和JavaScript實(shí)現(xiàn)預(yù)加載皮胡；僅使用JavaScript實(shí)現(xiàn)預(yù)加載痴颊；使用Ajax實(shí)現(xiàn)預(yù)加載。
常用的是new Image();設(shè)置其src來(lái)實(shí)現(xiàn)預(yù)載屡贺，再使用onload方法回調(diào)預(yù)載完成事件蠢棱。只要瀏覽器把圖片下載到本地，同樣的src就會(huì)使用緩存甩栈，這是最基本也是最實(shí)用的預(yù)載方法泻仙。當(dāng)Image下載完圖片頭后，會(huì)得到寬和高量没，因此可以在預(yù)載前得到圖片的大小(方法是用記時(shí)器輪循寬高變化)玉转。
4、補(bǔ)充知識(shí)
- 屏幕可視窗口大小
**原生方法**：
window.innerHeight 標(biāo)準(zhǔn)瀏覽器及IE9+ ||
document.documentElement.clientHeight 標(biāo)準(zhǔn)瀏覽器及低版本IE標(biāo)準(zhǔn)模式 ||
document.body.clientHeight 低版本混雜模式
**jQuery方法**：
$(window).height();
- 瀏覽器窗口頂部與文檔頂部之間的距離殴蹄，也就是滾動(dòng)條滾動(dòng)的距離：
**原生方法**：
window.pagYoffset 標(biāo)準(zhǔn)瀏覽器及IE9+ ||
document.documentElement.scrollTop 兼容ie低版本的標(biāo)準(zhǔn)模式 ||
document.body.scrollTop 兼容混雜模式冤吨；
**jQuery方法**：
$(document).scrollTop();
- 獲取元素的尺寸
$(o).width() = o.style.width;
$(o).innerWidth() = o.style.width+o.style.padding;
$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border；
$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin饶套；
**注意**
要使用原生的style.xxx方法獲取屬性漩蟆，這個(gè)元素必須已經(jīng)有內(nèi)嵌的樣式，如`<div style="...."></div>`妓蛮；
如果原先是通過(guò)外部或內(nèi)部樣式表定義css樣式怠李，必須使用`o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]`來(lái)獲取樣式值。
- 獲取元素的位置信息
jQuery：
$(o).offset().top元素距離文檔頂?shù)木嚯x
$(o).offset().left元素距離文檔左邊緣的距離蛤克。
原生：getoffsetTop();
順便提一下返回元素相對(duì)于第一個(gè)以定位的父元素的偏移距離捺癞，注意與上面偏移距的區(qū)別；
jQuery：position()返回一個(gè)對(duì)象
$(o).position().left = o.style.left;
$(o).position().top = o.style.top构挤；
