Điều hướng và thời gian tài nguyên

Các mốc thời gian hiệu năng

PerformanceTiming API, một API JavaScript dùng để đo hiệu năng tải của trang được yêu cầu, đã bị loại bỏ nhưng vẫn được hỗ trợ trong mọi trình duyệt. Nó đã được thay thế bằng API PerformanceNavigationTiming.

Performance timing API cung cấp các thời điểm chỉ đọc, tính bằng mili giây (ms), mô tả từng mốc trong quá trình tải trang đã được đạt tới vào thời điểm nào. Như được hiển thị trong hình bên dưới, quá trình điều hướng đi qua navigationStart, unloadEventStart, unloadEventEnd, redirectStart, redirectEnd, fetchStart, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, responseStart, responseEnd, domLoading, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, domComplete, loadEventStart và loadEventEnd.

Từ các chỉ số ở trên, cộng thêm một chút toán học, chúng ta có thể tính nhiều chỉ số quan trọng như thời gian đến byte đầu tiên, thời gian tải trang, tra cứu DNS và việc kết nối có an toàn hay không.

Để giúp đo thời gian cần thiết để hoàn tất tất cả các bước, Performance Timing API cung cấp các phép đo chỉ đọc về navigation timings. Để xem và lấy thời gian của ứng dụng, ta nhập:

let time = window.performance.timing;

Sau đó chúng ta có thể dùng kết quả để đo ứng dụng hoạt động tốt đến mức nào.

Thứ tự là:

Tính toán thời gian

Chúng ta có thể dùng các giá trị này để đo những khoảng thời gian cụ thể:

const dns = time.domainLookupEnd - time.domainLookupStart;
const tcp = time.connectEnd - time.connectStart;
const tls = time.requestStart - time.secureConnectionStart;

Thời gian đến byte đầu tiên

Time to First Byte là khoảng thời gian giữa navigationStart (bắt đầu điều hướng) và responseStart (khi byte đầu tiên của dữ liệu phản hồi được nhận) có sẵn trong API performanceTiming:

const ttfb = time.responseStart - time.navigationStart;

Thời gian tải trang

Page load time là khoảng thời gian giữa navigationStart và thời điểm bắt đầu gửi sự kiện load cho tài liệu hiện tại. Chúng chỉ có sẵn trong API performanceTiming.

let pageloadTime = time.loadEventStart - time.navigationStart;

Thời gian tra cứu DNS

Thời gian tra cứu DNS là khoảng thời gian giữa domainLookupStart và domainLookupEnd. Cả hai đều có trong cả API performanceTiming và performanceNavigationTiming.

const dns = time.domainLookupEnd - time.domainLookupStart;

TCP

Thời gian bắt tay TCP là khoảng thời gian giữa lúc bắt đầu và kết thúc kết nối:

const tcp = time.connectEnd - time.connectStart;

Thương lượng TLS

secureConnectionStart sẽ là undefined nếu không khả dụng, 0 nếu không dùng HTTPS, hoặc là một dấu thời gian nếu khả dụng và được dùng. Nói cách khác, nếu một kết nối an toàn được dùng thì secureConnectionStart sẽ là truthy, và thời gian giữa secureConnectionStart và requestStart sẽ lớn hơn 0.

const tls = time.requestStart - time.secureConnectionStart;

API mục nhập hiệu năng

Các mốc thời gian hiệu năng tổng quát ở trên đã bị loại bỏ nhưng vẫn được hỗ trợ đầy đủ. Hiện giờ chúng ta có API mục nhập hiệu năng, API này cung cấp khả năng đánh dấu và đo thời gian dọc theo quá trình điều hướng và tải tài nguyên. Bạn cũng có thể tạo các dấu:

performance.getEntriesByType("navigation").forEach((navigation) => {
  console.dir(navigation);
});

performance.getEntriesByType("resource").forEach((resource) => {
  console.dir(resource);
});

performance.getEntriesByType("mark").forEach((mark) => {
  console.dir(mark);
});

performance.getEntriesByType("measure").forEach((measure) => {
  console.dir(measure);
});

performance.getEntriesByType("paint").forEach((paint) => {
  console.dir(paint);
});

performance.getEntriesByType("frame").forEach((frame) => {
  console.dir(frame);
});

Trong các trình duyệt hỗ trợ, bạn có thể dùng performance.getEntriesByType('paint') để truy vấn phép đo cho first-paint và first-contentful-paint. Chúng ta dùng performance.getEntriesByType('navigation') và performance.getEntriesByType('resource') để truy vấn lần lượt navigation timings và resource timings.

Định thời điều hướng

Khi người dùng yêu cầu một website hoặc ứng dụng, để đổ nội dung vào trình duyệt user agent đi qua một chuỗi bước, bao gồm tra cứu DNS, TCP handshake và thương lượng TLS, trước khi user agent thực hiện yêu cầu thực sự và các máy chủ trả về tài sản được yêu cầu. Sau đó, trình duyệt phân tích nội dung nhận được, xây dựng DOM, CSSOM, accessibility tree và render tree, cuối cùng hiển thị trang. Khi user agent ngừng phân tích tài liệu, nó đặt trạng thái sẵn sàng của tài liệu thành interactive. Nếu có các script trì hoãn cần được phân tích, nó sẽ làm vậy, rồi phát DOMContentLoaded, sau đó trạng thái sẵn sàng được đặt thành complete. Lúc này Document có thể xử lý các tác vụ sau tải, và sau đó tài liệu được đánh dấu là đã tải hoàn toàn.

