成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 巧用可視區(qū)域

DevYK / 642人閱讀

簡(jiǎn)介 
可視區(qū)域、頁(yè)面優(yōu)化、DOM節(jié)點(diǎn)多、圖片懶加載、性能

可視區(qū)域是一個(gè)前端優(yōu)化經(jīng)常出現(xiàn)的名詞，不管是顯示器、手機(jī)、平板它們的可視區(qū)域范圍都是有限。在這個(gè) 有限可視區(qū)域 區(qū)域里做到完美顯示和響應(yīng)，而在這個(gè)區(qū)域外少做一些操作來(lái)減少渲染的壓力、網(wǎng)絡(luò)請(qǐng)求壓力。在 每日 30 秒之 對(duì)海量數(shù)據(jù)進(jìn)行切割 中的使用場(chǎng)景，我們就是利用了 有限可視區(qū)域 只渲染一部分 DOM 節(jié)點(diǎn)來(lái)減少頁(yè)面卡頓。

既然 可視區(qū)域 這么重要是否有什么速成秘籍來(lái)幫我們？

控制住每一個(gè)元素在可視區(qū)域的出現(xiàn)，就可以扼住命運(yùn)的后頸為所欲為：

// 該源碼來(lái)自于 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 方法返回元素的大小及其相對(duì)于視口的位置，可以得到當(dāng)前元素相對(duì) 可視區(qū)域 的坐標(biāo)：

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

得到元素的坐標(biāo)信息后，就需要獲得 可視區(qū)域 的寬高來(lái)幫助我們確定是否在范圍內(nèi)：

const { innerHeight, innerWidth } = window;

先判斷是否需要整個(gè)元素都出現(xiàn)在 可視區(qū)域：

if (partiallyVisible) {
    // 只需要出現(xiàn)在可視區(qū)域 
} else {
    // 需要整個(gè)元素都在可視區(qū)域內(nèi)
}

判斷元素頭部或者底部是否在 可視區(qū)域 出現(xiàn)：

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

判斷元素左部或者右部是否在 可視區(qū)域 出現(xiàn)：

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

當(dāng)需要整個(gè)元素都出現(xiàn)在屏幕的時(shí)候，需要同時(shí)判斷四個(gè)相對(duì)坐標(biāo)：

top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
使用場(chǎng)景

現(xiàn)在網(wǎng)頁(yè)中經(jīng)常會(huì)出現(xiàn)大量的圖片，然而加載大量圖片會(huì)影響網(wǎng)頁(yè)加載速度，我們可以利用 可視區(qū)域 來(lái)實(shí)現(xiàn)圖片的懶加載。為什么要懶加載圖片：

大量的圖片請(qǐng)求會(huì)增加服務(wù)器的壓力。

使用 CDN 加速來(lái)緩解服務(wù)器壓力例如 七牛云。

加速用戶的網(wǎng)頁(yè)加載速度，當(dāng)圖片數(shù)量巨大需要占用請(qǐng)求資源和顯示速度。

HTTP1 文件限制會(huì)對(duì)同一個(gè)域名限制文件請(qǐng)求數(shù) 可以通過(guò) 影子域名 來(lái)繞過(guò)這個(gè)限制。

利用 可視區(qū)域 當(dāng)移動(dòng)到某個(gè) 標(biāo)志元素 時(shí)再進(jìn)行更多數(shù)據(jù)和圖片的加載。

利用占位圖片來(lái)防止頁(yè)面塌陷。

用戶訪問(wèn)頁(yè)面有時(shí)候只是粗略的一撇。

利用 可視區(qū)域 加載部分?jǐn)?shù)據(jù)圖片節(jié)省網(wǎng)絡(luò)流量。

結(jié)構(gòu)
樣式
.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;

        // 獲取圖片地址并清除數(shù)據(jù)記錄 
        const src = box.getAttribute("data-src");
        box.removeAttribute("data-src");

        // 插入圖片 DOM
        box.innerHTML = ``;

        // 去除占位 class
        box.className = box.className.replace("img-placeholder", "")
    })
}
一起成長(zhǎng) 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

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

本文原稿來(lái)自 PushMeTop

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102572.html

相關(guān)文章

  • 每日 30 秒 ? 終極等于

    簡(jiǎn)介 字符串、數(shù)字、數(shù)組、對(duì)象、時(shí)間、類型、等于 科學(xué)家發(fā)現(xiàn)，人腦中會(huì)分泌多種能讓人感到快樂(lè)、安全和成就感的物質(zhì)，這些物質(zhì)統(tǒng)稱為快樂(lè)素。通常情況下，快樂(lè)素的釋放水平很低，維持我們心情平靜。只有當(dāng)我們完成了預(yù)設(shè)目標(biāo)，作為獎(jiǎng)勵(lì)，大腦才會(huì)增加快樂(lè)素的分泌，讓人感受到滿足和成功的喜悅。 這是之前看到的一篇關(guān)于 大腦獎(jiǎng)勵(lì)機(jī)制 文章的一段話，為了要獲得獎(jiǎng)勵(lì)我們需要有預(yù)設(shè)目標(biāo)，而是每日 30 秒系列也是為了幫助...

    lakeside 評(píng)論0 收藏0

  • 每日 30 秒 ? 判斷是否為頁(yè)面底部

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

    callmewhy 評(píng)論0 收藏0

  • 巧用 Img / JavaScript 采集頁(yè)面數(shù)據(jù)

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

    sunny5541 評(píng)論0 收藏0

  • 巧用 Img / JavaScript 采集頁(yè)面數(shù)據(jù)

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

    WrBug 評(píng)論0 收藏0

  • 每日 30 秒 ? JSON對(duì)象數(shù)組轉(zhuǎn)換 CSV 表格數(shù)據(jù)

    簡(jiǎn)介 數(shù)組、對(duì)象、CSV、表格、工具 我們?cè)?每日 30 秒之 arrayToCSV 中一起學(xué)習(xí)了將數(shù)組數(shù)據(jù)轉(zhuǎn)化為 csv 表格數(shù)據(jù)并導(dǎo)出，那如果是對(duì)象數(shù)組怎么辦呢？小腦袋瓜轉(zhuǎn)得快的同學(xué)肯定會(huì)說(shuō)：使用 Array.prototype.map 把需要導(dǎo)出的字段先遍歷取出，再使用 arrayToCSV 將其導(dǎo)出為 CSV 數(shù)據(jù)表格。 可是你有沒(méi)有想過(guò)如果一個(gè)對(duì)象數(shù)組數(shù)據(jù)非常之大時(shí)，使用 Array.p...

    Ajian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<