Có phải sử dụng JavaScript nội tuyến được ưu tiên cho một bao gồm bên ngoài nếu tập lệnh thực sự ngắn không?

Question

Tôi sử dụng JavaScripts bên ngoài trong một trang web vì tôi luôn cố giữ JavaScript ở phía dưới và bên ngoài.

Nhưng Google page speed được đưa ra đề nghị này

Các nguồn lực bên ngoài sau có phần thân phản ứng nhỏ. Nội tuyến phản hồi trong HTML có thể giảm chặn hiển thị trang.

http://websiteurl/ nên nội tuyến các tài nguyên nhỏ sau: http://websiteurl/script.js

tập tin js bên ngoài này chỉ có nội dung này

$(document).ready(function() { 
    $("#various2").fancybox({ 
     'width': 485, 
     'height': 691, 
    }); 
}); 

Nhưng trong YSlow tôi nhận được đề nghị này

lớp n/a về Đặt JavaScript và CSS bên ngoài

Chỉ xem xét điều này nếu thuộc tính của bạn là trang chủ phổ biến của người dùng.

There are a total of 3 inline scripts 

JavaScript và CSS được gạch chân trong tài liệu HTML được tải xuống mỗi khi tài liệu HTML được yêu cầu. Điều này làm giảm số lượng yêu cầu HTTP nhưng tăng kích thước tài liệu HTML. Mặt khác, nếu JavaScript và CSS nằm trong các tệp bên ngoài được trình duyệt lưu trữ, kích thước tài liệu HTML bị giảm mà không cần tăng số lượng yêu cầu HTTP .

Google hoặc Yahoo nào đúng?

Answer 1

Đây là một ví dụ có vấn đề, trên một vài mặt trận.

Bạn có thể sắp xếp các tập lệnh của mình theo cách mà bạn không cần phải nội tuyến mà JS. Ví dụ: bạn có thể có tệp common.js chạy đoạn mã đó, các đoạn mã tương tự khác và đơn giản hóa mã của bạn.

Ngoài ra, điều này dường như đã đánh thức cảnh sát kiến ​​trúc "không bao giờ nội tuyến bất kỳ JavaScript EVER" nào. Hóa ra rằng đôi khi đó là phương pháp hay nhất cho JavaScript nội dòng, ví dụ: xem đoạn trích phổ biến từ Google analytics.

Tại sao Google suggesting bạn nên đặt nội tuyến tập lệnh nhỏ này?