const navigationTimings = performance.getEntriesByType("navigation");

performance.getEntriesByType('navigation') trả về một mảng các đối tượng PerformanceEntry cho navigation type.

Có thể rút ra rất nhiều từ các mốc thời gian này. Trong hình trên, thông qua thuộc tính name ta thấy tệp đang được đo là chính tài liệu này. Ở phần còn lại của giải thích, chúng ta dùng biến sau:

const timing = performance.getEntriesByType("navigation")[0];

Giao thức

Chúng ta có thể kiểm tra giao thức được dùng bằng cách truy vấn:

const protocol = timing.nextHopProtocol;

Nó trả về giao thức mạng được dùng để lấy tài nguyên: trong trường hợp này là h2 cho http/2.

Nén

Để lấy phần trăm tiết kiệm từ nén, chúng ta chia transferSize cho decodedBodySize, rồi lấy 100% trừ đi kết quả đó. Ta thấy mức tiết kiệm hơn 74%.

const compressionSavings = 1 - timing.transferSize / timing.decodedBodySize;

Ta cũng có thể dùng

const compressionSavings = 1 - timing.encodedBodySize / timing.decodedBodySize;

nhưng dùng transferSize sẽ bao gồm các byte overhead.

Để so sánh, chúng ta có thể xem tab mạng và thấy rằng đã truyền 22.04KB cho một tệp chưa nén có kích thước 87.24KB.

Nếu tính toán với các con số này, ta được kết quả giống nhau: 1 - (22.04 / 87.24) = 0.747. Định thời điều hướng cho chúng ta một cách để kiểm tra tự động kích thước truyền và phần tiết kiệm băng thông.

Lưu ý đây chỉ là kích thước của riêng tài liệu này: chỉ cho tài nguyên này, chứ không phải cho toàn bộ các tài nguyên cộng lại. Tuy nhiên, thời lượng, sự kiện tải và các mốc liên quan đến DOM là về toàn bộ điều hướng, không phải chỉ riêng tài sản này. Các ứng dụng web phía client có thể trông nhanh hơn trang này với kích thước truyền dưới 10000 và decoded body size dưới 30000, nhưng điều đó không có nghĩa là JavaScript, CSS hoặc media không làm tăng kích thước không cần thiết. Việc kiểm tra tỷ lệ nén là quan trọng nhưng cũng cần kiểm tra thời lượng và khoảng thời gian giữa lúc sự kiện DOMContentLoaded kết thúc và khi DOM hoàn tất, vì việc chạy JavaScript trên main thread trong thời gian dài có thể dẫn đến giao diện người dùng không phản hồi.

Thời gian yêu cầu

API không cung cấp mọi phép đo mà bạn có thể muốn. Ví dụ, yêu cầu mất bao lâu? Chúng ta có thể dùng các phép đo sẵn có để tìm câu trả lời.

Để đo thời gian phản hồi, trừ thời điểm bắt đầu yêu cầu khỏi thời điểm bắt đầu phản hồi. Request start là khoảnh khắc ngay trước khi user agent bắt đầu yêu cầu tài nguyên từ máy chủ, từ các application cache phù hợp hoặc từ tài nguyên cục bộ. Response start là thời điểm ngay sau khi bộ phân tích HTTP của user agent nhận byte đầu tiên của phản hồi từ các application cache phù hợp, từ tài nguyên cục bộ hoặc từ máy chủ, xảy ra sau khi yêu cầu được nhận và xử lý.

const request = timing.responseStart - timing.requestStart;

Thời lượng sự kiện tải

Bằng cách lấy dấu thời gian ngay trước khi sự kiện load của tài liệu hiện tại được phát và trừ đi thời điểm sự kiện load của tài liệu hiện tại hoàn tất, bạn có thể đo thời lượng của sự kiện load.

const load = timing.loadEventEnd - timing.loadEventStart;

Sự kiện DOMContentLoaded

Thời lượng sự kiện DOMContentLoaded được đo bằng cách trừ giá trị thời gian ngay trước khi user agent phát sự kiện DOMContentLoaded khỏi giá trị thời gian ngay sau khi sự kiện kết thúc. Giữ mức này ở 50ms hoặc thấp hơn giúp bảo đảm giao diện người dùng phản hồi tốt.

const DOMContentLoaded =
  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;

Thời lượng

Chúng ta được cung cấp giá trị thời lượng. Thời lượng là hiệu giữa thuộc tính PerformanceNavigationTiming.loadEventEnd và PerformanceEntry.startTime.

Giao diện PerformanceNavigationTiming cũng cung cấp thông tin về loại điều hướng bạn đang đo, trả về navigate, reload hoặc back_forward.

Định thời tài nguyên

Trong khi navigation timing dùng để đo hiệu năng của trang chính, thường là tệp HTML mà từ đó mọi tài sản khác được yêu cầu, resource timing đo thời gian cho các tài nguyên riêng lẻ, tức các tài sản được trang chính gọi tới và mọi tài sản mà các tài nguyên đó yêu cầu. Nhiều phép đo tương tự nhau: có tra cứu DNS, bắt tay TCP và bắt đầu kết nối an toàn, mỗi thứ diễn ra một lần cho mỗi miền.

Điều chính cần xem xét cho từng tài nguyên.

Xem thêm

• PerformanceNavigationTiming
• PerformanceResourceTiming,
• PerformanceMark
• PerformanceMeasure
• PerformancePaintTiming