可視區域、頁面優化、DOM節點多、圖片懶加載、性能
可視區域
是一個前端優化常常出現的名詞,無論是顯示器、手機、平板它們的可視區域
範圍都是有限。在這個 有限可視區域
區域裏作到完美顯示和響應,而在這個區域外少作一些操做來減小渲染的壓力、網絡請求壓力。在 每日 30 秒之 對海量數據進行切割 中的使用場景,咱們就是利用了 有限可視區域
只渲染一部分 DOM 節點來減小頁面卡頓。javascript
既然
可視區域
這麼重要是否有什麼速成祕籍來幫咱們?
控制住每個元素在可視區域
的出現,就能夠扼住命運的後頸隨心所欲:css
// 該源碼來自於 https://30secondsofcode.org const inViewport = (el, partiallyVisible = false) => { const { top, left, bottom, right } = el.getBoundingClientRect(); const { innerHeight, innerWidth } = window; return partiallyVisible ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; };
使用 Element.getBoundingClientRect 方法返回元素的大小及其相對於視口的位置,能夠獲得當前元素相對 可視區域
的座標:html
const { top, left, bottom, right } = el.getBoundingClientRect();
獲得元素的座標信息後,就須要得到 可視區域
的寬高來幫助咱們肯定是否在範圍內:前端
const { innerHeight, innerWidth } = window;
先判斷是否須要整個元素都出如今 可視區域
:java
if (partiallyVisible) { // 只須要出如今可視區域 } else { // 須要整個元素都在可視區域內 }
判斷元素頭部或者底部是否在 可視區域
出現:git
(top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)
判斷元素左部或者右部是否在 可視區域
出現:github
(left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)
當須要整個元素都出如今屏幕的時候,須要同時判斷四個相對座標:segmentfault
top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
如今網頁中常常會出現大量的圖片,然而加載大量圖片會影響網頁加載速度,咱們能夠利用 可視區域
來實現圖片的懶加載。爲何要懶加載圖片:服務器
七牛雲
。影子域名
來繞過這個限制。可視區域
當移動到某個 標誌元素
時再進行更多數據和圖片的加載。可視區域
加載部分數據圖片節省網絡流量。<div class="container"> <div class="img-box img-placeholder" data-src="http://suo.im/5p9IOS"></div> <div class="img-box img-placeholder" data-src="http://suo.im/5p9IOS"></div> <div class="img-box img-placeholder" data-src="http://suo.im/5p9IOS"></div> <div class="img-box img-placeholder" data-src="http://suo.im/5p9IOS"></div> <div class="img-box img-placeholder" data-src="http://suo.im/5p9IOS"></div> <div class="img-box img-placeholder" data-src="http://suo.im/5p9IOS"></div> </div>
.img-box { width: 200px; height: 200px; margin: 10px 0 10px 10px; background: #eee; display: inline-block; } .img-box > img { width: 100%; height: 100%; }
document.addEventListener('scroll', lazyLoading) window.onload = () => lazyLoading() function lazyLoading() { const boxs = document.querySelectorAll('.img-placeholder') Array.from(boxs).map(box => { if (!inViewport(box, true)) return; // 獲取圖片地址並清除數據記錄 const src = box.getAttribute('data-src'); box.removeAttribute('data-src'); // 插入圖片 DOM box.innerHTML = `<img src='${src}'>`; // 去除佔位 class box.className = box.className.replace('img-placeholder', '') }) }
在困惑的城市裏總少不了並肩同行的
夥伴
讓咱們一塊兒成長。
點贊
。小星星
。m353839115
。本文原稿來自 PushMeTop