Kết hợp HTML CSS và JavaScript vào một tệp

Trong nhiều trường hợp, các trang web chứa nhiều tệp JavaScript và CSS, tất cả các tệp này phải được tải xuống từ máy chủ để tải toàn bộ trang web. Tuy nhiên, quá trình tải xuống từng tệp riêng biệt này sẽ mất nhiều thời gian hơn do phải thực hiện các yêu cầu bổ sung, do đó làm tăng độ trễ. Bài viết này sẽ tập trung vào cách kết hợp JavaScript và CSS bên ngoài

Tại sao lại kết hợp các tệp JavaScript và CSS bên ngoài?

Việc kết hợp các tệp JavaScript và CSS bên ngoài của bạn có lợi vì một số lý do. Trước hết, số lượng yêu cầu có thể giảm đáng kể do trang web của bạn sử dụng nhiều tệp CSS và JS để hiển thị trang. Ví dụ: nếu trang của bạn tải 5 tệp CSS bên ngoài và 5 tệp JS bên ngoài, việc kết hợp JavaScript và CSS của bạn thành một tệp riêng biệt, mỗi tệp sẽ dẫn đến 8 yêu cầu ít hơn

Ngoài ra, tất cả các tệp CSS đều bị chặn kết xuất, điều đó có nghĩa là càng nhiều tệp CSS được tải thì càng có nhiều khả năng điều này sẽ làm gián đoạn đường dẫn quan trọng của trang của bạn. Việc có nhiều tệp JavaScript cũng có thể gây rắc rối cho việc phân tích cú pháp tài liệu HTML của bạn do chúng không được trì hoãn đúng cách. Đọc bài viết của chúng tôi để tìm hiểu thêm về cách trì hoãn phân tích cú pháp JavaScript

Làm cách nào để kết hợp các tệp JavaScript và CSS bên ngoài?

Phương pháp được sử dụng để kết hợp JavaScript và CSS bên ngoài về cơ bản là giống nhau cho cả hai loại tệp. Tuy nhiên, có một số điều cần xem xét cho từng điều, được giải thích trong phần bên dưới

Kết hợp JavaScript bên ngoài

Khi kết hợp JavaScript, nên kết hợp các tệp hiện có của bạn thành 2 tệp chính. Một tệp phải chứa JavaScript cần thiết để hiển thị trang, trong khi tệp kia phải chứa tất cả các mã JS khác sẽ được hoãn lại. Điều này sẽ cho phép bạn tải trang web nhanh hơn nhiều vì trình duyệt không phải tải xuống và thực thi JS không quan trọng trong khi đang cố tải nội dung trong màn hình đầu tiên

Đối với cách kết hợp các tệp JS, điều này có thể được thực hiện đơn giản bằng cách sao chép/dán mã từ tệp này sang tệp khác. Ví dụ: khi mã từ Tệp đã được sao chép sang Tệp, FileS có thể bị xóa cùng với lệnh gọi tệp này trong tài liệu HTML

Kết hợp CSS bên ngoài

Để kết hợp các tệp CSS bên ngoài, bạn chỉ cần sao chép/dán tất cả mã CSS của mình vào một tệp chính. Do đó, tất cả nội dung từ bên trong các tệp CSS khác giờ đây sẽ nằm trong tệp chính cho phép trình duyệt chỉ thực hiện một yêu cầu cho một tệp CSS thay vì nhiều yêu cầu. Tương tự như JavaScript, khi mã từ các tệp bên ngoài đã được chuyển sang tệp CSS chính, lệnh gọi các tệp CSS cũ sẽ bị xóa khỏi tài liệu HTML

Ngoài ra, tránh sử dụng @import để nhập tất cả các tệp CSS bên ngoài của bạn vào một tệp chính. Phương pháp này có thể gây ra độ trễ bổ sung do không thể tải xuống nhiều biểu định kiểu song song. Thay vào đó, hãy sử dụng phương pháp được mô tả ở trên để kết hợp vật lý CSS từ tệp này sang tệp khác, thay vì chỉ nhập nhiều tệp vào một

HTTP/2 và kết hợp các tệp bên ngoài

Kết hợp các tệp JavaScript và CSS của bạn là một phương pháp hữu ích để giảm các yêu cầu HTTP cũng như độ trễ nếu bạn đang phân phối chúng qua HTTP/1. giao thức x. Tuy nhiên, với việc tạo và áp dụng rộng rãi HTTP/2, việc triển khai đề xuất này thực sự có thể gây hại cho khả năng phân phối nội dung của bạn. Vì HTTP/2 có thể xử lý tải xuống song song nên nó không bị hạn chế về các yêu cầu HTTP như HTTP/1. x là

