POST requests for form submission in Vue - Performance & Optimization

Performance: POST requests for form submission

MEDIUM IMPACT

This affects page load speed and interaction responsiveness when submitting forms.

Submitting a form with a POST request in Vue

Vue

methods: { async submitForm() { try { this.isLoading = true; const response = await fetch('/api/submit', { method: 'POST', body: JSON.stringify(this.formData), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); this.isLoading = false; this.successMessage = 'Submitted successfully!'; } catch { this.isLoading = false; this.errorMessage = 'Submission failed.'; } } }

Uses async/await to keep UI responsive, shows non-blocking feedback, and manages loading state.

📈 Performance GainNo UI blocking, faster interaction response, better INP score.

Submitting a form with a POST request in Vue

Vue

methods: { submitForm() { fetch('/api/submit', { method: 'POST', body: JSON.stringify(this.formData), headers: { 'Content-Type': 'application/json' } }).then(response => response.json()).then(data => { alert('Submitted!'); }).catch(() => { alert('Error'); }); } }

Uses alert dialogs which block rendering and user input.

📉 Performance CostBlocks rendering and user input until alert is dismissed, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Async fetch with alert	Minimal DOM changes	0 reflows but blocks input	Blocks paint during alert	[X] Bad
Async fetch with reactive state	Updates loading and message nodes	1 reflow for message update	Paint cost low and non-blocking	[OK] Good

Rendering Pipeline

When a POST request is triggered, the browser sends data to the server asynchronously. The UI updates depend on JavaScript handling the response without blocking rendering or layout.

→JavaScript Execution

→Paint

→Composite

⚠️ BottleneckJavaScript Execution if synchronous or blocking UI feedback is used.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness when submitting forms.

Optimization Tips

1Always use asynchronous POST requests to avoid blocking the UI.

2Show non-blocking loading indicators instead of alert dialogs.

3Manage reactive state to update the UI smoothly after submission.

Performance Quiz - 3 Questions

What is the main performance problem with using alert() after a POST request in Vue?

A It blocks rendering and user input until dismissed

B It increases bundle size significantly

C It causes multiple reflows on the page

D It delays the network request

DevTools: Performance

How to check: Record while submitting the form and observe the Main thread activity and responsiveness during the POST request.

What to look for: Look for long tasks blocking input or UI updates; good patterns show short tasks and smooth interaction.