Ứng dụng web tiến bộ cho phép nhà phát triển xây dựng một lớp ứng dụng mới mang lại trải nghiệm người dùng đáng tin cậy và hiệu suất cao. Tuy nhiên, để đảm bảo ứng dụng web đang đạt được cá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. Quy cách tiến trình hiệu suất của W3C xác định giao diện như vậy cho 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. Điều này mở ra một số trường hợp sử dụng thú vị:
- phân tích hiệu suất tuỳ chỉnh và ngoại tuyến
- công cụ phân tích và trực quan hoá hiệu suất của bên thứ ba
- tính năng đánh giá hiệu suất được tích hợp vào IDE và các công cụ khác dành cho nhà phát triển
Quyền truy cập vào loại dữ liệu thời gian này đã có trong hầu hết các trình duyệt lớn để định thời gian điều hướng, định thời gian tài nguyên và định thời gian người dùng. Phần bổ sung mới nhất là giao diện trình quan sát hiệu suất. Về cơ bản, đây là giao diện truyền trực tuyến để thu thập thông tin về thời gian ở cấp thấp một cách không đồng bộ, vì thông tin này do trình duyệt thu thập. Giao diện mới này mang lại một số lợi thế quan trọng so với các phương thức truy cập dòng thời gian trước đây:
- Hiện tại, các ứng dụng phải định kỳ thăm dò ý kiến và so sánh các phép đo được lưu trữ, điều này gây tốn kém. Giao diện này cung cấp cho chúng một lệnh gọi lại. (Nói cách khác, bạn không cần thăm dò ý kiến). Do đó, các ứng dụng sử dụng API này có thể phản hồi nhanh hơn và hiệu quả hơn.
- Phương thức này không tuân theo giới hạn bộ đệm (theo mặc định, hầu hết các bộ đệm được đặt thành 150 mục) và tránh các điều kiện tương tranh giữa các trình tiêu thụ khác nhau có thể muốn sửa đổi bộ đệ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 thông báo trong thời gian rảnh để tránh cạnh tranh với công việc kết xuất 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 tính năng 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 ta tạo bản sao của đối tượng
PerformanceObservermới và truyền hàm trình xử lý sự kiện vào 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 ta được gọi mỗi khi một tập dữ liệu đo lường mới sẵn sàng được 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 xác định ở đây là một 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 trường hợp thực tế, dữ liệu này có thể được lưu trữ trên đám mây để phân tích sau này hoặc được chuyển 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 thời gian mà chúng ta quan tâm thông qua phương thức
observe()và gọi phương thứcmark()để đánh dấu thời điểm chúng ta đăng ký, chúng ta sẽ coi đây là thời điểm bắt đầu của khoảng thời gian tính giờ. - Chúng ta xác định trình xử lý lượt nhấp cho một nút được xác định trong phần nội dung trang. Trình xử lý lượt nhấp này gọi phương thức
measure()để ghi lại dữ liệu về thời gian 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, thì mỗi khi chúng ta nhấp vào nút này, hệ thống sẽ đo lường hiệu suất. Và vì chúng ta đã đăng ký để quan sát các phép đo như vậy, nên các phép đo này được chuyển tiếp đến trình xử lý sự kiện của chúng ta một cách không đồng bộ mà không cần thăm dò tiến trình. Trình xử lý này sẽ hiển thị các phép đo trên bảng điều khiển khi chúng xảy ra:
Giá trị start thể hiện 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 có loại measure không có thời gian bắt đầu cố hữu; các sự kiện này đại diện cho các phép đo thời gian được thực hiện so với sự kiện mark gần đây nhất. Do đó, các giá trị thời lượng thấy ở đây đại diện cho thời gian đã trôi qua giữa lệnh gọi đến mark() (dùng làm đ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à có khả năng thu thập dữ liệu hiệu suất được lọc, có độ phân giải cao, theo thời gian thực mà không cần thăm dò ý kiến. Điều này sẽ mở ra cơ hội sử dụng công cụ hiệu suất hiệu quả hơn cho các ứng dụng web.