function detectLag() {
    let startTime = performance.now();
    setTimeout(() => {
        let endTime = performance.now();
        let lagTime = endTime - startTime;
        if (lagTime > 100) {  // 假設(shè)卡頓閾值為100毫秒
            console.log(`頁(yè)面卡頓檢測(cè): 延遲 ${lagTime}ms`);
        }
    }, 100);  // 定時(shí)器設(shè)定為100毫秒
}

// 建議定時(shí)調(diào)用這個(gè)函數(shù)進(jìn)行監(jiān)測(cè)
setInterval(detectLag, 1000);  // 每秒檢測(cè)一次

let frameTimes = [];

function detectLagUsingRAF() {
    let lastFrameTime = performance.now();

    function checkFrameTime() {
        let currentFrameTime = performance.now();
        let frameDuration = currentFrameTime - lastFrameTime;
        frameTimes.push(frameDuration);

        if (frameTimes.length > 60) {  // 保留最近60幀的記錄
            frameTimes.shift();
        }

        let averageFrameDuration = frameTimes.reduce((a, b) => a + b) / frameTimes.length;

        if (averageFrameDuration > 16.7) {  // 理想狀態(tài)下，每幀持續(xù)時(shí)間應(yīng)為16.7毫秒或更少
            console.log(`頁(yè)面卡頓檢測(cè): 平均幀持續(xù)時(shí)間 ${averageFrameDuration}ms`);
        }

        lastFrameTime = currentFrameTime;
        requestAnimationFrame(checkFrameTime);
    }

    requestAnimationFrame(checkFrameTime);
}

// 啟動(dòng)監(jiān)測(cè)
detectLagUsingRAF();

// 不推薦的方式
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
    // 處理每個(gè)元素
});

// 推薦的方式
for (let i = 0; i < arr.length; i++) {
    // 處理每個(gè)元素
}

// 不推薦的方式
const div = document.createElement('div');
div.style.color = 'red';
div.style.backgroundColor = 'blue';
document.body.appendChild(div);

// 推薦的方式
const div = document.createElement('div');
div.style.cssText = 'color: red; background-color: blue;';
document.body.appendChild(div);

// 使用 Intersection Observer 進(jìn)行懶加載
const lazyImages = document.querySelectorAll('img.lazy');

const lazyLoad = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
};

const observer = new IntersectionObserver(lazyLoad);
lazyImages.forEach(img => {
    observer.observe(img);
});

// 主線程
const worker = new Worker('worker.js');

worker.postMessage('start');

worker.onmessage = function (event) {
    console.log('后臺(tái)任務(wù)結(jié)果:', event.data);
};

// worker.js
self.onmessage = function (event) {
    if (event.data === 'start') {
        let result = 0;
        for (let i = 0; i < 1e9; i++) {
            result += i;
        }
        self.postMessage(result);
    }
};

let largeArray = new Array(1e6).fill('data');

// 處理數(shù)據(jù)后，及時(shí)清理
largeArray = null;

const weakMap = new WeakMap();

let obj = {};
weakMap.set(obj, 'some value');

// 當(dāng) obj 被垃圾回收時(shí)，weakMap 中的引用也會(huì)被自動(dòng)清理
obj = null;