大容量データの表示

起因:
 
windowliteをビッグデータ(1.5 Mのtableデータ)表示シーンに適用すると、ブラウザに「割り込みスクリプト」ウィンドウを頻繁にポップアップさせ始め、最適化コードと重要な呼び出しフローの変更を経て、データの表示に成功しました.
 
 
ステップ:
 
1.固定css幅の高いウィンドウを採用し、windowliteは適応幅をサポートするが、依然としてwindow容器の幅を計算し、Ext.Elementを呼び出した.getTextWidthは、extがdivを再構築するために実現され、要素を過去にコピーして幅(offsetWidth)を計算し、資源を十分に消費するため、固定幅に変更した後、ステップ
2.offsetなどのBOM属性の読み取りを禁止し、固定幅を採用しているため、サイズ属性は直接cssのstyleから読み取ることができ、offsetシリーズ属性を読み取る必要がなくなり、offset属性はcss属性よりずっと遅いことが分かった.だからgetWidth,getHeight,getXなどはできるだけ使用しないでください.これらの操作の実現は非常に煩雑で、多くの余分な操作があるので、完全に自分でコントロールしているdivに対して、これらの操作は全く必要ありません.
3.重要なステップ:データのロードを遅延し、表示位置を固定する.元のデータはwindow表示前のコンストラクション関数にロードされていたが、window show操作が行われると中央に位置したり、幅の高さを調整したりするため、コンテナのstyle属性の読み取りは避けられず、コンテナ内のデータが多ければ多いほど読み取りが遅くなる.表示位置を固定し、まず空白のウィンドウを表示し、appendの大きなデータ量をフォームbodyにすると、表示速度を著しく向上させることができる.
4.settimeoutバッチ計算を多く利用し、show操作をsettimeoutに配置し、スクリプトが長時間を費やし、他の操作時間に残ることを防止する.
5.ieはinsertAdjacentHtmlを使用でき、他のブラウザはrange操作でinnerHtmlよりも高い効率を得ることができます.
 
6.要素styleを複数回操作する場合、cssTextを設定してreflowを減らすことができます.
 
from YUI3 StyleSheet
 

var el = document.getElementById('some_element');
 
el.style.borderBottom = '3px solid #eee'; // reflow
el.style.borderTop    = '3px solid #ccc'; // another reflow
el.style.fontWeight   = 'bold';           // another reflow
 
// Vs. three changes in one reflow
el.style.cssText += '; border-bottom: 3px solid #eee; border-top: 3px solid #ccc; font-weight: bold';

 
 
 
付録:
 
 

频繁DOM操作的问题

 

Javascript Workersによる計算

 
Nicholas Zakas :writing-efficient-javascript