Knockout.js ช้าอย่างไม่น่าเชื่อภายใต้ชุดข้อมูลกึ่งใหญ่

ฉันเพิ่งเริ่มใช้ Knockout.js (อยากลองใช้เสมอ แต่ตอนนี้ฉันมีข้อแก้ตัว!) - อย่างไรก็ตามฉันพบปัญหาประสิทธิภาพการทำงานที่แย่มากเมื่อผูกตารางกับชุดที่ค่อนข้างเล็ก ข้อมูล (ประมาณ 400 แถวหรือมากกว่านั้น)

ในรุ่นของฉันฉันมีรหัสต่อไปนี้:

this.projects = ko.observableArray( [] ); //Bind to empty array at startup

this.loadData = function (data) //Called when AJAX method returns
{
   for(var i = 0; i < data.length; i++)
   {
      this.projects.push(new ResultRow(data[i])); //<-- Bottleneck!
   }
};

ปัญหาคือการforวนรอบด้านบนใช้เวลาประมาณ 30 วินาทีหรือประมาณนั้นโดยมีประมาณ 400 แถว อย่างไรก็ตามหากฉันเปลี่ยนรหัสเป็น:

this.loadData = function (data)
{
   var testArray = []; //<-- Plain ol' Javascript array
   for(var i = 0; i < data.length; i++)
   {
      testArray.push(new ResultRow(data[i]));
   }
};

จากนั้นการforวนซ้ำจะเสร็จสิ้นในพริบตา กล่าวอีกนัยหนึ่งpushวิธีการของobservableArrayวัตถุของ Knockout นั้นช้าอย่างไม่น่าเชื่อ

นี่คือแม่แบบของฉัน:

<tbody data-bind="foreach: projects">
    <tr>
       <td data-bind="text: code"></td>
       <td><a data-bind="projlink: key, text: projname"></td>
       <td data-bind="text: request"></td>
       <td data-bind="text: stage"></td>
       <td data-bind="text: type"></td>
       <td data-bind="text: launch"></td>
       <td><a data-bind="mailto: ownerEmail, text: owner"></a></td>
    </tr>
</tbody>

คำถามของฉัน:

1. นี่เป็นวิธีที่ถูกต้องในการผูกข้อมูลของฉัน (ซึ่งมาจากเมธอด AJAX) กับคอลเล็กชันที่สังเกตได้หรือไม่
2. ฉันคาดว่าpushจะทำการคำนวณซ้ำอย่างหนักทุกครั้งที่ฉันเรียกมันเช่นอาจจะสร้างวัตถุ DOM ที่ถูกผูกไว้ใหม่ มีวิธีใดที่จะชะลอการคำนวณใหม่นี้หรืออาจผลักดันรายการทั้งหมดของฉันในคราวเดียว?

ฉันสามารถเพิ่มรหัสเพิ่มเติมได้หากจำเป็น แต่ฉันค่อนข้างมั่นใจว่านี่คือสิ่งที่เกี่ยวข้อง ส่วนใหญ่ฉันแค่ทำตามแบบฝึกหัด Knockout จากเว็บไซต์

อัพเดท:

ตามคำแนะนำด้านล่างฉันได้อัปเดตรหัสของฉันแล้ว:

this.loadData = function (data)
{
   var mappedData = $.map(data, function (item) { return new ResultRow(item) });
   this.projects(mappedData);
};

อย่างไรก็ตามthis.projects()ยังคงใช้เวลาประมาณ 10 วินาทีสำหรับ 400 แถว ฉันยอมรับว่าฉันไม่แน่ใจว่าสิ่งนี้จะเร็วแค่ไหนหากไม่มีสิ่งที่น่าพิศวง (เพียงแค่เพิ่มแถวผ่าน DOM) แต่ฉันรู้สึกว่ามันจะเร็วกว่า 10 วินาทีมาก

อัปเดต 2:

ตามคำแนะนำอื่น ๆ ด้านล่างฉันให้jQuery.tmplยิง (ซึ่ง KnockOut สนับสนุน) และเครื่องมือสร้างเทมเพลตนี้จะวาดประมาณ 400 แถวในเวลาเพียง 3 วินาที นี่ดูเหมือนจะเป็นแนวทางที่ดีที่สุดซึ่งไม่ใช่วิธีแก้ปัญหาที่จะโหลดข้อมูลเพิ่มเติมแบบไดนามิกเมื่อคุณเลื่อน

ตามที่แนะนำในความคิดเห็น.

