Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@umanoda

部分テンプレートのscriptタグをasyncで非同期実行する

More than 5 years have passed since last update.

tl;dr

  1. Railsの部分テンプレート中にjavascript埋め込みたい
  2. でもページ途中に<script>入れると、パフォーマンス落ちる :cry:
  3. :bulb: async属性使えばいいんじゃね

kwsk

Railsを使っていて、Viewの途中にjavascriptを入れたくなることが結構あります。
たとえば部分テンプレートを使ったり、Cellsなんかを使って、

  • controllerやmodel的な処理
  • html構造
  • javascriptでの画面動作

を一つにまとめておきたい、という感じで。

app/cells/cart_cell.rb
class CartCell < Cell::Rails
  def show(args)
    user    = args[:user]
    @items  = user.items_in_cart

    render  # renders show.html.haml
  end
end
app/cells/cart/show.html.haml
#cart
  You select #{@item.size} items.
  %ul
    - @items.each do |item|
      %li= item.name

= javascript_include_tag "cart/list_lazy_load"

最後の行でapp/view/assets/cart/list_lazy_load.js.coffeeあたりを呼び出し、適当な機能を画面につけています。

問題なのが、bodyの途中に<script>タグがあるとブラウザが以下のように動作をするということ。

<p>content 1 ...</p>     <!-- ブラウザによるレンダリング -->

<script src='sleep100.js'></script>
<!-- sleep100.jsの実行が終わるまでレンダリングをブロック -->

<p>content 2 ...</p>     <!-- ブラウザによるレンダリングの続き -->

この現象を回避するために「<script>はheadの中かbodyの一番最後に書く」というテクニックを使うのがHTMLの常套手段です。

スクリプトファイルの中にコストのある処理(jQueryを使ったすごいやつとか)がある場合、低スペックマシンではページ全体の印象がもっさりとしてしまいます。

ってわけで、<script>にasync属性を指定して、裏で実行するようにしましょう。

app/cells/cart/show.html.haml
 :
= javascript_include_tag "cart/list_lazy_load", async: 'async'

これでjavascriptの実行を待たずに、HTMLページのレンダリングをしてくれるようになりました。

参考

とても参考になりました
scriptのdefer/asyncを理解し、ページの高速化方法を探る - ゆっくりと…
defer/asyncチェックツールを作りブラウザ対応状況を確認してみた 2010/12/4

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
umanoda

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?