ねごとめも背景

ねごとめも

数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ


作成したプログラムは、こちらでも公開しています。
よかったら覗いてみてください。_( _´ω`)_
→ javascript,SVG で作成したプログラム置き場

custom textarea : test(f)

テキスト選択テスト(f)。
前回のプログラムは、矩形選択 + scroll を実行すると
300行くらいで処理が追いつかず?
ブラウザが固まってしまいました。(ブラウザ:Chrome)
これは、スクロールイベント中に要素を追加しつつ、
謎の配列処理を ぐぃんぐぃん 回しているところに原因があるのではと思い、
コードを見直しました。

前回のプログラム
custom textarea : test(e)

試したこと。
canvas 要素に描画した文字を、canvas 要素の背景に
→ テキストエリアが表示されるまでの時間が倍くらい

canvas 要素に描画した文字を、canvas 要素にイメージとして貼る
→ 分かるような変化なし...等をいくつか試して、
canvas をテキスト用と選択の用の2枚作成して、
重ねることにしました。
テキスト選択では、矩形描画のみになるので、
ぐちゃぐちゃ していたコードが幾分かシンプルになった感じです。

あと、
「スクロール + 選択」 イベント中に作成していた要素をイベント終了後へ
「スクロール + 選択」 イベント中の描画は、表示域 + 一行?
...。

テストした範囲では、
Firefox では、行数 : 10369, 文字数 : 650592 の
テキストを表示させても、違和感なく動作しました。
Chrome で同じテキストを処理させると、分かるような遅延がありました。
行、文字数の増加に伴って動作も重くなるような感じです。

custom textarea 読み込み時間

See the Pen custom textarea : test(f) by negotoy (@negotoy) on CodePen.



2018/04/03 [04:06]

カウンター

プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。プログラム実行の前に必ずコードの確認をお願いします。

最新記事

カテゴリ

カレンダー

03 | 2018/04 | 05
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -


PAGE TOP
広告: