Mục lục nội dung

Giới thiệu

Trong môi trường web hiện đại, các ứng dụng đơn trang (SPA) ngày càng trở nên phức tạp, đòi hỏi người phát triển phải nắm vững các kỹ thuật đo lường và tối ưu hiệu năng. Một SPA chậm chạp không chỉ làm giảm trải nghiệm người dùng mà còn ảnh hưởng tiêu cực đến SEO và tỷ lệ chuyển đổi. Bài viết này sẽ cung cấp một quy trình chi tiết để đo thời gian thực thi, phát hiện bottleneck và áp dụng các biện pháp tối ưu, dựa trên Performance API của trình duyệt, Chrome DevTools và các công cụ profiling trong Node.js.

1. Hiểu rõ các khái niệm cơ bản về hiệu năng JavaScript

1.1 Thời gian tải (Load Time) vs Thời gian tương tác (Time to Interactive)

Load Time đo thời gian từ khi người dùng yêu cầu trang cho tới khi toàn bộ tài nguyên HTML, CSS, JavaScript được tải về. Time to Interactive (TTI) đo thời gian mà trang đã sẵn sàng cho người dùng tương tác mà không gặp lag. Đối với SPA, TTI thường là chỉ số quan trọng hơn vì phần lớn logic JavaScript được tải sau khi HTML đã sẵn sàng.

1.2 Các loại bottleneck thường gặp

  • Long Tasks: Các tác vụ JavaScript kéo dài hơn 50ms, gây block UI thread.
  • Render Blocking Resources: CSS hoặc JavaScript ngăn cản việc render nội dung.
  • Excessive Repaints/Reflows: Thay đổi DOM hoặc CSS gây ra việc tính toán lại layout quá thường xuyên.
  • Memory Leaks: Giữ tham chiếu không cần thiết, làm tăng mức sử dụng bộ nhớ và gây giảm tốc độ GC.

2. Đo lường hiệu năng trên trình duyệt bằng Performance API

2.1 Thu thập các chỉ số quan trọng

Performance API cung cấp các phương thức như performance.now(), performance.mark(), performance.measure() và performance.getEntriesByType(). Dưới đây là một ví dụ minh họa cách đo thời gian thực thi một hàm tính toán nặng:

<script>
function heavyComputation(){
    const start = performance.now();
    // Giả lập tính toán nặng
    let sum = 0;
    for(let i = 0; i < 1e7; i++){
        sum += Math.sqrt(i);
    }
    const end = performance.now();
    console.log('Heavy computation took: ' + (end - start).toFixed(2) + ' ms');
}

heavyComputation();
</script>

Kết quả sẽ xuất ra thời gian thực thi tính bằng milisecond, giúp chúng ta xác định xem hàm có trở thành Long Task hay không.

2.2 Đánh dấu các giai đoạn quan trọng trong SPA

Trong một SPA, chúng ta thường có các giai đoạn như initial load, route change và data fetch. Sử dụng performance.mark() và performance.measure() để đánh dấu và đo lường:

<script>
// Khi bắt đầu tải route mới
performance.mark('route-start');

// Giả lập fetch dữ liệu
fetch('/api/data')
    .then(res => res.json())
    .then(data => {
        // Khi dữ liệu đã sẵn sàng và UI được cập nhật
        performance.mark('route-end');
        performance.measure('route-duration', 'route-start', 'route-end');
        const measures = performance.getEntriesByName('route-duration');
        console.log('Route change took: ' + measures[0].duration.toFixed(2) + ' ms');
    });
</script>

Nhờ đó, chúng ta có thể theo dõi thời gian chuyển đổi route và tối ưu các phần gây chậm.

2.3 Ghi lại các Long Tasks tự động

Trình duyệt hiện đại hỗ trợ PerformanceObserver để lắng nghe các sự kiện longtask. Đoạn code dưới đây sẽ ghi lại mọi tác vụ kéo dài hơn 50ms và gửi dữ liệu lên server để phân tích:

<script>
if('PerformanceObserver' in window){
    const observer = new PerformanceObserver((list) => {
        list.getEntries().forEach(entry => {
            console.warn('Long Task detected:', entry);
            // Gửi dữ liệu tới backend (ví dụ: /api/perf)
            navigator.sendBeacon('/api/perf', JSON.stringify({
                name: entry.name,
                startTime: entry.startTime,
                duration: entry.duration
            }));
        });
    });
    observer.observe({entryTypes: ['longtask']});
}
</script>

Việc thu thập dữ liệu này giúp chúng ta xây dựng một dashboard thời gian thực để theo dõi hiệu năng trên môi trường production.

3. Phân tích và tối ưu bằng Chrome DevTools

3.1 Sử dụng Performance Tab để phát hiện Long Tasks

Chrome DevTools cung cấp một giao diện trực quan để xem timeline, các call stack và các sự kiện GC. Khi ghi lại một phiên, chúng ta nên chú ý tới các màu đỏ (Long Tasks) và các dấu hiệu của layout thrashing (repaints/reflows).

