Question

对于我正在构建的网站，我试图通过头部中的某些内联字体/异步JS加载来获得绝对最佳性能。为了解决Typekit字体加载所需的额外http请求和延迟加载，我选择在我的LESS / CSS中编码我的woff / woff2字体（FontAwesome，Lato，Lato Bold）。在本地运行时，我的DOMContentLoaded（蓝色条）下降到30毫秒但是显示的内联字体导致我的实际加载时间（红色条）为280毫秒。

Network

的index.html

<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" ng-app="tix.app" ng-strict-di ng-cloak class="wf-loading">
<head>
  <base href="/">
  <!-- blocks to hide FOUT -->
  <style>.wf-loading [class^="icon-"], .wf-loading [class*=" icon-"], .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading div, .wf-loading p, .wf-loading span, .wf-loading a, .wf-loading ul, .wf-loading li .wf-loading i {  visibility: hidden !important;  }</style>
  <!-- starts download of dependent libraries (angular / d3 / jquery..) -->
  <script src="/app/depends.js.gz" async defer></script>
  <!-- starts download of angular app, has a check to ensure depends is downloaded first -->
  <script src="/app/tix.js.gz" async defer></script>
  <meta charset="utf-8"/>
  <title>Angular SPA</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- blocks to download inline base64 fonts and bootstrap based styles -->
  <link href="/assets/css/tix.min.css.gz" rel="stylesheet" />
  <!-- script to tell the page that CSS has finished loading so show text (wf-active) -->
  <script src="/app/tix.fast.js.gz" async defer></script>
</head>
<body>
  <angular-stuff></angular-stuff>
</body>
</html>

depends.js

'use strict';
module.exports = require('angular');
require('./d3.min');
require('./jquery-1.9.1.min');
require('./jquery.signalR-2.2.0.min');
require('./socket.io-1.3.4.js');
require('./ui-bootstrap-tpls.js');
require('angular-route');
require('angular-bootstrap');
require('angular-animate');
require('angular-loading-bar');
require('./ngStorage');

window.dependsLoaded = window.dependsLoaded || function () {};
window.dependsLoaded();

tix.js

window.isDependsLoaded = false;
function dependsLoaded() {
    // App code
}
window.dependsLoaded = dependsLoaded;

// If angular already exists and the dependencies haven't been loaded, depends.js must have finished loading first -> manually initialize
if(window.angular && !window.isDependsLoaded) {
    window.dependsLoaded();
}

tix.fast.js

(function (d) {
  d.documentElement.className = "wf-active";
}(document));

tix.less（tix.css）通过@ font-face导入所有字体，如此 -

@font-face {
  font-family: 'Lato';
  src: url(data:application/font-woff2;charset=utf-8;base64,......) format('woff2'),
       url(data:application/font-woff;charset=utf-8;base64,......) format('woff');
  font-weight: normal;
  font-style: normal;
}

正如您所看到的，我使用内联CSS和手册＆＃34; wf-inactive＆＃34;隐藏所有文本元素。 html元素上的类。然后我在加载CSS字体之前异步加载我的主脚本（这样下载将在css阻塞之前开始）。 depends.js具有我依赖的所有外部库（AngularJS，jquery，signalr等）。 tix.js包含我的所有应用程序逻辑（实际的角度应用程序，并且比depends.js小得多，但会更频繁地更新，所以我将它们拆分以从depends.js缓存中受益）。在异步脚本之后，我将我的css文件加载（所有样式捆绑在一个CSS文件中，包括我的内联base 64字体）阻塞，在完成加载之后我加载tix.fast.js，它只是将html类更新为＆＃34; wf-active＆＃34;，将页面文本设置为可见（模拟Typekit）。

我基本上看到网络标签中内嵌的每种字体的额外网络延迟。这让我感到困惑有几个原因：

为什么这些内联字体首先被视为网络请求？他们使用url（data ....）标记，但内联它们的重点是避免网络请求，所以这里发生了什么？对我来说，网络请求正在下载它们嵌入的文件但是加载字体时可能需要更多的跃点？
我正在努力减少http调用的次数，因为chrome只允许同时进行6次调用。这是我的字体挂断的原因吗？是不是因为DOM没有尝试访问它们直到更接近红色加载点并且@ font-face只是在那时延迟加载它们？我最好的选择是什么？

Chrome开发工具网络标签和base64内联字体滞后

0 个答案: