每日 30 秒 ? 巧用可視區域

DevYK 發布于2019-08-23 15:57 / 571人閱讀

簡介

可視區域、頁面優化、DOM節點多、圖片懶加載、性能

可視區域是一個前端優化經常出現的名詞，不管是顯示器、手機、平板它們的可視區域范圍都是有限。在這個 有限可視區域 區域里做到完美顯示和響應，而在這個區域外少做一些操作來減少渲染的壓力、網絡請求壓力。在每日 30 秒之對海量數據進行切割中的使用場景，我們就是利用了 有限可視區域 只渲染一部分 DOM 節點來減少頁面卡頓。

既然 可視區域 這么重要是否有什么速成秘籍來幫我們？

控制住每一個元素在可視區域的出現，就可以扼住命運的后頸為所欲為：

// 該源碼來自于 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 方法返回元素的大小及其相對于視口的位置，可以得到當前元素相對 可視區域 的坐標：

const { top, left, bottom, right } = el.getBoundingClientRect();

得到元素的坐標信息后，就需要獲得 可視區域 的寬高來幫助我們確定是否在范圍內：

const { innerHeight, innerWidth } = window;

先判斷是否需要整個元素都出現在 可視區域：

if (partiallyVisible) {
    // 只需要出現在可視區域 
} else {
    // 需要整個元素都在可視區域內
}

判斷元素頭部或者底部是否在 可視區域 出現：

(top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)

判斷元素左部或者右部是否在 可視區域 出現：

(left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)

當需要整個元素都出現在屏幕的時候，需要同時判斷四個相對坐標：

top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth

使用場景

現在網頁中經常會出現大量的圖片，然而加載大量圖片會影響網頁加載速度，我們可以利用 可視區域 來實現圖片的懶加載。為什么要懶加載圖片：

大量的圖片請求會增加服務器的壓力。

使用 CDN 加速來緩解服務器壓力例如 七牛云。

加速用戶的網頁加載速度，當圖片數量巨大需要占用請求資源和顯示速度。

HTTP1 文件限制會對同一個域名限制文件請求數可以通過 影子域名 來繞過這個限制。

利用 可視區域 當移動到某個 標志元素 時再進行更多數據和圖片的加載。

利用占位圖片來防止頁面塌陷。

用戶訪問頁面有時候只是粗略的一撇。

利用 可視區域 加載部分數據圖片節省網絡流量。

結構

樣式

.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 = ``;

        // 去除占位 class
        box.className = box.className.replace("img-placeholder", "")
    })
}

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

GPU云服務器云服務器云服務器開機要開30秒可視區域判斷可視區域 html可視區域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102572.html

每日 30 秒 ? 終極等于

簡介字符串、數字、數組、對象、時間、類型、等于科學家發現，人腦中會分泌多種能讓人感到快樂、安全和成就感的物質，這些物質統稱為快樂素。通常情況下，快樂素的釋放水平很低，維持我們心情平靜。只有當我們完成了預設目標，作為獎勵，大腦才會增加快樂素的分泌，讓人感受到滿足和成功的喜悅。這是之前看到的一篇關于大腦獎勵機制文章的一段話，為了要獲得獎勵我們需要有預設目標，而是每日 30 秒系列也是為了幫助...

lakeside 2019-08-23 15:58 評論0 收藏0
每日 30 秒 ? 判斷是否為頁面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡介分頁、優化、可視區域、無限加載寫前端頁面時最經常遇到的開發需求之一就是渲染后端數據返回的數據對象，當數據對象數量極多的時候便需要進行分頁。常見的分頁方式有三種：在頁面底部生成上一頁、下一頁、頁面列表按鈕。用戶可以很直接的選擇...

callmewhy 2019-08-26 13:36 評論0 收藏0
巧用 Img / JavaScript 采集頁面數據

摘要：日志服務提供就是為解決以上輕量級埋點采集場景而生，我們可以在分鐘時間內完成埋點和數據上報工作。服務功能包括實時采集與消費。摘要：當我們有一個新內容時（例如新功能、新活動、新游戲、新文章），作為運營人員總是迫不及待地希望能盡快傳達到用戶，因為這是獲取用戶的第一步、也是最重要的一步。點此查看原文:http://click.aliyun.com/m/40929/ 我們發送重要郵件時為...

sunny5541 2019-08-01 18:28 評論0 收藏0
巧用 Img / JavaScript 采集頁面數據

摘要：日志服務提供就是為解決以上輕量級埋點采集場景而生，我們可以在分鐘時間內完成埋點和數據上報工作。服務功能包括實時采集與消費。摘要：當我們有一個新內容時（例如新功能、新活動、新游戲、新文章），作為運營人員總是迫不及待地希望能盡快傳達到用戶，因為這是獲取用戶的第一步、也是最重要的一步。點此查看原文:http://click.aliyun.com/m/40929/ 我們發送重要郵件時為...

WrBug 2019-08-22 14:01 評論0 收藏0
每日 30 秒 ? JSON對象數組轉換 CSV 表格數據

簡介數組、對象、CSV、表格、工具我們在每日 30 秒之 arrayToCSV 中一起學習了將數組數據轉化為 csv 表格數據并導出，那如果是對象數組怎么辦呢？小腦袋瓜轉得快的同學肯定會說：使用 Array.prototype.map 把需要導出的字段先遍歷取出，再使用 arrayToCSV 將其導出為 CSV 數據表格。可是你有沒有想過如果一個對象數組數據非常之大時，使用 Array.p...

Ajian 2019-08-26 13:35 評論0 收藏0