Tôi đọc rằng bạn nên xác định các hàm JavaScript của mình trong thẻ <head>, nhưng vị trí của <script> (cho dù trong số <head>, <body> hoặc bất kỳ thẻ nào khác) có ảnh hưởng đến chức năng JavaScript hay không.Vị trí của thẻ tập lệnh trong một trang ảnh hưởng như thế nào đến chức năng JavaScript được xác định trong đó?
Cụ thể, nó ảnh hưởng như thế nào đến phạm vi chức năng và nơi bạn có thể gọi nó?
Telling mọi người thêm <SCRIPT> chỉ vào đầu âm thanh như là một điều hợp lý để làm, nhưng như những người khác đã nói có nhiều lý do tại sao điều này không được khuyến khích hoặc thậm chí thực tế - chủ yếu là tốc độ và cách các trang HTML được tạo động.
Đây là những gì HTML 4 spec says:
The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
Và một số HTML mẫu. Không nó trông khá tất cả các định dạng ở đây :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>
Và cái gì đó để mong muốn trong HTML 5:
thuộc tính async mới trong <SCRIPT>:
Note: There are ways [sic] a script can be executed:
The async attribute is "true": The script will be executed asynchrously with the rest of the page, so the script will be executed while the page continues the parsing.
The async attribute is "false", but the defer attribute is "true": The script will be executed when the page is finished with the parsing.
Nếu bạn có tập lệnh nội tuyến (chức năng bên ngoài) được đặt trước các chức năng có thể gọi, bạn có thể gặp lỗi vì chúng có thể chưa khả dụng. Không nói rằng nó luôn luôn xảy ra, chỉ là nó có thể tùy thuộc vào loại trình duyệt hoặc phiên bản.
Không. Hầu hết các kịch bản phân tán khung chương trình đều trên toàn bộ trang. Tôi chỉ hiếm khi gặp vấn đề vì điều đó (và chỉ từ các trình duyệt cũ).
hey! những người downvoting này mà không có một lời giải thích. có lẽ ai đó đã có rất nhiều vấn đề? –
Một trong các khía cạnh của vị trí là hiệu suất. Xem this fine article within the YSlow discussion vì sao đôi khi bạn nên đặt chúng ở cuối tài liệu.
Đối với vấn đề phạm vi, quy tắc hiển thị thông thường cho Javascript (vars được xác định bên trong hoặc bên ngoài chức năng, cục bộ, toàn cầu, đóng cửa, v.v.) không bị ảnh hưởng cho đến thời điểm này.
Liên kết này dường như đã bị hỏng. –
@CaptainBlammo - Cảm ơn vì đã lưu ý điều đó. Tôi đã cập nhật liên kết đến trang YSlow tổng quát hơn (và hy vọng hơn). – Alan
Nếu tập lệnh của bạn đề cập đến ID trên trang và trang chưa được hiển thị (tức là tập lệnh trước HTML hoặc tập lệnh của bạn được thực thi khi tải lên, thay vì DOM đã sẵn sàng), bạn cũng có thể gặp lỗi.
Quy tắc phạm vi của Javascript tương tự như perl - bạn có thể gọi bất kỳ chức năng nào ở cấp phạm vi hiện tại hoặc bất kỳ phạm vi nào cao hơn. Hạn chế duy nhất là hàm phải được xác định tại thời điểm bạn gọi nó. Vị trí trong nguồn là không liên quan - chỉ vị trí trong thời gian quan trọng.
Bạn nên tránh đặt tập lệnh trong <head> nếu có thể vì nó làm chậm hiển thị trang (xem liên kết Alan được đăng).
Quy tắc chơi bình thường vẫn đứng; không sử dụng nội dung trước khi được xác định. :)
Ngoài ra, hãy lưu ý rằng lời khuyên 'đặt mọi thứ ở dưới cùng' không phải là quy tắc chỉ trong sách - trong một số trường hợp, điều này có thể không khả thi và trong các trường hợp khác, đặt kịch bản ở nơi khác.
Lý do chính để đặt tập lệnh ở cuối tài liệu là hiệu suất, tập lệnh, không giống như các yêu cầu HTTP khác, không tải song song, có nghĩa là chúng sẽ làm chậm quá trình tải phần còn lại của trang. Một lý do khác để đặt tập lệnh ở dưới cùng là do đó bạn không phải sử dụng bất kỳ chức năng 'sẵn sàng DOM' nào. Vì thẻ script nằm bên dưới tất cả các phần tử, DOM sẽ sẵn sàng cho thao tác!
EDIT: Đọc này: http://developer.yahoo.com/performance/rules.html#js_bottom
Nếu bạn kéo Javascripts trong qua XMLHttpRequest, giống như Diodeus nói, nó có thể sẽ không hoạt động. Trong trường hợp của tôi, không có lỗi, trình duyệt chỉ bỏ qua (các) tập lệnh mới.
tôi đã kết thúc bằng này, không phải là terribly thanh lịch nhưng làm việc cho tôi cho đến nay:
http://zeta-puppis.com/2006/03/07/javascript-script-execution-in-innerhtml-the-revenge/
Làm thế nào để sử dụng execJS: http://zeta-puppis.com/2006/02/23/javascript-script-execution-in-innerhtml/
Lưu ý: Coi chừng < trong dòng này: for(var i=0;i<st.length; i++)
Vị trí của thẻ tập lệnh không quan trọng. Nếu bạn liên kết một hàm với phần tử tài liệu thì phần tử tài liệu phải được tải trước tiên trước khi chúng ta thực hiện hàm. giả sử getTeachers() là hàm trong tệp getTeachers.js. này sẽ cung cấp cho bạn một lỗi:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<span id="results" /></span>
</body>
</html>
Nó cho lỗi trước khi người đứng đầu được nạp đầu tiên và nó không thể tìm thấy phần tử với id được chỉ định. Mã bên dưới là chỉnh sửa:
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unit Teachers</title>
<head>
<script type="text/javascript" src="getTeachers.js"></script>
</head>
<body>
<form>
<input type = "button" id="buttonId" value = "Press for Results" /><br />
</form>
<script type="text/javascript">
document.getElementById("buttonId").onclick=function(){getResults()};
</script>
<span id="results" /></span>
</body>
</html>
Ví dụ hay, tại sao bạn cần tập lệnh bằng thẻ getTeachers.js? nó chỉ ném một lỗi. – peresisUser
@ m4bwav - tôi chủ yếu muốn tạo điểm bổ sung mà không được thực hiện rằng việc đặt SCRIPT trong BODY cho bất kỳ ai nghĩ rằng họ không nên đặt nó là OK. Ngoài ra, bài viết về quy tắc hiệu suất của Yahoo được đề cập rất đáng đọc và đề cập đến vấn đề này một cách triệt để –
Chỉ cần nhìn thấy tất cả các thẻ được viết bằng mũ làm cho độ tin cậy của câu trả lời này giảm xuống rất nhiều ... –
Mã với các thẻ được viết hoa là trực tiếp sao chép/dán từ [W3.org spec] (http://www.w3.org/TR/REC-html40/interact/scripts.html). – Homer