Các khung web như Angular, React, Vue và Svelte giúp bạn dễ dàng viết và duy trì các ứng dụng web phức tạp ở quy mô lớn.
Tuy nhiên, các khung này giới thiệu một lớp trừu tượng trên mô hình ứng dụng của trình duyệt. Trên thực tế, mã do các nhà phát triển viết bằng cách sử dụng những lớp trừu tượng này thường được chuyển đổi thành mã không đọc được, được rút gọn và được đóng gói. Do đó, việc khai thác tối đa sức mạnh của Công cụ cho nhà phát triển để gỡ lỗi và lập hồ sơ cho các ứng dụng này có thể là một thách thức đối với nhà phát triển.
Ví dụ: khi phân tích một ứng dụng Angular bằng bảng Hiệu suất trong Công cụ cho nhà phát triển, bạn sẽ thấy như sau:
Với thông tin được trình bày theo cách này, bạn khó có thể biết được những điểm tắc nghẽn về hiệu suất trong cơ sở mã của mình. Sau tất cả, công cụ này thiếu ngữ cảnh của các cấu trúc khung và phần lớn thông tin được hiển thị là mã được rút gọn. Cũng khó phân biệt giữa hoạt động liên quan trực tiếp đến mã bạn đã viết, nội bộ khung và mã của bên thứ ba khác có thể đang chạy trên cùng một trang.
Động lực chung của các tác giả khung và trừu tượng là triển khai các tiện ích DevTools của riêng họ, trình bày dữ liệu lập hồ sơ theo các khái niệm về khung. Những công cụ này rất hữu ích khi gỡ lỗi và lập hồ sơ cho các ứng dụng được tạo bằng một khung cụ thể. Tuy nhiên, thường thì bạn sẽ cần tương quan dữ liệu khung trong trình phân tích tài nguyên của khung với thông tin thời gian chạy của trình duyệt trong bảng Hiệu suất của DevTools. Việc trình bày riêng biệt hai nguồn dữ liệu này trong các công cụ độc lập khiến bạn khó phát hiện và khắc phục các điểm tắc nghẽn, đặc biệt là khi ứng dụng trở nên phức tạp hơn. Sau đây là ví dụ về một bản trực quan hoá hồ sơ trong Angular DevTools Profiler:
Trong một thế giới lý tưởng, nhà phát triển sẽ có một chế độ xem nơi hai nguồn dữ liệu được hiển thị cùng nhau trong cùng một bối cảnh được liên kết với cùng một dòng thời gian.
Vì lý do này, chúng tôi đã hợp tác với nhóm Angular để đưa dữ liệu thời gian chạy Angular vào bảng điều khiển Hiệu suất bằng cách sử dụng API Khả năng mở rộng của bảng điều khiển Hiệu suất. Trong bài đăng này, chúng ta sẽ tìm hiểu về những việc mà API này có thể làm và cách API này được dùng trong khung Angular để đạt được mục tiêu này. Việc triển khai này có thể đóng vai trò là ví dụ cho các khung và lớp trừu tượng khác muốn cải thiện trải nghiệm của nhà phát triển bằng cách đo lường các công cụ của riêng họ và giúp các nhà phát triển sử dụng Công cụ cho nhà phát triển Chrome.
API khả năng mở rộng của bảng điều khiển Hiệu suất là gì?
API này cho phép bạn thêm các mục nhập thời gian của riêng mình vào dấu vết của bảng điều khiển Hiệu suất, trong cùng một dòng thời gian với phần còn lại của dữ liệu trình duyệt. Có 2 cơ chế cho phép bạn thực hiện việc này:
- User Timing API
- API
console.timeStamp
User Timing API
Bạn có thể sử dụng performance.mark và performance.measure để thêm các mục như sau:
// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();
// ... later in your code
performance.measure("Component rendering", {
start: renderStart,
detail: {
devtools: {
dataType: "track-entry",
track: "Components",
color: "secondary",
properties: [
["Render reason", "Props changed"],
["Priority", "low"]
],
}
}
});
Thao tác này sẽ thêm bản nhạc Components (Thành phần) vào dòng thời gian của bạn cùng với thông tin đo lường:
API này cho phép bạn thêm các mục vào vùng đệm Dòng thời gian hiệu suất, đồng thời hiển thị các mục đó trong giao diện người dùng của bảng điều khiển Hiệu suất của DevTools.
Tìm hiểu thêm về API này và đối tượng devtools trong tài liệu.
API console.timeStamp
API này là một lựa chọn thay thế gọn nhẹ cho User Timing API. Sử dụng ví dụ tương tự như trước đây, bạn có thể có:
// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();
// ... later in your code
console.timeStamp(
"Component rendering",
/* start time */ renderStart,
/* end time (current time) */ undefined,
/* track name */ "Components",
/* track group name */ undefined,
/* color */ "secondary"
);
API này cung cấp một phương thức hiệu suất cao để đo lường các ứng dụng: không giống như giải pháp thay thế User Timing API, API này không tạo dữ liệu được lưu vào bộ nhớ đệm. API này chỉ thêm dữ liệu vào bảng điều khiển **Hiệu suất** trong DevTools. Điều này có nghĩa là khi DevTools không ghi lại dấu vết, các lệnh gọi đến API sẽ không hoạt động (không làm gì cả), giúp API này nhanh hơn đáng kể và phù hợp với các đường dẫn nóng nhạy cảm về hiệu suất. Việc chọn sử dụng đối số vị trí thay vì một đối tượng chứa tất cả các tham số tuỳ chỉnh cũng nhằm mục đích giữ cho API càng đơn giản càng tốt.
Tìm hiểu thêm về cách sử dụng console.timeStamp để mở rộng bảng Hiệu suất và các thông số bạn có thể truyền trong tài liệu.
Cách Angular tích hợp API có khả năng mở rộng của Công cụ cho nhà phát triển
Chúng ta sẽ xem cách nhóm Angular sử dụng API có khả năng mở rộng để tích hợp với Công cụ của Chrome cho nhà phát triển.
Tránh hao tổn hiệu suất bằng console.timestamp
Hoạt động đo lường của Angular bằng API khả năng mở rộng của bảng điều khiển Hiệu suất có sẵn kể từ phiên bản 20. Mức độ chi tiết mong muốn đối với dữ liệu hiệu suất trong DevTools đòi hỏi một API nhanh chóng, vì vậy, yêu cầu kéo (60217) đã thêm tính năng đo lường chọn sử dụng API console.timeStamp. Điều này giúp ngăn hiệu suất thời gian chạy của ứng dụng bị ảnh hưởng bởi chi phí tiềm ẩn của API lập hồ sơ.
Dữ liệu được đo lường
Để cung cấp hình ảnh rõ ràng về mã Angular đang chạy cũng như lý do mã đó chạy ngay từ đầu, nhiều phần của quy trình khởi động và kết xuất được đo lường, bao gồm:
- Khởi động ứng dụng và thành phần.
- Tạo và cập nhật các thành phần.
- Thực thi trình nghe sự kiện và các lệnh gọi vòng đời.
- Nhiều tính năng khác (ví dụ: tạo thành phần động và trì hoãn việc kết xuất khối).
Mã hoá màu
Mã màu được dùng để báo hiệu cho nhà phát triển về danh mục mà một mục đo lường nhất định thuộc vào. Ví dụ: màu sắc dùng cho các mục đánh dấu quá trình thực thi mã TypeScript do nhà phát triển tạo khác với màu sắc dùng cho mã do trình biên dịch Angular tạo.
Trong ảnh chụp màn hình sau đây, bạn có thể thấy cách điều này dẫn đến các điểm truy cập (chẳng hạn như phát hiện thay đổi và xử lý thành phần) có màu xanh dương, mã được tạo có màu tím và mã TypeScript (chẳng hạn như trình nghe sự kiện và các lệnh gọi) được hiển thị bằng màu xanh lục.
Xin lưu ý rằng đối số màu được truyền đến API không phải là giá trị màu CSS mà là một mã thông báo ngữ nghĩa được liên kết với một màu phù hợp với giao diện người dùng của Công cụ cho nhà phát triển. Các giá trị có thể là primary, secondary và tertiary, cùng với các biến thể -dark và -light tương ứng cũng như màu error.
Bản nhạc
Tại thời điểm viết bài, tất cả dữ liệu thời gian chạy Angular đều được thêm vào cùng một dấu vết (được gắn nhãn "🅰️ Angular"). Tuy nhiên, bạn có thể thêm nhiều dấu vết vào dấu vết và thậm chí nhóm các dấu vết. Ví dụ: giả sử bạn gọi API console.timeStamp như sau:
console.timeStamp("Component 1", componentStart1, componentEnd1, "Components", "Client", "primary");
console.timeStamp("Component 2", componentStart2, componentEnd2, "Components", "Client", "primary");
console.timeStamp("Hook 1", hookStart, hookEnd, "Hooks", "Client", "primary");
console.timeStamp("Fetch data base", fetchStart, fetchEnd, "Server", "primary");
Bạn sẽ thấy dữ liệu được sắp xếp theo các bản nhạc theo cách sau:
Ví dụ: bạn có thể sử dụng các dấu vết riêng biệt khi có hoạt động không đồng bộ, nhiều công việc chạy song song hoặc chỉ các nhóm hoạt động đủ khác biệt để tách ra ở các khu vực khác nhau của giao diện người dùng.
Tại sao điều này lại quan trọng đối với nhà phát triển Angular
Mục tiêu của việc tích hợp trực tiếp này là mang đến trải nghiệm phân tích hiệu suất toàn diện và trực quan hơn. Bằng cách hiển thị dữ liệu hiệu suất nội bộ của Angular ngay trong bảng điều khiển **Hiệu suất**, nhà phát triển sẽ nhận được:
- Tăng cường khả năng hiển thị: Giúp các sự kiện hiệu suất dành riêng cho Angular (chẳng hạn như kết xuất thành phần, chu kỳ phát hiện thay đổi, v.v.) xuất hiện trong tiến trình rộng hơn của trình duyệt.
- Hiểu rõ hơn: Với thông tin phong phú về ngữ cảnh liên quan đến các quy trình nội bộ của Angular, giúp bạn xác định các điểm tắc nghẽn hiệu suất một cách hiệu quả hơn.
Bật tính năng tích hợp
Việc sử dụng API có khả năng mở rộng hiện đã chính thức có trong các bản dựng phát triển kể từ Angular phiên bản 20. Để bật tính năng này, bạn phải chạy tiện ích chung `ng.enableProfiling()` trong ứng dụng hoặc trong bảng điều khiển Công cụ cho nhà phát triển. Xem thêm thông tin về việc tích hợp trong [Tài liệu về Angular](https://angular.dev/best-practices/profiling-with-chrome-devtools)
Những điểm khác cần cân nhắc
Một số yếu tố quan trọng cần cân nhắc.
Bản đồ nguồn và mã đã giảm thiểu:
Bản đồ nguồn là một công cụ được sử dụng rộng rãi nhằm thu hẹp khoảng cách giữa mã được gói / giảm thiểu và mã tương ứng đã được tạo, vì vậy...
Bản đồ nguồn có giải quyết được vấn đề về mã đã giảm thiểu trong các ứng dụng đi kèm không?
Mặc dù bản đồ nguồn thực sự hữu ích, nhưng chúng không hoàn toàn loại bỏ được những thách thức khi lập hồ sơ cho các ứng dụng web phức tạp được rút gọn. Bản đồ nguồn cho phép Công cụ cho nhà phát triển liên kết mã đã giảm thiểu với mã nguồn ban đầu, giúp gỡ lỗi dễ dàng hơn. Tuy nhiên, việc chỉ dựa vào bản đồ nguồn để phân tích hiệu suất vẫn có thể gặp phải một số hạn chế. Ví dụ: chỉ với bản đồ nguồn, việc chọn cách tách riêng trực quan các thành phần bên trong của khung và mã đã tạo là một việc phức tạp. Mặt khác, API khả năng mở rộng mang đến sự linh hoạt để đạt được điểm khác biệt này và trình bày theo cách mà nhà phát triển cho là thuận tiện nhất.
Tiện ích Chrome DevTools:
Tiện ích Chrome sử dụng DevTools API là một công cụ được sử dụng rộng rãi để mở rộng công cụ dành cho nhà phát triển.
Có cần thiết phải có các trình phân tích tài nguyên chuyên dụng (ví dụ: tiện ích Công cụ của Chrome cho nhà phát triển) hay không, hoặc có nên hạn chế sử dụng các trình phân tích tài nguyên này khi API này đã có sẵn?
Không, API này không nhằm mục đích thay thế hoặc ngăn chặn việc phát triển các trình phân tích tài nguyên chuyên dụng như tiện ích Chrome DevTools. Những công cụ này vẫn có thể cung cấp các tính năng, hình ảnh trực quan và quy trình làm việc chuyên biệt phù hợp với nhu cầu cụ thể. API có khả năng mở rộng của bảng điều khiển Hiệu suất nhằm mục đích tạo ra một quy trình tích hợp liền mạch dữ liệu tuỳ chỉnh với các hình ảnh trực quan của trình duyệt trong bảng điều khiển Hiệu suất.
Con đường phía trước
Triển vọng của API có khả năng mở rộng.
Làm việc với nhiều khung và lớp trừu tượng hơn
Chúng tôi rất vui khi các khung và lớp trừu tượng khác áp dụng API này để cải thiện trải nghiệm lập hồ sơ của nhà phát triển. Ví dụ: React đã triển khai một bản thử nghiệm về việc áp dụng API cho khung của họ. Hoạt động đo lường này hiển thị dữ liệu kết xuất thành phần máy chủ và máy khách cũng như dữ liệu API lập lịch của React. Tìm hiểu thêm về tính năng này và cách bật tính năng này trên trang React.
Bản phát hành công khai
Một trong những mục tiêu của API này là làm việc với các khung và nhà cung cấp dịch vụ trừu tượng nói chung để áp dụng và bật tính năng đo lường trong các bản dựng phát hành công khai. Điều này có thể ảnh hưởng lớn đến hiệu suất của các ứng dụng được phát triển bằng những lớp trừu tượng này, vì nhà phát triển có thể lập hồ sơ ứng dụng khi người dùng trải nghiệm ứng dụng. Chúng tôi tin rằng API console.timeStamp cho phép đạt được điều này, nhờ tốc độ và mức hao tổn thấp. Tuy nhiên, hiện tại, các khung vẫn đang thử nghiệm API này và tìm hiểu xem loại đo lường nào có khả năng mở rộng và hữu ích hơn cho nhà phát triển.