Đang tải javascript chính trên mỗi trang? Hoặc phá vỡ nó đến các trang có liên quan?

13

Tôi có một 700kbtệp tin giải nén được tải trên mỗi trang. Trước đây tôi có 12các tệp javascript trên mỗi trang nhưng để giảm yêu cầu http, tôi đã nén tất cả chúng vào 1 file.

Tập tin này được ~130kb gzippedvà được phục vụ qua gzip. Tuy nhiên, trên máy tính cục bộ, nó vẫn được giải nén và tải trên mỗi trang. Đây có phải là một vấn đề hiệu suất?

Tôi đã lập hồ sơ javascript với trình hồ sơ firebird nhưng không thấy bất kỳ vấn đề nào. Vấn đề / ảo giác tôi gặp phải là có những thư viện jquery được nén trong tệp đó đôi khi không được sử dụng trên trang hiện tại.

Ví dụ jquery datatablesđược nén 200kb và chỉ được tải trên 2 trang web của tôi. Khác là jqplotvà đó là một 200kb.

Bây giờ tôi có 400kbmã thừa không được thực thi trên 80%các trang.

Tôi có nên để lại mọi thứ trong 1 tập tin?

Tôi có nên lấy ra các thư viện jquery và chỉ tải JS có liên quan trên trang hiện tại không?

— Kyle
nguồn

Nếu có 700kb mã JS, bạn thực sự nên phân tách lại và chỉ bao gồm các tập lệnh bạn thực sự cần. Ngoài ra, bằng cách sử dụng jQuery ("Viết ít hơn, làm nhiều hơn"), có vẻ như hơi quá khổ để có tệp JS lớn như vậy. Bạn đang làm cái quái gì với một khối lượng lớn như vậy?

— feeela

@feeela hãy xem jquery-ui, jquery.datatables. Những người một mình là 400kb với nhau. Tôi đã có các plugin khác tôi cũng sử dụng như jquery.validate, jquery.uniform - công cụ này bổ sung. xD

— Kyle

Trong trường hợp đó - như đã nói dưới đây - bạn thực sự nên phân chia các tập lệnh và chỉ tải những gì cần thiết

— phí

6

Bạn có thể sử dụng các yêu cầu để tải động các thư viện bạn chỉ cần trên các trang đó. Sau đó, bạn chỉ phải tải các requestjs (khoảng 14k) trên tất cả các trang, tiết kiệm khoảng 385kb.

Tích hợp cũng rất dễ dàng: chỉ cần "bọc" mã bạn có với yêu cầu bao gồm các công cụ:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

— Michael
nguồn

1

Tôi thực sự thích thiết kế trang web đó. Tôi chưa bao giờ nghe về các yêu cầu. Làm thế nào để bạn đánh giá điều này qua các yêu cầu http? Điều này không đặt thêm yêu cầu http trên trang? (không tệ sao?) Xin lỗi vì những câu hỏi ngớ ngẩn của tôi.

— Kyle

Có ít yêu cầu hơn là tốt hơn tất nhiên, nhưng tiết kiệm> 350k cũng không quá tệ. Có, trang web của bạn sẽ thực hiện thêm một yêu cầu nếu bạn bao gồm một thư viện khác trên trang đó. Nếu nó datatablestrên một trang web và jqplottrên một trang web khác, điều đó là tốt. Tải thêm năm lib trên 50% số trang sẽ khiến lợi thế biến mất, tôi đồng ý. Nhưng trong trường hợp của bạn, tôi coi đó là một giải pháp rất tốt (giả sử rằng phần còn lại của bạn js vẫn giữ một tệp được nén).

— Michael

Cảm ơn Michael. Giải pháp này khá xuất sắc. Trước đây tôi sẽ chia ra mọi thứ trên một trang nhưng điều này ... Điều này tốt hơn những gì tôi nghĩ. Cảm ơn bạn cho đề nghị này. Vì bạn đã quen thuộc với các yêu cầu, bạn có nghĩ rằng các yêu cầu là đủ? Tôi thấy trên một số trang web họ sử dụng google để tải jquery của họ và các thư viện khác , google.load('...').

— Kyle

1

Tôi thực sự khuyên bạn nên tải các thư viện phổ biến từ Google (hoặc các trang web khác cung cấp nó). Điều này có 2 ưu điểm: a) tệp lib được lưu trữ giữa các trang web khác nhau. Có thể người dùng đã truy cập một trang web trước đó, cũng sử dụng jquery được tải từ Google. Tập tin này sau đó được tải từ bộ đệm, không phải từ máy chủ! b) Ngay cả khi nó có được nạp, nó sẽ nhanh hơn nhiều để tải nó từ Google CDN, hơn là từ máy chủ web của riêng bạn.

— Michael

8

Nếu khung / CMS / bất cứ thứ gì của bạn có các chức năng phù hợp, bạn có thể đưa vào kịch bản một cách có điều kiện như @Michael gợi ý, nhưng không có thư viện bổ sung.

Lấy trường hợp dữ liệu của bạn, ví dụ, WordPress có thể xử lý tình huống thông qua một số thứ như:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