สิ่งที่น่าพิศวงมีเครื่องมือแม่แบบดั้งเดิมของตัวเองที่เชื่อมโยงกับการผูก (foreach, with) นอกจากนี้ยังรองรับเอนจิ้นเทมเพลตอื่น ๆ ได้แก่ jquery.tmpl อ่านที่นี่สำหรับรายละเอียดเพิ่มเติม ฉันยังไม่ได้ทำการเปรียบเทียบกับเอ็นจิ้นอื่นเลยไม่รู้ว่าจะช่วยได้ไหม อ่านความคิดเห็นก่อนหน้าของคุณใน IE7 คุณอาจต้องดิ้นรนเพื่อให้ได้ประสิทธิภาพที่คุณต้องการ

นอกจากนี้ KO ยังรองรับเอ็นจิ้น js templating ใด ๆ หากมีคนเขียนอะแดปเตอร์สำหรับมัน คุณอาจต้องการที่จะลองคนอื่น ๆ ออกมี jQuery tmpl เป็นเพราะถูกแทนที่ด้วยJsRender

โปรดดู: Knockout.js Performance Gotcha # 2 - Manipulating observableArrays

รูปแบบที่ดีกว่าคือการได้รับการอ้างอิงไปยังอาร์เรย์พื้นฐานของเรากดไปที่มันแล้วเรียก. valueHasMutated () ตอนนี้สมาชิกของเราจะได้รับการแจ้งเตือนเพียงครั้งเดียวที่ระบุว่าอาร์เรย์มีการเปลี่ยนแปลง

ใช้เลขหน้ากับ KO นอกเหนือจากการใช้ $ .map

ฉันมีปัญหาเดียวกันกับชุดข้อมูลขนาดใหญ่ 1,400 ระเบียนจนกระทั่งฉันใช้การเพจกับสิ่งที่น่าพิศวง การใช้$.mapเพื่อโหลดบันทึกสร้างความแตกต่างอย่างมาก แต่เวลาในการเรนเดอร์ DOM ยังคงน่ากลัว จากนั้นฉันลองใช้การแบ่งหน้าและนั่นทำให้ชุดข้อมูลของฉันรวดเร็วและเป็นมิตรกับผู้ใช้มากขึ้น ขนาดหน้า 50 ทำให้ชุดข้อมูลล้นน้อยลงมากและลดจำนวนองค์ประกอบ DOM ลงอย่างมาก

มันง่ายมากที่จะทำกับ KO:

http://jsfiddle.net/rniemeyer/5Xr2X/

KnockoutJS มีบทช่วยสอนที่ยอดเยี่ยมโดยเฉพาะอย่างยิ่งเกี่ยวกับการโหลดและบันทึกข้อมูล

ในกรณีของพวกเขาพวกเขาดึงข้อมูลโดยใช้getJSON()ซึ่งเร็วมาก จากตัวอย่าง:

function TaskListViewModel() {
    // ... leave the existing code unchanged ...

    // Load initial state from server, convert it to Task instances, then populate self.tasks
    $.getJSON("/tasks", function(allData) {
        var mappedTasks = $.map(allData, function(item) { return new Task(item) });
        self.tasks(mappedTasks);
    });    
}

ให้KoGridดู มันจัดการการแสดงผลแถวของคุณอย่างชาญฉลาดเพื่อให้มีประสิทธิภาพมากขึ้น

หากคุณพยายามผูก 400 แถวเข้ากับตารางโดยใช้การforeachผูกคุณจะมีปัญหาในการผลักดันจำนวนมากผ่าน KO ไปยัง DOM

KO ทำสิ่งที่น่าสนใจมาก ๆ โดยใช้การforeachโยงซึ่งส่วนใหญ่เป็นการดำเนินการที่ดีมาก แต่พวกมันจะเริ่มแยกย่อยจากความสมบูรณ์แบบเมื่อขนาดของอาร์เรย์ของคุณเติบโตขึ้น

ฉันเคยไปตามถนนมืดอันยาวนานในการพยายามผูกชุดข้อมูลขนาดใหญ่เข้ากับตาราง / กริดและคุณต้องแยก / จัดหน้าข้อมูลในเครื่อง

KoGridทำทั้งหมดนี้ สร้างขึ้นเพื่อแสดงเฉพาะแถวที่ผู้ดูสามารถมองเห็นได้บนเพจจากนั้นจึงจำลองแถวอื่น ๆ จนกว่าจะจำเป็น ฉันคิดว่าคุณจะพบว่ามันสมบูรณ์แบบจาก 400 รายการที่ดีกว่าที่คุณพบ