• Vì 20% of the page visits bạn nhận được có một bộ nhớ cache chưa sơn lót
• Nếu bạn có một cache, nó có thể là một kết nối mới vào trang web của bạn sẽ cần phải được mở (chuyến đi 1 vòng) và sau đó các dữ liệu giao trong Chuyến đi vòng 2. (nếu bạn may mắn, bạn có thể sử dụng kết nối liên tục và được cắt thành 1 chuyến đi khứ hồi
• Đối với ứng dụng web tiếng Anh "chung" tổng quát, bạn đang xem thời gian chuyến đi vòng 110ms điển hình cho dịch vụ được lưu trữ tại Hoa Kỳ Nếu bạn đang sử dụng CDN, số này có thể sẽ giảm đi một nửa,
• Ngay cả khi tài nguyên là cục bộ, trình duyệt web vẫn có thể cần truy cập vào đĩa để lấy tập tin nhỏ đó.
• Không đồng bộ hóa hoặc trì hoãn là chặn, nếu tập lệnh này ở đâu đó ở giữa trang của bạn, nó sẽ là bị kẹt ở đó cho đến khi tập lệnh tải xuống.

Từ góc độ hiệu suất nếu 2 lựa chọn duy nhất là:

1. Đặt 50 char Javascript inline chút
2. Đặt 50 ký tự trong một file riêng biệt và phục vụ nó.

Xem xét bạn là công dân web tốt và nén tất cả nội dung của bạn, số lượng trọng tải bổ sung này không đáng kể so với nguy cơ 20% khiến mọi người chậm trễ đáng kể. Tôi sẽ luôn chọn # 1.

Trong một thế giới không hoàn hảo, rất hiếm khi có một bộ tùy chọn rõ ràng và dễ dàng như vậy. Có một tùy chọn 3 liên quan đến việc tải async tải xuống và lấy chức năng này từ một khu vực chung.

Answer 2

Tôi thường viết nội tuyến javascript, đặc biệt nếu tập lệnh nhỏ này. Tôi sẽ nói chỉ cần dán nó vào mã của bạn. Nó sẽ không tăng kích thước tài liệu http rất nhiều.

Answer 3

Điều này không hoàn toàn đúng. Bạn có thể cấu hình máy chủ web (cũng ít nhất apache) để làm cho các scrips/ccs inlined khi chúng được phục vụ.

Dưới đây là một liên kết hữu ích

http://www.websiteoptimization.com/speed/tweak/mod_pagespeed/

Answer 4

Có hai yếu tố cần xem xét ở đây. Một là thời gian tải xuống, cái kia là khả năng bảo trì. Cả hai đều bị ảnh hưởng bởi bao nhiêu lần một đoạn Javascript là cần thiết.

Về thời gian tải xuống, bạn rõ ràng có hai lựa chọn: bao gồm JS trong phần nội dung của trang hoặc dưới dạng tệp bên ngoài. Bao gồm cả JS trong cơ thể lưu một yêu cầu HTTP bổ sung, mặc dù nó cũng bloats HTML một chút và có thể là một nỗi đau để duy trì nếu bạn có một số kịch bản bạn đang đặt nội tuyến trên một số trang khác nhau.

Một lưu ý quan trọng khác là liệu JS có cần ngay lập tức trên trang hay không. Nếu cần một mẩu JS nhỏ ngay khi tải trang, thì việc đưa nó vào nội tuyến có thể là một ý tưởng hay. Nếu nó đang được sử dụng cho một cái gì đó không đồng bộ trong tương lai, sau đó đặt nó một tập tin bên ngoài vẫn có thể là một lựa chọn tốt.

Answer 5

Làm kịch bản nội tuyến có thể có một số tác động có hại -

a) Mã tổ chức - Mã của bạn được nằm rải rác ở giữa đánh dấu của bạn, do đó ảnh hưởng đến khả năng đọc

b) Mã Thu nhỏ và obfuscation trở nên khó khăn

Tốt nhất là giữ js của bạn trong các tập tin riêng biệt, và sau đó tại thời gian xây dựng tích hợp tất cả chúng vào một tập tin duy nhất, và giảm thiểu và làm xáo trộn điều này.

Answer 6

Trong khi nội tuyến tập lệnh sẽ lưu yêu cầu, vì Yslow gợi ý nó làm tăng kích thước tài liệu HTML và trộn nội dung/đánh dấu với mã/logic mà bạn thường muốn tránh càng nhiều càng tốt.

Lý do YSlow cho bối cảnh này:

Chỉ xem xét việc này nếu tài sản của bạn là một trang chủ người dùng thông thường.

Đó có phải là nếu trang được tải thường xuyên, có giá trị để có JavaScript bên ngoài, vì tệp sẽ được lưu trong bộ nhớ cache trong trình duyệt. Vì vậy, nếu bạn kết hợp JS của bạn thành một tập tin, trên yêu cầu đầu tiên bạn phải chịu thêm một yêu cầu, và trên các yêu cầu tiếp theo tập tin được tải từ bộ nhớ cache.

Answer 7

Aaron Peters nói từ Velocity EU năm ngoái đưa ra một cái nhìn sâu sắc tốt vào các tùy chọn, và tất nhiên bạn nên chọn - http://www.slideshare.net/startrender/fast-loading-javascript

Đối với đoạn thực sự nhỏ js nó thực sự không đáng đặt chúng trong một tập tin bên ngoài như mạng chi phí của việc lấy chúng sẽ làm giảm lợi ích.

Tùy thuộc vào độ trễ có thể bao giờ có giá trị bao gồm các tập lệnh lớn, ví dụ: Liên kết di động có tải js trong trang đầu tiên được tải và sau đó được lưu trong bộ nhớ cục bộ cho các trang sau.

Addy Osmani thời gian gần đây đặt cùng một thư viện thực nghiệm để giúp mọi người chơi với kịch bản bộ nhớ đệm trong localStorage - http://addyosmani.github.com/basket.js/