Không có gì sai với RequireJS; bạn chỉ cần đánh giá xem mức độ phức tạp bổ sung mà nó thêm vào (cộng với việc học cách sử dụng nó ở nơi đầu tiên) bù đắp những gì các công cụ sẵn có hơn có thể làm cho bạn. Nếu bạn chỉ có hai trường hợp bạn đã đề cập ở trên, đây có thể là một lựa chọn tốt hơn. Nếu bạn có nhiều thứ đang diễn ra, thì RequireJS có thể là một cách tiếp cận tốt hơn trên toàn bộ.

— Su '
nguồn

Tôi có một trang web tùy chỉnh mà tôi đã tạo từ một mẫu html mà tôi đã mua từ themeforest. Vấn đề duy nhất là anh chàng có 6 tệp JS nằm rải rác xung quanh và nó rất lộn xộn. Vì vậy, tôi đặt chúng vào một tệp và bao gồm một vài thư viện jqplot, datatables, jquery-ui. Tất cả những thứ đó thêm vào khoảng 550-600kb. 100kb là JS của tôi sử dụng các thư viện đó. Tôi cảm thấy mình nên sửa cái này thay vì tải quá nhiều lib lib không liên quan trên mỗi trang. Cảm ơn bạn đã gợi ý! =)

— Kyle

5

700kb JavaScript LÀ một vấn đề về hiệu suất, bởi vì nó phải được phân tích cú pháp sau khi tải trang. Do đó, bạn nên lưu ý rằng chỉ những đoạn script cần thiết mới được tải. Một JavaScript lớn có thể ổn trên các trang AJAX đầy đủ, chẳng hạn như GMail, khi điều hướng được xử lý nội bộ mà không cần rời khỏi trang duy nhất. Tuy nhiên, ngay cả các trang web AJAX đầy đủ cũng thực hiện tải JS động để ngăn tải JS không cần thiết khi bắt đầu (cả bộ nhớ và tốc độ hiện tại).

Bạn đã nói rằng bạn muốn giảm lưu lượng http. Bạn nên chơi với bộ nhớ đệm HTTP . Vấn đề là, các thay đổi đối với JS có thể không hiển thị cho đến khi bộ đệm hết hạn, nếu bạn đặt thời gian hết hạn quá cao.

Tuy nhiên, có một mẹo mà bạn không đề cập đến myscript.js, nhưng myscript.js?version={myversion}. Sau khi cập nhật ứng dụng, bạn thay đổi {myversion}và bạn buộc tải lại JavaScript.

— Thủy thủ Danubian
nguồn

Đúng, với kích thước này của JS, cùng với thực tế là hầu hết các thư viện khá phổ biến, việc sử dụng CDN sẽ là một lợi ích lớn.

— Zhaph - Ben Duguid

1

~ 700kb JavaScript là một vấn đề về hiệu suất và nếu được nén và chúng ta phải xem Quy tắc cần tuân thủ trong khi xử lý để tối ưu hóa Mã là:

Minify Javascripts - Đơn giản là bạn đang nén và giải nén, điều này không làm giảm mã, trước hết hãy sử dụng công cụ Minify JS tốt và Giảm thiểu mã của bạn. Bạn có 12 Tệp và mỗi tệp sẽ được Giảm thiểu một cách riêng biệt trước khi tham gia club để có hiệu suất tốt nhất.
Sử dụng tải javascript không đồng bộ , bằng cách sử dụng kết quả tải không đồng bộ trong thời gian tải rất nhanh và hiển thị trang. Tác động của người dùng rất mạnh vì tải không đồng bộ tốt sẽ không chặn quá trình kết xuất và thời gian tải trang được cảm nhận giảm đi rất nhiều. Hình ảnh và các mục được hiển thị khác theo quy định sẽ được hiển thị khi không có javascript được tải.
Sử dụng cdG GOOGLE cho JQUERY ; Tôi nghĩ rằng bạn đang sử dụng JQUERY và tải nó từ trang web của riêng bạn, đây cũng là một lợi thế không được bổ sung, vui lòng sử dụng GOOGLE CDN (miễn phí) để tải JQUERY. Vì nó đang được sử dụng bởi hầu hết mọi trang web thứ 3 và do đó đã có sẵn trên máy khách trong bộ đệm.
Tiêu đề hết hạn dài tùy chỉnh : Một số cách trang web được tải với vấn đề về thời gian tải thì bạn phải cung cấp Hết hạn dài cho các tệp HTTP JS, để chúng không thể được tải xuống mỗi lần, điều này sẽ làm giảm yêu cầu lần thứ hai. Theo nghiên cứu của tôi, thời gian tải trên trang thứ hai có nhiều lối thoát hơn so với lần truy cập trang đầu tiên.
Kiểm tra với Tốc độ trang : Một số lần các tài nguyên khác cũng ảnh hưởng đến tốc độ tải của trang, vui lòng kiểm tra chéo và cũng cố gắng tối ưu hóa các tài nguyên khác. Khi thực hiện từng bước trên mỗi tài nguyên sẽ có thêm thời gian để tải JS của chúng tôi.

— Cây nho1982
nguồn