Đang tải javascript

Question

Cũng giống như các ngôn ngữ lập trình khác, Javascript biên dịch từ trên xuống dưới. Vì vậy, khi ta gọi 1 hàm mà phía trên nó chưa được khai báo thì sẽ bị lỗi ngay. Để giải quyết vấn đề này, chúng ta sử dụng sự kiện onload trong javascript

Nội dung chính Show

Điểm khác Biệt cửa sổ giữa. onload and $(document). Sẵn sàng()
1. Cửa sổ. đang tải
2. $(tài liệu). Sẵn sàng()
Tổng kết
Vấn đề đối với cách tải JavaScript thông thường
1. Set the script at the end of the page
2. Thêm thuộc tính async vào trong tập lệnh thẻ
3. Thêm thuộc tính defer vào trong tập lệnh thẻ

Ví dụ

// File A.js
returnName();

// File B.js
function returnName {
 	 return "Quan le";
}

Như cách viết ở trên thì sẽ bị lỗi vì trong tệp A. js gọi hàm returnName() trong file B. js, mà tập tin A. js lại được gọi trước đó, do đó sẽ bị lỗi ngay

Nếu sửa lại như vậy thì code sẽ chạy đúng

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

Để giải quyết vấn đề trên, chúng ta sử dụng cửa sổ sự kiện. onload and $(document). Sẵn sàng. Khi tài liệu nào được render ra hết thì những script các bạn viết trong đó mới được thực thi, dù cho nó được đặt ở đâu đi nữa. Vậy điểm khác nhau giữa 2 sự kiện này là gì?

Điểm khác Biệt cửa sổ giữa. onload and $(document). Sẵn sàng()

1. Cửa sổ. đang tải

Sự kiện này có nghĩa là khi trình duyệt đã tải xong mọi thứ. image, js, css,… thì những đoạn code nằm bên trong nó mới được chạy

2. $(tài liệu). Sẵn sàng()

Mọi thứ bên trong hàm này sẽ được tải ngay sau khi DOM Tree được tải và trước khi toàn bộ nội dung trang web được tải

Tổng kết

$(tài liệu). ready() kích hoạt sự kiện sớm hơn, do nó không phải chờ tải các tài nguyên khác như hình ảnh, video, nội dung,… Tùy theo mục đích sử dụng mà các bạn lựa chọn 1 trong 2 hàm này

Khi bạn nghĩ đến việc cải thiện tốc độ tải trang web, bạn có thể sẽ thử việc tối ưu code backend, tối ưu câu hỏi 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 độ tải trang là thay đổi một chút cách trang web tải các đoạn JavaScript sử dụng thẻ

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 trong trang của mình

Nội dung chính Hiển thị

Vấn đề đối với cách tải JavaScript thông thường
1. Set the script at the end of the page
2. Thêm thuộc tính async vào trong tập lệnh thẻ
3. Thêm thuộc tính defer vào trong tập lệnh thẻ
Tổng kết

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

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

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 vào phần

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

5 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 trang web được hiển thị

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

Nhưng khi bộ kết xuất bắt gặp một tập lệnh thẻ, quá trình kết xuất HTML sẽ dừng lại và chờ xem khi nào tất cả tập lệnh được lấy xuống và thực thi xong. Sau đó thì quá trình render mới tiếp tục xử lý các phần tiếp theo. Bạn có thể hiểu quá trình này theo một cách khác 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 tải 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 nội dung 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 tải và kết xuất có thể ảnh hưởng đến trải nghiệm của người dùng vì thời gian chờ quá lâu

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

1. Set the script at the end of the page

Khi đặt thẻ

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 ở cuối cùng của trang - sau tất cả những nội dung chính - sẽ giúp bạn cải thiện một vài phần hiệu quả. Những nội dung chính của trang sẽ được tải và kết xuất liền mạch và sẽ không bị chặn vì thẻ

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 ở giữa quá trình kết xuất. Quá trình tải xuống và thực thi sẽ là tiến trình cuối cùng, khi tất cả nội dung đã được hiển thị 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ẻ

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 ở cuối cải thiện tốc độ tải tốt hơn so với việc đặt owr phần

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

5 của trang. Ở đây bạn vẫn sẽ có thời gian chờ đợi vì quá trình tải xuống tập lệnh vẫn sẽ không dừng lại cho đến khi trang được tải hết. Tuy nhiên, chúng ta sẽ nhận được lợi ích từ toàn bộ nội dung của trang web đã được tải và hiển thị với người dùng, trong khi đó có thể đợi tập lệnh được tải xuống và thực hiện sau đó. Sau đó khi toàn bộ trang HTML được kết xuất hoàn chỉnh, tập lệnh được tải xuống và thực thi, và cuối cùng sự kiện

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>

1 sẽ được thực thi

2. Thêm thuộc tính async vào trong tập lệnh thẻ

Khi quá trình kết xuất gặp một thẻ

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 có thuộc tí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>

3, quá trình tải xuống tập lệnh sẽ được tiến hành song song với quá trình kết xuất HTML. Và quá trình thực thi tập lệnh sẽ được tiến hành ngay sau khi quá trình tải xuống hoàn tất, tạm dừng cài đặt tức thời trong quá trình kết xuất. Một khi quá trình thực thi tập lệnh hoàn tất, quá trình kết xuất sẽ tiếp tục quay 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 tệp script khác nhau và

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>

3 thực thi đoạn script ngay khi chúng được tải 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 . 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 thuộc tính này. Trong trường hợp này, bạn sẽ không thể đảm bảo một thời điểm cụ thể khi bất kỳ quá trình nào kết xuất hoàn thành và khi bất kỳ sự kiện nào

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>

1 được kích hoạt

3. Thêm thuộc tính defer vào trong tập lệnh thẻ

Khi render gặp một thẻ

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

3 có chứa thuộc tí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>

7, quá trình tải xuống sẽ thực hiện song song với quá trình render trang HTML. Việc thực thi tập lệnh này sẽ chỉ được tiến hành sau khi kết xuất HTML được hoàn thành

// Đặt file B.js trước file A.js
// File B.js
function returnName {
 	 return "Quan le";
}

// File A.js
returnName();

0

Khi bạn sử dụng thuộc tí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>

7, đoạn mã thực thi thứ tự sẽ được đảm bảo theo đoạn mã thứ tự đượ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 hiển thị và trước khi

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>

1 được kích hoạt

programming javascript

Đang tải javascript

Điểm khác Biệt cửa sổ giữa. onload and $(document). Sẵn sàng()

1. Cửa sổ. đang tải

2. $(tài liệu). Sẵn sàng()

Tổng kết

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

1. Set the script at the end of the page

2. Thêm thuộc tính async vào trong tập lệnh thẻ

3. Thêm thuộc tính defer vào trong tập lệnh thẻ

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