Bao gồm tệp Javascript trong các trang html- điều gì sẽ xảy ra bên dưới trong trình duyệt?

Question

Tôi nghĩ rằng đây có thể là một câu hỏi phụ thuộc trình duyệt - Giả sử tôi có 10 tệp Javascript và một số trang HTML. Giả sử HTML pageA chỉ cần JS1.js và JS3.js, tương tự như HTML pageB cần JS4.js và JS1.js. Tôi muốn biết điều gì sẽ ảnh hưởng đến việc bao gồm tất cả 10 tệp javascript trong tất cả các trang HTML? Nó có liên quan trực tiếp đến mức tiêu thụ bộ nhớ của trình duyệt không?

Tôi đang gặp sự cố này đặc biệt với thư viện javascript YUI. Có một số thành phần như dữ liệu, sự kiện, vùng chứa, lịch, sự kiện dom, v.v., Thứ tự mà chúng được bao gồm cũng có vẻ quan trọng - Ví dụ: các sự kiện dom-js nên được bao gồm trước khi phần còn lại cho nó hoạt động . Vì vậy, để tránh tất cả sự nhầm lẫn này, tôi đã nghĩ đến việc bao gồm tất cả các tệp js này trong một tệp tiêu đề được đưa vào tất cả các trang HTML.

Điều mà tôi lo lắng là vấn đề về bộ nhớ và hiệu suất hoạt động mà nó có thể gây ra. Vui lòng cung cấp gợi ý của bạn trên cùng ..

Cảm ơn, -Keshav

Answer 1

Bất kỳ tập lệnh nào bạn tải vào trang của mình, ngay cả khi đã tải xuống và lưu vào bộ nhớ cache vẫn phải được phân tích cú pháp trước khi phần còn lại của trang có thể tải.Vì vậy, trong ý nghĩa đó có một hình phạt bộ nhớ, và vẫn còn một tiềm năng cho một cái gì đó trong kịch bản để làm chậm đáng kể rendering.

Tuy nhiên, trong trường hợp thư viện được thiết kế thận trọng như YUI, tôi hy vọng thời gian phân tích sẽ được giảm thiểu.

Nếu bạn có thể tải tất cả tập lệnh của mình ở cuối trang, điều đó có thể cải thiện hiệu suất khi toàn bộ trang có thể hiển thị trước khi bị chặn bởi thực thi javascript và trang web của bạn sẽ trở nên dễ dàng hơn nhiều.

Tôi khuyên bạn nên điều tra Firebug Net panel và YSlow extension để nhận thống kê hiệu suất cụ thể cho trang web của mình.

Answer 2

kịch bản bên ngoài trì hoãn việc hiển thị các html sau cho đến khi họ đã được nạp và thực thi. Tác động ít hơn nhiều so với tải trang đầu tiên, vì chúng đã được lưu vào bộ nhớ cache, mặc dù các trình duyệt thỉnh thoảng sẽ kiểm tra các phiên bản mới, vẫn còn chậm trễ. Tôi cố gắng giới hạn số lượng tập lệnh và di chuyển thẻ tập lệnh xuống cuối trang khi có thể. Người dùng sẽ không nhận thấy độ trễ tải tập lệnh nếu trang đã hiển thị đầy đủ.

Answer 3

Scriptaculous thực hiện một cách hay để xử lý các phụ thuộc của js. Đoán bạn có thể kiểm tra nó ra và "tái thực hiện" nó. ; D

Đối với bộ nhớ bloat và các vấn đề hiệu suất ... miễn là JS của bạn không bị rò rỉ nhiều (YUI có lẽ không) bộ nhớ sẽ không có nhiều vấn đề, mặc dù nó sẽ làm cho trang của bạn tải chậm hơn, đặc biệt nếu được tải trong tiêu đề.

Answer 4

nếu một tập lệnh cụ thể không làm gì, nó sẽ không ảnh hưởng đến hiệu suất. Rõ ràng trang đầu tiên sẽ tải chậm, nhưng phần còn lại sẽ không cần tải tất cả các tập lệnh vì chúng sẽ được lưu vào bộ nhớ cache. Vì vậy, các trang tiếp theo sẽ được tải nhanh hơn

Mẹo:

1) Tải kịch bản ở dưới cùng của trang (ngay trước thẻ BODY bế mạc).

2) Sử dụng cách không chặn các tập lệnh. Đây là cái tôi đang sử dụng.

<script type="text/javascript"> 

function AttachScript(src) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    document.getElementsByTagName("body")[0].appendChild(script); 
    script.src = src; 
} 
AttachScript("/js/jquery.min.js"); 
AttachScript("/js/ndr.js"); 
AttachScript("/js/shadowbox.js"); 
AttachScript("/js/libraries/sizzle/sizzle.js"); 
AttachScript("/js/languages/shadowbox-es.js"); 
AttachScript("/js/players/shadowbox-img.js"); 
AttachScript("/js/adapters/shadowbox-jquery.js"); 

