Performance Optimizations

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• js/myJs.js
• css/style.css
• css/spinload.css
• img/cuteCat.jpg

The yeuems.io project implements several front-end performance techniques to manage asset delivery and perceived latency. These optimizations focus on resource loading sequences, visual feedback during initialization, and efficient DOM manipulations within a single-page interactive experience.

The following flowchart illustrates the initialization sequence and the role of the preloader in managing perceived performance:

Asset Loading and Resource Management

The application manages external dependencies and internal styles to ensure rapid initial rendering.

CSS and Font Optimization

The project uses external Content Delivery Networks (CDNs) for standardized libraries like Bootstrap and Pacifico fonts. By using standard CDNs, the application potentially benefits from browser caching if the user has visited other sites using the same resources. Internal styles are split into two files: style.css for general layout and spinload.css for critical preloading styles.

Resource Type	Source / Implementation	Purpose
External CSS	Bootstrap 4.3.1 (CDN)	Layout and UI components
External Fonts	Google Fonts (Pacifico)	Thematic typography
Critical CSS	css/spinload.css	High-priority preloader styling
Application CSS	css/style.css	Layout, positioning, and transitions

Sources: index.html:12-25, css/spinload.css:1-68

Preloader Implementation

A full-screen preloader hides unstyled content (FOUC) and pending background images during the initial load. The preloader uses pure CSS animations to minimize CPU overhead while the JavaScript environment initializes.

Execution Efficiency and State Management

Delayed Initialization

The main application logic is deferred using setTimeout within the $(document).ready() block. This prevents heavy JavaScript execution, such as triggering SweetAlert2 popups or background image processing, from blocking the initial render of the preloader animation.
Sources: js/myJs.js:15-24

Event-Driven Interaction

Instead of constant polling, the application utilizes event listeners for user interactions. The "moving button" logic only calculates coordinates when the mousemove or click event is triggered, reducing continuous script execution.

Function	Trigger	Impact
switchButton()	mousemove (n < 1)	Swaps button positions instantly
moveButton()	mousemove (n > 1)	Calculates random X/Y coordinates
textGenerate()	setInterval (on focus)	Throttles text injection in input

Sources: js/myJs.js:63-107

DOM and Style Optimizations

The application utilizes CSS transitions for smoother movement of elements, which offloads animation calculations to the GPU rather than relying solely on JavaScript interval updates for positioning.
Sources: css/style.css:8-19

  // Example of CSS-based transition optimization
  #no{
    position: absolute;
    display: inline-block;
    left: 35%; 
    top: 40vh;
    -webkit-transition: all 0.1s ease-out;
  }

Sources: css/style.css:4-10

Responsive Performance

The application adjusts its logic based on the user's viewport to maintain performance and usability across devices. In js/myJs.js, the moveButton function uses different coordinate ranges for screens smaller than 600px to prevent elements from moving outside the visible viewport, which would trigger unnecessary scrolling.
Sources: js/myJs.js:67-75

Summary: Performance in yeuems.io is maintained through a combination of CSS-based preloading, deferred JavaScript execution, and responsive coordinate mapping to ensure a fluid user experience across different hardware.