コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jsの遅延読み込みでJSの位置を変更してWebページの読み込みを高速化_基礎知識

jsの遅延読み込みでJSの位置を変更してWebページの読み込みを高速化_基礎知識

WBOY
リリース： 2016-05-16 17:46:58
オリジナル
1446 人が閲覧しました

Web サイトに大量の JS コードを読み込む場合、JS コードの位置は Web ページの読み込み速度にある程度影響します。Web ページの読み込みを高速化するために、この記事ではいくつかのポイントをまとめます。
1. JS コードの遅延読み込み

コードをコピーします コードは次のとおりです:



このように、js コードは遅延を介してロードされ、Web ページのロードにさらに時間がかかります。


2. JS の最終読み込みソリューション 1
JS を挿入する必要がある場所に次のコードを挿入します: プログラム コード


コードをコピーします コードは次のとおりです:
LOADING… 🎜>
もちろん、この LOADING... とても AJAX 効果が高いように見える小さな画像に変更できます。
次に、ページの下部に
プログラム コード
を挿入します。



コードをコピーします
コードは次のとおりです: JSコードはここにあります!<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML=”;</script>


3 . JS に 2 番目のソリューションを最後に読み込ませます
これには、Web ページの読み込み順序が関係します。たとえば、外部の JS スクリプト ファイルを HTML の先頭に配置すると、JS スクリプトはページがロードされる前にページにロードされ、本文に配置されている場合、JavaScript コードはページが上から下にロードされる順序で実行されます~~~ したがって、インポートされたファイルを置くことができますこれにより、js が最後に導入されるようになり、ページの読み込み速度が向上します。
関連ラベル：
読み込み速度 遅延読み込み
ソース：php.cn
前の記事：JQuery のパフォーマンスを向上させ、JQuery の実行を高速化する 10 の簡単な方法_jquery 次の記事：JQuery each() 関数はループ DOM のパフォーマンスをどのように最適化しますか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
ASP クラシック コードを文字列として MYSQL データベースに保存する可能性 ASP クラシック コードを MySQL データベースに保存し、プルされたときにコードを実行させることは可能ですか?たとえば、変数名を文字列に保存し、それを表示する前に ASP を...
から 2024-04-06 13:38:43
0
1
358
Live Server を使用する Web サイトをファイルから起動すると機能しません いくつかのブラウザを試してみましたが、いずれの場合も Web サイトは LiveServer で正常に動作しました。一方、Firefox/Chrome を使用してサイトを起動すると...
から 2024-04-06 12:46:18
0
1
403
Electron はプリロード時に AppData を取得します プリロードされた AppData ディレクトリを取得するにはどうすればよいですか? Background.js[...]asyncfunctioncreateWindow(){co...
から 2024-04-06 11:05:31
0
1
417
Expo はフォントを読み込めません Expo でフォントをロードしようとしましたが、同じエラーが発生し続けます。私のコードは次のとおりです: 私の Index.js は次のようになります: importWelcome...
から 2024-04-05 15:18:52
0
1
3611
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート