問題タブ [reflow]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
188 参照

javascript - DOM のリフロー/リフレッシュを行う

私は JavaScript と D3 を初めて使用します。DOM 要素のいくつかの属性を変更してから、ページのリフロー/リフレッシュを行って、更新された変更を確認できるようにしようとしています。秘訣は、onclickevent、ボタンのクリック、マウスの動きなどを一切行わずに、これを自動的に行う必要があるということです。

インターネットで見つけることができるすべてを試しましたが、何も機能しませんでしたが、奇妙なことに、要素の属性を変更する行の直前に alert() を呼び出すと、[OK] をクリックすると、要素が画面上で再配置されます。alert() を呼び出して [OK] をクリックすることなく、これを行う必要があります。

問題のコードは次のとおりです。

アラート行を削除すると、要素が移動しません。そのままにして [OK] をクリックすると、すぐに要素が再配置されます。

助けてくれてありがとう!!!!

0 投票する
2 に答える
714 参照

javascript - ブラウザのリフロー/再レンダリングを最小限に抑える

私は現在、修士論文のコードに取り組んでいます。効果的な DOM 操作についていくつか質問があります。

1) 互いに近接している多数のノードで一連の DOM 操作を実行する必要があると考えてください。これらすべてのノードの最上位のparentNodeのディープコピーを作成し(DOMの外部に保持し)、そのサブツリーで操作を実行してから、DOMの対応するノードと交換することは理にかなっていますか. これにより、ブラウザのリフロー/再レンダリングが最小限に抑えられますか?

2) ノードの innerHTML を変更すると、サブツリーを操作するよりもパフォーマンスが向上しますか?

3) バニラ javaScript (フレームワーク/ライブラリなし) での効率的な DOM 操作について、他に良いアドバイスはありますか?

前もって感謝します!

0 投票する
3 に答える
40723 参照

html - DOM リフローとは

display:none2 つの CSS プロパティの違いについて読んでいて、 DOM リフローという用語visibility:hiddenに遭遇しました。

声明は

display: noneDOM リフローを引き起こしますが、visibility: hiddenしません。

だから私の質問は:

DOM リフローとは何ですか? どのように機能しますか?

0 投票する
0 に答える
725 参照

android - Android Webview でのテキスト リフロー

Android KitKat のリリース以降、Web ビューからテキスト リフローが削除されました。残念ながら、Lollipop では問題は解決されません。なんらかの理由で、Google はテキストのリフローが不要であると判断したようです。

https://code.google.com/p/android/issues/detail?id=62378

Webviews を使用して、アプリケーションによって生成された HTML コードを表示しています。そのため、HTML コンテンツと Android アプリケーションの両方を完全に制御できます。ユーザーがピンチズームした後にテキストのリフローを実装する方法を知っていますか? おそらく、HTML を変更するか、Javascript や CSS を使用して実行できますか? 数日間 Web を検索し、提案された解決策をいくつか試してみましたが、何も正しく動作していないようです。

または、ピンチズームといくつかの基本的なテキスト形式 (色、太字、サイズなど) の両方をサポートする別のコントロールはありますか?

最後に、Google がピンチズーム テキスト リフローを削除した理由を知っている人はいますか? Android 2.2 で問題なく動作しました。

0 投票する
1 に答える
1139 参照

javascript - DOM 要素が増えるとパフォーマンスの問題が発生する

asp.net mvc、javascript、jQuery (ローカル マシンでホスト) を使用してアプリケーションを作成しました。基本設計は、ユーザーがあるページから別のページに移動するときに HTML ページを非表示にして表示することにより、破棄するのではなく、すべての HMTL 要素を DOM オブジェクト (ブラウザー) に保持することです。

私たちのアプリケーションは日々成長しています。以前は、プロジェクトでパフォーマンスの問題は見られませんでした。しかし、最近では、あるページから別のページに移動するのに時間がかかります。今日、自分のページで DOM 要素を確認したところ、20,000 を超えています。

質問:


HTMLページを非表示/表示することは、破棄して再作成するよりも優れた設計ですか?

20,000 DOM オブジェクトを使用した JavaScript からの DOM 操作、リフローと再印刷に関してパフォーマンスへの影響は何ですか?