Các phương pháp hay nhất của Yahoo nêu rõ rằng putting JavaScript files on bottom có thể làm cho các trang của bạn tải nhanh hơn. Kinh nghiệm với điều này là gì? Các tác dụng phụ là gì, nếu có?Việc đặt tập lệnh ở cuối trang web có tăng tốc độ tải trang không?
Nó có một vài ưu điểm:
Rendering bắt đầu sớm hơn. Trình duyệt không thể bố trí các yếu tố chưa nhận được. Điều này tránh được vấn đề "màn hình trắng trống".
Ngăn giới hạn kết nối. Thông thường trình duyệt của bạn sẽ không cố gắng thực hiện nhiều hơn một vài kết nối với cùng một máy chủ tại một thời điểm. Nếu bạn có toàn bộ hàng đợi các tập lệnh chờ tải xuống từ máy chủ chậm, nó có thể thực sự phá hỏng trải nghiệm người dùng khi trang của bạn xuất hiện để dừng lại.
Tính đến năm 2013, điểm đầu tiên vẫn còn phần nào đúng. Tuy nhiên, việc đặt kịch bản ở phía dưới không còn phù hợp nữa. Bây giờ với HTML5, nếu kịch bản cần thay đổi DOM, bạn nên đặt nó vào đầu bằng một html5 "async" hoặc thuộc tính "trì hoãn", để tránh trì hoãn hiển thị tổng thể của trang. Đối với mục đích bố cục, tập lệnh của bạn được gọi nhanh nhất, bạn càng trì hoãn sự kiện DOMReady và trang của bạn nhanh nhất sẽ xuất hiện được tải cho người dùng. Chỉ các tập lệnh có liên quan đến hành động của người dùng sau window.onload mới được đặt ở dưới cùng. – hexalys
Theo như tôi có thể nói, nó chỉ đơn giản cho phép trình duyệt bắt đầu hiển thị sớm hơn.
vì vậy tôi tưởng tượng nếu tệp js đủ lớn, nó sẽ trông giống như trang được tải nhưng người dùng sẽ không thể làm bất cứ điều gì bởi vì trình duyệt vẫn tải các tệp js. –
Đó là những gì xảy ra trong Stack Overflow đôi khi, ít nhất. :) –
Không đúng khi người dùng không thể làm bất cứ điều gì - họ sẽ không thể làm bất cứ điều gì yêu cầu javascript. – Skilldrick
Một hiệu ứng phụ sẽ là một số tập lệnh không hoạt động chút nào nếu bạn đặt chúng ở cuối trang. Nếu có một tập lệnh chạy trong khi trang được hiển thị (ví dụ như các tập lệnh quảng cáo tương đối) dựa trên một hàm trong một tập lệnh khác, thì tập lệnh đó phải được tải trước.
Ngoài ra, nói rằng trang tải nhanh hơn không phải là sự thật chính xác. Những gì nó thực sự làm là tải các yếu tố hình ảnh của trang trước đó để có vẻ như trang của bạn đang tải nhanh hơn. Tổng thời gian tải tất cả các thành phần của trang vẫn như cũ.
Nếu bạn nhận được một bản sao của Microsoft Visual Round Trip Analyzer, bạn có thể cấu hình chính xác những gì đang xảy ra.
Điều tôi thấy thường thấy hơn là hầu hết các trình duyệt STOP PIPELINING yêu cầu khi chúng gặp phải tệp JavaScript và dành toàn bộ kết nối của chúng để tải xuống tệp đơn lẻ thay vì tải xuống song song.
Lý do dừng pipel là cho phép đưa tập lệnh vào trang ngay lập tức. Trong lịch sử, rất nhiều trang web được sử dụng để sử dụng document.write để thêm nội dung và tải xuống tập lệnh ngay lập tức cho phép trải nghiệm liền mạch hơn một chút.
Đây chắc chắn là hành vi mà Yahoo đang tối ưu hóa. (Tôi đã thấy đề xuất rất giống nhau trong tạp chí MSDN với giải thích ở trên.)
Điều quan trọng cần lưu ý là IE 7+ và FF 3+ ít có khả năng biểu hiện hành vi xấu. (Chủ yếu là kể từ khi sử dụng document.write đã giảm trong thực tế, và bây giờ có phương pháp tốt hơn để hiển thị trước nội dung.)
Trang của bạn thực sự tải nhanh hơn. Các trình duyệt sẽ mở nhiều kết nối để tải xuống ba hình ảnh song song, ví dụ. Mặt khác, các thẻ <script> trong hầu hết các trình duyệt khiến trình duyệt chặn tập lệnh đó đang thực thi. Nếu thẻ <script> của nó có thuộc tính src, trình duyệt sẽ chặn cả tải xuống và thực thi. Nếu bạn đặt các thẻ <script> ở cuối, bạn sẽ tránh được sự cố này.
Đồng thời, điều này có nghĩa là các trang đó không có bất kỳ chức năng JS nào cho đến khi chúng được tải xong. Một bài tập tốt về khả năng truy cập là để đảm bảo trang web của bạn chạy đủ tốt để có thể sử dụng cho đến khi JS tải.Điều này đảm bảo rằng trang sẽ (a) hoạt động tốt cho những người có kết nối chậm (b) hoạt động tốt cho những người bị suy yếu hoặc sử dụng trình duyệt chỉ có văn bản.
Hầu hết các trình duyệt đều tiếp tục tải xuống trong khi tập lệnh đang thực thi, vì vậy điều đó không hoàn toàn đúng. –
Đặt chúng ở dưới cùng là gần tương đương với việc sử dụng thuộc tính "defer" (thậm chí nhiều thông tin hơn here). Điều này tương tự như cách trình duyệt không thể tiếp tục với bố cục trang trừ khi thẻ IMG có thông tin chiều rộng và chiều cao - nếu javascript được tạo tạo nội dung, trình duyệt không thể tiếp tục bố cục cho đến khi nó biết nội dung nào và mọi thứ lớn như thế nào .
Miễn là javascript của bạn không cần chạy trước khi sự kiện tải trọng xảy ra, bạn sẽ có thể đặt thẻ tập lệnh ở cuối hoặc sử dụng thuộc tính trì hoãn.
+1 đẹp, không biết thuộc tính này tồn tại. –
nếu bạn đang phát triển cho firefox/safari, bạn luôn có thể kiểm tra với firebug/nhà phát triển giao diện điều khiển như họ thể hiện trình tự tải các tập tin
Có một số điểm.
Tải trang nhanh vì nội bộ JavaScript hoặc bên ngoài ở dưới cùng.
Nếu bạn chưa sử dụng phương thức onLoad của cửa sổ bằng JavaScript, nó sẽ bắt đầu thực hiện ngay khi được hiển thị. Tập lệnh ở dưới cùng đảm bảo rằng tập lệnh của bạn sẽ thực thi sau khi tải trang.
Nếu tập lệnh ở dạng tệp có nghĩa là bên ngoài thì sẽ hiển thị sau hình ảnh HTML và đối tượng trực quan khác tạo thành dạng xem trang.
Nếu bạn đang sử dụng fireFox thì có phích cắm để kiểm tra hiệu suất. Vui lòng nhấn vào trang firefox cho plugin này.
Tập lệnh chặn tải xuống khác, vì vậy tôi có xu hướng tải tập lệnh (ngoại trừ các tập lệnh được yêu cầu cho chức năng trang tức thì) ngay trước thẻ đóng, sau đó đặt các hàm phụ thuộc vào chúng sau đó. Cuối cùng, tôi thêm nội dung như Google analytics. Theo tôi hiểu, trang không nhất thiết phải tải * nhanh hơn * (mặc dù nó có thể sẽ), nhưng người dùng thấy nội dung * sớm hơn *, giúp tốc độ tải rõ ràng. Tham khảo các trang web nhanh hơn ở đây: http://stevesouders.com/hpws/move-scripts.php –