Script, markup, and style sections in Svelte - Performance & Optimization

Performance: Script, markup, and style sections

MEDIUM IMPACT

This concept affects initial page load speed and rendering performance by how scripts, markup, and styles are processed and applied.

Organizing component code with script, markup, and style in Svelte

Svelte

<script>let count = 0;</script>
<div>{count}</div>
<style>div { font-size: 1rem; }</style>

Avoids unnecessary imports, keeps script small and fast to parse, styles scoped and minimal.

📈 Performance GainSaves 150kb bundle size, reduces blocking time to under 10ms

Organizing component code with script, markup, and style in Svelte

Svelte

<script>import bigLib from 'big-lib'; let count = 0;</script>
<div>{count}</div>
<style>div { font-size: 16px; }</style>

Importing large libraries in the script section increases bundle size and blocks rendering until loaded.

📉 Performance CostAdds 150kb to bundle, blocks rendering for 100ms on slow connections

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large script imports in <script>	Minimal	1 (initial)	Medium (due to delayed paint)	[X] Bad
Minimal script with scoped styles	Minimal	1 (initial)	Low	[OK] Good

Rendering Pipeline

The browser parses the markup to build the DOM, applies styles from the style section, and executes scripts from the script section. Large or blocking scripts delay DOM construction and style application, affecting paint timing.

→Parsing

→Style Calculation

→Layout

→Paint

→Script Execution

⚠️ BottleneckScript Execution blocking DOM construction and style application

Core Web Vital Affected

LCP

This concept affects initial page load speed and rendering performance by how scripts, markup, and styles are processed and applied.

Optimization Tips

1Keep the <script> section minimal to avoid blocking rendering.

2Use scoped styles in the <style> section to reduce layout shifts.

3Avoid importing large libraries directly in component scripts to reduce bundle size.

Performance Quiz - 3 Questions

How does importing large libraries in the <script> section affect Svelte component performance?

A It increases bundle size and delays rendering

B It reduces bundle size and speeds up rendering

C It has no effect on performance

D It only affects style calculation

DevTools: Performance

How to check: Record a performance profile while loading the page; look for long scripting tasks and delayed first paint.

What to look for: Long scripting blocks delaying DOMContentLoaded and increased time to first paint indicate script blocking.

Practice

1. Which section in a Svelte component is used to write JavaScript logic?

easy

A. <logic> section

B. <script> section

C. <markup> section

D. <style> section

Solution

1. Step 1: Identify the purpose of each section

   The <script> section is for JavaScript logic, <style> is for CSS, and markup is the HTML structure.

2. Step 2: Match the section to JavaScript logic

   Since logic means JavaScript code, it belongs in the <script> section.

3. Final Answer:

   <script> section -> Option B

4. Quick Check:

   Logic = <script> section [OK]

Hint: Logic always goes inside <script> tags in Svelte [OK]

Common Mistakes:

• Confusing <style> with <script>
• Thinking markup is for logic
• Assuming a <logic> tag exists

2. Which of the following is the correct way to add scoped styles inside a Svelte component?

easy

A. <style global> h1 { color: red; } </style>

B. <style scoped> h1 { color: red; } </style>

C. <style> h1 { color: red; } </style>

D. <css> h1 { color: red; } </css>

Solution

1. Step 1: Understand Svelte's style scoping

   Svelte automatically scopes styles inside the <style> tag to the component without needing extra attributes.

2. Step 2: Identify correct syntax

   The correct syntax is just <style> with CSS inside. Adding scoped or global changes behavior or is invalid.

3. Final Answer:

   <style> h1 { color: red; } </style> -> Option C

4. Quick Check:

   Default <style> is scoped in Svelte [OK]

Hint: Use plain <style> for scoped CSS in Svelte [OK]

Common Mistakes:

• Adding 'scoped' attribute which is unnecessary
• Using <css> tag instead of <style>
• Confusing global styles with scoped styles

3. What will be rendered by this Svelte component?

<script>
  let name = 'Anna';
</script>

<h1>Hello {name}!
</h1>

<style>
  h1 { color: blue; }
</style>

medium

A. Hello Anna! with default text color

B. Hello {name}! with default text color

C. Error because style is inside component

D. Hello Anna! with blue text

Solution

1. Step 1: Understand variable interpolation in markup

   The {name} inside markup inserts the value of the variable name, which is 'Anna'.

2. Step 2: Recognize scoped styles effect

   The <style> section styles the h1 with blue color scoped to this component.

3. Final Answer:

   <h1> Hello Anna! </h1> with blue text -> Option D

4. Quick Check:

   Variable interpolation + scoped style = blue 'Hello Anna!' [OK]

Hint: Variables in {} show their value; styles apply scoped [OK]

Common Mistakes:

• Thinking {name} prints literally
• Assuming styles don't apply inside component
• Confusing style scoping with errors

4. Identify the error in this Svelte component:

<script>
  let count = 0
</script>

<button on:click="count++">Click me</button>

<style>
  button { font-size: 1.2rem; }
</style>

medium

A. Incorrect event handler syntax with quotes

B. Missing semicolon after let count = 0

C. Style section must be before script

D. Button tag is not closed properly

Solution

1. Step 1: Check event handler syntax in markup

   In Svelte, event handlers use on:event={handler} without quotes around the handler expression.

2. Step 2: Identify the incorrect usage

   The code uses on:click="count++" with quotes, which is invalid syntax in Svelte.

3. Final Answer:

   Incorrect event handler syntax with quotes -> Option A

4. Quick Check:

   Event handlers need curly braces, no quotes [OK]

Hint: Use on:click={count++}, not quotes [OK]

Common Mistakes:

• Adding quotes around event handler
• Thinking semicolon is mandatory in script
• Believing style must come before script

5. You want to create a Svelte component that shows a message in red only if a variable error is true. Which combination of script, markup, and style is correct?

<script>
  let error = true;
</script>

<!-- markup here -->

<style>
  .error { color: red; }
</style>

hard

A. {#if error}<p class="error">Error occurred</p>{/if} shows red text only if error is true

B. <p>{error ? 'Error occurred' : ''}</p> but no red color applied

C. <p class="error">Error occurred</p> always shows red text

D. {#if error}<p style="color: red;">Error occurred</p>{/if} but style section is ignored

Solution

1. Step 1: Use conditional markup to show message only if error is true

   The {#if error} ... {/if} block conditionally renders content based on the variable.

2. Step 2: Apply CSS class for red color

   Using class="error" applies the scoped style .error { color: red; } correctly.

3. Final Answer:

   {#if error}<p class="error">Error occurred</p>{/if} -> Option A

4. Quick Check:

   Conditional + class with style = correct red message [OK]

Hint: Use {#if} for condition and class for styling [OK]

Common Mistakes:

• Showing message always without condition
• Not applying CSS class for color
• Using inline style ignoring style section