Project

General

Profile

Actions
Copy link

Refactor #14117

open

Javascript should be loaded async, prevents painting being blocked to reduce load times

Added by Daniel Lobato Garcia about 8 years ago. Updated about 7 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
Performance
Target version:
-
Difficulty:
Triaged:
Bugzilla link:
Pull request:
Fixed in Releases:
Found in Releases:
Red Hat JIRA:

Description

Problem
Currently, we have a bunch of javascript_include_tag, and other script tags that are not crucial for loading the page, but they block loading and rendering the page. This means the user won't see anything until our big blob of js application.js has been downloaded and ran.

Solution
To solve this, we can just mark all JS tags and script tags as async. This alone would bring 'time to paint' down severely, up to 50%. We would need to tweak some elements to load only when the associated JS has loaded, and handle dependencies between JS files properly. I graphed time to render for multiple configurations.

Currently /hosts renders at about 1000s -
http://i.imgur.com/cyEiQrR.png

Async loading of all JS files in 1 file, /hosts renders in about 500ms -
http://i.imgur.com/gSimgiE.png

Actions
Copy link
 #1

Updated by The Foreman Bot about 8 years ago

  • Status changed from New to Ready For Testing
  • Pull request https://github.com/theforeman/foreman/pull/3301 added
Actions
Copy link
 #2

Updated by Dominic Cleal about 7 years ago

  • Tracker changed from Feature to Refactor
  • Subject changed from Javascript should not block painting to reduce load times up to 50% to Javascript should be loaded async, prevents painting being blocked to reduce load times
  • Status changed from Ready For Testing to New
  • Assignee deleted (Daniel Lobato Garcia)
Actions
Copy link
 #3

Updated by Dominic Cleal about 7 years ago

  • Pull request deleted (https://github.com/theforeman/foreman/pull/3301)
Actions
Copy link

Also available in: Atom PDF