Lập hồ sơ một hành trình của khách hàng trước khi thay đổi mã
Chọn một luồng và tương tác quan trọng, chẳng hạn mở điều hướng, lọc kết quả, hoặc gửi biểu mẫu. Ghi lại trong bảng Performance của Chrome DevTools từ trạng thái trình duyệt sạch. Lặp lại hành động và chụp một lần chạy với CPU bị điều tốc cũng như một lần chạy trên máy phát triển; các trace trên desktop có thể che giấu công việc gây gián đoạn trên điện thoại có hiệu năng thấp hơn.
Dùng trace để kiểm tra một giả thuyết hẹp, không phải để đổ lỗi cho một thành phần từ báo cáo bundle. Trong biểu đồ ngọn lửa Main (Main flame chart), các thanh rộng hơn tốn thời gian hơn và các thanh chồng cho thấy stack gọi. Một tam giác đỏ trên một Task chỉ ra long task tiềm năng; chọn nó và theo liên kết mã khởi tạo. Lưu trace trước và sau để thấy thay đổi có ý nghĩa.
Bắt đầu ghi trước hành động và dừng sau khi kết quả hiển thị.
Giữ nguyên route, trạng thái tài khoản và chuỗi hành động.
Gán mỗi chi phí hàng đầu cho đội hoặc nhà cung cấp có thể thay đổi nó.
Đọc trace như một hàng đợi công việc
Long task là ngưỡng để điều tra, không phải chẩn đoán đầy đủ. Đặc tả Long Tasks của W3C báo các task kéo dài 50 milliseconds trở lên. Tìm sâu trong một task để thấy đánh giá JavaScript, bộ xử lý sự kiện, tính toán style, layout, hoặc paint. Call stack chỉ ra nơi bắt đầu; thời gian cho biết vấn đề là mã, rendering, hay một iframe bên thứ ba.
Ưu tiên chi phí lặp lại trong một tương tác có giá trị. Một handler ngắn vẫn có thể cảm thấy chậm khi nó kích hoạt layout hoặc phải chờ phía sau công việc trước đó. Trace là đo trong phòng thí nghiệm, nên xác nhận bản sửa trên các thiết bị đại diện và, nếu có thể, với dữ liệu đo lường thực tế tôn trọng quyền riêng tư.
Việc phân tích mã khi khởi động cần cách khắc phục khác với trình xử lý chạy sau thao tác chạm.
Tìm các mẫu ghi-style và đọc-layout lặp lại trước khi tái cấu trúc.
Đính kèm trace, kịch bản, và các chi phí hàng đầu vào công việc.
Gửi ít mã hơn vào thời điểm quan trọng
Lập danh mục các script theo route và mục đích. Xóa các package không dùng, trùng lặp, thí nghiệm đã kết thúc, và mã cho các tính năng không còn. Sau đó tách các tính năng theo route hoặc ít dùng để chúng tải khi cần thay vì trên đường dẫn ban đầu. Tải động có thể giảm công việc khởi động, nhưng nó có thể tạo độ trễ hiển thị khi người dùng cần tính năng ngay lập tức.
Hỏi liệu một component có cần toàn bộ framework phía client hay không, một tiện ích có lặp lại khả năng sẵn có hay không, và HTML tĩnh cộng với một phần cải tiến nhỏ có thể đủ không. Kiểm tra trạng thái fallback của module trì hoãn. Trang nên khéo léo hoãn một khả năng tùy chọn hơn là hiển thị điều khiển chết.
Ghi lại script nào được phép trên một route và vì sao.
Cân nhắc cho trình soạn thảo tùy chọn, bản đồ, trình phát, hoặc giao diện báo cáo.
Kiểm tra xác thực, khả năng tiếp cận, thanh toán, và hoàn thành biểu mẫu; tìm đánh giá có trình độ khi điều khiển bị ảnh hưởng.
Chia nhỏ công việc để trình duyệt có thể phản hồi
Việc chia hàm thành những hàm nhỏ hơn không tạo ra các task trình duyệt riêng biệt nếu chúng vẫn chạy đồng bộ. Với một vòng lặp dài, hãy xử lý theo lô, cập nhật ngay trạng thái mà người dùng có thể thấy, rồi nhường quyền thực thi (yield) trước khi tiếp tục. Điều đó cho phép trình duyệt xử lý thao tác nhập và hiển thị giữa các lô.
Khi được hỗ trợ, scheduler.yield() nhường quyền thực thi để luồng chính xử lý công việc ưu tiên khác, rồi tiếp tục công việc; hãy phát hiện tính năng này và dùng phương án dự phòng cho các trình duyệt không hỗ trợ. Không nhường sau mỗi thao tác tí hon: nó có chi phí và có thể tăng tổng thời gian hoàn thành. Chọn ranh giới dựa trên đo lường, giữ khả năng hủy, và ngăn kết quả cũ ghi đè trạng thái mới.
Hiển thị xác nhận hoặc tiến trình trước các công việc theo sau không hiển thị.
Nhường trước khi công việc đo được trở nên dài, thay vì một lần cho mỗi mục.
Hướng dẫn hiện tại của web.dev không khuyến nghị chiến lược mới dựa trên isInputPending().
Chuyển tính toán, không phải giao diện, sang worker
Web Worker chạy một script trên luồng nền tách biệt khỏi luồng thực thi chính. Nó phù hợp cho phân tích nặng, biến đổi dữ liệu, lập chỉ mục tìm kiếm và các tính toán khác không cần truy cập trực tiếp giao diện. Gửi một đầu vào xác định, trả về một kết quả xác định, và giữ rendering cùng thay đổi trạng thái nhìn thấy trên luồng chính.
Workers không phải lúc nào cũng phù hợp. Chúng không thể thao tác DOM trực tiếp hoặc dùng Window, và cơ chế truyền tin chung sao chép dữ liệu. Việc tạo worker, di chuyển dữ liệu và điều phối lỗi có thể vượt chi phí một phép tính nhỏ. Đo toàn bộ tương tác, kết thúc worker không cần thiết, và thiết kế fallback nếu công việc worker thất bại.
Bắt đầu với phép tính mà đầu vào và đầu ra có thể tuần tự hóa và kiểm thử.
Loại bỏ kết quả tạo cho bộ lọc, route, hoặc hành động cũ hơn.
Truyền đạt tiến trình có ý nghĩa qua giao diện chuẩn.
Quản trị JavaScript bên thứ ba như một phụ thuộc sản xuất
Analytics, quảng cáo, thí nghiệm, nhúng xã hội, trình phát video, và widget hỗ trợ có thể thêm request, đánh giá JavaScript, iframe và phụ thuộc. Một script nhà cung cấp có thể cần thiết, nhưng nó nằm ngoài quyền kiểm soát trực tiếp của đội ứng dụng và có thể ảnh hưởng hiệu năng, quyền riêng tư, bảo mật và liên tục. Lập danh mục mục đích, route, điều kiện tải, người phê duyệt, yêu cầu đồng ý và người chịu trách nhiệm gỡ bỏ.
Ở nơi điều kiện và hợp đồng cho phép, so sánh một trang đại diện có và không có một origin bên thứ ba. Công cụ hiệu năng có thể phơi bày đánh giá tốn kém, payload và attribution long-task. Giữ tích hợp nhẹ hoặc trì hoãn chỉ khi giá trị được ghi chép của nó biện minh cho chi phí đã đo. Xác nhận nội dung cốt lõi và công việc giao dịch chính khi một phụ thuộc tùy chọn chậm hoặc không có mặt.
Tải một tag chỉ trên route và điều kiện cần nó.
Bao gồm thay đổi tag-manager trong đánh giá hiệu năng, quyền riêng tư, bảo mật và rollback.
Ghi tài liệu và kiểm tra cách tắt một tích hợp không quan trọng.
Biến khả năng phản hồi thành rào chắn phát hành
Chuyển trace chiến thắng thành một kiểm tra hồi quy nhỏ cho hành trình quan trọng. Định nghĩa các tương tác được bao phủ, thiết bị hoặc giới hạn CPU, phản hồi mong đợi, và người đánh giá. Ghép nó với đánh giá bundle và danh mục bên thứ ba để một package hoặc tag mới không âm thầm tái giới thiệu công việc trên luồng chính.
Status Is UP sử dụng bằng chứng này cho tối ưu chủ động và khắc phục an toàn, không để thay thế giám sát sẵn có trực tiếp. Trước một thay đổi rủi ro cao, chuẩn bị rollback và xác minh luồng quan trọng sau khi phát hành. Kết quả thay đổi theo thiết bị, mạng, trình duyệt, nội dung và trạng thái tài khoản; coi ngưỡng là hàng rào bảo vệ, không phải đảm bảo.
Yêu cầu trace trước và sau cho điều hướng chia sẻ, checkout, tìm kiếm, hoặc các bundle lớn.
Biết cờ tính năng (feature flag), cài đặt tag, hoặc phiên bản triển khai khôi phục hành vi đã biết tốt.
Lập hồ sơ lại sau các phát hành lớn, thay đổi nhà cung cấp, hoặc sự dịch chuyển cơ cấu thiết bị.