Hướng dẫn javascript load html file - javascript tải tệp html

Question

Bài này mình xin giới thiệu sơ qua về cách trình duyệt tải nội dung HTML và CSS như thế nào.

Nội dung chính Show

Vấn đề đối với cách Loading JavaScript thông thường
1. Đặt thẻ script ở cuối cùng của trang
2. Thêm thuộc tính async vào trong thẻ script
3. Thêm thuộc tính defer vào trong thẻ script
Tổng kết

Nội dung chính

Vấn đề đối với cách Loading JavaScript thông thường
1. Đặt thẻ script ở cuối cùng của trang
2. Thêm thuộc tính async vào trong thẻ script
3. Thêm thuộc tính defer vào trong thẻ script
Tổng kết

1. Thứ tự thực hiện khi trình duyệt tải nội dung HTML và JS.

Lấy nội dung trang HTML (ví dụ index.html)
Bắt đầu dịch (parse) trang HTML cho trình duyệt.
Nếu bộ dịch của trình duyệt gặp phải thẻ mà tham chiếu tới file script ngoài.
Trình duyệt sẽ gửi request để lấy nội dung file script đó, trong quá trình gửi request này, trình duyệt sẽ tạm ngừng quá trình dịch phần HTML còn lại.
Sau khi file script đã được download thành công thì trình duyệt sẽ thực thi file script này.
Sau khi thực thi file script xong thì trình duyệt mới quay trở lại dịch tiếp phần HTML còn lại.

2. Lỗi khi file script thực thi trước khi DOM được load xong.

Trong nhiều trường hợp, nếu các bạn đặt thẻ trong thẻ thì những phần thực thi đối với DOM chưa được load xong sẽ không chạy.



    
        My Page
        
    
    
        Welcome back, user

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Đoạn code trên sẽ không thay thế "Welcome back, user" thành "Welcome back, Bart" vì khi load file my-script.js thì phần HTML phía dưới chưa được load nên đoạn code trong script sẽ không hiểu.

3. Lời khuyên truyền thống.

Để phòng tránh lỗi trên thì có một cách làm truyền thống là đặt thẻ ở sau cùng.

Nhưng nếu làm thế thì phải đợi HTML load xong rồi thì script mới tới lượt được load, dẫn tới hiệu năng sẽ giảm nếu page có nhiều file script. Khi bắt người dùng chờ trên 2s cho một page load xong thì họ có xu hướng đi ra trang khác.

4. Cách làm hiện đại

Các browser ngày nay hỗ trợ các thuộc tính async và defer trong thẻ script:async và defer trong thẻ script:

- assync cho phép các thẻ script download mà không làm ngừng bộ dịch HTML:

assync scripts được thực thi ngay sau khi nó được download xong, và script2 hoàn toàn có thể được thực thi xong trước script1.

- defer thực thi theo thứ tự script nhưng vẫn không làm ngừng bộ dịch HTML:

Không như async, defer script chỉ thực thi sau khi document đã được load xong.

5. Kết luận.

Bạn nên đặt thẻ trong thẻ và sử dụng các thuộc tính assync hoặc defer.

Tham khảo từ http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup

Khi bạn nghĩ đến việc cải thiện tốc độ load trang web, bạn có lẽ sẽ thử việc tối ưu code backend, tối ưu câu truy vấn cơ sở dữ liệu,... Nhưng một trong những cách đơn giản nhất để cải thiện tốc độ load trang là thay đổi một chút cách trang web load các đoạn JavaScript sử dụng thẻ script trong trang của mình.

Vấn đề đối với cách Loading JavaScript thông thường

Khi bạn load JavaScript vào trong một trang HTML, có thể bạn thường thêm thẻ script vào phần

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

0 của trang. Tuy nhiên có một vấn đề xảy ra ở đây, để hiểu rõ hơn thì bạn cần phải hiểu cách một website được render.

Khi trình duyệt mở một trang web, nó sẽ bắt đầu render trang theo từng thẻ một và bắt đầu dựng nên DOM. Và bất cứ khi nào bộ render gặp một thẻ cần load ảnh hay css, những request này được sử lý song song với quá trình render.

Nhưng khi bộ render gặp bắt gặp một thẻ script, quá trình render HTML sẽ dừng lại và đợi cho đến khi nào tất cả script được lấy xuống và thực thi xong. Sau đó thì quá trình render mới tiếp tục xử lý những phần tiếp theo. Bạn có thể hiểu quá trình này theo một cách rõ hơn bằng ví dụ dưới đây.

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script in the head tagtitle>
    <script src="index.js">script>
  head>
  <body>

    

  body>
html>

