CSSを非同期ロードする最も簡単な方法 - Qiita
CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco
私が async/await、promise をちゃんと理解するまでのステップ１，２，３ - Qiita
これは何？ javascript の async/await を使いこなすために必要な事柄について、私なりに説明したものです。 書いてあること ステップ１）await 使えば待ってくれる 必要最小限の async/await、及び、エラーの catch の話 ステップ２）promise というもの promise の中には「正常データ = resolve」と「エラー = reject」のいずれかを保管できるという話 どうすれば、promise から、正常データ(resolve)を取り出せるか？ どうすれば、promise から、エラー(reject)を取り出せるか？ Promise.all の話 ステップ３）promiseを作る方法 callbackスタイルの関数を、promiseスタイルとして使う方法 setTimeout() を promiseスタイルにする async で promi
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
SNSボタンのJavascript非同期通信化などでページ読み込み時間2割削減 – HCDコンサルティング（旧・中川勉社会保険労務士事務所FPウェブシュフ）のブログ
By: Search Engine People Blog ソーシャルボタンが重いので、Javascriptの読み込み非同期化とフッターへの移動で高速化を試みました。結果ページ読み込み時間は2割ほど少なくなり、体感的にも少し速くなりました。 同期読み込みと非同期読み込みとは 同期読み込み FacebookやtwitterボタンのJavaScriptは、デフォルトでは「同期読み込み」になっています。 非同期読み込み そのため、FacebookやtwitterボタンのJavaScriptが完全に読み込まれるまで、他の部分の読み込みが行われません。 しかし、「非同期読み込み」にすると、FacebookやtwitterボタンのJavaScriptの読み込みが完了していなくても、他の部分の読み込みが行われます。 非同期化前の読み込み速度 当サイト内のある特定ページの読み込み速度を測ってみました。 そ
1秒台を目指せ！ソーシャルボタンを高速に読み込む方法を比較する » aoringo works
どもっち。最近TRPGじゃなくてツールばっかり作ってるaoringoです。サイト調整に奮闘しております。 サイトの速度、気になりますかね？ 私は超絶気になりますよ。特にソーシャルボタンです。こいつらが原因で遅くなっているのでは・・・・と常々思っております。 今回はこのソーシャルボタンに手を入れてみましょう。 とはいえ、どれくらい表示速度に違いがあるのか・・・ちょっと確認してみましょうか。 計測に使うのはこちら→【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | Web担当者Forum お手軽に、正確に表示できるので好きです。 素のコードを記述する 空のhtmlファイルにソーシャルボタンを読み込んだだけのページを作成し、これを計測します。 読み込むソーシャルボタンはtwitter、はてな、facebook、グーグルプラスです。ついでにアナリティクスコード
JavaScriptを分割&非同期で読み込めるRequireJS | バシャログ。
『サニー 永遠の仲間たち』という韓国映画がとても良かったです！minamiです。 サイトで使用するJavaScriptを非同期で読み込むライブラリが昨今増えていますが、その中でRequireJS というライブラリがバージョンアップしたとのことなのでさわってみました。 RequireJSとは RequireJSは、JavaScriptのファイルやモジュールを非同期でロードできるJavaScriptライブラリです。推奨環境は下記になっています。 IE 6以上 Firefox 2以上 Safari 3.2以上 Chrome 3以上 Opera 10以上 ダウンロードする まずライブラリをダウンロードします。 DOWNLOAD REQUIREJS RequireJS の設置 ダウンロードしたら、以下のように設置します。 ├ index.html └ /js ├ main.js（読み込み管理用jsフ
Google AnalyticsにみるJSの非同期初期化処理
Google Analyticsが提供するJSは以下の様な初期化処理をおこなっている。 Google Analyticsに限らす外部JSを読み込むライブラリの場合、「初期化は非同期で行いたいが、APIの読み出しは同期で行いたい」という要望がある。 通常こういった要望を叶えるためには、メインのJSが読み込み済みかどうか監視して処理を呼び分けるような長い初期化処理を貼り付けタグとして発行し各サイトに埋め込んでもらう必要がある。 ただ、貼り付けタグが長くなるとコピペミスも増えるし、貼り付けタグ部分で問題が発生した時に対処できなくなるため、貼り付けタグはできるだけ短いほうが嬉しい。 そこで最初に紹介したGoogle Analyticsのタグを見ると、初期化処理は実質「var _gaq = _gaq || [];」だけということがわかる。 ではこの初期化処理だけでどうやって「初期化は非同期だけど、A
defer/asyncチェックツールを作りブラウザ対応状況を確認してみた | ゆっくりと…
ちょっと前に 「scriptのdefer/asyncを理解し、ページの高速化方法を探る」 というエントリーを書きましたが、はてなのブックマーカー edvakf さんから 「Opera は defer も async も対応してないはず」 というご指摘を頂きました （edvakf さん、ありがとうございます）。 こちら と こちら （2012年11月16日：Google のドキュメントが削除されました） の表を 「対応状況」 としてそのまま流用してしまったのが失敗でした。英語をよく読めば、You can use the defer/async attribute on the following elements と書いてあります。つまり 属性は使えるけど、動作は別 とも読めるわけで…。 ということで、「defer/async チェッカー （仮）」 を作ってリベンジすることにしました。 1.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TOP - スクリプト配置とページ速度