Hướng dẫn does it matter where you put javascript? - bạn đặt javascript ở đâu có vấn đề gì không?
Ngày đăng:11/10/2022
Trả lời:0
Lượt xem:42
Tôi đã gây rối với HTML5, tôi chưa bao giờ thực sự có cái nhìn tốt về JavaScript trước đây. Tôi đang tham khảo tệp tập lệnh như thế này (không phải trong đầu)
Tuy nhiên, tập lệnh dường như chỉ hoạt động nếu nó đặt bên dưới các yếu tố nhất định trên trang.
Có những tình huống cụ thể khi nó có vấn đề ở đâu JavaScript được đặt không?
Cảm ơn trước.
hỏi ngày 22 tháng 7 năm 2010 lúc 12:25Jul 22, 2010 at 12:25
Nếu tập lệnh không chờ đợi một sự kiện onload hoặc "sẵn sàng" nào đó, thì nó cần phải được đặt sau các yếu tố mà nó tham khảo (nếu không chúng sẽ không ở đó để tìm). Nếu bạn không chắc chắn, hãy gắn nó ngay trước
.
Trong trường hợp này, có vẻ như đó chính xác là những gì đang xảy ra, nó đang tìm kiếm các yếu tố chưa được thêm vào DOM. Đặt kịch bản ở dưới cùng của
là một thực tế phổ biến để chống lại điều này. Một số lựa chọn thay thế đang sử dụng sự kiện window.onload để chạy mã của bạn hoặc JQuery's $(document).ready() chẳng hạn (hầu hết các thư viện chính có một số tương đương với điều này).
Đã trả lời ngày 22 tháng 7 năm 2010 lúc 12:28Jul 22, 2010 at 12:28
Nick Cravernick CraverNick Craver
615K134 Huy hiệu vàng1292 Huy hiệu bạc1152 Huy hiệu đồng134 gold badges1292 silver badges1152 bronze badges
Nếu tập lệnh của bạn hoạt động trên một phần tử, nó cần được đặt sau phần tử đó trên trang hoặc thiết lập để thực thi khi trang hoàn tất tải. Nếu tập lệnh chạy trước khi phần tử đã được thêm vào DOM (xảy ra khi nó gặp phải khi trình duyệt phân tích trang), thì tập lệnh không thể tìm thấy phần tử mà bạn muốn nó hoạt động. Đặt tập lệnh sau khi phần tử đảm bảo rằng phần tử có sẵn để nó hoạt động. Tương tự như vậy, buộc nó phải chạy sau toàn bộ tải trang đảm bảo rằng tất cả các phần tử đều có sẵn cho tập lệnh.
Tôi đề nghị rằng, trong thời gian càng tốt, bạn tải các tập lệnh của mình ngay trước khi thẻ
đóng. Tôi cũng sẽ xem xét bằng cách sử dụng một khung, như jQuery, giúp dễ dàng chạy các tập lệnh của bạn trên trang tải hoàn chỉnh và bọc mã bên trong sự kiện tải của nó.
Đã trả lời ngày 22 tháng 7 năm 2010 lúc 12:33Jul 22, 2010 at 12:33
TVanfossontvanfossontvanfosson
514K97 Huy hiệu vàng695 Huy hiệu bạc793 Huy hiệu Đồng97 gold badges695 silver badges793
bronze badges
Thực tiễn tốt nhất theo quy tắc hiệu suất của Yahoo là đặt các tập lệnh ở cuối trang:
Vấn đề gây ra bởi các tập lệnh là chúng chặn các bản tải xuống song song. Thông số kỹ thuật HTTP/1.1 cho thấy các trình duyệt tải xuống không quá hai thành phần song song cho mỗi tên máy chủ. Nếu bạn phục vụ hình ảnh của mình từ nhiều tên máy chủ, bạn có thể nhận được nhiều hơn hai lượt tải xuống xảy ra song song. Mặc dù một tập lệnh đang tải xuống, tuy nhiên, trình duyệt sẽ không bắt đầu bất kỳ tải xuống nào khác, ngay cả trên các tên máy chủ khác nhau.
Trong một số tình huống, không dễ để di chuyển các tập lệnh xuống đáy. Ví dụ, nếu tập lệnh sử dụng Document.Write để chèn một phần nội dung của trang, nó không thể được di chuyển thấp hơn trong trang. Cũng có thể có các vấn đề phạm vi. Trong nhiều trường hợp, có nhiều cách để giải quyết những tình huống này.
Một gợi ý thay thế thường xuất hiện là sử dụng các tập lệnh hoãn lại. Thuộc tính trì hoãn chỉ ra rằng tập lệnh không chứa document.write và là manh mối cho các trình duyệt mà chúng có thể tiếp tục kết xuất. Thật không may, Firefox không hỗ trợ thuộc tính trì hoãn. Trong Internet Explorer, kịch bản có thể được hoãn lại, nhưng không nhiều như mong muốn. Nếu một tập lệnh có thể được hoãn lại, nó cũng có thể được di chuyển xuống cuối trang. Điều đó sẽ làm cho các trang web của bạn tải nhanh hơn.
Đã trả lời ngày 22 tháng 7 năm 2010 lúc 12:30Jul 22, 2010 at 12:30
Robyawrobyawrobyaw
2.2182 Huy hiệu vàng24 Huy hiệu bạc27 Huy hiệu đồng2 gold badges24 silver badges27 bronze badges
2
Vâng, chúng tôi cần biết những gì trong kịch bản của bạn để nói với bạn thực sự, nhưng câu trả lời ngắn gọn là "Có nó không quan trọng".
Các tập lệnh (về cơ bản) thực thi khi gặp Trình duyệt. Một sai lầm cổ điển là tạo một tham chiếu đến một phần tử trang trong tập lệnh được đặt trước đó trong tài liệu so với phần tử mà nó tham khảo - khi tập lệnh được thực thi, phần tử chưa tồn tại!
Nó thường được coi là phù hợp để giữ các tập lệnh trong đầu, giải pháp cho vấn đề trên do đó là đính kèm mã chức năng vào các trình xử lý sự kiện onload.
Vòng thưởng: Một vấn đề về vị trí tập lệnh lý do tinh tế hơn nhiều là vì hầu hết các trình duyệt sẽ tải xuống một lần khi chúng gặp phải tập lệnh (vì lý do bảo mật và vì tập lệnh có thể sửa đổi các yêu cầu tải xuống chẳng hạn). Đây là một trong những lý do Yahoo khuyên bạn nên đặt các tập lệnh cuối cùng trong tài liệu của bạn, nhưng đó là một điều gây tranh cãi để làm vì một lợi ích tinh tế của nhận thức.
Đã trả lời ngày 22 tháng 7 năm 2010 lúc 12:31Jul 22, 2010 at 12:31
Annakataannakataannakata
73.1K16 Huy hiệu vàng113 Huy hiệu bạc180 Huy hiệu đồng16 gold badges113 silver badges180 bronze badges
Vâng, nó làm.
Ví dụ: chúng ta hãy nói mã JS của bạn ở đầu. và nó được giải thích trước khi trình duyệt được thực hiện một phần của cây Dom ... trong trường hợp này là phần tử HTML mà bạn đang tham khảo, nếu được tham chiếu trước khi nó có sẵn, sẽ tạo ra một lỗi rằng phần tử không được xác định.
Một lý do khác là trải nghiệm người dùng. Nếu CSS ở trên cùng, khi HTML được hiển thị, tất cả đều có vẻ tốt, nhưng trừ khi JS ở phía dưới, bạn sẽ phải chờ nó được tải và sẵn sàng thực hiện trước khi phần còn lại được hiển thị; Do đó, làm chậm tốc độ mà các mục trên màn hình được hiển thị.
Tôi thấy nó rất nhiều. Các nét khác nhau cho các trình duyệt khác nhau, nhưng chỉ cần đặt JS ở phía dưới, và CSS ở phía trên và bạn tránh phải lo lắng về những thứ như thế này.
Đã trả lời ngày 22 tháng 7 năm 2010 lúc 13:04Jul 22, 2010 at 13:04
Nó phụ thuộc vào những gì kịch bản được thiết kế để làm. Nếu nó đang sử dụng phương thức tài liệu.write (), thì nó không quan trọng ở đâu trên trang. Nếu nó đang cố gắng tham chiếu các phần tử trong DOM, tốt nhất là đặt vào đầu và có các chức năng truy cập các thành phần DOM được kích hoạt sau khi trang được tải.
Đã trả lời ngày 22 tháng 7 năm 2010 lúc 12:29Jul 22, 2010 at
12:29
Mạnh mẽRobusto
30.8k8 Huy hiệu vàng55 Huy hiệu bạc76 Huy hiệu Đồng8 gold badges55 silver badges76 bronze badges
Có một vài kịch bản trong đó vị trí là quan trọng.
