Question

主html文档中的JavaScript代码可以访问其iframe中的代码和数据，反之亦然，如果没有被浏览器阻止。但是，性能呢？ iframe边界是否有性能损失？

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

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

我想知道是什么让这些与众不同？主文档和iframe中的代码是否在同一个JavaScript VM中运行？

我们可以期待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>

要尝试测试代码，请在浏览器中打开开发人员工具的控制台，然后按“testCalcIFrame”来测试在iframe中调用函数，并按“testCalc”来测试在主文档中调用函数。

更新：我尝试将脚本元素注入iframe而不是使用eval（），如下所示 Jan Dvorak：

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

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

跨iframe边界的javascript性能

0 个答案: