ブラウザごとのHTMLレンダリング速度とHTML構造について

HTMLの構造について2点困っています。

10万文字の要素が1個と、1000文字の要素が100個の場合はどちらがレンダリングが早くなりますか？
また、こういった1要素の重さはブラウザによって得意不得意といった特徴があるのでしょうか？

###現象：大量の文章を扱うページでChromeのみレンダリングが遅い

ページの利用者の方から、Chromeで閲覧する時に表示時間がかかると報告がありました。
自分の環境でもFirefox・IEと比較するとChromeが極端に遅く、差が出てしまっています。

Chromeの画面上は「リクエストを処理しています」で十秒以上も動きを止めてしまう状態で、表示後もスクロールがガタつきます。
Firefoxでは4秒程度で読込終わり、表示後のスクロールもスムーズです。

■サイトについての情報
大量の文章、書評等を載せるページ、前担当から引き継いで管理中。
テキストのみ。1Pあたり100,000～300,000文字程度ある。
メンバーと身内向けのページでHTMLファイル。画像もJavasvriptも使用していない。

###試したこと
Webpagetestでスピードを計測したものの、ブラウザ間でファイルの読込完了時間に差はほぼ出ず。
拡張機能のせいではと、拡張機能を無効にしたシークレットモードで確認して頂きましたが変わらず。

そこでソースを確認しましたところ、主に以下の様になっておりました。
（テキスト内容のみ置き換えてあります。）

lang
1<div class="shohyo">
2作成者：○○○○<br>テキスト内容テキスト内容テキスト内容<br>テキスト内容テキスト内容テキスト内容テキスト内容<br>...
3</div>

テキストが1行で、全て1つの要素に含まれています（おそらく提出されたtxtファイルの改行をそのまま に置換したため）。

そこで、改善するために以下の数案を考えました。

ごとに改行(\n)を追加する（ファイルの内容読込時の1行分を減らす）
div.shohyoの中で、段落ごとにタグで分割する
ページを途中で分割して複数ページに構造から変える

大本の問題であるページ全体の文量をなんとかする(＝ページを分割する)というのは全ページのリンク修正もあり最後の手段として、この場合複数要素に分割した場合はページ表示速度は改善されるものでしょうか？

また、こうなった背景としてブラウザごとにこういった処理の得意不得意はあるのでしょうか？

という冒頭の２つの質問に戻ります。

###バージョンについて
Chrome、Firefox共に10月21日時点で最新版を使用中です。

行動規範の内容に同意します

回答2件

自分も以前似たような質問をしたことがありますが、基本的には１要素ごとの重さは関係なさそうです。
HTML１行あたりの文字数限界と、ブラウザでの表示高速化について(8265)｜teratail

しかし、ブラウザは常にバージョンアップしていますし、特にChromeはバージョンごとに動作が不安定になったり戻ったり・・・ということが頻繁に起きているので実際にいろいろ試してみないとなんとも言えませんね。

複数要素に分割した場合はページ表示速度は改善されるものでしょうか？

いや実際にそれやってみて、結果を載せてください。
ご自分で提案されている複数の対策を実際に試してみてから質問したほうがいいと思います。

投稿2016/11/01 05:03

zico_teratail

総合スコア907

10万文字の要素が1個と、1000文字の要素が100個の場合はどちらがレンダリングが早くなりますか？

また、こういった1要素の重さはブラウザによって得意不得意といった特徴があるのでしょうか？

どちらもわかりません。
各々のブラウザは各々のプロジェクト開発チームが別個に作っており、
我々のような1ユーザーからの視点では完全にブラックボックスです。

開発者側も自分達の作ったブラウザが一番快適で便利に使ってもらうところが目標なので、
出来るだけ良い感じに仕上がってるとは思うのですが、、、まぁ良いところ悪いところありますよねという話ですかね？

ごとに改行(\n)を追加する（ファイルの内容読込時の1行分を減らす）

手間はそんなにかからないと思うのでやってみる価値はありそうですが望み薄です。
htmlをminifyで圧縮して1行にすることでファイルサイズを落とすようなテクニックがありますが、
それが原因でレンダリング速度が落ちるという話を聞いたことはありません。

div.shohyoの中で、段落ごとにタグで分割する

個人的に気になるのはこの手段です。
試してみる価値はかなりありそうです。

2連続の タグを検知したらを差し込むように変更してみてください。

例えばtable要素はtable-layoutが初期値autoになっており、
セルの文字数によって最適な表示になるようによしなに各列の幅を調整してくれるのですが…
100行を超えて著しい高さのテーブルを管理しようとすると、このよしなに調整する機能が追いつかずフリーズしたようになる現象が発生します。
cssでtable-layout: fixed;を設定してあげると、横幅がピタリと定まるのでフリーズのような現象は解消されます。

完璧なヤマカンですが、上記の問題に通じる何かを感じます。
例えばChromeは超長いテキストノードの扱いが下手…とか？
逆にFirefoxで軽快に動作するのは画面外のテキストノードは表示せずに捨てているように思えます。