Trì hoãn việc tải JavaScript

Tôi đã nghe và đọc một số bài viết về trì hoãn việc tải JavaScript và rất quan tâm. Có vẻ như rất hứa hẹn cho các ứng dụng web có thể hữu ích trên nền tảng Di động, nơi số lượng JavaScript có thể được tải và thực thi bị giới hạn.Trì hoãn việc tải JavaScript

Thật không may, hầu hết các bài viết đều nói về điều này ở mức cực kỳ cao. Làm thế nào một trong những cách tiếp cận này?

EDIT

Thông thường, tất cả các hoạt Javascript được nạp vào tải trang, tuy nhiên, có thể có các chức năng mà không phải là cần thiết cho đến khi một hành động nào đó xảy ra, lúc đó, JavaScript nên được nạp. Điều này giúp giảm bớt gánh nặng của trình duyệt khi tải trang.

Cụ thể, tôi có một trang sử dụng rất nhiều JavaScript. Khi tôi tải trang trên điện thoại của tôi, trang đó sẽ không tải đúng cách. Khi tôi sửa lỗi trang, tôi đã loại bỏ một số hàm JS. Một khi đủ đã bị loại bỏ, trang đột nhiên hoạt động.

Tôi muốn có thể tải JS khi cần. Và thậm chí có thể loại bỏ các chức năng đơn giản được sử dụng để khởi động.

Nguồn

2011-09-01 steveo225

bạn đang cố trì hoãn việc tải thực thi mã javascript hoặc trình duyệt tải tệp js? Nếu hàm jquery.ready trước đó sau đó sẽ làm những gì bạn muốn – Eonasdan

Thông tin cơ bản rất đơn giản - chia nhỏ mã JavaScript của bạn thành các thành phần riêng biệt về mặt logic và chỉ tải những gì bạn cần. Tùy thuộc vào những gì bạn đang xây dựng bạn có thể sử dụng:

Máy bốc hàng:

Modernizr.load (hoặc yepnope.js tự)
LABjs
Many, many, many thư viện tải chậm khác.

phụ thuộc (mà là cũng bộ tải):

Require.js
dojo.require
JavaScript MVC's steal.js
Một số thư viện quản lý phụ thuộc khác.

Những công cụ này làm cho việc sử dụng một loạt các kỹ thuật để trì hoãn việc tải của kịch bản, các thực hiện của kịch bản, quản lý phụ thuộc, vv Những gì bạn cần phụ thuộc vào những gì bạn đang xây dựng.

Bạn cũng có thể muốn đọc qua this discussion để tìm hiểu thêm về ưu điểm và khuyết điểm của việc sử dụng các kỹ thuật đó.

đáp ứng để chỉnh sửa:

Không có thực sự là một cách tốt để dỡ bỏ JavaScript mà bạn đã nạp - xấp xỉ gần nhất bạn có thể nhận được là để giữ cho tất cả các mã tải của bạn được đặt tên trong không gian tên của ứng dụng của bạn và sau đó "dọn sạch" bằng cách đặt không gian tên đó và tất cả các tham chiếu đến không gian tên là null.

Nguồn

2011-09-01 14:56:52

nếu bạn sử dụng một phương pháp AMD hoặc commonJS (requirejs và backdraft sử dụng AMD) thì JS đã tải được liên kết với một biến cục bộ.Khi điều đó nằm ngoài phạm vi, miễn là bạn không giữ bất kỳ tham chiếu nào, nó sẽ bị thu gom rác, do đó cấu trúc mã của bạn có thể quản lý cách các gói của bạn được lưu giữ xung quanh. – peller

Nhận xét này hơi gây hiểu lầm, vì vậy tôi nghĩ tôi sẽ làm rõ. CommonJS và AMD không có gì đặc biệt để giúp thu thập mã rác của bạn. Ở mức tốt nhất, hàm gọi lại trong AMD là một đóng, và vì vậy tất cả các biến của bạn được sắp xếp để đóng gói cho _potential_ garbage collection (giả sử bạn không tiếp xúc với bất kỳ chức năng nào có thể giữ ngữ cảnh của hàm gọi của hàm đóng). một IIFE giống như hầu hết mọi người làm trong mã của họ. Bởi IIFE, tôi có nghĩa là gói mã của bạn trong (function() {... mã của bạn ở đây ...}()); –

