質問: ### 前提・実現したいこと 業務システムの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)画面描画が遅い。 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適用されます。 2)入力項目にソフトウェアキーボードが被さる。 タブレットモードで利用しており、 OS標準のソフトウェアキーボードを表示する入力項目に対し キーボードがかぶさって表示される ### 該当のソースコード 1) レイアウト部分抜粋 999999999 商品コード[999999999] メーカー名 商品名 / 規格 省略(10程度) 省略(10程度) 発注数訂正 ... 2)はMSのバグのため、回避策として https://www.yolx.co.jp/blog/detail/?item=8 を参考にしました。 ### 試したことと質問事項 1) デザインは変更せず、JQueryの無限スクロールを元に20行ずつ読み込む実装にしたところ IE1000件検索時の描画、並び替えともに問題なく稼働するようになったため この方針で仮実装。ただし描画に約2秒、スクロールのたびに2秒ほどはかかる。 無限スクロールで遅いながらに回避はしたのですがこの対応方法に関する是非など、 またSemanticUIを使っている箇所について変更するべきかどうか、など 判断に困っているため、似たような事例で対策をされた経験がございましたらご教授いただけますと幸いです。 2) 参考サイト(上記)はそもそもタブレットのIEで確認したところ上手く稼働しなかったため 独自でフッタ部分を余白を設け、入力フォームへのフォーカスセット時には ソフトウェアキーボードが立ち上がる領域を上部にシフトするように実装を しようとしています。 こちらも似たような事例や上記サイトを元にされたことがある方などの ご意見、解決方法なども共有いただけると幸いです。
回答: パフォーマンスについて (1) IE8で4000件超のデータを表示しなければいけなかったときにパフォーマンスの問題が出たことがあります。この時はフォームコントロールを大量に置くとどうしても遅くなってしまうため、使わないように変更しています。セマンティックやデザインの影響がありますが、まずこれ(buttonをやめる)に対応すべきかと思います。 (2)大量のデータを追加するときにはDocumentFragmentを使って追加すべきです。 jQueryではDocumentFragmentを扱えないため、生のJavaScriptを記述する必要があります。