个人中心
gpt4 book ai didi

polymer 元素需要很长时间才能加载 - 尤其是在 Internet Explorer 中

转载 作者：行者123 更新时间：2023-12-02 18:01:55 25 4
gpt4 key购买 nike

我目前正在研究将 Google 的 Polymer 项目用于我正在设计的项目的可能性。

我一直在使用 Polymer，但我目前遇到了一个问题，这实际上让我不想使用它，但不确定这是否是一个错误，或者可能是我做错了什么。

Google Chrome 和 Internet Explorer 都出现这个问题，虽然 IE 更差，惊喜，惊喜!

问题是，当页面首次加载时，您得到的页面仅包含聚集在一起的组件的文本部分，没有显示样式或颜色，然后几秒钟后您就得到了正确的组件。在 Chrome 中加载时间只是一瞬间，但在 IE 中加载任何内容可能需要 2-5 秒，就像浏览器需要一段时间才能加载自定义 DOM 元素一样。 

<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>

以上是我用于 Polymer 演示的代码。

其他人是否也遇到此问题，是否有解决方法可以阻止这种情况发生。

最佳答案

直接的胜利是使用 Vulcanize ，Polymer 的 HTML 导入串联工具可将所有这些导入压缩到一个文件中。在填充浏览器下，众所周知，这可以大大加快速度。另请务必使用 --csp --inline 标志运行以进行进一步优化。

另一件事需要注意的是<script>阻止主页解析。您的票据在 <head>阻止 HTML 导入)。尝试将脚本移至页面底部。请参阅http://www.html5rocks.com/en/tutorials/webcomponents/imports/#perf-parsing

关于 polymer 元素需要很长时间才能加载 - 尤其是在 Internet Explorer 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25473776/

25 4 0
文章推荐： Angular2 + webpack 不显示图像
文章推荐： azure - 如何使用 dotnet core 作为 Docker 中的 Azure 函数来运行 FFProbe？
文章推荐： docker - 'docker images ls' 有什么作用？
文章推荐： asp.net - Entity Framework - ObjectQuery 返回 int 属性并将其分配给变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com