前端开发中的JavaScript性能优化技巧#

1
// 不推荐
2
var globalVar = 'some value';
3

4
// 推荐：使用模块化或立即执行函数
5
(function() {
6
    var localVar = 'some value';
7
    // 业务逻辑
8
})();

1
// 使用const和let替代var
2
const config = { api: 'https://api.example.com' };
3
let currentUser = null;
4

5
// 使用箭头函数减少函数创建开销
6
const processData = data => data.map(item => item.value);
7

8
// 使用模板字符串
9
const message = `Hello, ${userName}!`;

1
// 缓存数组长度
2
const items = [...];
3
for (let i = 0, len = items.length; i < len; i++) {
4
    // 处理items[i]
5
}
6

7
// 使用更高效的数组方法
8
const results = items
9
    .filter(item => item.active)
10
    .map(item => item.data);

1
// 及时清理事件监听器
2
const button = document.getElementById('myButton');
3
const handler = () => console.log('clicked');
4

5
button.addEventListener('click', handler);
6
// 组件销毁时清理
7
button.removeEventListener('click', handler);
8

9
// 清理定时器
10
const timerId = setInterval(callback, 1000);
11
clearInterval(timerId);

1
// 使用WeakMap避免强引用
2
const metadata = new WeakMap();
3
metadata.set(element, { created: Date.now() });

1
// 并行执行异步操作
2
async function fetchAllData() {
3
    const [users, posts, comments] = await Promise.all([
4
        fetchUsers(),
5
        fetchPosts(),
6
        fetchComments()
7
    ]);
8
    return { users, posts, comments };
9
}
10

11
// 错误处理
12
async function safeApiCall() {
13
    try {
14
        const data = await apiCall();
15
        return data;
16
    } catch (error) {
17
        console.error('API调用失败:', error);
18
        return null;
19
    }
20
}

1
// 防抖函数
2
function debounce(func, wait) {
3
    let timeout;
4
    return function executedFunction(...args) {
5
        const later = () => {
6
            clearTimeout(timeout);
7
            func(...args);
8
        };
9
        clearTimeout(timeout);
10
        timeout = setTimeout(later, wait);
11
    };
12
}
13

14
// 节流函数
15
function throttle(func, limit) {
16
    let inThrottle;
17
    return function() {
18
        const args = arguments;
19
        const context = this;
20
        if (!inThrottle) {
21
            func.apply(context, args);
22
            inThrottle = true;
23
            setTimeout(() => inThrottle = false, limit);
24
        }
25
    }
26
}

1
// 使用DocumentFragment减少重排
2
const fragment = document.createDocumentFragment();
3
items.forEach(item => {
4
    const element = document.createElement('div');
5
    element.textContent = item.text;
6
    fragment.appendChild(element);
7
});
8
container.appendChild(fragment);

1
class VirtualScroll {
2
    constructor(container, items, itemHeight) {
3
        this.container = container;
4
        this.items = items;
5
        this.itemHeight = itemHeight;
6
        this.visibleStart = 0;
7
        this.visibleEnd = 0;
8
        this.init();
9
    }
10

11
    init() {
12
        this.container.addEventListener('scroll', this.handleScroll.bind(this));
13
        this.update();
14
    }
15

16
    handleScroll() {
17
        const scrollTop = this.container.scrollTop;
18
        this.visibleStart = Math.floor(scrollTop / this.itemHeight);
19
        this.visibleEnd = this.visibleStart + Math.ceil(this.container.clientHeight / this.itemHeight);
20
        this.update();
21
    }
22

23
    update() {
24
        // 只渲染可见区域的元素
25
        const visibleItems = this.items.slice(this.visibleStart, this.visibleEnd);
26
        this.render(visibleItems);
27
    }
28
}

1
class ApiCache {
2
    constructor() {
3
        this.cache = new Map();
4
        this.pendingRequests = new Map();
5
    }
6

7
    async get(url) {
8
        // 检查缓存
9
        if (this.cache.has(url)) {
10
            return this.cache.get(url);
11
        }
12

13
        // 检查是否有正在进行的请求
14
        if (this.pendingRequests.has(url)) {
15
            return this.pendingRequests.get(url);
16
        }
17

18
        // 发起新请求
19
        const request = fetch(url).then(response => response.json());
20
        this.pendingRequests.set(url, request);
21

22
        try {
23
            const data = await request;
24
            this.cache.set(url, data);
25
            return data;
26
        } finally {
27
            this.pendingRequests.delete(url);
28
        }
29
    }
30
}

1
// 使用Performance API监控性能
2
function measurePerformance(name, fn) {
3
    performance.mark(`${name}-start`);
4
    const result = fn();
5
    performance.mark(`${name}-end`);
6
    performance.measure(name, `${name}-start`, `${name}-end`);
7

8
    const measure = performance.getEntriesByName(name)[0];
9
    console.log(`${name} 耗时: ${measure.duration}ms`);
10

11
    return result;
12
}
13

14
// 监控首屏加载时间
15
window.addEventListener('load', () => {
16
    const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
17
    console.log(`页面加载时间: ${loadTime}ms`);
18
});