Nếu bạn kết hợp tất cả các tệp JS và CSS thành một tệp và một yêu cầu được thực hiện cho một thành phần trong tệp đó, thì nó chỉ có một tùy chọn - yêu cầu một tệp lớn. Tuy nhiên, nếu các tệp không được nối và yêu cầu được tạo cho một thành phần trong một tệp, thì thời gian tải xuống sẽ ngắn hơn nhiều vì tệp không phải là một phần của tệp "chính" lớn

Với HTTP/2, điều quan trọng là phải tập trung nhiều hơn vào bộ nhớ đệm của các tệp thông qua CDN, tận dụng bộ nhớ đệm của trình duyệt, v.v. Nối các tệp JS và CSS không còn là phương pháp hay nhất với giao thức mới này

Các mẹo tối ưu hóa JavaScript và CSS khác

Kết hợp JavaScript và CSS bên ngoài là một đề xuất giúp cải thiện hiệu suất tổng thể của trang bằng cách tối ưu hóa hai loại tệp này nếu bạn vẫn đang sử dụng HTTP/1. x. Để biết các đề xuất bổ sung về việc cải thiện hiệu suất của JavaScript và CSS, hãy đọc các bài viết hướng dẫn khác của chúng tôi bên dưới

Trang web chứa nhiều tệp JavaScript và CSS, tất cả phải được tìm nạp từ máy chủ để tải đầy đủ trang web. Quá trình tải xuống từng tệp riêng biệt này sẽ mất nhiều thời gian hơn do phải thực hiện các yêu cầu bổ sung, do đó làm tăng độ trễ

Tại sao phải kết hợp JavaScript và CSS

Kết hợp các tệp Javascript và CSS bên ngoài của bạn có lợi vì một số lý do

1. Đầu tiên, số lượng yêu cầu có thể giảm đáng kể do trang web của bạn sử dụng nhiều tệp CSS và JS để hiển thị trang. Ví dụ: nếu trang của bạn tải 5 tệp CSS bên ngoài và 5 tệp JS bên ngoài, việc kết hợp Javascript và CSS của bạn thành một tệp riêng biệt, mỗi tệp sẽ dẫn đến 8 yêu cầu ít hơn
2. Thứ hai, tất cả các tệp CSS đều bị chặn hiển thị, điều đó có nghĩa là càng nhiều tệp CSS được tải thì càng có nhiều khả năng điều này sẽ làm gián đoạn đường dẫn quan trọng của trang của bạn
3. Thứ ba, việc có nhiều tệp Javascript cũng có thể gây rắc rối cho việc phân tích cú pháp tài liệu HTML của bạn do chúng không được trì hoãn đúng cách

Cách kết hợp JavaScript và CSS

Phương pháp được sử dụng để kết hợp Javascript và CSS bên ngoài về cơ bản là giống nhau cho cả hai loại tệp. Tuy nhiên, có một vài điều cần xem xét cho mỗi người trong số họ

Khi kết hợp Javascript, nên kết hợp các tệp hiện có của bạn thành 2 tệp chính

• Một tệp phải chứa Javascript cần thiết để hiển thị trang;
• Tệp khác phải chứa tất cả các tệp JS không quan trọng khác, do đó sẽ được hoãn lại

Điều này sẽ cho phép bạn tải trang web nhanh hơn nhiều vì trình duyệt không phải tải xuống và thực thi JS không quan trọng trong khi đang cố tải nội dung trong màn hình đầu tiên

Kết hợp CSS

Để kết hợp các tệp CSS bên ngoài, bạn chỉ cần sao chép/dán tất cả mã CSS của mình vào một tệp chính. Do đó, tất cả nội dung từ bên trong các tệp CSS khác giờ đây sẽ nằm trong tệp chính cho phép trình duyệt chỉ thực hiện một yêu cầu cho một tệp CSS thay vì nhiều yêu cầu

Ngoài ra, tránh sử dụng @import để nhập tất cả các tệp CSS bên ngoài của bạn vào một tệp chính. Phương pháp này có thể gây ra độ trễ bổ sung do không thể tải xuống song song nhiều biểu định kiểu. Thay vào đó, hãy sử dụng phương pháp được mô tả ở trên để kết hợp vật lý CSS từ tệp này sang tệp khác, thay vì chỉ nhập nhiều tệp vào một

Tối ưu hóa JavaScript và CSS khác

Kết hợp Javascript và CSS bên ngoài là một đề xuất giúp cải thiện hiệu suất tổng thể của trang bằng cách tối ưu hóa hai loại tệp này. Tuy nhiên, đối với các đề xuất bổ sung