วิธีแก้ปัญหาเพื่อหลีกเลี่ยงการล็อกเบราว์เซอร์เมื่อแสดงอาร์เรย์ขนาดใหญ่มากคือการ 'เค้น' อาร์เรย์เพื่อให้มีการเพิ่มองค์ประกอบเพียงไม่กี่รายการในแต่ละครั้งโดยมีการนอนหลับระหว่างกัน นี่คือฟังก์ชั่นที่จะทำสิ่งนั้น:

function throttledArray(getData) {
    var showingDataO = ko.observableArray(),
        showingData = [],
        sourceData = [];
    ko.computed(function () {
        var data = getData();
        if ( Math.abs(sourceData.length - data.length) / sourceData.length > 0.5 ) {
            showingData = [];
            sourceData = data;
            (function load() {
                if ( data == sourceData && showingData.length != data.length ) {
                    showingData = showingData.concat( data.slice(showingData.length, showingData.length + 20) );
                    showingDataO(showingData);
                    setTimeout(load, 500);
                }
            })();
        } else {
            showingDataO(showingData = sourceData = data);
        }
    });
    return showingDataO;
}

ขึ้นอยู่กับกรณีการใช้งานของคุณซึ่งอาจส่งผลให้มีการปรับปรุง UX ครั้งใหญ่เนื่องจากผู้ใช้อาจเห็นเฉพาะแถวแรกก่อนที่จะต้องเลื่อน

การใช้ประโยชน์จาก push () การยอมรับข้อโต้แย้งของตัวแปรทำให้เกิดประสิทธิภาพที่ดีที่สุดในกรณีของฉัน 1300 แถวกำลังโหลดเป็นเวลา 5973ms (~ 6 วินาที) ด้วยการเพิ่มประสิทธิภาพนี้เวลาในการโหลดลดลงเหลือ 914ms (<1 วินาที)
ซึ่งดีขึ้น 84.7%!

ข้อมูลเพิ่มเติมที่การ ผลักดันรายการไปยัง ObservableArray

this.projects = ko.observableArray( [] ); //Bind to empty array at startup

this.loadData = function (data) //Called when AJAX method returns
{
   var arrMappedData = ko.utils.arrayMap(data, function (item) {
       return new ResultRow(item);
   });
   //take advantage of push accepting variable arguments
   this.projects.push.apply(this.projects, arrMappedData);
};

ฉันรับมือกับข้อมูลจำนวนมหาศาลที่เข้ามาสำหรับฉันvalueHasMutatedได้ผลเหมือนมีเสน่ห์

ดูรุ่น:

this.projects([]); //make observableArray empty --(1)

var mutatedArray = this.projects(); -- (2)

this.loadData = function (data) //Called when AJAX method returns
{
ko.utils.arrayForEach(data,function(item){
    mutatedArray.push(new ResultRow(item)); -- (3) // push to the array(normal array)  
});  
};
 this.projects.valueHasMutated(); -- (4) 

หลังจากเรียก(4)ข้อมูลอาร์เรย์จะถูกโหลดลงใน observableArray ที่จำเป็นซึ่งเป็นไปthis.projectsโดยอัตโนมัติ

หากคุณมีเวลาลองดูสิ่งนี้และในกรณีที่มีปัญหาใด ๆ โปรดแจ้งให้เราทราบ

เคล็ดลับที่นี่:โดยการทำเช่นนี้หากในกรณีที่การอ้างอิงใด ๆ (คำนวณเป็นสมาชิก ฯลฯ ) (4)สามารถหลีกเลี่ยงได้ในระดับผลักดันและเราสามารถทำให้พวกเขาดำเนินการที่หนึ่งไปหลังจากเรียก

วิธีแก้ปัญหาที่เป็นไปได้ร่วมกับการใช้ jQuery.tmpl คือการพุชไอเท็มในแต่ละครั้งไปยังอาร์เรย์ที่สังเกตได้ในลักษณะอะซิงโครนัสโดยใช้ setTimeout

var self = this,
    remaining = data.length;

add(); // Start adding items

function add() {
  self.projects.push(data[data.length - remaining]);

  remaining -= 1;

  if (remaining > 0) {
    setTimeout(add, 10); // Schedule adding any remaining items
  }
}

ด้วยวิธีนี้เมื่อคุณเพิ่มทีละรายการเท่านั้นเบราว์เซอร์ / สิ่งที่น่าพิศวง js อาจใช้เวลาในการจัดการ DOM ตามนั้นโดยที่เบราว์เซอร์ไม่ถูกบล็อกโดยสมบูรณ์เป็นเวลาหลายวินาทีเพื่อให้ผู้ใช้สามารถเลื่อนรายการพร้อมกัน

