Ruby on RailsでJavaScripと読み込むと動作が激重になる

Question

文章を投稿できるようなサイトをRuby on Railsで作っているのですがJavaScriptを記述すると重くてボタンを押しても反応するまで数秒ほどかかるようになってしまいました。

JavaScriptはリンクを見つけると自動でaタグにしてくれるかんたんなものです。

$( function() {
    var exp = /(\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig;
    $('body').html($('body').html().replace(exp, "<a href='$1'>$1</a>"));
} );

なぜJavaScriptを読み込むだけで激重になってしまうのでしょうか。
また解決策があれば教えていただけると幸いです。

Answer 1

$('body').html($('body').html().replace(exp, "<a href='$1'>$1</a>"));

↑の書き方だと JavaScript (jQuery) で body 要素の中身を全部置き換えており、DOMの再構築および再描画が広い範囲で行われるため、処理に時間がかかり重くなっているのだと思います。

クライアント側(JavaScript)で自動的にリンクを追加する必要がある場合は linkifyjs というライブラリを使用すると比較的簡単に自動リンクが追加できます。
(効率よく書き換えてくれます)

SoapBox/linkifyjs - https://github.com/SoapBox/linkifyjs

linkifyjs 利用手順

1. linkifyjs.min.js と linkify-jquery.min.js をダウンロードして適当なディレクトリに配置

• linkifyjs.min.js
• linkify-jquery.min.js

2. script タグで jQuery を読み込んだ後に linkifyjs.min.js と linkify-jquery.min.js を読み込む

<!-- scriptのsrcは必要に応じて書き換える -->
<script src="jquery.min.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>

3. $(funcion(...)) の中で自動リンク追加を行いたいHTML要素に対して .linkify() を実行する

<script>
$(function(){
  $(".linkify-target").linkify();
});
</script>

コードサンプル

CodeSandbox - https://codesandbox.io/s/nameless-rgb-p0eu6