Ⅰ JS圖片懶載入——前端性能優化
意義
懶載入（LazyLoad） 是前端優化的一種有效方式，能極大的提升用戶體驗，圖片載入是其重點，如果載入圖片過多將大大增 http請求次數或大小 ，然而更多時候 用戶並不會瀏覽到全部載入進來的圖片 ，這種代價是非常不值得的，所以當用戶 瀏覽到當前視口時再去載入相應的圖片 無疑是兩全其美的選擇
原理：只有 img 標簽中的 src 寫入了圖片的地址，載入頁面時才會請求圖片，所以使用懶載入時在 src 中並不寫入任何地址，把圖片的真實地址放到 data- (標簽內部屬性可存數據) 屬性中，在 js 中綁定滑鼠滾動事件，其回調中遍歷所有圖片並作出判斷， 將出現在視口中的圖片的 'data-' 屬性保存的地址放到 'src' 中即可
實現
HTML：
Ⅱ 鐎戝竷嫻併佹粴鍔ㄥ嚲縐匯佹噿鍔犺澆涓庨勫姞杞
鐎戝竷嫻佸竷灞鎬濊礬錛 棣栧厛紜瀹氬垪鏁幫紝姣忔″皢鏂板炵殑DOM緇撴瀯娣誨姞鍒板綋鍓嶉珮搴︽渶鐭鐨勪竴鍒楋紝浠ユょ被鎺錛屽艦鎴愪竴縐嶅弬宸涓嶉綈鐨勫樊寮傚寲甯冨矓褰㈠紡銆
婊氬姩鍋忕Щ鍦烘櫙1錛 褰撳厓緔犲唴瀹硅秴鍑哄厓緔犲ぇ灝忥紝騫朵笖鍏冪礌璁劇疆浜唎verflow錛屽彲浠ヤ嬌鍏冪礌鍑虹幇婊氬姩鏉★紝閫氳繃婊氬姩鏉′綅緗婊氬姩鏉ユ樉紺鴻秴鍑洪儴鍒嗙殑鍐呭廣
婊氬姩鍋忕Щ鍦烘櫙2錛 褰撻〉闈㈠ぇ灝忚秴鍑鴻嗙獥澶у皬鏃訛紝嫻忚堝櫒浼氳嚜鍔ㄥ嚭鐜版粴鍔ㄦ潯騫朵笖鏆傛椂闅愯棌瓚呭嚭閮ㄥ垎錛岄氳繃婊戝姩婊氬姩鏉′綅緗鏉ユ煡鐪嬭秴鍑洪儴鍒嗗唴瀹廣
涓銆佹噿鍔犺澆
鎳掑姞杞斤細鍒濇″彧鍔犺澆閮ㄥ垎璧勬簮錛屽綋宸插姞杞借祫婧愬嵆灝嗕嬌鐢ㄥ畬姣曟椂錛堥渶瑕佹洿澶氭柊璧勬簮鏃訛級鍐嶅姞杞芥洿澶氳祫婧愩
濂藉勶細
錛1錛夋彁楂橀〉闈㈠垵嬈″姞杞介熷害錛屽炲己鐢ㄦ埛浣撻獙銆
錛2錛夋寜闇鍔犺澆錛岃妭鐪佽祫婧愩
鍘熺悊錛氶氳繃欏甸潰鍔犺澆寮濮嬶紝鍏堢粰鍥劇墖涓涓鍗犱綅鍥撅紝灝嗗疄闄呭浘鐗囧睘鎬э紝鏀懼湪鑷瀹氫箟灞炴data_url閲岄潰錛岄氳繃onscroll浜嬩歡錛屾嫻嬪浘鐗囩殑浣嶇疆錛屽傛灉鍥劇墖榪涘叆鍙瑙嗗尯鍩燂紝灝哾ata_url鐨勫疄闄呭浘鐗囪劇疆緇檚rc
媯嫻嬫柟娉曪細鍥劇墖璺濈繪枃妗ｉ《閮ㄨ窛紱-scrollTop < 嫻忚堝櫒鍙瑙嗗尯鍩熼珮搴︺
浜屻侀勫姞杞
Ⅲ 鍥劇墖鎳掑姞杞藉拰棰勫姞杞
鎳掑姞杞戒篃鍙寤惰繜鍔犺澆錛屾寚鐨勬槸鍦ㄩ暱緗戦〉涓寤惰繜鍔犺澆鍥懼儚錛屾槸涓縐嶅緢濂戒紭鍖栫綉欏墊ц兘鐨勬柟寮 銆傜敤鎴鋒粴鍔ㄥ埌瀹冧滑涔嬪墠錛屽彲瑙嗗尯鍩熷栫殑鍥懼儚涓嶄細鍔犺澆銆傝繖涓庡浘鍍忛勫姞杞界浉鍙嶏紝鍦ㄩ暱緗戦〉涓婁嬌鐢ㄥ歡榪熷姞杞藉皢浣跨綉欏靛姞杞芥洿蹇銆傚湪鏌愪簺鎯呭喌涓嬶紝瀹冭繕鍙浠ュ府鍔╁噺灝戞湇鍔″櫒璐熻澆銆傚父閫傜敤鍥劇墖寰堝氾紝欏甸潰寰堥暱鐨勭數鍟嗙綉絝欏満鏅涓銆
棣栧厛灝嗛〉闈涓婄殑鍥劇墖鐨 src 灞炴ц句負絀哄瓧絎︿覆錛岃屽浘鐗囩殑鐪熷疄璺寰勫垯璁劇疆鍦╠ata-original灞炴т腑錛 褰撻〉闈㈡粴鍔ㄧ殑鏃跺欓渶瑕佸幓鐩戝惉scroll浜嬩歡錛屽湪scroll浜嬩歡鐨勫洖璋冧腑錛屽垽鏂鎴戜滑鐨勬噿鍔犺澆鐨勫浘鐗囨槸鍚﹁繘鍏ュ彲瑙嗗尯鍩,濡傛灉鍥劇墖鍦ㄥ彲瑙嗗尯鍐呭皢鍥劇墖鐨 src 灞炴ц劇疆涓篸ata-original 鐨勫礆紝榪欐牱灝卞彲浠ュ疄鐜板歡榪熷姞杞姐
璧勬簮棰勫姞杞芥槸鍙︿竴涓鎬ц兘浼樺寲鎶鏈錛屾垜浠鍙浠ヤ嬌鐢ㄨユ妧鏈鏉ラ勫厛鍛婄煡嫻忚堝櫒鏌愪簺璧勬簮鍙鑳藉湪灝嗘潵浼氳浣跨敤鍒般 棰勫姞杞界畝鍗曟潵璇村氨鏄灝嗘墍鏈夋墍闇鐨勮祫婧愭彁鍓嶈鋒眰鍔犺澆鍒版湰鍦幫紝榪欐牱鍚庨潰鍦ㄩ渶瑕佺敤鍒版椂灝辯洿鎺ヤ粠緙撳瓨鍙栬祫婧 銆
鍦ㄧ綉欏靛叏閮ㄥ姞杞戒箣鍓嶏紝瀵逛竴浜涗富瑕佸唴瀹硅繘琛屽姞杞斤紝浠ユ彁渚涚粰鐢ㄦ埛鏇村ソ鐨勪綋楠岋紝鍑忓皯絳夊緟鐨勬椂闂淬傚惁鍒欙紝濡傛灉涓涓欏甸潰鐨勫唴瀹硅繃浜庡簽澶э紝娌℃湁浣跨敤棰勫姞杞芥妧鏈鐨勯〉闈㈠氨浼氶暱鏃墮棿鐨勫睍鐜頒負涓鐗囩┖鐧斤紝鐩村埌鎵鏈夊唴瀹瑰姞杞藉畬姣曘
<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>
<script src="./myPreload.js"></script>
PreloadJS鎻愪緵浜嗕竴縐嶉勫姞杞藉唴瀹圭殑涓鑷存柟寮忥紝浠ヤ究鍦℉TML搴旂敤紼嬪簭涓浣跨敤銆傞勫姞杞藉彲浠ヤ嬌鐢℉TML鏍囩句互鍙奨HR鏉ュ畬鎴愩傞粯璁ゆ儏鍐典笅錛孭reloadJS浼氬皾璇曚嬌鐢╔HR鍔犺澆鍐呭癸紝鍥犱負瀹冩彁渚涗簡瀵硅繘搴﹀拰瀹屾垚浜嬩歡鐨勬洿濂芥敮鎸侊紝浣嗘槸鐢變簬璺ㄥ煙闂棰橈紝浣跨敤鍩轟簬鏍囪扮殑鍔犺澆鍙鑳芥洿濂姐
涓よ呴兘鏄鎻愰珮欏甸潰鎬ц兘鏈夋晥鐨勫姙娉曪紝 涓よ呬富瑕佸尯鍒鏄涓涓鏄鎻愬墠鍔犺澆錛屼竴涓鏄榪熺紦鐢氳嚦涓嶅姞杞姐傛噿鍔犺澆瀵規湇鍔″櫒鍓嶇鏈変竴瀹氱殑緙撹В鍘嬪姏浣滅敤錛岄勫姞杞藉垯浼氬炲姞鏈嶅姟鍣ㄥ墠絝鍘嬪姏
杞錛 https://juejin.cn/post/6844903614138286094