3.2 Kiểm tra Memory Leak với Heap Snapshot

Memory tab cho phép chụp snapshot của heap và so sánh giữa các thời điểm. Nếu số lượng đối tượng tăng dần mà không giảm, có khả năng xảy ra leak. Đ với SPA, các listeners không được gỡ bỏ hoặc các closure giữ tham chiếu tới DOM cũ thường là nguyên nhân.

3.3 Tối ưu code bằng Source Maps và Call Stack Filtering

Khi dự án sử dụng bundler (Webpack, Vite), việc bật source maps giúp chúng ta xem được nguyên gốc file TypeScript/ES6 trong DevTools, giảm thời gian tìm lỗi.

4. Profiling Node.js cho phần backend của SPA

4.1 Sử dụng built‑in profiler

Node.js cung cấp flag --inspect và --inspect-brk để mở cổng debugging. Kết hợp với Chrome DevTools, chúng ta có thể profile server-side JavaScript.

$ node --inspect-brk server.js

Sau khi khởi động, mở Chrome và truy cập chrome://inspect, chọn “Open dedicated DevTools for Node”. Trong tab “Performance”, chúng ta có thể ghi lại các hàm xử lý request và xác định những phần nào tiêu tốn CPU nhiều.

4.2 Sử dụng 3rd‑party profiler: clinic.js

Tool clinic cung cấp ba module: doctor, bubbleprof và flamegraph. Dưới đây là cách chạy doctor để phát hiện bottleneck:

$ npx clinic doctor -- node server.js

Kết quả sẽ tạo một file HTML chứa flamegraph và các đề xuất tối ưu.

4.3 Tối ưu GC và heap size

Đối với ứng dụng có lượng request lớn, việc điều chỉnh --max-old-space-size và --optimize-for-size có thể giảm thời gian pause do GC. Ví dụ:

$ node --max-old-space-size=4096 server.js

Giá trị này phụ thuộc vào dung lượng RAM của server và kích thước dữ liệu trong bộ nhớ.

5. Các kỹ thuật tối ưu thực tiễn cho SPA

5.1 Lazy loading và code splitting

Sử dụng dynamic import() để tải module khi cần. Ví dụ với React:

<script>
import React, { Suspense, lazy } from 'react';
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App(){
    return (
        <Suspense fallback=<div>Loading...</div>>
            <HeavyComponent />
        </Suspense>
    );
}
</script>

Điều này giảm kích thước bundle ban đầu, cải thiện TTI.

5.2 Debounce & Throttle cho các event handler

Đối với các sự kiện như scroll, resize, hoặc input, việc gọi hàm quá thường xuyên sẽ tạo ra nhiều Long Tasks. Dưới đây là một hàm debounce thuần JavaScript:

<script>
function debounce(fn, delay){
    let timer;
    return function(...args){
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

window.addEventListener('resize', debounce(() => {
    console.log('Resize event processed');
}, 200));
</script>

Với throttle, chúng ta giới hạn số lần thực thi trong một khoảng thời gian nhất định.

5.3 Memoization cho các hàm tính toán thuần

Memoization lưu kết quả của hàm dựa trên đối số, tránh tính toán lại. Dưới đây là một ví dụ đơn giản:

<script>
function memoize(fn){
    const cache = new Map();
    return function(...args){
        const key = JSON.stringify(args);
        if(cache.has(key)) return cache.get(key);
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

const fib = memoize(function(n){
    if(n <= 1) return n;
    return fib(n-1) + fib(n-2);
});

console.log(fib(40)); // Tính nhanh hơn rất nhiều so với phiên bản không memoize
</script>

6. Quy trình CI/CD tích hợp kiểm tra hiệu năng

Để đảm bảo hiệu năng không bị suy giảm khi triển khai, chúng ta có thể thêm các bước đo lường vào pipeline CI. Ví dụ, sử dụng lighthouse-ci để chạy các audit tự động:

$ npm install -g @lhci/cli
$ lhci collect --url=https://staging.example.com --numberOfRuns=5
$ lhci upload

Kết quả sẽ được lưu trữ trên server Lighthouse CI, cho phép so sánh với baseline và thiết lập threshold (ví dụ: TTI không vượt quá 3s).

Kết luận

Việc đo lường và tối ưu hiệu năng JavaScript trong SPA không chỉ là một công việc kỹ thuật mà còn là một quy trình liên tục, từ việc thu thập dữ liệu thực tế bằng Performance API, phân tích chi tiết bằng Chrome DevTools, tới việc áp dụng các kỹ thuật tối ưu như lazy loading, debounce và memoization. Khi các bước này được tích hợp vào pipeline CI/CD, chúng ta có thể duy trì một trải nghiệm người dùng mượt mà ngay cả khi dự án mở rộng quy mô.

Để nâng cao kiến thức nền tảng và tiến tới các dự án thực tế, Tham khảo khóa học "JavaScript từ cơ bản đến nâng cao" tại đây.