効率的なスクリプト読み込み戦略
JavaScriptを非同期で読み込み、重要でないスクリプトを遅延させ、モジュールパターンを効果的に利用する技法を身につけます。
「効率的なスクリプト読み込み戦略」はCoddyKit上の無料Web Performance Optimization & Lighthouseレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Performance Optimization & Lighthouse学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Fast Scripts, Fast Pages
JavaScript powers interactive web experiences. But if not loaded efficiently, it can significantly slow down your website.
A slow loading script can block your page from rendering, making users wait longer to see and interact with content.
In this lesson, we'll explore strategies to load scripts smartly, ensuring your users get a smooth, fast experience.
Scripts Block Rendering
By default, when a browser encounters a <script> tag in your HTML, it pauses parsing the HTML document.
It fetches, parses, and executes the script immediately. Only after the script finishes can HTML parsing resume.
This can be a major bottleneck, especially for large scripts. Try running this simple script to see how it can simulate a blocking operation:
console.log("HTML parsing paused (simulated).");
// Simulate a computationally heavy task
let sum = 0;
for (let i = 0; i < 100000000; i++) {
sum += i;
}
console.log("Blocking script finished. Sum:", sum);
console.log("HTML parsing resumes (simulated).");`async`: Load in Parallel
The async attribute tells the browser to download the script in parallel with parsing the HTML document.
- Non-blocking: HTML parsing continues while the script downloads.
- Execute immediately: The script executes as soon as it's downloaded, without waiting for the HTML to finish parsing.
- Order not guaranteed: Scripts with
asyncmight execute in any order, potentially out of the order they appear in the HTML.
Use async for independent scripts like analytics or ads that don't rely on other scripts or the full DOM.
`async` in Action
Imagine this script is loaded with <script async src="my-async-script.js"></script>.
It downloads in the background, and once ready, runs right away. Other page content can continue loading.
Notice how "Page content continues..." might appear before "Async script finished" in a real browser scenario, as the script doesn't block.
console.log("Async script started downloading.");
// Simulate fetching data or setting up a listener
setTimeout(() => {
console.log("Async script finished execution.");
}, 50); // Small delay to simulate download + execution
console.log("Page content continues to load in parallel.");`defer`: Execute After HTML
The defer attribute also makes scripts non-blocking, but with a key difference in execution time.
- Non-blocking: Like
async, the script downloads in parallel with HTML parsing. - Execute after HTML: The script executes only after the HTML document has been completely parsed.
- Order guaranteed: Scripts with
deferexecute in the exact order they appear in the HTML.
defer is ideal for scripts that depend on the full DOM, like interactive elements or form validations, but don't need to block initial rendering.
`defer` in Action
This script, loaded with <script defer src="my-defer-script.js"></script>, would wait for all HTML to be processed before running.
It's perfect for scripts that need to interact with elements on the page without blocking the user from seeing content first.
console.log("Defer script started downloading.");
// Simulate DOM manipulation or event setup
setTimeout(() => {
// In a real browser, document.getElementById would now work.
console.log("Defer script finished execution after HTML parsed.");
}, 50); // Small delay
console.log("HTML parsing completed (simulated) before defer script runs.");Pick Your Strategy
Understanding the differences between async and defer is crucial for optimal performance:
async: For independent scripts that don't care about DOM readiness or other script order (e.g., analytics, third-party widgets).defer: For scripts that rely on the DOM being fully parsed, or depend on the execution order of other deferred scripts (e.g., UI interactivity, custom validations).- No attribute: Blocks rendering. Only use for critical scripts that must run before anything else.
ES Modules: Modern Scripting
ES Modules (ECMAScript Modules) provide a standardized system for organizing JavaScript code into separate files that can import and export functionalities.
When you use <script type="module">, the browser treats your script differently:
- Deferred by default: Modules are automatically deferred, meaning they don't block HTML parsing.
- Strict Mode: Modules run in strict mode by default.
- Scoped: Variables and functions declared at the top-level of a module are scoped to that module, not global.
How Modules Load
ES Modules use import to bring in functionality from other files and export to make functionality available.
The browser handles module loading efficiently, fetching dependencies in parallel and executing them in the correct order, after the HTML is parsed.
Here's a look at basic module syntax:
// Example: myUtils.js
export const PI = 3.14159;
export function multiply(a, b) {
return a * b;
}
// Example: main.js (loaded with <script type="module">)
import { PI, multiply } from './myUtils.js';
console.log("Module imported successfully.");
console.log("PI value:", PI);
console.log("5 * 10 =", multiply(5, 10));Script Loading Choices
You're building a website and need to load several JavaScript files. Which of the following statements about efficient script loading are TRUE?
Recap: Mastered Loading
Great job! You've learned how to load JavaScript efficiently:
- Default scripts block parsing, slowing down your page.
- The
asyncattribute allows scripts to download in parallel and execute immediately, ideal for independent scripts. - The
deferattribute also downloads in parallel but waits until the HTML is fully parsed before executing, maintaining order. - ES Modules (
<script type="module">) offer a modern, structured way to organize code, behaving like deferred scripts by default.
By applying these strategies, you can significantly improve your website's perceived and actual loading performance!
AI チューターと学ぶ Web Performance Optimization & Lighthouse — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 12
- レッスン
- 48
よくある質問
「効率的なスクリプト読み込み戦略」レッスンは無料ですか？
はい。「効率的なスクリプト読み込み戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Performance Optimization & Lighthouseコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Performance Optimization & Lighthouseコースには全4レッスンが含まれています。
「効率的なスクリプト読み込み戦略」で何を学びますか？
JavaScriptを非同期で読み込み、重要でないスクリプトを遅延させ、モジュールパターンを効果的に利用する技法を身につけます。 ブラウザで直接実行するハンズオンコードでWeb Performance Optimization & Lighthouseを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Performance Optimization & Lighthouseを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Performance Optimization & Lighthouseは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「効率的なスクリプト読み込み戦略」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Performance Optimization & Lighthouseレッスンでコードを書いて実行できますか？
はい。すべてのWeb Performance Optimization & Lighthouseレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- JavaScriptペイロードの最小化
- 効率的なスクリプト読み込み戦略
- Web Workersとメインスレッド外処理
- コード分割と遅延読み込み