HTML5 キャンバスにレンダリングされたスクロール可能なタイムラインに取り組んでいます。私はすでにほとんどの機能を開発しましたが、Safari で予期しないクラッシュが発生することに気付きました (Chrome と Firefox ではクラッシュしません)。そのため、すべての機能を削除して (非常に基本的なタイムラインのみを残して)、これが成功したことを確認しました。状況を変えるな。
ここでは、タイムラインのデモを見ることができます (クラッシュの原因と思われる基本的なビルディング ブロックに縮小されています): http://jsfiddle.net/Saturnix/uUQtH/3/
クリック アンド ドラッグで日付をスクロールできます。また、コードの一部の行のコメントを外すと、日付と月の番号も表示されます。
タイムラインを左から右にスクロールしてみてください。ブラウザがクラッシュするまで繰り返します (強制終了が必要になる場合があります)。
これは、クラッシュの前に発生するエラーです。
TypeError: 'undefined' is not a function (evaluating 'g.ctx.lineTo(x, g.height / 1.4)')
常に正常に動作しているように見えますg.ctx.lineToが、明らかな理由もなく動作を停止します。ログに記録しようとしても、クラッシュがこれらの値と一致していxないg.height / 1.4ことがわかります。
また、年と月を出力している行のコメントを外すと、ブラウザによって報告されるエラーは同じではなくなります。これは明らかに、クラッシュがレンダリング自体を担当する機能とは何の関係もないことを意味します。
考えられる理由: 必要な CPU が多すぎる。
実装方法により、画面の外側にあるタイムラインのすべての部分が (レンダリングされていなくても) ループ内と見なされます {これは、左から画面の外側にあるタイムラインの部分にのみ適用されます。右からではありません}。私はそれを避けることができませんでした。そのため、右にスクロールするほど、ループを完了するのに時間がかかる可能性があります (javascript が停止するまで)。これは、描画ループの非常に単純化された疑似コード バージョンです。
start = 0;
function draw(){
day = 0;
for (x = start; x <= screen.width; x += 10, d += 1){
// check if first day of the month
if (d days from now is 1)
draw long line at position x
else
draw short line at position x
}
}
function mouseDragging(){
// users dragging mouse cursor
// start changes accordingly but always stays minor than 0
}
ご覧のとおりstart、(ユーザーが望む場合) 非常に低い値に非常に速く到達し、描画ループが完了するまでに非常に長い時間がかかります。これがクラッシュの原因でしょうか？私はそうではないと思います:通常、長いループをプログラムすると、コンピューターが遅れ始めますが、コンソールにエラーがスローされて一度にクラッシュすることはありません。しかし、それが私が見る唯一の考えられる理由です。