Javascript thêm css
Trên thực tế, cách chèn mã nội tuyến và nhúng sẽ tạo ra ít yêu cầu HTTP hơn cho máy chủ, từ đó giúp tốc độ tải trang web nhanh hơn. Tuy nhiên, hai cách này chỉ phù hợp với các trang web có ít mã CSS và Javascript. Bởi vì khi lượng code tăng lên, chúng ta sẽ rất khó kiểm soát, bảo trì hay sửa lỗi Show Hầu hết các trang web được khuyến khích sử dụng cách thứ ba, tức là tạo tệp riêng cho mã CSS và Javascript. Tuy việc tạo tệp CSS và JS làm tăng lượng yêu cầu trình duyệt gửi đến máy chủ, qua đó tốc độ tải trang bị ảnh hưởng, nhưng tốc độ ảnh hưởng không đáng kể. Mặt khác, bạn sẽ dễ dàng quản lý và bảo trì mã hơn khi tạo tệp CSS và Javascript riêng Tối ưu hóa JavaScript với defer và asyncKhi tải xuống tập lệnh javascipt trên trang HTML, bạn cần cẩn thận để không ảnh hưởng đến hiệu suất tải trang. Tùy thuộc vào vị trí và cách bạn thêm lệnh của mình vào trang HTML mà thời gian tải xuống sẽ bị ảnh hưởng Thông thường, một kịch bản sẽ được thêm vào trang như dưới đây Bất kể khi nào HTML phân tích cú pháp tìm thấy dòng này, sẽ có 1 yêu cầu được tạo để tìm tải tập lệnh và tập lệnh sau đó được thực hiện Khi quá trình này được hoàn tất, cú pháp phân tích cú pháp sẽ tiếp tục và phần còn lại của HTML sẽ có thể phân tích được Lúc này bạn có thể nhận thấy, thao tác này có thể tác động rất lớn đến thời gian tải trang Nếu kịch bản mất nhiều thời gian để tải xuống dự kiến, ví dụ. nếu mạng chậm một chút hoặc nếu bạn đang sử dụng thiết bị di động và kết nối có phần bập bõm, thì khách truy cập có thể sẽ thấy một trang trống cho đến khi tập lệnh được tải xuống và chạy Vị trí cũng quan trọng Khi lần đầu tiên học về HTML, bạn được dạy rằng các thẻ script nằm trong thẻ :<đầu> ... Như đã nói ở trên, khi cú pháp phân tích tìm thấy dòng này, nó sẽ tìm cách tải tập lệnh và chạy tập lệnh. Sau đó, khi đã hoàn thành nhiệm vụ này, nó sẽ phân tích tiếp phần thân Điều này không tốt vì xảy ra tình trạng chậm ở đây. Một giải pháp rất phổ biến cho vấn đề này là đặt tập lệnh thẻ ở cuối trang, ngay trước thẻ đóng Khi làm như vậy, tập lệnh sẽ được tải xuống và chạy sau khi tất cả các trang đã được phân tích cú pháp và được tải xuống, đây là cách tối ưu hơn nhiều so với việc đặt tập lệnh thẻ trong đầu thẻ Đây là cách tốt nhất bạn nên sử dụng nếu bạn cần tối ưu hóa việc trình duyệt cũ không hỗ trợ hai tính năng tương thích mới của HTML. không đồng bộ và trì hoãn Không đồng bộ và Trì hoãnCả async và defer đều là các đối tượng boolean. Cách sử dụng của chúng tương tự nhau Nếu bạn chỉ định cả hai, async sẽ được ưu tiên trên các trình duyệt phiên bản mới, trong khi các trình duyệt cũ hơn hỗ trợ defer mà không phải async sẽ tự động chuyển sang defer Các thuộc tính này chỉ có ý nghĩa khi sử dụng tập lệnh trong phần đầu trang và chúng sẽ không có vai trò gì nếu bạn đặt tập lệnh vào phần chân trang như chúng ta đã thấy ở trên Cú pháp phân tích được tạm dừng cho đến khi tập lệnh được tìm thấy và chạy. Một khi bước này được thực hiện, công việc phân tích lại trang được tiếp tục No defer or async in section bodyDưới đây là cách tải tập lệnh một trang mà không cần trì hoãn hoặc không đồng bộ, đặt ở cuối thẻ nội dung, ngay trước khi đóng thẻ Quá trình phân tích cú pháp được thực hiện mà không xảy ra bất kỳ tạm dừng nào và khi nó kết thúc, tập lệnh được tải và được chạy. Phân tích cú pháp thậm chí đã được hoàn thành trước cả khi tập lệnh được tải xuống, vì vậy trang có thể hiển thị cho người dùng nhanh hơn so với phần ví dụ trước đó There async, in the first page/headDưới đây là cách thức một trang tải tập lệnh với async, set in the tag head Tập lệnh được tìm thấy đã tải không đồng bộ và khi nó sẵn sàng, công việc phân tích cú pháp HTML bị tạm dừng để chạy tập lệnh, sau đó, tiếp tục lại quá trình phân tích With defer, in the first page/headDưới đây là cách một trang tải tập lệnh với trì hoãn, đặt trong đầu thẻ Tập lệnh được tìm thấy không được tải đồng bộ và chỉ được chạy sau khi đã phân tích cú pháp HTML Phân tích cú pháp hoàn tất giống như khi ta đặt tập lệnh ở phần thân thẻ, nhưng chung, quá trình chạy tập lệnh nhìn đã hoàn tất trước đó, bởi vì tập lệnh đã được tải xuống bài hát với phân tích cú pháp HTML Vì vậy, đây chính là giải pháp tối ưu khi nói đến tốc độ cú pháp phân tích cú pháp/phân tích cú phápAsync chặn cú pháp phân tích của trang trong khi Trì hoãn thì không Chặn hiển thịCả async và defer đều không chắc chắn bất cứ điều gì về công việc ngăn chặn kết xuất. Vấn đề này tùy thuộc vào bạn và kịch bản của bạn (ví dụ. bảo đảm tập lệnh chạy sau onLoad không có hạn) dominteractiveCác tập lệnh bị trì hoãn đánh dấu sẽ được chạy ngay sau domInteractive, sự kiện sẽ diễn ra sau khi HTML được tải xuống, cú pháp phân tích và DOM được tạo ra CSS và hình ảnh tại thời điểm này vẫn được phân tích cú pháp và được tải xuống Khi quá trình hoàn tất, trình duyệt sẽ phát domComplete và sau đó là onLoad domInteractive rất quan trọng vì thời gian của nó được xem là thước đo tốc độ tải về mặt cảm nhận Sắp xếp các yếu tố 1 cách trật tựMột trường hợp khác defer. script has been marked not dong bộ sẽ được chạy theo thứ tự thông thường khi chúng ta có thể sử dụng. Kết quả Vì điều tốt nhất chúng ta nên làm để tăng tốc độ tải trang khi sử dụng tập lệnh. is set them into the head page and add property defer into the script thẻ This is the script to end domInteractive nhanh hơn Khi xem xét ưu điểm của người trì hoãn, có vẻ như đây là lựa chọn tốt hơn so với sự không đồng bộ trong một vở kịch kịch Trừ khi bạn thấy không có vấn đề gì với việc kéo dài thời gian kết xuất đầu tiên của trang, hãy đảm bảo rằng khi trang được xử lý xong, mã JavaScript cũng được thực hiện xong CSS set before, JS set afterNhư bạn đã thấy trong ví dụ trên, JS có thể làm gián đoạn việc tải HTML. Do đó, JS thông thường được đặt ở cuối và tải sau cùng. Mặt khác, CSS thường được đặt ở đầu trang để người dùng không thấy giao diện trang web được đánh giá thẩm mỹ khi vừa vào trang <đầu> <. -- set CSS at the head thẻ --> <. -- HTML tại đây --> ... <. -- set JS before close body --> |