Nhúng javascript vào html

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

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 mứ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à async

Khi 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 tập lệnh mất nhiều thời gian để tải xuống dự án khác, 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ãn

Cả 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 body

Dướ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/head

Dướ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/head

Dướ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áp

Async 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)

dominteractive

Cá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 after

Như 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 -->

Uninstall @import mode

Khi muốn chèn một tệp CSS bên ngoài vào trang web, ta có hai cách

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

Nhập CSS qua kiểu bên ngoài hoặc kiểu nội tuyến

@nhập url('phong cách. css');

Theo cách đầu tiên, trình duyệt có thể tải xuống nhiều tệp CSS đồng thời. With the second way, file style. css sẽ chỉ được tải xuống khi tệp CSS gốc đã tải xuống xong. Cách này hạn chế khả năng tải bài hát của trình duyệt và trong nhiều trường hợp có thể làm giảm tốc độ tải trang web

Vì vậy, giới hạn sử dụng @import cũng là một cách giúp tối ưu hóa tốc độ tải trang

Use a CSS/JS file duy nhất

Nếu bạn có nhiều tệp CSS/JS, thì hãy hạn chế chúng lại thành một tệp duy nhất nếu bạn muốn trang web được ưu tiên tối đa

Việc sử dụng nhiều tệp CSS/JS sẽ giúp bạn dễ quản lý mã hơn, tuy nhiên nó cũng vô tình tạo ra nhiều yêu cầu tới máy chủ, khiến cho trình duyệt phải thực hiện nhiều công việc hơn khi tải đầy đủ trang web. Thông thường khi tải tài nguyên, trình duyệt sẽ giới hạn trong khoảng từ 4 đến 8 kết nối đồng thời cho mỗi tên miền

Giả sử trang web của bạn có 10 file CSS và 10 file JS thì cần ít nhất 3 cổng kết nối để tải hết 30 file này. Trong khi bạn có thể tải hết trong một khoảng thời gian sau khi thu hồi lại thành 1 tệp CSS và 1 tệp JS. Mặc dù trọng lượng của tệp cũng ảnh hưởng đến tốc độ tải tệp, nhưng việc giảm số lượng tệp để giảm số lượng yêu cầu đối với máy chủ là một công việc cần thiết khi mã web tối ưu và nó thực sự mang lại hiệu quả nhất định.

Pagespeed Insight - một công cụ đo tốc độ tải trang được giới thiệu bởi google cũng có những lời khuyên tương tự. chỉ sử dụng một tệp CSS và một tệp JS để tối ưu hóa tốc độ tải trang, vốn là một trong những yếu tố quan trọng trong SEO web

Sử dụng kỹ thuật tải không đồng bộ

Nếu bạn có dự định thu hút người dùng vào trang web thông qua các kênh mạng xã hội như Facebook hay Twitter, thì việc thêm nút Chia sẻ Facebook hay Tweet là không thể thiếu. Tuy nhiên, những đoạn mã dành cho các nút chia sẻ này thường yêu cầu trang web phải tải về các tệp CSS/JS cần thiết. Và điều này có thể tiêu tốn một khoảng thời gian của người dùng khi tải trang

Để giải quyết vấn đề này ta thường sử dụng 2 cách

Sử dụng JS để tải xuống không đồng bộ các tệp JS bên ngoài

Tải GA không đồng bộ

(chức năng() {

var ga = tài liệu. createElement('script'); . gõ = 'văn bản/javascript'; . không đồng bộ = đúng;

ga. src = ('https. ' == tài liệu. địa điểm. giao thức? . //ssl'. 'http. //www')'. phân tích google. com/ga. js';

var s = tài liệu. getElementsByTagName('script')[0]; . cha mẹNode. insertB Before(ga, s);

})();

Trong ví dụ mã Google Analytics được tải xuống không đồng bộ bằng Javascript

Cách 2 là sử dụng iframe thân thiện

Khung nội tuyến thân thiện với Facebook

(chức năng() {

var url = 'http. //ví dụ. tổ chức/js. js';

var iframe = tài liệu. createElement('iframe');

(iframe. phần tử khung. iframe). Phong cách. cssText =

"chiều rộng. 0; . 0; . 0";

iframe. src = "javascript. sai";

var ở đâu = tài liệu. getElementsByTagName('script')[0];

ở đâu. cha mẹNode. chènB Before(iframe, ở đâu);

var doc = khung nội tuyến. nội dungWindow. tài liệu;

tài liệu. mở(). viết ('

'var js = tài liệu. createElement('script');'

'js. src = '' url '';'

'tài liệu. thân thể. appendChild(js);">');

tài liệu. đóng lại();

}());

Bằng cách này, bạn có thể tải xuống không đồng bộ các thành phần ít quan trọng hơn trên trang, qua đó tăng tốc độ tải trang web và cải thiện trải nghiệm người dùng tốt hơn

Lời kết

Việc tối ưu code CSS/JS cho website không chỉ có ý nghĩa về mặt kỹ thuật, SEO, mà còn giúp người dùng có trải nghiệm tốt nhất khi tham khảo nội dung website, nó còn giúp web developer dễ dàng quản lý và quản lý. . Hy vọng những mẹo trên đây có thể giúp bạn lấy được code tối ưu trên trang web của mình để mang lại trải nghiệm tốt nhất và tăng trưởng cho website

Theo Bizfly Cloud chia sẻ

>> You can you quan tâm. Bỏ túi ngay 9 Mẹo CSS tối ưu hiệu quả

BizFly Cloud là nhà cung cấp dịch vụ điện toán đám mây đám mây với chi phí thấp, được vận hành bởi VCCorp.

BizFly Cloud là một trong 4 doanh nghiệp nòng cốt trong "Chiến dịch kết thúc chuyển đổi số bằng công nghệ điện toán đám mây Việt Nam" của Bộ TT&TT;