Tác động của quá trình load trang khi gặp thẻ script có thể khá lớn và chủ yếu là tác động tới từ quá trình thực thi đoạn script đó. Và lượng content thực tế của trang HTML có thể lớn hơn trong một số trường hợp. Vì thế tất cả thời gian load và render có thể ảnh hưởng tới trải nghiệm của người dùng vì thời gian chờ quá lâu.

Vậy thì chúng ta có thể sử dung một số cách dưới đây để tối ưu hóa quá trình loading JavaScript của trang web.

1. Đặt thẻ script ở cuối cùng của trang

Khi đặt thẻ script ở cuối cùng của trang - sau tất cả những content chính - sẽ giúp bạn cải thiện được vài phần hiệu suất. Những content chính của trang sẽ được load và render liền mạch và sẽ không bị block vì gặp thẻ script ở giữa trừng quá trình render. Quá trình download và thực thi sẽ được tiến hành cuối cùng, khi tất cả content đã được render hoàn chỉnh.

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script at the end of pagetitle>
  head>
  <body>

    

    <script src="index.js">script>
  body>
html>

Việc đặt thẻ script ở cuối cùng cải thiện tốc độ load hơn so với việc đặt owr phần

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

0 của trang. Ở đây bạn vẫn sẽ có thời gian chờ vì việc download script vẫn sẽ không dừng lại cho đến khi trang được load hết. Tuy nhiên chúng ta sẽ nhận được lợi ích từ việc toàn bộ nội dung của trang web đã được load và hiển thị với người dùng, trong khi đó có thể đợi việc script được download và thực thi sau cùng. Sau đó khi toàn bộ trang HTML được render hoàn chỉnh, script được download và thực thi, và cuối cùng event

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

5 sẽ được thực thi.

2. Thêm thuộc tính async vào trong thẻ script

Khi quá trình render gặp một thẻ script có attribule

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

7, quá trình download script sẽ được tiến hành song song với quá trình render HTML. Và quá trình thực thi script sẽ được tiến hành ngay sau khi quá trình download hoàn thành, tạm dừng lập tức quá trình render. Một khi quá trình thực thi script hoàn thành, quá trình render sẽ tiếp tục trở lại.ngay sau khi quá trình download hoàn thành, tạm dừng lập tức quá trình render. Một khi quá trình thực thi script hoàn thành, quá trình render sẽ tiếp tục trở lại.

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script with async attributetitle>
    <script async src="index.js">script>
  head>
  <body>

    

  body>
html>

Tuy nhiên vì sự khác biệt về kích thước giữa các file script khác nhau và

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

7 thực thi đoạn script ngay khi chúng được load hoàn chỉnh, sẽ không có gì đảm bảo chúng được thực thi lần lượt từ trên xuống dưới theo thứ tự được viết trong code. Vì thế nếu có bất kì sự phụ thuộc nào giữa các đoạn script, ví dụ nếu một đoạn script cần phải thực thi sau một đoạn khác, thì bạn cần tránh sử dụng attribute này. Trong trường hợp này thì bạn sẽ không thể chắc chắn một thời điểm cụ thể khi nào quá trình render hoàn thành và khi nào event

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

5 được trigger.

3. Thêm thuộc tính defer vào trong thẻ script

Khi render gặp một thẻ script có chứa thuộc tính

1, quá trình download sẽ được thực hiện song song với quá trình render trang HTML. Việc thực thi script sẽ được tiến hành chỉ sau khi render HTML được hoàn thành.chỉ sau khi render HTML được hoàn thành.

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Script with defer attributetitle>
    <script defer src="index.js">script>
  head>
  <body>

    

  body>
html>

Khi bạn sử dụng attribute

1, thứ tự thực hiện script sẽ được đảm bảo theo thứ tự đoạn script được khai báo. Thêm thuộc tính này sẽ giúp thực thi các đoạn script sau khi tất cả HTML được render và trước khi

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

5 được trigger.

Tổng kết

Cùng tổng hợp lại những thứ bên trên:

Đặt thẻ script ở cuối trang để tránh việc block quá trình render, sau đó mới load script và thực thi từng cái một khi quá trình render đã hoàn tất.

Sử dụng thuộc tính

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

7 trong thẻ script để download script song song với quá trình render phần tử HTML và thực thi nó ngay sau khi nó sẵn sàng.

Sử dụng thuộc tính
1 trong thẻ script để download script song song với quá trình render phần tử HTML và thực thi nó chỉ chỉ toàn bộ trang HTML đã được render hoàn chỉnh.

programming javascript Upload file jQuery Domcontentloaded là gì Upload file reactjs

Hướng dẫn javascript load html file - javascript tải tệp html

Vấn đề đối với cách Loading JavaScript thông thường

1. Đặt thẻ script ở cuối cùng của trang

2. Thêm thuộc tính async vào trong thẻ script

3. Thêm thuộc tính defer vào trong thẻ script

Tổng kết

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội