Bối cảnh: Trong khi đúng là chi phí HTTP quan trọng hơn phân tích cú pháp JS và CSS, bỏ qua tác động của phân tích cú pháp trên hiệu suất trình duyệt (ngay cả khi bạn có ít hơn một meg JS) là một cách hay gặp rắc rối.
YSlow, Fiddler và Firebug không phải là công cụ tốt nhất để giám sát tốc độ phân tích cú pháp. Trừ khi chúng đã được cập nhật rất gần đây, chúng không tách rời lượng thời gian cần thiết để tìm nạp JS qua HTTP hoặc tải từ bộ nhớ cache so với lượng thời gian đã phân tích cú pháp tải trọng JS thực tế.
Tốc độ phân tích cú pháp hơi khó đo nhưng chúng tôi đã truy lục số liệu này một số lần đối với các dự án tôi đã thực hiện và tác động trên tải trang là đáng kể ngay cả với ~ 500k JS. Rõ ràng là các trình duyệt cũ bị nhiều nhất ... hy vọng Chrome, TraceMonkey và sự trợ giúp tương tự sẽ giải quyết tình trạng này.
Gợi ý: Tùy thuộc vào loại lưu lượng truy cập bạn có trên trang web của mình, có thể bạn nên chia nhỏ gánh nặng JS của mình để một số phần lớn JS sẽ không bao giờ được sử dụng trên các trang phổ biến nhất không bao giờ được gửi xuống cho khách hàng. Tất nhiên, điều này có nghĩa là khi một khách hàng mới truy cập một trang mà JS này là cần thiết, bạn sẽ phải gửi nó qua dây.
Tuy nhiên, cũng có thể là trường hợp 50% số người dùng của bạn không bao giờ cần đến 80% người dùng do các mẫu lưu lượng truy cập của bạn. Nếu điều này là như vậy, bạn chắc chắn nên sử dụng các tải trọng JS nhỏ hơn, đóng gói chỉ trên các trang mà JS cần thiết. Nếu không, 80% người dùng của bạn sẽ bị JS phân tích cú pháp không cần thiết trên mỗi lần tải trang đơn lẻ. Rất khó để tìm sự cân bằng thích hợp của bộ đệm JS và tải trọng nhỏ hơn, đóng gói, nhưng tùy thuộc vào mẫu lưu lượng của bạn, nó chắc chắn đáng xem xét kỹ thuật khác ngoài việc đập tất cả JS của bạn vào mỗi lần tải trang đơn lẻ.
Điều quan trọng cần lưu ý là IE có giới hạn yêu cầu cao hơn tùy ý mà nó sẽ thực hiện. Nếu bạn có quá nhiều tệp JS khác nhau thì sau một thời điểm nhất định, IE sẽ không tải tập lệnh của bạn nữa. Điều này được minh chứng trong một dự án Drupal, nơi trang sẽ tải một nửa các tập lệnh nếu tập hợp JS bị tắt, nhưng một khi chúng tôi chuyển tập hợp JS trở lại thì nó hoạt động tốt. (Tổng hợp JS là một tính năng của Drupal sẽ kéo tất cả JS của bạn cho một trang thành một tệp duy nhất để giảm số lượng yêu cầu. – Metagrapher
Đồng thời thêm, levik, đề xuất chia nhỏ tệp của bạn hoạt động vì một số trình duyệt sẽ yêu cầu và phân tích cú pháp cả hai tệp Các trình duyệt khác sẽ đợi cho đến khi trình duyệt đầu tiên được phân tích cú pháp để tải phần thứ hai. Tôi nhận thấy rằng ít yêu cầu hơn là tốt hơn, cùng với mã súc tích và phù hợp hơn. – Metagrapher