Trì hoãn thời gian tải xuống? Lý do thường là lý do tại sao JS được tải lần cuối, là do toàn bộ DOM đã được tải trước.

Một cách dễ dàng là chỉ cần sử dụng

<body onload="doSomething();">

Vì vậy, bạn có thể dễ dàng có doSomething() chức năng để tải tất cả JS của bạn.

Bạn cũng có thể thêm một chức năng để window.onload, như

window.onload = function(){ };

Ngoài ra, nếu bạn đang sử dụng librarys JS, chẳng hạn như jQuery và Dojo, họ từng có của chính họ onReady và addOnLoad phương pháp theo thứ tự để chạy một số JS chỉ sau khi tài liệu đã được tải.

Nguồn

2011-09-01 14:56:12 Layke

Đây là a useful article trên thuộc tính không đồng bộ của phần tử tập lệnh và thuộc tính không đồng bộ. Việc chỉ định các thuộc tính này sẽ khiến trình duyệt trì hoãn việc tải theo nhiều cách khác nhau. Bạn cũng có thể tải trong tập lệnh bên ngoài bằng JavaScript sau khi tải trang. Cần lưu ý rằng vị trí của các phần tử kịch bản trong tài liệu HTML của bạn sẽ xác định thứ tự tải và thực thi nếu không được chỉ định và không đồng bộ.

Nguồn

2011-09-01 14:57:42 Spycho

Tôi đã sử dụng một tập lệnh đơn giản được xuất bản phù hợp với một số sửa đổi do tôi thực hiện. Giả sử tệp COMPRESSED Javascript của bạn nằm trong thư mục bộ nhớ cache trong máy chủ web của bạn và bạn muốn trì hoãn việc tải tệp nén js này.

của bạn tập tin js nén:

80aaad2a95e397a9f6f64ac79c4b452f.js

Đây là mã code html:

<script type="text/javascript" src="/resources/js/defer.js?cache=80aaad2a95e397a9f6f64ac79c4b452f.js"></script>

Đây là nội dung defer.js file:

(function() { 

    /* 
    * http://gtmetrix.com/ 
    * In order to load a page, the browser must parse the contents of all <script> tags, 
    * which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, 
    * and deferring parsing of unneeded JavaScript until it needs to be executed, 
    * you can reduce the initial load time of your page. 
    */ 

    // http://feather.elektrum.org/book/src.html 
    // Get the script tag from the html 
    var scripts = document.getElementsByTagName('script'); 
    var myScript = scripts[ scripts.length - 1 ]; 

    // Get the querystring 
    var queryString = myScript.src.replace(/^[^\?]+\??/,''); 

    // Parse the parameters 
    var params = parseQuery(queryString); 

    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = '/cache/' + params.cache; // Add the name of the js file 

    var x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(s, x); 

    function parseQuery (query) { 
     var Params = new Object(); 
     if (! query) return Params; // return empty object 
     var Pairs = query.split(/[;&]/); 
     for (var i = 0; i < Pairs.length; i++) { 
      var KeyVal = Pairs[i].split('='); 
      if (! KeyVal || KeyVal.length != 2) continue; 
      var key = unescape(KeyVal[0]); 
      var val = unescape(KeyVal[1]); 
      val = val.replace(/\+/g, ' '); 
      Params[key] = val; 
     } 
     return Params; 
    } 
})();

Tôi muốn nói lời cảm ơn đến http://feather.elektrum.org/book/src.html đã giúp tôi hiểu cách lấy thông số từ thẻ tập lệnh.

bye

Nguồn

2012-10-30 10:57:14 Michelangelo

Trì hoãn việc tải JavaScript

Trả lời

Các vấn đề liên quan