Ⅰ 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