0

ajaxでhtmlをレンダリングする最良の方法は何ですか?

way1:最初はhtmlが少なく、ajaxを介してより動的なhtmlを配置します。

way2:最初はより多くのhtmlを持ち、ajaxを介して動的htmlを少なくします。

たとえば、私のhtml

<div id="div1">
   <div>
      <p id="p1">hello</p>
   </div>
<div>

方法 1 :

初期html

<div id="div1">
</div>

動的 HTML

<div>
   <p id="p1">hello</p>
</div>

方法 2 :

初期html

<div id="div1">
   <div>
       <p id="p1"></p>
   </div>
</div>

動的 HTML

hello

この例は小さいですが、コンテキストを理解していただければ幸いです。問題は、フロントエンドのパフォーマンスに最適なものはどれかということです。さらに、javascript を介して html を動的に追加すると、ブラウザーはページ全体を再描画しますか?

4

2 に答える 2

1

ページで処理している HTML の量によって異なります。多くのモジュールを含むページを構築している場合、最善の方法はロード オン デマンドスタイルに従うことです。つまり、最初はページを表示するために必要な最小限の HTML を取得し、ユーザーがモジュールを操作したり、レポートを取得したりする場合にのみ、ajax 呼び出しを実行して必要なコンテンツのみを取得します。

これは、最初のページで将来の HTML 要素に作用するスクリプトと CSS を読み込まず、外部ファイルへのすべての参照を別の HTML (部分ページ) に保持し、ajax を介してこのページのみを取得することも意味します。したがって、HTML、そのスクリプト、およびその CSS をオンデマンドでロードします。

そしてあなたの質問に

javascript を介して動的に html を追加すると、ブラウザーはページ全体を再描画しますか?

いいえ、HTML 全体は再描画されません。その場合、DOM 上の JavaScript でのすべての操作は、パフォーマンスに大きな打撃を与えていたでしょう。この言語は、パフォーマンスを優先してよく書かれていると思います。

于 2016-12-14T07:40:30.107 に答える
0

場合によって異なります（いつものように;））が、AJAXでは必要な値のみを取得/受信する必要があり、HTMLでは必要なすべてのタグ（ある種のテンプレート）を用意してから、リクエストまたはその他から受信した値をそこに配置する必要がありますjavascriptでデータを修正。

于 2016-12-14T07:26:41.613 に答える