Bootstrap：使用字形图标加载缓慢答案

【问题标题】：Bootstrap: slow loading with the glyphiconsBootstrap：使用字形图标加载缓慢
【发布时间】：2015-09-12 17:04:59
【问题描述】：

我尝试了 Bootstrap，但我有点惊讶的是，Glyphicon 的加载或显示速度似乎真的很慢。

我觉得即使是轮播也更快出现。但是，在其他网站上似乎没有那么慢。

因此，我想我一定是做错了什么，但我看不出与用于在线显示字形图标的代码有很大差异，有什么办法可以解决吗？

但到目前为止，由于我试图在本地运行所有内容，它应该快如闪电，不是吗？字形图标需要两秒钟，而其余的则立即显示。

有什么方法可以更好地衡量某些东西在屏幕上显示的速度（而不是仅仅使用我的最终用户感觉），请告诉我。

刚开始做web前端开发，请多多包涵。

下面是我用来显示一个glyphicon-home的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <title>My Page...</title>

        <!-- Bootstrap core CSS -->
        <!-- Latest compiled and minified CSS -->
        <link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <!-- Favicons... -->
        <!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
        <!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->

        <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180">

        <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
        <link rel="icon" href="faviconOthers.ico" sizes="196x196">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if IE 9]>
            <script src="html5shiv - 3.7.2/html5shiv.min.js"></script>
            <script src="respond - 1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" ></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" ></script>
    </head>

    <body>
         <i class="glyphicon glyphicon-home"></i>
    </body>

</html>

【问题讨论】：

我知道我很烦，但是：Just for debugging purposes. Don't actually copy these 2 lines!
@Hexaholic 从技术上讲，这（这些）行已被评论，但无论如何它现在已经修复，到目前为止没有影响，我还没有尝试在 IE 9 上运行该页面（但是这不再适用于 IE11）。
勘误：现在用 IE11 慢得多，我的意思是没有调试的东西。
@EhouarnPerret，这篇文章回答得很好stackoverflow.com/questions/436411/…
在任何情况下，您都可以检查需要时间加载的资源。您可以在浏览器上使用调试工具。

标签： javascript css twitter-bootstrap loading glyphicons

【解决方案1】：

我发现出了什么问题，底线位于 bootstrap.min.css 中。

原因是不久前我使用了一个在线引导定制器，因为当时我还没有安装任何 CSS 预处理器。换几个颜色就够了。

但是，我不知道定制器添加了几个关于从何处获取某些在线字体的链接，因为我在中国并且一些网站访问速度真的很慢，所以我宁愿避免使用这些链接。

例如

@font-face{font-family:'Glyphicons Halflings';
src:url(http://bootstrap-live-customizer.com/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot);

【讨论】：