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

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

Trong thiết kế blog và website có rất nhiều các file javarscript (viết tắt là JS), file CSS, file TXT được sử dụng. Các trang chuyên về thủ thuật như namkna cung cấp cho các bạn rất nhiều file Javarscrip đó tuy nhiên để dùng lâu dài thì các bạn phải Downloaf cề máy và Upload lên hosting riêng.Tuy nhiên nhiều bạn chưa biết cách Download các file này về máy để Upload lên host riêng do vậy hôm nay namkna sẽ hướng dẫn các bạn cách download file JS, CSS, TXT đó về máy.

Đầu tiên các bạn cần xác định các dạng file cần download. Có 3 dạng file JS, CSS, TXT lần lượt tương tự như sau:JS, CSS, TXT lần lượt tương tự như sau:

http://domain.com/file/name.jsname.js

http://domain.com/file/name.cssname.css

http://domain.com/file/name.txtname.txt

Để Download các file Js bạn sử dụng các trình duyệt như Internet Explorer, Moliza Firefox, Google Chroome, Opera,... Trùy theo tính chất của các trình duyệt mình chia thành 2 nhóm trình duyệt Download là:

1. Sử dụng Internet Explorer: Để Download file JS, CSS, TXT thì đây là trình duyệt lý tưởng nhất đối cới các blogger mới vì tránh được các sai sót không đáng có khi tải file Js.Để Download file JS, CSS, TXT thì đây là trình duyệt lý tưởng nhất đối cới các blogger mới vì tránh được các sai sót không đáng có khi tải file Js.

Đầu tiên bạn copy các URL file Js sau đó dán vào thanh Adress (địa chỉ) của trình duyệt sau đó bấm Go (hoặc enter trên bạn phím)

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

Khi đó trình duyệt hiện ra một hộp thoại bạn chỉ cần Save lưu lại là Ok.

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

Đối với các trình uyệt còn lại như Moliza Firefox, Google Chroome, Opera,... bạn làm tương tự. Tuy nhiên có một số trường hợp không hiện ra hộp thoại Download mà hiện ra toàn bộ file Js như hình

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

Bạn hãy Copy toàn bộ nội dung trong đó và pate vào Notepad.Notepad.

Cách mở Notepad: Bạn vào Start - All program - Accesserioé - Notepad. Start - All program - Accesserioé - Notepad.

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

Bạn hãy lưu Notepad lại như sau:

  • Tại mục Save ass type bạn chọn All File.Save ass type bạn chọn All File.
  • Tại mục File Name bạn đánh tên file cần lưu dạng name.js, name.css, name.txt tùy thuộc vào file gốc.File Name bạn đánh tên file cần lưu dạng name.js, name.css, name.txt tùy thuộc vào file gốc.

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

Chúc thành công!

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

  • 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.

  1. Lấy nội dung trang HTML (ví dụ index.html)
  2. Bắt đầu dịch (parse) trang HTML cho trình duyệt.
  3. 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.
  4. 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.
  5. Sau khi file script đã được download thành công thì trình duyệt sẽ thực thi file script này.
  6. 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.

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>
// 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:asyncdefer trong thẻ script:

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

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

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:

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

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ẻ

// 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";
});
9 trong trang của mì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

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

    <!-- All the HTML content here -->

  </body>
</html>

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)

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

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

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

    <!-- All the HTML content here -->

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

Việc đặt thẻ

// 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";
});
9 ở 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ẻ

// 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";
});
9 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.
// 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";
});
0ngay 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.
// 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

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ẻ

// 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";
});
9 có chứa thuộc tính

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
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.
// 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";
});
4chỉ sau khi render HTML được hoàn thà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";
});
4

Khi bạn sử dụng attribute

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
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:

  1. Đặt thẻ
    // 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";
    });
    9 ở 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.
  2. 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ẻ
    // 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";
    });
    9 để 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.
  3. Sử dụng thuộc tính
    <script type="text/javascript" src="path/to/script1.js" async></script>
    <script type="text/javascript" src="path/to/script2.js" async></script>
    1 trong thẻ
    // 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";
    });
    9 để 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.