In-Portal Issue Tracker

Welcome to the In-Portal Open Source CMS Issue Tracker! This is a central management / tracking tool for all types of tasks / issues / bugs for the In-Portal Project. Before reporting any issues, please make sure to read the Guide into Issue Tracker and How to Properly Test and Report Bugs!

Viewing Issue Simple Details [ Jump to Notes ] [ Wiki ]

[ View Advanced ] [ Issue History ] [ Print ]

Category

Type

Reproducibility

Date Submitted

Last Update

0001397

[In-Portal CMS] Front End

feature request

N/A

2012-09-16 06:36

Reporter

alex

View Status

public

Project Name

In-Portal CMS

Assigned To

Developer

Priority

normal

Resolution

open

Fixed in Version

Status

active

Product Version

5.2.0

Target Version

5.3.0

Time Estimate

No estimate

Summary

0001397: Delayed execution of JavaScript code

Description

To optimize page load times on website Google recommends to postpone JavaScript code execution until it's really needed on a page and to move most (all if possible) of JavaScript code at footer of webpage.
This way loading of external javascript files won't affect page load speed.

Usually, in In-Portal, we put JavaScript code, that is used to process given piece of HTML right after it. This way we keep all in one place, but it's against modern Google approach I've described above.

I'm proposing to create a means to allow placing JavaScript right after relevant HTML piece in TPL file, but at the end make that JavaScript available at the end of a page, where it really belongs.
Usually I would use $(document).ready(...) construct to do this, but since even jQuery itself is loaded at page bottom this becomes impossible.

For example we can use existing tags to arrange this or create new tag just for that. Here is how I see it.

--- CODE ON THE PAGE ---
some html here

<inp2:m_Queue queue_name="...">
    <script>
        // some javascript here
    </script>
</inp2:m_Queue>

some other html on the page

--- CODE IN FOOTER ---
<script>
    $(document).ready(function () {
        <inp2:m_Queue queue_name="..." minify_as="js"/>
    });
</script>

Some explanations:

* Parameter queue_name in example above is optional and allows to have several queues on one page.
* Parameter minify_as tells how queued data should be minified. When omitted no minification happens.
* Tag <script> is added inside just to keep IDE auto-complete working, otherwise whole JS code would be highlighted as big HTML error.
* All <script ...> and </script> tags would be stripped from the result to create one unified block.
* Each m_Queue pair tag can be interpreted as sort-of <inp2:m_Capture to_var=""> ... </inp2:m_Capture> that appends new data to already queued data.
* Each m_Queue non-pair tag can be interpreted as <inp2:m_Param.../> tag to get data from that parameter.

Hope you can see potential of m_Queue tag, since it allows to put absolutely anything into queue for later usage while keeping related data in same place in template.

Additional Information

Issue History
Date Modified	Username	Field	Change
2012-09-16 06:36	alex	New Issue
2012-09-16 06:36	alex	Reference	=> Adds parser-assisted javascript code movement across template
2012-09-16 06:36	alex	Change Log Message	=> https://groups.google.com/d/topic/in-portal-dev/4nQ1CyIGFy8/discussion
2012-09-16 06:36	alex	Estimate Points	=> 1

Relationships [ Relation Graph ] [ Dependency Graph ]