Tối ưu hóa Javascript cho Internet Explorer

Question

Điều nổi tiếng là các Công cụ Javascript của Internet Explorer nằm phía sau về hiệu suất, cụ thể là IE 8 trở lên, khi so sánh với Chrome, Safari (Webkit) hoặc Firefox (Mozilla).

Khi phát triển một ứng dụng web có chức năng javascript đáng kể, IE hoạt động kém nhất so với các ứng dụng khác.

Có bất kỳ thực tiễn nào có thể giúp cải thiện mã javascript của bạn để phân chia giữa những người biểu diễn tốt (không phải IE) và trình diễn không tốt (IE) không rộng không?

Answer 1

Tôi nghĩ rằng giải pháp hợp lý cho nó là Google Chrome Frame
này chỉ cho phép sử dụng Chrome Frame trong IE và không sử dụng nó trong trình duyệt IE-phi.

JavaScript hoạt động và phát triển các công cụ cho IE:
Microsoft Support: Internet Explorer Performance Article - http://support.microsoft.com/kb/982891

Answer 2

Một cách phổ biến để tối ưu hóa hiệu suất bộ nhớ đệm giá trị 'max' trong vòng lặp for.

Vì vậy, giả sử bạn phải lặp qua một mảng được gọi là sampleArray. Bạn có thể tối ưu hóa các tuyên bố dưới đây:

var sampleArray = [3, 10, 12, 5, 9]; 

for(var i = 0; i < sampleArray.length; i++){ 
    var currentElement = sampleArray[i]; 
    // so something wit element 
} 

bằng cách thay đổi nó để là:

for(var i = 0, max = sampleArray.length; i < max; i++){ 
     var currentElement = sampleArray[i]; 
     // so something wit element 
} 

này đã thể hiện cho thấy một sự gia tăng hiệu suất khá lớn trong tất cả các trình duyệt. Đặc biệt, IE7 đã được chứng minh để có được một 190 lần tăng hiệu suất sử dụng mô hình này (từ High Performance Javascript)

Answer 3

Một vài giải pháp chung:

cache thường xuyên sử dụng DOM các nút, không tính toán lại chúng trong cùng một một lần nữa. Ví dụ. thay vì

$(id).parentNode.something(); 
$(id).parentNode.somethingOther(); 

sử dụng

var e = $(id).parentNode; 
e.something(); 
e.somethingOther(); 

cache thường được sử dụng đối tượng từ phạm vi bên ngoài. Ví dụ. thay vì

if (this.options.type == 'a') { 
    // ... 
} else if (this.options.type == 'b') { 
    // ... 
} 

sử dụng

var type = this.options.type; 
if (type == 'a') { 
    // ... 
} else if (type == 'b') { 
    // ... 
} 

Điều này sẽ có tác động cũng tích cực đối với kích thước mã trước và sau khi rút gọn.

Answer 4

a. Một cách để tăng hiệu suất của bạn trong các phiên bản cũ hơn của IE sẽ là sử dụng JavaScript RAW để tạo các phần tử DOM thay vì jQuery.

dụ -

(function() { 
    var rosterContainer = document.getElementByID("roster"); 
    var memberContainer = document.createElement("div"); 

    $(memberContainer).addClass("one_fourth alpha hentry") 
        .attr("id", mName.replace(/\s+/g," ")) 
        .appendTo($(rosterContainer)); 
})(); 

b. Bạn cũng có thể tái thiết kế trải nghiệm người dùng (UX) cho trình duyệt IE.

Ví dụ - trang web của tôi sử dụng các plugin JS/jquery nặng để tải các hình nền lớn và hiển thị chúng dưới dạng trình chiếu với phông chữ alpha. Nhưng đối với người dùng IE của tôi, tôi không tải JS hoặc plugin hoặc hình nền - tôi chỉ hiển thị một bg có tiêu đề tĩnh.

bạn có thể sử dụng bộ tải như yepnope.js để load tối ưu hóa JS cho IE

c. Đảm bảo giao diện người dùng của trang web của bạn hoạt động hoàn toàn với JavaScript. Đây luôn là nơi tốt để bắt đầu.