Fatal编程技术网
  • javascript/
  • Javascript 创建新的iframe比设置源要快得多

Javascript 创建新的iframe比设置源要快得多

javascript jquery html performance iframe

Javascript 创建新的iframe比设置源要快得多,javascript,jquery,html,performance,iframe,Javascript,Jquery,Html,Performance,Iframe,编辑：我创建了一个小提琴来显示不同的加载时间（忽略任何视觉css错误：p） 以前有人遇到过这种行为吗？考虑到我有以下HTML文件： <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content=

编辑：我创建了一个小提琴来显示不同的加载时间（忽略任何视觉css错误：p）

以前有人遇到过这种行为吗？考虑到我有以下HTML文件：

<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/viewer.css">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    </head>
    <body>

        <!-- IMPORTANT CODE SECTION IS RIGHT HERE -->
        <button class="btn waves-effect waves-light bracket-button not-transition">
            Click Me
        </button>
        <div id="frame-overlay" class="scale-transition scale-out card">
            <iframe id="frame" src=""></iframe>
            <div class="loader">Loading...</div>
        </div>
        <!-- END IMPORTANT CODE SECTION -->

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/materialize.min.js"></script>
        <script src="js/viewer.js"></script>
    </body>
</html>
上面的代码可以工作，但是加载iframe的速度非常慢。我发现，如果我改为删除初始帧，并动态附加/删除iframe，它的加载速度会非常快：

        if (showGG) {
            $('#frame-overlay').removeClass('scale-out');
            $('#frame-overlay').append('<iframe id="frame" src="' + source + '"></iframe>')
            $('#frame').show();
        } else {
            $('#frame-overlay').addClass('scale-out');
            // Remove source
            $('#frame').remove();
            $('.loader').show();
        }

if（showGG）{
$（“#帧覆盖”）.removeClass（'scale-out'）；
$（“#帧覆盖”）。追加（“”）
$（'#frame'）.show（）；
}否则{
$（“#帧覆盖”）.addClass（'scale-out'）；
//删除源
$（'#frame'）。删除（）；
$（'.loader'）.show（）；
}
为什么添加和删除iframe加载比设置源要快得多？我最初的印象是设置源代码会更快，但似乎不是这样。

我没有注意到任何重大差异。开发人员工具向我显示，这两个代码都以900-1000ms的速度加载页面。使用Chrome 61。@bigless该代码用于twitch扩展，所以我想是在twitch的环境中运行导致了这种延迟？实际上，这似乎是我试图加载的特定链接。将fiddles中的source设置为@bigless，您应该会看到明显的负载差异。我只注意到两种模式：缓存和有时外部资源（如geo、maps等）的加载时间变慢。但这是正常的。通常第一次慢，第二次快-它解释了浏览器缓存。用chrome浏览器扩展一下怎么样。。？否则我真的不知道..我没有注意到任何重大差异。开发人员工具向我显示，这两个代码都以900-1000ms的速度加载页面。使用Chrome 61。@bigless该代码用于twitch扩展，所以我想是在twitch的环境中运行导致了这种延迟？实际上，这似乎是我试图加载的特定链接。将fiddles中的source设置为@bigless，您应该会看到明显的负载差异。我只注意到两种模式：缓存和有时外部资源（如geo、maps等）的加载时间变慢。但这是正常的。通常第一次慢，第二次快-它解释了浏览器缓存。用chrome浏览器扩展一下怎么样。。？否则我真的不知道。。 
        if (showGG) {
            $('#frame-overlay').removeClass('scale-out');
            $('#frame-overlay').append('<iframe id="frame" src="' + source + '"></iframe>')
            $('#frame').show();
        } else {
            $('#frame-overlay').addClass('scale-out');
            // Remove source
            $('#frame').remove();
            $('.loader').show();
        }