Ứng dụng web tiến bộ cho phép nhà phát triển xây dựng một loại ứng dụng mới mang lại trải nghiệm đáng tin cậy cho người dùng và có hiệu suất cao. Tuy nhiên, để đảm bảo một ứng dụng web đạt được mục tiêu hiệu suất mong muốn, nhà phát triển cần có quyền truy cập vào dữ liệu đo lường hiệu suất có độ phân giải cao. Bản đặc tả về tiến trình hiệu suất W3C xác định một giao diện như vậy cho các trình duyệt để cung cấp quyền truy cập có lập trình vào dữ liệu thời gian cấp thấp. Việc này mở ra cơ hội cho một số trường hợp sử dụng thú vị:
- phân tích hiệu suất ngoại tuyến và tuỳ chỉnh
- công cụ trực quan và phân tích hiệu suất của bên thứ ba
- đánh giá hiệu suất được tích hợp vào các môi trường phát triển tích hợp (IDE) và các công cụ khác cho nhà phát triển
Quyền truy cập vào loại dữ liệu thời gian này đã có sẵn trong hầu hết các trình duyệt chính về thời gian điều hướng, thời gian tài nguyên và thời gian của người dùng. Tính năng bổ sung mới nhất là giao diện trình quan sát hiệu suất, về cơ bản là giao diện truyền trực tuyến để thu thập không đồng bộ thông tin thời gian cấp thấp, khi thông tin này được trình duyệt thu thập. Giao diện mới này cung cấp một số ưu điểm quan trọng so với các phương thức trước đây để truy cập tiến trình:
- Hiện nay, các ứng dụng phải định kỳ thăm dò ý kiến và thay đổi các kết quả đo lường đã lưu trữ, việc này rất tốn kém. Giao diện này cung cấp một lệnh gọi lại cho họ. (Nói cách khác, bạn không cần phải thăm dò ý kiến). Do đó, các ứng dụng dùng API này có thể phản hồi nhanh và hiệu quả hơn.
- Chiến lược này không phải tuân theo giới hạn vùng đệm (hầu hết các vùng đệm được đặt thành 150 mục theo mặc định) và tránh tình trạng tương tranh giữa những người dùng khác nhau có thể muốn sửa đổi vùng đệm.
- Thông báo của trình quan sát hiệu suất được phân phối không đồng bộ và trình duyệt có thể gửi đi trong thời gian rảnh để tránh cạnh tranh với công việc hiển thị quan trọng.
Kể từ Chrome 52, giao diện trình quan sát hiệu suất sẽ được bật theo mặc định. Hãy cùng xem cách sử dụng công cụ này.
<html>
<head>
<script>
var observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
// Display each reported measurement on console
if (console) {
console.log("Name: " + entry.name +
", Type: " + entry.entryType +
", Start: " + entry.startTime +
", Duration: " + entry.duration + "\n");
}
})
});
observer.observe({entryTypes: ['resource', 'mark', 'measure']});
performance.mark('registered-observer');
function clicked(elem) {
performance.measure('button clicked');
}
</script>
</head>
<body>
<button onclick="clicked(this)">Measure</button>
</body>
</html>
Trang đơn giản này bắt đầu bằng một thẻ tập lệnh xác định một số mã JavaScript:
- Chúng tôi sẽ tạo thực thể cho một đối tượng
PerformanceObservermới và truyền một hàm xử lý sự kiện đến hàm khởi tạo đối tượng. Hàm khởi tạo sẽ khởi tạo đối tượng để trình xử lý của chúng tôi được gọi mỗi khi một nhóm dữ liệu đo lường mới sẵn sàng để xử lý (với dữ liệu đo lường được truyền dưới dạng danh sách đối tượng). Trình xử lý được định nghĩa ở đây là hàm ẩn danh chỉ hiển thị dữ liệu đo lường được định dạng trên bảng điều khiển. Trong tình huống thực tế, dữ liệu này có thể được lưu trữ trên đám mây để phân tích tiếp theo hoặc được đưa vào một công cụ trực quan hoá tương tác. - Chúng ta đăng ký các loại sự kiện định giờ mà chúng ta quan tâm thông qua phương thức
observe(), rồi gọi phương thứcmark()để đánh dấu thời điểm đăng ký mà chúng ta sẽ coi là điểm bắt đầu của các khoảng thời gian. - Chúng ta định nghĩa một trình xử lý lượt nhấp cho một nút được xác định trong phần nội dung của trang. Trình xử lý lượt nhấp này gọi phương thức
measure()để thu thập dữ liệu về thời gian cho biết thời điểm người dùng nhấp vào nút.
Trong phần nội dung của trang, chúng ta xác định một nút, chỉ định trình xử lý lượt nhấp cho
sự kiện onclick và chúng ta đã sẵn sàng.
Bây giờ, nếu chúng ta tải trang và mở bảng điều khiển Công cụ của Chrome cho nhà phát triển để xem Bảng điều khiển JavaScript, mỗi lần chúng ta nhấp vào nút, một phép đo hiệu suất sẽ được thực hiện. Và vì chúng tôi đã đăng ký quan sát các phép đo lường như vậy, nên chúng được chuyển tiếp đến trình xử lý sự kiện của chúng tôi, một cách không đồng bộ mà không cần phải thăm dò tiến trình. Các phép đo này hiển thị trên bảng điều khiển khi chúng xảy ra:
Giá trị start biểu thị dấu thời gian bắt đầu cho các sự kiện thuộc loại mark (trong đó ứng dụng này chỉ có một sự kiện). Các sự kiện thuộc loại measure không có thời gian bắt đầu vốn có; chúng biểu thị các phép đo thời gian được thực hiện
liên quan đến sự kiện mark cuối cùng. Do đó, giá trị thời lượng nhìn thấy ở đây đại diện cho khoảng thời gian đã trôi qua giữa các lần gọi đến mark(), đóng vai trò là điểm bắt đầu của khoảng thời gian chung và nhiều lệnh gọi tiếp theo đến measure().
Như bạn có thể thấy, API này khá đơn giản và cung cấp khả năng thu thập dữ liệu hiệu suất theo thời gian thực, có độ phân giải cao được lọc mà không cần thăm dò ý kiến, từ đó mở ra cơ hội cho các công cụ hiệu suất hiệu quả hơn cho các ứng dụng web.