Difference Between Async And Defer Attributes In Script Tags

Xem 1,881

Cập nhật thông tin chi tiết về Difference Between Async And Defer Attributes In Script Tags mới nhất ngày 14/04/2021 trên website Sansangdethanhcong.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 1,881 lượt xem.

--- Bài mới hơn ---

  • Từ Chối Tiếng Anh Là Gì? Học Các Từ Chối Thông Minh Để Không Khó Xử
  • Sohc Và Dohc Là Gì? Sự Khác Biệt Giữa Hai Động Cơ Sohc Và Dohc
  • Sự Khác Biệt Giữa Động Cơ Dohc Và Sohc
  • Sự Khác Biệt Giữa Sohc Và Dohc
  • Sự Khác Biệt Giữa Động Cơ Loại Sohc Và Dohc

    • Lately you might have come across script tags in your html documents with the async and/or defer attributes. In this article, we will explain these terms so that you can decide when to use it in your application.

    NOTE: Consider checking browser support before using these features in your application.

    Lets start with a regular script tag having no attributes.

    When the browser comes across the above line in your markup, this is what happens.

    1. Pause parsing the document.
    2. Make a request to fetch the file.
    3. Execute the script after it has been downloaded.
    4. Resume parsing the document.

    In fact, this is exactly what the async attribute is for.

    Async

    When you add the async attribute to your script tag, the following will happen.

    1. Make parallel requests to fetch the files.
    2. Continue parsing the document as if it was never interrupted.
    3. Execute the inpidual scripts the moment the files are downloaded.

    The great thing of this flow is that scripts can download in parallel while the document is being parsed. But there’s a caveat to this and thats the third point – the script will be executed the moment it is downloaded. This can be a non-issue if a script is completely self contained. However, in many situations, scripts may depend on other scripts to have done some initialization before they can execute. e.g. jquery plugins require the jquery variable to already exist on the page.

    NOTE: Scripts that you programmatically insert into the DOM are async by default, unless you explicitly set their async attribute to false at insertion time.

    Defer

    Defer is very similar to async with one major differerence. Here’s what happens when a browser encounters a script with the defer attribute.

    1. Make parallel requests to fetch the inpidual files.
    2. Continue parsing the document as if it was never interrupted.
    3. Finish parsing the document even if the script files have downloaded.
    4. Execute each script in the order they were encountered in the document.

    As you can tell, defer is ptty much what you want to do in your files. However, due to limited browser support, its not a viable option at the time of writing.

    NOTE: The async and defer attributes are ignored for scripts having no src attribute.

    Until we live in a better world, the good ol’ technique of placing scripts at the bottom of your document should work just fine for scripts that are dependednt on each other. As discussed earlier, the best use case for using the async attribute in scripts is for external scripts that are completely self contained.

    --- Bài cũ hơn ---

  • Sự Khác Biệt Giữa Idol Và Nghệ Sĩ 2021
  • Sự Khác Biệt Giữa Idol Và Diễn Viên 2021
  • Chắc Chắn Bạn Sẽ Bật Cười Trước Sự Khác Biệt Đầy Thú Vị Này Giữa Idol Và Diễn Viên
  • Sự Khác Biệt Giữa Dslr Vs Mirrorless
  • Nếu Sự Khác Biệt Giữa Máy Ảnh Mirrorless Và Máy Ảnh Dslr Chỉ Là Sự Vắng Mặt Của Máy Ảnh Trước Đây, Tại Sao Họ Không Phát Minh Ra Nó Trước Dslr?

    • Bạn đang xem bài viết Difference Between Async And Defer Attributes In Script Tags trên website Sansangdethanhcong.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!