跨iframe边界的javascript性能_Javascript_Performance_Iframe_Browser

跨iframe边界的javascript性能

javascript performance iframe browser

跨iframe边界的javascript性能,javascript,performance,iframe,browser,Javascript,Performance,Iframe,Browser,主html文档中的JavaScript代码可以访问其iFrame中的代码和数据，反之亦然，如果浏览器不阻止的话。但是，性能如何？是否存在跨iframe边界的性能惩罚我做了一个简单的测试，发现它取决于浏览器： chrome 28：从主文档调用iframe中的函数与在主文档中调用函数一样快 Firefox23：在iframe中调用函数要慢得多（~6x） IE11预览版：在iframe中调用函数要慢得多（~3.5x），但比firefox要好我想知道这些区别是什么？主文档和iframe中的代码是

主html文档中的JavaScript代码可以访问其iFrame中的代码和数据，反之亦然，如果浏览器不阻止的话。但是，性能如何？是否存在跨iframe边界的性能惩罚

我做了一个简单的测试，发现它取决于浏览器：

chrome 28：从主文档调用iframe中的函数与在主文档中调用函数一样快
Firefox23：在iframe中调用函数要慢得多（~6x）
IE11预览版：在iframe中调用函数要慢得多（~3.5x），但比firefox要好

我想知道这些区别是什么？主文档和iframe中的代码是否在同一个JavaScript虚拟机中运行

我们能期望firefox和IE在不久的将来减少甚至消除这些性能损失吗

我的测试代码如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Calc in iframe</title>
</head>
<body>
    <button onclick="testCalcIFrame()">testCalcIFrame</button>
    <button onclick="testCalc()">testCalc</button>
    <button onclick="iwin.testCalcAllIframe()">testCalcAllIframe</button>
    <iframe id="iframe" style="display:none;"></iframe>
    <script>
        var iwin = document.getElementById('iframe').contentWindow;
        iwin.document.open('text/html');
        iwin.document.close();        

        //Copy functions calc() and testCalcAllIframe() into the iframe.
        iwin.eval(calc.toString());
        iwin.eval(testCalcAllIframe.toString());

        var icalc = iwin.calc;

        var arrLength = 1000 * 1000;

        var arr = new Array(arrLength);
        for (var i = 0; i < arrLength; i++)
            arr[i] = i;

        function calc() {
            var n = 0;
            for (var i = 0; i < 2; i++) {
                n += Math.round(arguments[i] / 3);
            }
            return n;
        }

        //test calling calc() in the main document
        function testCalc() {
            var t1 = performance.now();
            var r = arr.reduce(calc);
            console.log('testCalc(' + arr.length + '):time:' + (performance.now() - t1) + ', result:' + r);
        }

        //test calling calc() in the iframe
        function testCalcIFrame() {
            var t1 = performance.now();
            var r = arr.reduce(icalc);
            console.log('testCalcIFrame(' + arr.length + '):time:' + (performance.now() - t1) + ', result:' + r);
        }

        function testCalcAllIframe() {
            var arr2 = new Array(1000 * 1000);
            for (var i = 0; i < arr2.length; i++)
                arr2[i] = i;

            var t1 = performance.now();
            var r = arr2.reduce(calc);
            console.log('testCalcAllIframe(' + arr2.length + '):time:' + (performance.now() - t1) + ', result:' + r);
        }

    </script>
</body>
</html>

但是，性能几乎与使用eval（）相同。

如果我不得不猜测，我会说是因为浏览器不断地重新检查安全限制，而Chrome可以优化检查，只有在文档源更改时才进行解压缩。可能是因为使用了

eval

造成的。尝试注入一个脚本元素。嗨，Jan Dvorak，我尝试注入一个脚本元素而不是eval（），但没有明显区别。嗨，Jan Dvorak，一次通过的安全检查不足以强制执行同源策略吗？尽管可以通过插入元素动态更改基本URI，但主文档仍然可以访问其iFrame的内容（如果在更改之前可以）努夫说。

//iwin.eval(...) replaced by:
var iscript = iwin.document.createElement('script');
iwin.document.body.appendChild(iscript);
iscript.textContent = calc.toString() + '\n' + testCalcAllIframe.toString();