#perf Gradles: Các kỹ thuật công cụ dành cho chuyên gia hiệu suất
Hiểu rõ cách sử dụng các công cụ phát triển là chìa khoá để trở thành chuyên gia hiệu suất. Colt duyệt qua ba trụ cột hiệu suất: mạng, tính toán và kết xuất, cung cấp hướng dẫn về vấn đề chính trong từng lĩnh vực cũng như các công cụ sẵn có để tìm và loại bỏ chúng.
- Giờ đây, bạn có thể lập hồ sơ Chrome trên Android bằng Công cụ cho nhà phát triển mà bạn biết và yêu thích trên máy tính.
- Vòng lặp lặp lại cho công việc hiệu suất là: thu thập dữ liệu, đạt được thông tin chi tiết, thực hiện hành động.
- Hãy ưu tiên những thành phần trên đường dẫn hiển thị quan trọng cho các trang của bạn.
- Tránh sơn vì việc này rất tốn kém.
- Tránh tình trạng nhồi nhét bộ nhớ và thực thi mã trong những thời điểm quan trọng trong ứng dụng của bạn.
#hiệu suất: Tối ưu hoá hiệu suất mạng
Mạng và độ trễ thường chiếm 70% tổng thời gian tải trang của một trang web. Mặc dù chiếm tỷ lệ lớn, nhưng điều này cũng có nghĩa là bất kỳ cải tiến nào mà bạn thực hiện sẽ mang lại những lợi ích to lớn cho người dùng của bạn. Trong cuộc trò chuyện này, Ilya đã trình bày về những thay đổi gần đây trong Chrome giúp cải thiện thời gian tải, cũng như một số thay đổi bạn có thể thực hiện trong môi trường để giúp giảm thiểu tải mạng ở mức tối thiểu.
- Chrome M27 có trình lập lịch biểu tài nguyên mới và cải tiến.
- Chrome M28 đã giúp các trang web SPDY (thậm chí) nhanh hơn.
- Bộ nhớ đệm đơn giản của Chrome đã được cải tiến toàn diện.
- SPDY / HTTP/2.0 cung cấp những cải tiến lớn về tốc độ truyền. Có các mô-đun SPDY hoàn thiện dành cho nginx, Apache và Jetty (chỉ ba mô-đun).
- QUIC là giao thức mới và thử nghiệm được xây dựng dựa trên UDP. Giao thức này chỉ mới bắt đầu nhưng người dùng sẽ thắng.
#perffts: bố cục và kết xuất 60 khung hình/giây
Đạt tốc độ 60 khung hình/giây trong các dự án của bạn có liên quan trực tiếp đến mức độ tương tác của người dùng và đóng vai trò rất quan trọng đối với sự thành công của dự án. Trong buổi trò chuyện này, Nat và Tom đã nói về quy trình kết xuất của Chrome, một số nguyên nhân phổ biến làm giảm khung hình và cách tránh chúng.
- Một khung hình dài 16 mili giây. Công cụ này chứa JavaScript, tính toán kiểu, vẽ và kết hợp.
- Sơn extremely tốn kém. Paint Storm là nơi bạn phải lặp lại những công việc sơn mài tốn kém một cách không cần thiết.
- Lớp được dùng để lưu các phần tử đã vẽ vào bộ nhớ đệm.
- Trình xử lý đầu vào (trình nghe thao tác chạm và con lăn chuột) có thể loại bỏ khả năng phản hồi; hãy tránh chúng nếu có thể. Khi đó, bạn không thể duy trì ở mức tối thiểu.
#perf hoàn thành: Ứng dụng web tức thì dành cho thiết bị di động
Đường dẫn hiển thị quan trọng đề cập đến mọi thứ (JavaScript, HTML, CSS, hình ảnh) mà trình duyệt yêu cầu trước khi có thể bắt đầu vẽ trang. Bạn cần phải ưu tiên phân phối các thành phần trên đường dẫn hiển thị quan trọng, đặc biệt là đối với những người dùng sử dụng thiết bị bị hạn chế về mạng, chẳng hạn như điện thoại thông minh sử dụng mạng di động. Bryan đã chia sẻ về cách đội ngũ tại Google thực hiện quá trình xác định và sắp xếp mức độ ưu tiên cho các tài sản cho trang web PageSpeed Insights, từ thời gian tải 20 giây xuống chỉ còn hơn 1 giây!
- Loại bỏ JavaScript và CSS chặn hiển thị.
- Ưu tiên nội dung hiển thị.
- Tải tập lệnh không đồng bộ.
- Hiển thị chế độ xem ban đầu phía máy chủ dưới dạng HTML và bổ sung bằng JavaScript.
- Giảm thiểu CSS chặn hiển thị; chỉ phân phối các kiểu cần thiết để hiển thị khung nhìn ban đầu, sau đó phân phối các kiểu còn lại.
- Các URI dữ liệu lớn nằm trong CSS chặn hiển thị có hại cho hiệu suất hiển thị; chúng đang chặn các tài nguyên mà URL hình ảnh không chặn.