Không thể tìm thấy trang web nguồn mặc dù :-(

Answer 5

Memory tiêu thụ:

Giả sử các kịch bản được viết tốt thì tiêu thụ bộ nhớ và hiệu suất vấn đề cần được Vấn đề lớn nhất của bạn với việc bao gồm tất cả các tập lệnh cùng một lúc sẽ là độ trễ trong trải nghiệm người dùng lần đầu tiên hoặc nếu bạn thực hiện thay đổi, bởi vì họ sẽ phải tải xuống tất cả chúng trong một cú. Tôi nghĩ bạn chỉ nên bao gồm các tập lệnh bạn cần trên mỗi trang, không phải tất cả các tập lệnh cùng một lúc.

Bạn có thể tự mình đánh giá tác động bằng các công cụ đơn giản như trình quản lý tác vụ/quy trình trong Windows để theo dõi mức sử dụng bộ nhớ/bộ xử lý hoặc cắm vào như Firebug for FireFox.

Bạn cũng có thể xem xét một thứ gọi là minification để giúp làm cho tệp tập lệnh của bạn càng nhỏ càng tốt.

Dependencies:

Thứ tự mà bạn bao gồm các kịch bản là quan trọng như một số kịch bản có thể phụ thuộc vào chức năng trong các kịch bản khác. Vì vậy, nếu mã trong một tập lệnh cố gắng chạy và nó yêu cầu mã trong một tập lệnh khác chưa được tải xuống thì nó sẽ thất bại. Lời khuyên của tôi là thực sự hiểu những phụ thuộc đó trong các tệp kịch bản lệnh của bạn thay vì chỉ tải xuống mọi thứ cùng một lúc vì nó có vẻ dễ dàng hơn.

Answer 6

Sử dụng Trình cấu hình YUI để giúp xác định tệp được yêu cầu bao gồm và thứ tự, cũng như cách sử dụng Yahoo! Dịch vụ kết hợp CDN để kết hợp tất cả các tệp YUI vào một thẻ tập lệnh duy nhất.

http://developer.yahoo.com/yui/articles/hosting/

Answer 7

Nội dung bên ngoài vào trang HTML thường được trình duyệt lưu trong bộ nhớ cache. Nội dung bên ngoài là bất kỳ thứ gì được yêu cầu từ HTML như hình ảnh, CSS, JavaScript và bất kỳ thứ gì khác. Vì vậy, nếu bạn tải tất cả 10 tập tin kịch bản lên phía trước, bạn đang buộc một lượt tải xuống lớn một lần cho người dùng của bạn. Sau một thời gian này người dùng không cần phải tải xuống các tập lệnh một lần nữa trừ khi sửa đổi dấu thời gian trên các tập tin thay đổi.

Trang của bạn sẽ chỉ sử dụng những gì nó yêu cầu. Nếu một trang cụ thể yêu cầu js4.js và js5.js thì tất cả các hàm trong các tệp đó sẽ được tải vào trình thông dịch theo thứ tự mà chúng được yêu cầu đầu tiên từ HTML và thứ hai theo thứ tự mà chúng được chỉ định trong mỗi tệp những tệp đó. Nếu có bất kỳ xung đột không gian tên nào được bao giờ được tải vào thông dịch viên thắng cuối cùng. Trình thông dịch sẽ xóa các chức năng khi trang được tải xuống từ trình duyệt.

Để có hiệu quả, tôi khuyên bạn nên sử dụng quy trình bao gồm phía máy chủ để đọc từng tệp js và đưa nội dung của từng tệp vào một tệp js mới. Điều này sẽ giảm số lượng yêu cầu HTTP đến máy chủ và lưu người dùng của bạn một lượng lớn tài nguyên băng thông liên quan đến tiêu đề HTTP và yêu cầu GET. Ngoài ra, hãy đặt yêu cầu của tệp tập lệnh mới này ngay trước thẻ đóng của thẻ HTML của bạn. Tải xuống các tập lệnh chặn tải xuống song song trong IE, do đó bạn muốn tải tập lệnh ở điểm thấp nhất có thể trong trang.

Answer 8

Bạn có thể đọc các phương pháp lưu trong bộ nhớ đệm bằng cách sử dụng PHP để chuyển một số tệp javascript thành một tệp JS lớn bao gồm mọi thứ bạn cần. Để tăng hiệu suất bổ sung, bạn có thể làm cho bộ nhớ cache của trình duyệt tập tin cục bộ ngoài việc gửi nó gzipped (nếu trình duyệt có hỗ trợ cho việc mã hóa bằng cách sử dụng một cái gì đó như ob_start ("ob_gzhandler");). Bằng cách sử dụng mã hóa gzip, bạn có thể giảm nghiêm trọng các tệp của tệp JS chính mà bạn đang gửi bao gồm tất cả mã JS của bạn (vì văn bản thuần túy nén rất tốt). Gần đây tôi đã phải làm điều này trên trang web của riêng tôi và nó hoạt động như một sự quyến rũ cho cả tệp JS và CSS.

http://www.ejeliot.com/blog/72

Lưu ý rằng bằng cách làm theo các hướng dẫn trên hướng dẫn đó, tập tin JS của bạn sẽ chỉ được gửi một lần và các trình duyệt trên máy tính của khách hàng sẽ giữ một bản sao cục bộ được lưu trữ trong đó cũng sẽ cải thiện hiệu suất của tất cả các lần sau đó.

Ngoài ra, hãy xem xét googling "Minify" sẽ được lưu trữ trên Google Code.