#perfqualitys: Kỹ thuật công cụ cho chuyên gia hiệu suất
Hiểu rõ các công cụ phát triển là chìa khoá để trở thành chuyên gia về hiệu suất. Colt đã khám phá 3 yếu tố chính của hiệu suất: mạng, điện toán và kết xuất, cung cấp chuyến tham quan các vấn đề chính trong từng lĩnh vực cũng như 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 Công cụ cho nhà phát triển mà bạn biết và yêu thích từ máy tính để bàn.
- Vòng lặp lặp lại dành cho công việc cải thiện hiệu suất là: thu thập dữ liệu, thu thập 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 tô màu; thì việc đó vô cùng 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.
#perfresourcess: 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 trang web. Con số này là một tỷ lệ lớn, nhưng điều đó cũng có nghĩa là bất kỳ cải tiến nào 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 đã giới thiệu 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 của mình để giúp giảm tối đa tải mạng.
- Chrome M27 có trình lập lịch biểu tài nguyên mới và được cải tiến.
- Chrome M28 giúp các trang web SPDY (thậm chí) nhanh hơn.
- Chúng tôi đã cải tiến lại bộ nhớ đệm đơn giản của Chrome.
- SPDY / HTTP/2.0 giúp cải thiện tốc độ truyền tải đáng kể. Có sẵn các mô-đun SPDY hoàn thiện dành cho nginx, Apache và Jetty (chỉ có ba mô-đun).
- QUIC là một giao thức thử nghiệm mới được xây dựng dựa trên UDP; mới chỉ mới ra mắt. Tuy nhiên, mọi người đều có thể giành chiến thắng.
#perfresourcess: bố cục và kết xuất 60 khung hình/giây
Việc đạ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à là yếu tố quan trọng đối với sự thành công của quá trình này. Trong buổi trò chuyện này, Nat và Tom đã thảo luận về quy trình kết xuất hình ảnh của Chrome, một số nguyên nhân phổ biến gây ra tình trạng khung hình bị rớt và cách phòng tránh.
- Một khung hình có độ dài 16 mili giây. Thư viện này chứa JavaScript, tính toán kiểu, tô màu và tổng hợp.
- Tranh vẽ cực kỳ tốn kém. Bão sơn là nơi bạn lặp lại những công việc sơn 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ử được 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ể loại bỏ khả năng phản hồi; hãy tránh sử dụng chúng nếu có thể. Trong trường hợp bạn không thể giữ cho chúng ở mức tối thiểu.
#perfresourcess: Ứng dụng web tức thì dành cho thiết bị di động
Đường dẫn hiển thị quan trọng là 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. Việc ưu tiên phân phối nội dung trên đường dẫn kết xuất quan trọng là điều cần thiết, đặc biệt đối với người dùng trên các thiết bị bị hạn chế về mạng như điện thoại thông minh sử dụng mạng di động. Brian đã chia sẻ về quá trình nhóm Google xác định và ưu tiên các tài sản cho trang web PageSpeed Insights, cụ thể là giảm thời gian tải từ 20 giây xuống chỉ còn hơn 1 giây!
- Loại bỏ CSS và JavaScript chặn hiển thị.
- Ưu tiên nội dung hiển thị.
- Tải tập lệnh không đồng bộ.
- Kết xuất khung hiển thị ban đầu phía máy chủ dưới dạng HTML và tăng cường 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 cùng dòng trong CSS chặn hiển thị sẽ 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.