Kết hợp html css và js

Với CSS, bạn có thể kiểm soát màu sắc, phông chữ, kích thước của văn bản, khoảng cách giữa các phần tử, cách các phần tử được định vị và trình bày, hình nền hoặc màu nền nào sẽ được sử dụng, các cách hiển thị khác nhau cho các thiết bị và kích thước màn hình khác nhau cũng như

Mẹo. Từ xếp tầng có nghĩa là một kiểu được áp dụng cho phần tử gốc cũng sẽ áp dụng cho tất cả các phần tử con trong phần tử gốc. Vì vậy, nếu bạn đặt màu của văn bản nội dung thành "xanh dương", thì tất cả các tiêu đề, đoạn văn và các thành phần văn bản khác trong nội dung cũng sẽ có cùng màu [trừ khi bạn chỉ định màu khác]

Sử dụng CSS

CSS có thể được thêm vào tài liệu HTML theo 3 cách

• Nội tuyến - bằng cách sử dụng thuộc tính style bên trong các phần tử HTML
• Nội bộ - bằng cách sử dụng thuộc tính
  
  This is a heading

  This is a paragraph.

  
  

  Try it Yourself »

  External CSS

  An external style sheet is used to define the style for many HTML pages.

  To use an external style sheet, add a link to it in the section of each HTML page:

  Example

  
  
  
   
  
  

  This is a heading

  This is a paragraph.

  
  

  Try it Yourself »

  The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

  Here is what the "styles.css" file looks like:

  "styles.css":

  body {
    background-color: powderblue;
  }
  h1 {
    color: blue;
  }
  p {
    color: red;
  }

  Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

  CSS Colors, Fonts and Sizes

  Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

  The CSS color xác định màu văn bản sẽ được sử dụng

  Thuộc tính CSS font-family xác định phông chữ sẽ được sử dụng

  Thuộc tính CSS font-size xác định kích thước văn bản sẽ được sử dụng

  Ví dụ

  Sử dụng các thuộc tính CSS color, font-family và font-size

  
  
  
  

  
  
  Đây là một tiêu đề

  Đây là một đoạn

  
  

  Try it Yourself »

  Đường viền CSS

  Thuộc tính CSS border xác định đường viền xung quanh phần tử HTML

  Mẹo. Bạn có thể xác định đường viền cho gần như tất cả các phần tử HTML

  Ví dụ

  Sử dụng thuộc tính đường viền CSS.  

  p {
    đường viền. Màu xanh bột đặc 2px;
  }

  Tự mình thử »

  Đệm CSS

  Thuộc tính CSS padding xác định khoảng đệm [khoảng trắng] giữa văn bản và đường viền

  Ví dụ

  Sử dụng thuộc tính CSS border và padding

  p {
    đường viền. màu xanh bột đặc 2px;
    phần đệm. 30px;
  }

  Tự mình thử »

  Ký quỹ CSS

  Thuộc tính CSS margin xác định lề [khoảng trắng] bên ngoài đường viền

  Ví dụ

  Sử dụng thuộc tính đường viền và lề CSS

  p {
    đường viền. Màu xanh bột đặc 2px;
    lề. 50px;
  }

  Tự mình thử »

  Liên kết đến CSS bên ngoài

  Biểu định kiểu bên ngoài có thể được tham chiếu với một URL đầy đủ hoặc với một đường dẫn liên quan đến trang web hiện tại

  Nhiều plugin và chủ đề bộ nhớ đệm trên WordPress [hoặc bất kỳ CMS nào khác] cung cấp tùy chọn kết hợp các tệp CSS/JS của trang web của bạn

  Mặc dù trước đây đây là một đề xuất hợp pháp để cải thiện hiệu suất web [đối với các trang web trên HTTP/1. 1], bây giờ không còn phù hợp nữa nếu trang web của bạn sử dụng HTTP/2

  Trong bài viết này, chúng tôi thảo luận về việc bạn có nên kết hợp các tệp CSS/JS của trang web của mình hay không

   

   

  Sự kết hợp của các tệp CSS/JS giúp ích như thế nào?

  Khi được bật, tính năng kết hợp các tệp CSS/JS của bạn sẽ hợp nhất tất cả mã CSS/JS của trang thành một [hoặc một số] tệp CSS/JS duy nhất.
   
  

  Nhiều plugin cung cấp tùy chọn kết hợp các tệp CSS/JS của bạn

  
   
  Đây là đề xuất hữu ích cho các trang web trên HTTP/1. 1 [đặc biệt là vào thời điểm nó còn nổi bật] vì giao thức có số lượng kết nối hạn chế.
    

  Tại sao sự kết hợp CSS/JS lại có ý nghĩa đối với HTTP/1. 1 Trang?

  Để hiểu tại sao sự kết hợp CSS/JS lại có ý nghĩa đối với HTTP/1. 1 trang, hãy nói về cách thức hoạt động của giao thức

  Khi trình duyệt cần tìm nạp nội dung trang của bạn từ máy chủ gốc, kết nối TCP sẽ được mở để tạo điều kiện chuyển mạng các yêu cầu và tài nguyên

  Các tệp CSS/JS bên ngoài về bản chất được coi là chặn hiển thị – chúng chặn hiển thị trang hoặc chặn tải xuống tài nguyên khác

  Mặc dù các trình duyệt hiện đại khá thông minh trong cách xử lý chúng, nhưng chúng vẫn gây ra sự cố, đặc biệt nếu bạn có nhiều tệp CSS/JS vì có nhiều cơ hội hơn để xảy ra chặn hiển thị. WordPress [hoặc bất kỳ CMS nào khác] cũng có thể làm cho điều này trở nên tồi tệ hơn, vì hầu hết các plugin sẽ thêm các tệp CSS/JS bổ sung

  Các trình duyệt có giới hạn tối đa về số lượng yêu cầu đồng thời có thể được gửi cùng một lúc [e. g. , 6 cho Google Chrome] để không làm quá tải máy chủ của bạn

  Với HTTP/1. 1, trình duyệt có thể sử dụng lại cùng một kết nối TCP thông qua Keep Alive để gửi nhiều yêu cầu một cách tuần tự;

  Điều này dẫn đến việc tải xuống các yêu cầu cho các trang web trên HTTP/1 nhanh hơn. 1, nhưng yêu cầu nhiều tài nguyên máy chủ hơn vì quá nhiều yêu cầu có thể làm quá tải máy chủ của bạn

   
  

  HTTP/1. 1 xử lý các yêu cầu/phản hồi trên một kết nối cho mỗi yêu cầu. Nếu bạn có nhiều tệp CSS và JS, bạn có thể sử dụng tối đa các kết nối đồng thời của mình khá dễ dàng và trì hoãn các yêu cầu tiếp theo hoặc làm quá tải máy chủ của bạn

  
   
  Cũng có thể có thêm chi phí mạng khi thực hiện các kết nối bổ sung này dưới dạng độ trễ. Tùy thuộc vào kết nối và thời gian tải trang tổng thể, thời gian này có thể là đáng kể.

  Tất cả điều này có nghĩa là giảm tổng số yêu cầu trang cho HTTP/1. 1 trang có lợi trong bối cảnh hiệu suất web của bạn

  Nói chung, trang của bạn có càng ít yêu cầu thì tải càng nhanh

  Việc kết hợp các tệp CSS/JS giúp giảm số lượng yêu cầu trang, từ đó giảm số lượng chuyến đi khứ hồi được thực hiện tới máy chủ của bạn để có thể truy xuất các tài nguyên khác nhanh hơn

  Với HTTP/2, vấn đề này ít xảy ra hơn vì giao thức cho phép ghép kênh, cho phép các yêu cầu và phản hồi được xử lý song song.
   
  

  HTTP/2 sử dụng ghép kênh, cho phép nhiều yêu cầu được phục vụ trên một kết nối, cải thiện tốc độ tải xuống và giảm gánh nặng cho máy chủ của bạn

  
   
  Điều này giúp loại bỏ nhu cầu kết nối đồng thời nên không cần kết hợp các tệp CSS/JS của bạn.

   

  Tại sao Kết hợp các tệp CSS/JS có khả năng xấu?

  Việc kết hợp các tệp CSS/JS có thể giảm thời gian khứ hồi cần thiết cho các yêu cầu như vậy, nhưng có những nhược điểm tiềm ẩn khác liên quan đến việc kết hợp tệp. Chúng tôi liệt kê những cái phổ biến nhất dưới đây.
   

   

  1] Tệp kết hợp có thể có kích thước tệp rất lớn

  Hầu hết các trang web thường có một số tệp CSS và JS. Việc kết hợp tất cả các biểu định kiểu hoặc tập lệnh vào một tệp tương ứng duy nhất có thể dẫn đến một tệp CSS/JS rất lớn

  Ngay cả khi tệp kết hợp được nén để truyền mạng nhanh hơn, trình duyệt vẫn phải tải xuống, phân tích cú pháp và thực thi tệp trước khi hiển thị trang của bạn – mỗi bước riêng lẻ có thể tự làm chậm và kết hợp chúng có thể làm chậm trang của bạn một cách đáng kể

  Cũng có thể trình duyệt của bạn đang phân tích cú pháp và thực thi mã không cần thiết trên trang

  Chúng tôi thường thấy các trang có tệp CSS/JS kết hợp vượt quá 2 MB ở kích thước không nén. Điều này thể hiện một nhiệm vụ lớn đối với trình duyệt, đặc biệt là trên phần cứng có công suất thấp hơn như thiết bị di động trung cấp.
   
  

  Kích thước không nén của tệp CSS/JS càng lớn thì trình duyệt của bạn càng cần xử lý nhiều công việc hơn

  
   
  Việc phân phối các tệp CSS/JS quá lớn có khả năng làm tăng chỉ số Tổng thời gian chặn [TBT] và Thời gian tương tác [TTI] trên trang của bạn, dẫn đến trải nghiệm trang chậm chạp cho khách truy cập của bạn.
    

  2] Hiệu suất được cảm nhận trên trang của bạn có thể bị ảnh hưởng

  Các trang web tải dần dần thường được coi là nhanh hơn các trang web ban đầu để trống trong một khoảng thời gian và sau đó tải mọi thứ cùng một lúc

  Điều này là do các trang web tải dần dần cung cấp phản hồi trực quan cho người dùng của bạn rằng trang của bạn đang hoạt động. Khách truy cập cũng có thể bắt đầu sử dụng nội dung sớm khi các trang tải dần dần.
   

  Các trang web tải dần dần được coi là nhanh hơn các trang web mà bạn không thấy gì lúc đầu, sau đó mọi thứ cùng một lúc

   
  Như đã đề cập trước đó, CSS/JS được coi là chặn hiển thị – trừ khi được chỉ định, trình duyệt sẽ tải xuống, phân tích cú pháp và thực thi tệp này trước khi thực thi phần còn lại của mã trang của bạn.

  Một tệp CSS/JS kết hợp sẽ cần được xử lý trước khi trình duyệt có thể hiển thị bất kỳ thứ gì, điều này có thể ngăn mọi kết xuất sớm của các thành phần trang

  Nếu các tệp CSS/JS riêng biệt [i. e. , không được kết hợp], trình duyệt có thể có cơ hội xử lý chúng riêng lẻ và bắt đầu hiển thị ngay khi hoàn thành với chúng thay vì một sự kiện chặn dài duy nhất

  Bằng cách này, khách truy cập của bạn cũng có thể sớm bắt đầu xem nội dung trên trang của bạn, đảm bảo với họ rằng trang của bạn đang hoạt động

  Ngọn hải đăng đo tải hình ảnh với các số liệu sau

  • Sơn nội dung đầu tiên [FCP]
  • Chỉ số tốc độ [SI]
  • Sơn có nội dung lớn nhất [LCP]

  Khi bạn kết hợp các tệp CSS/JS của mình, tất cả các số liệu này có khả năng được mở rộng.
   

   

  3] Sự kết hợp CSS/JS có khả năng phá vỡ trang web của bạn

  Các tệp CSS/JS của bạn vẫn ổn khi tách riêng nhưng chúng có thể không hoạt động tốt khi được kết hợp thành một tệp duy nhất

  Ngay cả khi mọi thứ trông ổn về mặt trực quan, một số chức năng cơ bản có thể đã bị hỏng mà mãi sau này bạn mới phát hiện ra

  Ví dụ – các nút không hoạt động trên trang hoặc các thành phần trang biến mất hoặc thanh trượt không hoạt động như thiết kế, v.v.
   
  

  Nhiều plugin [như WP Rocket] cảnh báo bạn về sự kết hợp CSS/JS do chúng có khả năng phá vỡ trang web của bạn

  
   
  Cho dù bạn sử dụng plugin nào để kết hợp các tệp CSS/JS của mình, khuyến nghị của chúng tôi là luôn kiểm tra trang web của bạn một cách kỹ lưỡng để đảm bảo chức năng của trang web không bị hỏng.

  Nếu bạn thấy rằng việc kết hợp một số tệp CSS/JS nhất định đang phá vỡ chức năng của trang web, thì bạn cần loại trừ các tệp có liên quan khỏi quá trình kết hợp

   

  Tôi có nên kết hợp các tệp CSS/JS trên trang web của mình không?

  Như đã đề cập trước đó, nó phụ thuộc – chủ yếu vào việc bạn có sử dụng HTTP/1 hay không. 1 hoặc HTTP/2 cho trang web của bạn.
   

   

  Khi nào không kết hợp các tệp CSS/JS

  Chúng tôi khuyên bạn không nên kết hợp các tệp CSS/JS của mình nếu các trường hợp sau áp dụng cho bạn

  • Trang web của bạn sử dụng HTTP/2
  • Bạn có một trang web phức tạp/lớn [tôi. e. , nó sử dụng rất nhiều tập lệnh và/hoặc biểu định kiểu]

  Với HTTP/2, nhìn chung không cần kết hợp các tệp CSS/JS vì tính năng ghép kênh loại bỏ nhu cầu kết nối đồng thời [không giống như HTTP/1. 1].
   
  

  Không kết hợp các tệp CSS/JS của bạn khi bạn đang sử dụng HTTP/2 hoặc nếu trang của bạn có nhiều tập lệnh và biểu định kiểu

  
   
  Nếu bạn có một trang web lớn hoặc phức tạp, bạn nên chia CSS và JS của mình thành nhiều tệp nhỏ hơn vì các trình duyệt hiện đại quản lý nhiều tệp cùng lúc tốt hơn .

   

   

  Khi nào kết hợp các tệp CSS/JS

  Bạn chỉ nên kết hợp các tệp CSS/JS của mình trong các trường hợp sau

  • Trang web của bạn sử dụng HTTP/1. 1
  • Bạn có một trang web đơn giản với không quá nhiều tập lệnh

  Điều này là do HTTP/1. 1 không có giới hạn về số lượng yêu cầu đồng thời có thể được xử lý, do đó, việc kết hợp các tệp CSS/JS của bạn có thể mang lại lợi ích về hiệu suất

  Cũng cần lưu ý rằng bạn có thể kết hợp các tệp CSS/JS của mình nếu bạn có một trang web tương đối đơn giản với ít biểu định kiểu hoặc tập lệnh.
   
  

  Kết hợp các tệp CSS/JS của bạn nếu bạn đang sử dụng HTTP/1. 1 hoặc bạn có một trang tương đối đơn giản với ít tập lệnh và biểu định kiểu

  
   
  Nếu trang web của bạn phức tạp với nhiều biểu định kiểu và tập lệnh, những nhược điểm được đề cập ở trên có thể lớn hơn bất kỳ lợi ích hiệu suất tiềm năng nào mà bạn có thể nhận được từ việc kết hợp các tệp của mình.
    

  Luôn kiểm tra trang của bạn

  Cuối cùng, hãy thực hiện phán đoán tốt nhất của bạn và không chỉ kích hoạt kết hợp các tệp CSS/JS một cách mù quáng

  Kiểm tra xem trang web của bạn có sử dụng HTTP/2 không – nếu không, hãy cân nhắc chuyển sang HTTP/2 vì giao thức này cung cấp khả năng xử lý trang hiệu quả hơn

  Bất kể bạn có loại thiết lập trang web nào, bạn nên kiểm tra các trang của mình có và không có sự kết hợp của các tệp CSS/JS để xem nó có thực sự cải thiện hiệu suất hay không

  Đối với kết hợp CSS/JS – nếu nghi ngờ, hãy bỏ qua

  Có thể trường hợp kết hợp CSS/JS thực sự làm chậm trang web của bạn hoặc thậm chí tệ hơn là phá vỡ nó

   

   

  Tóm lược

  Sự kết hợp CSS/JS là một đề xuất hiệu suất có ý nghĩa vào thời của HTTP/1. 1 nhưng nó không còn phù hợp nữa với sự ra đời của HTTP/2

  Các trình duyệt hiện đại cũng ưu tiên hiển thị sớm trang và sự kết hợp CSS/JS có thể có nhiều nhược điểm hơn là lợi ích, bao gồm cả việc phá vỡ trang web của bạn trong nhiều trường hợp

  Kiểm tra trang của bạn có và không có sự kết hợp của các tệp CSS/JS và chỉ thực hiện nếu trang của bạn sử dụng HTTP/1. 1 và có lợi ích hiệu suất hữu hình

   

   

  Thử nghiệm với các quốc gia, tốc độ và tùy chọn khác nhau

  GTmetrix Splash cơ bản

  Nhận quyền truy cập vào nhiều Vị trí thử nghiệm, Tùy chọn phân tích và Tốc độ kết nối

  Đăng ký tài khoản GTmetrix cơ bản và xem trang web của bạn hoạt động như thế nào trong nhiều tình huống hơn – MIỄN PHÍ

  Bắt đầu MIỄN PHÍ

  Nhận Thử nghiệm trên thiết bị di động, Vị trí cao cấp, v.v.

  GTmetrix Splash cơ bản

  Nhận thêm Thử nghiệm theo yêu cầu, Vị trí được giám sát và Vị trí thử nghiệm cao cấp cùng với thử nghiệm Hàng giờ với gói GTmetrix PRO

  Bạn có thể kết hợp CSS và JavaScript không?

  Kết hợp các tệp CSS/JavaScript của bạn thành một Tệp CSS/JavaScript giúp giảm số lượng yêu cầu mạng mà trình duyệt phải thực hiện. Bằng cách đó, trình duyệt sẽ tìm và tải xuống mọi thứ cần thiết để hiển thị trang nhanh hơn nhiều. Điều này đặc biệt hữu ích cho các trang web sử dụng HTTP/1.

  Bạn có thể kết hợp HTML và JavaScript không?

  JavaScript có thể được sử dụng kết hợp với HTML để hỗ trợ các ứng dụng web hiện đại trực quan, tương tác và thân thiện với người dùng. Bằng cách sử dụng xác thực phía máy khách đơn giản, nó làm giảm lưu lượng máy chủ và cải thiện hiệu quả tổng thể của trang web.