ฉันได้ทดลองประสิทธิภาพและมีส่วนร่วมสองอย่างที่หวังว่าอาจเป็นประโยชน์

การทดลองของฉันมุ่งเน้นไปที่เวลาในการจัดการ DOM ดังนั้นก่อนที่จะเข้าสู่สิ่งนี้คุณควรทำตามประเด็นด้านบนเกี่ยวกับการผลักเข้าไปในอาร์เรย์ JS ก่อนสร้างอาร์เรย์ที่สังเกตได้

แต่ถ้าเวลาในการจัดการ DOM ยังคงเป็นอุปสรรคอยู่สิ่งนี้อาจช่วยได้:

1: รูปแบบในการห่อสปินเนอร์โหลดรอบการเรนเดอร์ช้าจากนั้นซ่อนโดยใช้ afterRender

http://jsfiddle.net/HBYyL/1/

นี่ไม่ใช่วิธีแก้ไขปัญหาด้านประสิทธิภาพ แต่แสดงให้เห็นว่าความล่าช้าอาจเป็นสิ่งที่หลีกเลี่ยงไม่ได้หากคุณวนซ้ำหลายพันรายการและใช้รูปแบบที่คุณสามารถมั่นใจได้ว่าคุณมีสปินเนอร์โหลดปรากฏขึ้นก่อนการดำเนินการ KO ที่ยาวนานจากนั้นซ่อน หลังจากนั้น ดังนั้นจึงปรับปรุง UX อย่างน้อย

ตรวจสอบให้แน่ใจว่าคุณสามารถโหลดสปินเนอร์ได้:

// Show the spinner immediately...
$("#spinner").show();

// ... by using a timeout around the operation that causes the slow render.
window.setTimeout(function() {
    ko.applyBindings(vm)  
}, 1)

ซ่อนสปินเนอร์:

<div data-bind="template: {afterRender: hide}">

ซึ่งทริกเกอร์:

hide = function() {
    $("#spinner").hide()
}

2: การใช้การรวม html เป็นการแฮ็ก

ฉันจำเทคนิคเก่า ๆ ได้ตั้งแต่ตอนที่ฉันทำงานกับ set top box ด้วย Opera ซึ่งสร้าง UI โดยใช้การจัดการ DOM มันช้าอย่างน่าตกใจดังนั้นวิธีแก้ปัญหาคือการจัดเก็บ HTML จำนวนมากเป็นสตริงและโหลดสตริงโดยการตั้งค่าคุณสมบัติ innerHTML

สิ่งที่คล้ายกันนี้สามารถทำได้โดยใช้การเชื่อม html และการคำนวณที่ได้รับ HTML สำหรับตารางเป็นข้อความขนาดใหญ่จากนั้นนำไปใช้ในครั้งเดียว สิ่งนี้ช่วยแก้ปัญหาด้านประสิทธิภาพได้ แต่ข้อเสียอย่างมากคือการ จำกัด สิ่งที่คุณสามารถทำได้อย่างมากด้วยการผูกภายในแต่ละแถวของตาราง

นี่คือซอที่แสดงวิธีการนี้พร้อมกับฟังก์ชั่นที่สามารถเรียกได้จากในแถวของตารางเพื่อลบรายการในลักษณะที่คลุมเครือเหมือน KO เห็นได้ชัดว่านี่ไม่ดีเท่า KO ที่เหมาะสม แต่ถ้าคุณต้องการประสิทธิภาพที่ชัดเจน (ish) จริงๆนี่เป็นวิธีแก้ปัญหาที่เป็นไปได้

http://jsfiddle.net/9ZF3g/5/

หากใช้ IE ให้ลองปิดเครื่องมือ dev

การเปิดเครื่องมือสำหรับนักพัฒนาใน IE จะทำให้การดำเนินการนี้ช้าลงอย่างมาก ฉันกำลังเพิ่ม ~ 1,000 องค์ประกอบในอาร์เรย์ เมื่อเปิดเครื่องมือ dev จะใช้เวลาประมาณ 10 วินาทีและ IE จะหยุดทำงานในขณะที่กำลังเกิดขึ้น เมื่อฉันปิดเครื่องมือ dev การดำเนินการจะดำเนินการทันทีและฉันไม่เห็นการทำงานช้าลงใน IE

ฉันสังเกตด้วยว่าเอ็นจินแม่แบบ Knockout js ทำงานช้าลงใน IE ฉันแทนที่ด้วย underscore.js ซึ่งทำงานได้เร็วขึ้น