CODEWITHSUNDEEP
polymer
Boardy
Boardy

Reputation: 36237

Polymer elements taking a long time to load - especially in Internet Explorer

I am currently looking into the possibility of using the Polymer-project from Google for a project that I am in the process of designing.

I have been playing around with Polymer but there is a problem I am currently having which is actually swaying me to not want to use it, but not sure if this is a bug or possibly something I am doing a bit wrong.

The problem appears in both Google Chrome, and Internet Explorer, although IE is worse, surprise, surprise!!

The problem is when the page first loads up, you get a page which just contains the textual parts of the components all bunched up together, no styling or colours shown, then a couple of seconds you then get the proper components. Its a split second in Chrome but IE is where it can take anything from 2-5 seconds to load, its like it take a while for the browser to load in the custom DOM elements. 

<html>
    <head>
        <title>Polymer Demo</title>
        <link type="text/css" href="StyleSheet.css" rel="stylesheet">
        <link rel="import" href="components/font-roboto/roboto.html">
        <script src="components/platform/platform.js"></script>
        <link rel="import" href="components/core-elements/core-elements.html">
        <link rel="import" href="components/paper-elements/paper-elements.html">
        <link rel="import" href="components/core-ajax/core-ajax.html">
        <link rel="import" href="components/paper-dialog/paper-dialog.html">
        <link rel="import" href="components/paper-dialog/paper-dialog-transition.html">
        <link rel="import" href="components/paper-icon-button/paper-icon-button.html">
        <link rel="import" href="components/paper-fab/paper-fab.html">
        <link rel="import" href="components/paper-toast/paper-toast.html">
        <link rel="import" href="components/paper-toggle-button/paper-toggle-button.html">
        <link rel="import" href="components/core-tooltip/core-tooltip.html">
        <script>
            function toggleDialog(transition) {
              var dialog = document.querySelector('paper-dialog[transition=' + transition + ']');
              dialog.toggle();
            }

            function submitRating()
            {
                var ratings = document.querySelector('#ratings');
                alert(ratings.value);
            }

            function getNotificationState()
            {
                var value = document.querySelector('#toggleButton').checked;
                alert(value);
            }
        </script>
    </head>
    <body>
        <p>
            <paper-button raisedButton class="colored" label="My Raised Button"></paper-button>
            <paper-button class="colored" label="Flat Button"></paper-button>
            <paper-button label="Non coloured flat button"></paper-button>
            <paper-button raisedButton label="Non coloured raised button"></paper-button>
        </p>
        <p>
            <paper-checkbox label="Hello"></paper-checkbox>
        </p>
        <p>
            <paper-button raisedButton label="Show Dialog Centered Transition" onclick="toggleDialog('paper-dialog-transition-center')"></paper-button>
            <paper-button raisedButton label="Show Dialog Bottom Transition" onclick="toggleDialog('paper-dialog-transition-bottom')"></paper-button>
        </p>

        <p>
            <paper-fab icon="menu"></paper-fab>
        </p

        <p>
            Some Input: <paper-input label="Your Name - Single Line"></paper-input>
        </p>
        <p>
            Multi line input: <paper-input label="Multiline input" multiline></paper-input>
        </p>

        <p>
            <paper-radio-group>
                <paper-radio-button label="Radio Button 1"></paper-radio-button>
                <paper-radio-button label="Radio Button 2"></paper-radio-button>
                <paper-radio-button label="Radio Button 3"></paper-radio-button>
            </paper-radio-group>
        </p>

        <p>
            <paper-slider id="ratings" pin max="10" step="1" value="5"></paper-slider>
            <paper-button label="Submit Rating" onclick="submitRating();"></paper-button>
        </p>

        <p>
        <paper-tabs selected="0" role="tablist">
            <paper-tab>Tab 1</paper-tab>
            <paper-tab>Tab 2</paper-tab>
            <paper-tab>Tab 3</paper-tab>
        </paper-tabs>
        </p>

        <p>
        <paper-button raisedButton label="Discard Message" onclick="document.querySelector('#discardMessage').show()"></paper-button>
        <paper-button raisedButton label="Get Messages" onclick="document.querySelector('#getMessages').show()"></paper-button>
        </p>

        <p>
            Show Notification:<paper-toggle-button id="toggleButton" change="getNotificationState()"></paper-toggle-button>
        </p>

        <p>
            <core-tooltip label="Click me to save" position="right" tabindex="0">
                <paper-button raisedButton label="Save"></paper-button>
            </core-tooltip>

        </p>

        <paper-button label="Go to layout examples" onclick="window.location='layouts.php'"></paper-button>

        <!--Toast Notifications-->
        <paper-toast id="discardMessage" text="Your message has been discarded"></paper-toast>
        <paper-toast id="getMessages" text="Connection Timed Out">
            <div style="color: blue;" onclick="alert('Retrying')">Retry</div>
        </paper-toast>

        <!--Dialog HTML Code-->
        <paper-dialog heading="Centered Transition Dialog" transition="paper-dialog-transition-center">
            <p>This is some content of the dialog box. Woop Woop</p>
            <p>And some more content</p>
            <paper-button label="More Info" dismissive></paper-button>
            <paper-button label="Decline" affirmative></paper-button>
            <paper-button label="Accept" affirmative autofocus></paper-button>
        </paper-dialog>

        <paper-dialog heading="Bottom Transition Dialog" transition="paper-dialog-transition-bottom">
            <p>This is some content of the dialog box. Woop Woop</p>
            <p>And some more content</p>
            <paper-button label="More Info" dismissive></paper-button>
            <paper-button label="Decline" affirmative></paper-button>
            <paper-button label="Accept" affirmative autofocus></paper-button>
        </paper-dialog>
    </body>
</html>

Above is the code I have used for my demo of Polymer.

Does anyone else have this problem, is there a workaround that to stop this from happening.

Upvotes: 2

Views: 2177

Answers (1)

ebidel
ebidel

Reputation: 24119

An immediate win is to use Vulcanize, Polymer's HTML imports concatenation tool to crush all those imports into a single file. Under polyfill'd browsers, this is known to speed thing up quite a bit. Also be sure to run with the --csp --inline flags for further optimizations.

Another thing to watch out for is that <script> block main page parsing. Your scripr in the <head> blocks the HTML imports). Try to move your scripts to the bottom of the page. See http://www.html5rocks.com/en/tutorials/webcomponents/imports/#perf-parsing

Upvotes: 5

Related Questions