jQuery.jsの読み込みにDeferやAsyncを使ったらエラーでスクリプトが動かないとき | QWERTY.WORK
jQueryの読込にDeferやAsync使ったら動かなくなった サイトの高速化を行うために読み込むJSを遅延読み込みしようと、あらゆるJSにdeferやasyncを付けていたら、jQueryにDeferを付けた時点でエラーになりアコーデオンメニューとかが動かなくなりました。 <script src='/js/jquery.min.js' defer></script> そんなときの対処法 jQueryに依存するスクリプトをwindow.onload = function() {...}で囲ってみてください。 <script defer> window.onload = function() { スクリプト } </script defer> または、window.addEventListener( 'load', function(){...}, false);で囲ってみてください。 特
<script>: スクリプト要素 - HTML: ハイパーテキストマークアップ言語 | MDN
この要素にはグローバル属性があります。 async クラシックスクリプトでは、 async 属性があった場合、クラシックスクリプトが利用可能になるとすぐに並行して読み込み、解析と評価を行います。 モジュールスクリプトでは、 async 属性があった場合、そのスクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。 この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないようなパーサーブロック JavaScript を排除することができます defer はこの場合に同様の効果があります。 これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。 ブラウザーの対応状況についてはブラウザーの互換性をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。
スクリプト: async, defer
最近の web サイトでは、スクリプトは HTML よりも “重い” ことがしばしばです: ダウンロードサイズはより大きく、処理時間も長くなります。 ブラウザが HTML をロードし、<script>...</script> タグに遭遇すると、DOM の構築を続けることはできません。すぐにスクリプトを実行する必要があります。外部スクリプト <script src="..."></script> についても同じです: ブラウザはスクリプトをダウンロードし、それを実行するまで待つ必要があり、その後にページの残り部分の処理をすることになります。 これは2つの重要な問題につながります: スクリプトは、それ以降の DOM要素は認識することができないため、ハンドラーを追加したりすることはできません。 ページの先頭に重いスクリプトがあると、“ページをブロック” します。利用者はそれがダウンロードされ実行
rel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
Safari, Chrome はデスクトップ版とスマホ版で確認しましたが共に動作の違いはありませんでした。 Firefox のバージョンが2つあるのは本稿執筆中にバージョンアップがあったので試してみたところ、タイムリーに @import の Preload Scanner に機能改善が見られたため参考までに両方載せました。 項目数で最も多くの種類のリソースを Preload Scanner が読み込めたのは Safari で、次いで IE11, Chrome, Firefox71, Opera が並ぶ結果となりました。IE11は意外な健闘を見せていますが、Preload Scanner にあたる機能を最初に導入したブラウザがIE8である事を考えると妥当な結果とも言えます。 どのブラウザも共通して対応しているのは <script> <script async> <link rel="styl
![rel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/446cc54caa1510ed65919319dc78c4f7e9a1e036/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2019%2F12%2Fchrome_watarfall_2.png)
【コピペで解決】「第三者コードの影響を抑えてください」の解決法
困ったこと WordPress製のサイトで、PageSpeed Insightsの「第三者コードの影響を抑えてください」という指摘が出る。 第三者コードとは？ 第三者コードとはざっくり言ってしまうと外部のサービスを利用するために読み込まれるファイルやスクリプトのこと。 例として以下のようなものが当てはまります。 Google AdSenseによる広告 Twitter・Facebookの埋め込み CDN WordPressの場合だとどれも連携しがちなものばかりですよね。 これらによって読み込まれるCSSファイルやjsファイルの影響によってページの読み込みがその分遅れてしまっている、ということになります。 だからといってその連携や読み込みを解除する必要はなく、少し手を加えれば「第三者コードの影響を抑えてください」は解決することができます。 解決法 解決方法は大きく分けて2つあります。 prec
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
