Question

我推迟加载字体以加快页面加载

    var assets = {
        1:{
            type:"link",
            attributes:{
                href:"http://fonts.googleapis.com/css?family=Open+Sans:300,400",
                rel:"stylesheet",
                type:"text/css"
            }
        }
    }

    for(var n=0,k=Object.keys(assets);n<k.length;n++){
        var a = document.createElement(assets[k[n]].type);
        for(var i=0,k2=Object.keys(assets[k[n]].attributes);i<k2.length;i++){
            a.setAttribute(k2[i],assets[k[n]].attributes[k2[i]]);
        }
        if(assets[k[n]].hasOwnProperty("onload")){
            assets[k[n]].onload();
        }
        document.getElementsByTagName("head")[0].appendChild(a);
    }

但是这个过程的趋势是页面会闪烁以更新字体。我很眨眼但我更喜欢它只在初始页面加载时发生。如何检测字体是否被缓存以便我可以在不延迟的情况下加载它？

Answer 1

好吧，所以我感到无聊了一会儿，并因某些原因对这个问题感到好奇。

玩了一下，想出了下面的测试脚本..原因是如果我将来需要这样的东西我自己还需要支持IE8。 否则window.performance是首选选项。

以下脚本是一个快速而肮脏的测试脚本，而我宁愿在一系列情况下测试它，例如慢速计算机/互联网连接等等。我发布它，因为它适用于任何可能找到它的人使用或可以想出一个更好的方法来计算被缓存的可能性。

由于某些原因我遇到了jsFiddle的问题，所以现在去了一个本地文件。所以你可以将它直接复制并粘贴到普通的html文件进行测试。

编辑 - 添加小提琴： http://jsfiddle.net/mLuxknes/

    <html>
    <head>
        <title>Mayhem Tester - Font Load Time</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.5.14/webfontloader.js"></script>
    </head>
    <body>

        <h2>Fonts Load Timer</h2>
        <input value='Indie Flower' id='txtInput' /><button id='btnLoad'>Load Font</button><br />
        <p id='txtStatus'></p>
        <script>

            var iStart = 0;
            var iFinish = 0;

            var iTestStart = 0;
            var iTestFinish = 0;

            var oStatus;
            var oFontName;

            $(function() {
                $("#btnLoad").click(btnLoadFont);
                $("#btnTest").click(btnLoadTest);
                oFontName = $("#txtInput");
                oStatus = $("#txtStatus");
            });

            function btnLoadFont() {
                oStatus.html("<b>Loading Font: </b> " + oFontName.val())
                WebFont.load({
                    google: { families: [oFontName.val()] },
                    fontloading: fntLoading,
                    fontactive: fntLoaded
                });
            }
            function fntLoading(familyName, fvd) {
                iStart = Date.now();
            }
            function fntLoaded(familyName, fvd) {
                iFinish = Date.now();
                $("h2").css({"font-family":"'" + familyName + "', serif"});
                btnLoadTest();
            }

            function btnLoadTest() {
                oStatus.html("<b>Loading Font: </b> " + oFontName.val())
                WebFont.load({
                    google: { families: [oFontName.val()] },
                    fontloading: fntLoadingTest,
                    fontactive: fntLoadedTest
                });
            }
            function fntLoadingTest(familyName, fvd) {
                iTestStart = Date.now();
            }
            function fntLoadedTest(familyName, fvd) {
                iTestFinish = Date.now();
                $("h2").css({"font-family":"'" + familyName + "', serif"});
                var iFirst = iFinish - iStart;
                var iTest = iTestFinish - iTestStart;
                var iFP = (100 - iFirst) / 100 * 100;
                var iTP = (100 - iTest) / 100 * 100;
                var sFirst = "Loaded from cache";
                var sLast = "Loaded from cache";
                if (iFP < 50) { sFirst = "Not loaded from Cache"  }
                if (iTP < 50) { sLast = "Not loaded from Cache"   }
                oStatus.html(
                    "<b>Font Test: </b> " + familyName + "<br />" +
                    "<b>First Load: </b>" + iFirst + " milliseconds  / " + sFirst + " <br />" +
                    "<b>Second Load: </b>" + iTest + " milliseconds  / " + sLast + " <br />"
                )
            }
            // FIX IE As Usual
            if (!Date.now) {
                Date.now = function() { return new Date().getTime(); }
            }           
        </script>
    </body>
</html>

该脚本有什么作用？

简单地使用Web Font Loader lib在加载和呈现字体时使用回调方法。

我们在加载字体之前简单地得到一个时间戳，并在加载/渲染后得到一个时间戳并处理差异..

准确性 - 仅用作备份

一般情况下，对于字体加载和渲染时间，测试时我会绕 230ms 到 1200ms ，否则总是＆lt; 3ms 用于缓存字体。

因此，虽然这不准确，但也许有人可以想出一种更好的方法来比较两个加载时间并检查它们之间的平均值。

如何检测谷歌字体是否缓存客户端

1 个答案: