JavaScript 页面卡顿检测与优化实战：从监控到内存管理

function detectLag() {
    let startTime = performance.now();
    setTimeout(() => {
        let endTime = performance.now();
        let lagTime = endTime - startTime;
        if (lagTime > 100) {  // 假设卡顿阈值为100毫秒
            console.log(`页面卡顿检测: 延迟 ${lagTime}ms`);
        }
    }, 100);  // 定时器设定为100毫秒
}

// 建议定时调用这个函数进行监测
setInterval(detectLag, 1000);  // 每秒检测一次

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) {  // 理想状态下，每帧持续时间应为16.7毫秒或更少
            console.log(`页面卡顿检测: 平均帧持续时间 ${averageFrameDuration}ms`);
        }

        lastFrameTime = currentFrameTime;
        requestAnimationFrame(checkFrameTime);
    }

    requestAnimationFrame(checkFrameTime);
}

// 启动监测
detectLagUsingRAF();

// 不推荐的方式
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
    // 处理每个元素
});

// 推荐的方式
for (let i = 0; i < arr.length; i++) {
    // 处理每个元素
}

// 不推荐的方式
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 进行懒加载
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('后台任务结果:', 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');

// 处理数据后，及时清理
largeArray = null;

const weakMap = new WeakMap();

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

// 当 obj 被垃圾回收时，weakMap 中的引用也会被自动清理
obj = null;