#perfmatters: Kỹ thuật sử dụng công cụ cho ninja hiệu suất
Việc nắm rõ các công cụ phát triển là yếu tố then chốt để trở thành chuyên gia về hiệu suất. Colt đã trình bày về ba trụ cột của hiệu suất: mạng, điện toán và kết xuất, đồng thời giới thiệu về vấn đề chính trong từng lĩnh vực và các công cụ có sẵn để tìm và loại bỏ các vấn đề đó.
- Giờ đây, bạn có thể lập hồ sơ Chrome trên Android bằng DevTools 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, hành động.
- Ưu tiên các thành phần nằm trên đường dẫn kết xuất quan trọng cho các trang của bạn.
- Tránh sơn; chi phí rất tốn kém.
- Tránh tình trạng thay đổi bộ nhớ và thực thi mã trong những thời điểm quan trọng trong ứng dụng.
#perfmatters: 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. Đó là một tỷ lệ phần trăm lớn, nhưng cũng có nghĩa là mọi điểm cải thiện mà bạn thực hiện ở đó sẽ mang lại lợi ích to lớn cho người dùng. Trong bài nói chuyện này, Ilya đã trình bày các 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 của mình để giúp giảm 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 hoạt động nhanh hơn (ngay cả).
- Bộ nhớ đệm đơn giản của Chrome đã được cải tiến.
- SPDY / HTTP/2.0 mang lại những cải tiến đáng kể về tốc độ truyền. Có các mô-đun SPDY đã phát triển hoàn thiện cho nginx, Apache và Jetty (chỉ kể tên ba mô-đun).
- QUIC là một giao thức mới và thử nghiệm được xây dựng dựa trên UDP; đây là giai đoạn đầu nhưng dù sao đi nữa, người dùng sẽ là người chiến thắng.
#perfmatters: Bố cục và kết xuất 60 khung hình/giây
Việc đạt được tốc độ 60 khung hình/giây trong dự án có liên quan trực tiếp đến mức độ tương tác của người dùng và là yếu tố quan trọng để dự án thành công. 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 thường gặp gây ra hiện tượng bị rớt khung hình và cách tránh các nguyên nhân đó.
- Một khung hình có thời lượng 16 mili giây. Tệp này chứa JavaScript, tính toán kiểu, vẽ và kết hợp.
- Chi phí sơn rất tốn kém. Paint Storm là khi bạn lặp lại công việc sơn đắt tiền một cách không cần thiết.
- Các 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 cảm ứng và con lăn chuột) có thể làm giảm khả năng phản hồi; hãy tránh sử dụng các trình xử lý này nếu có thể. Trường hợp bạn không thể giảm thiểu số lượng quảng cáo.
#perfmatters: Ứ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 nội dung (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 phải ưu tiên phân phối các thành phần trên đường dẫn kết xuất quan trọng, đặc biệt là đối với người dùng trên các thiết bị bị hạn chế về mạng, chẳng hạn như điện thoại thông minh trên mạng di động. Bryan đã chia sẻ cách nhóm của Google đã trải qua quá trình xác định và ưu tiên các thành phần cho trang web PageSpeed Insights, giúp thời gian tải trang web này giảm từ 20 giây xuống chỉ 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ị thành phần hiển thị 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 kết xuất; 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 phần còn lại.
- URI dữ liệu lớn được nội tuyến trong CSS chặn kết xuất có hại cho hiệu suất kết xuất; chúng đang chặn các tài nguyên mà URL hình ảnh không chặn.