Windowsタブレット（IE）での動作改善について

Question

前提・実現したいこと

業務システムのWEB化を行っており、前提条件としてWindowsタブレットで
ブラウザアプリとして構築する必要があります。
WindowsタブレットはLTSB版のOS(Win10)のためInternet Exproler限定です。
既存利用の機器のため前提として変更は不可となっています。
Windows 10＋IE11＋Semantic UI 2.3.1＋jQuery v3.1.1を使用。

─────　　Windowsタブレット　マシンスペック　　──────
Windows10 Enterprise 2016　LTSB
プロセッサ　Intel(R) Atom(TM) x5-Z8300 CPU 1.44GHz1.44GHz
実装メモリ　4GB
システムの種類　64ビットOS
─────────────────────────────────────────────────

発生している問題・エラーメッセージ

１）画面描画が遅い。
1行あたり7,8項目のデータ（tableタグで4行10列ほどの塊に各行button配置）を100件表示で30秒程度、
500件で1分以上、1,000件で2分超かかります。
ただし、Windowsタブレット（LTSBでないWindows10）に入れたEdgeやChrome だと、
1,000件でも5～13秒程度で表示されます。
buttonはSemanticUI利用のためcss適用されます。

２）入力項目にソフトウェアキーボードが被さる。
タブレットモードで利用しており、
OS標準のソフトウェアキーボードを表示する入力項目に対し
キーボードがかぶさって表示される

該当のソースコード

１）
レイアウト部分抜粋

<div id="template_data" class="c_mt20 c_sidescroll" style="display:none; padding:20px"> <p class="hid_shohin_cd" style="display:none;">999999999</p> <p class="shohin_name">商品コード[999999999] メーカー名</p> <p>商品名　／　規格</p> <table class="ui very basic compact paddid table"> <thead> <tr> 省略（１０程度） </tr> </thead> <tbody> <tr> 省略（１０程度） <td><button class="ui secondary basic small button"><i class="icon edit"></i>発注数訂正</button></td> 　　　　　…

２）はMSのバグのため、回避策として
https://www.yolx.co.jp/blog/detail/?item=8
を参考にしました。

試したことと質問事項

１）
デザインは変更せず、JQueryの無限スクロールを元に20行ずつ読み込む実装にしたところ
IE1000件検索時の描画、並び替えともに問題なく稼働するようになったため
この方針で仮実装。ただし描画に約２秒、スクロールのたびに２秒ほどはかかる。
無限スクロールで遅いながらに回避はしたのですがこの対応方法に関する是非など、
またSemanticUIを使っている箇所について変更するべきかどうか、など
判断に困っているため、似たような事例で対策をされた経験がございましたらご教授いただけますと幸いです。

２）
参考サイト（上記）はそもそもタブレットのIEで確認したところ上手く稼働しなかったため
独自でフッタ部分を余白を設け、入力フォームへのフォーカスセット時には
ソフトウェアキーボードが立ち上がる領域を上部にシフトするように実装を
しようとしています。
こちらも似たような事例や上記サイトを元にされたことがある方などの
ご意見、解決方法なども共有いただけると幸いです。

Comments

[m.ts10806]

「EdgeやChrome だと」というのはタブレット上の確認でしょうか、PC上の確認でしょうか。PC版IE11ではどうですか？タブレットのスペックも提示された方が回答がつきやすくなるかもしれません。

[net-ohkubo]

コメントありがとうございます。他ブラウザについてもWindows10タブレット上の動作でしたので追記しています。またPC版IE11でも動作は同じく、計測時間もほぼ同様でした。

[x_x]

スペックは公開できないのでしょうか？

[net-ohkubo]

スペックについても追記しました。

Answer 1

パフォーマンスについて

(1) IE8で4000件超のデータを表示しなければいけなかったときにパフォーマンスの問題が出たことがあります。この時はフォームコントロールを大量に置くとどうしても遅くなってしまうため、使わないように変更しています。セマンティックやデザインの影響がありますが、まずこれ(buttonをやめる)に対応すべきかと思います。

(2)大量のデータを追加するときにはDocumentFragmentを使って追加すべきです。
https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment
jQueryではDocumentFragmentを扱えないため、生のJavaScriptを記述する必要があります。

Comments

[net-ohkubo]

ご回答ありがとうございます、参考に拝見させていただきました。
(1)確かにフォームコントロールが多いです。。
　 入力部とボタンが全行に配置されているレイアウトになっており１つ１つの行に対して
　 メンテナンスをするような機能を移行（WEB化）するため現行の作りのままレイアウトを
　 組んでみて嵌ったのですが、代替のレイアウトが無いかを検討してみます。

(2)大量データ追加については、
　DocumentFragmentでの速度改善で調べると文献が色々とありました。
　ご連携いただいた方法で組み換えを試してみたいと思います。