专题课程
默认情况下，浏览器将CSS作为渲染阻塞；因此，当它加载时，浏览器暂停渲染，等待CSS已经被下载和处理。外部样式表意味着更多的网络线程，它增加了等待时间，同时大型样式表也会增加等待时间。
我们可以通过在<head>标签内联“关键CSS”来改善页面渲染时间，这样浏览器可以不用再等待下载整个样式表，就可以快速地渲染页面内容，然后通过non-rendering-blocking方式加载完整的样式表。
确定哪些CSS是关键需要（1）查看移动或桌面下页面视口（viewport ）大小，（2）识别视口中可见的元素（3）选择这些元素关联的CSS。
这可能有点棘手，特别是手工完成，但是有一些神奇的工具可以帮助加快甚至自动化这个过程。我使用 Filament Group编写的 grunt-criticalcss来帮助我为页面生成关键CSS，然后再手动优化一些CSS（合并重复的媒体查询和删除我认为不必要的CSS）。
About页面只加载关键CSS（左侧）和加载整个CSS（右侧）的对比
现在关键CSS已经内联到<head>标签内，我使用loadCSS工具来异步加载样式表的其余部分。
谷歌也给出non-render-blocking加载CSS的 另一个示例 。
JavaScript也会导致render-blocking，因此它的加载也应该优化。可以使用以下的方法:
小的内联脚本。
在文档底部加载外部脚本。
使用defer属性推迟执行脚本。
使用async属性异步加载的脚本。
在解析HTML时 defer推迟下载脚本，一旦页面渲染完成执行脚本。defer支持很不错，但据报道存在不一致和不可靠性，所以最好同时使用defer并把脚本放置在文档底部。
在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行；然而，他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。
async支持大不如defer，这就是为什么我选择使用loadJS，用来异步加载JS文件的脚本。它支持老式浏览器，同时有一个有用的特性，即根据条件加载脚本。
Web字体使内容更加清晰和漂亮，但是也对页面渲染产生了负面影响。在加载页面时，特别是移动端的连接，你可能已经注意到文本在一段时间看不见。这被称为 FOIT（不可见文本闪动）。
我的网站出现FOIT的样子
当浏览器尝试下载一个web字体，它将隐藏文本一段时间，直到它完成字体下载，才显示文本。在最糟糕的情况下，文本无限期地不可见，使内容完全不能阅读。
我处理FOIT 的方式是逐步加载字体，首先依赖默认和系统字体（例如Helvetica和Georgia）允许快速呈现的内容。Web字体然后使用loadCSS异步加载，同时通过 Font Face Observer库来检测字体何时下载成功。一旦字体下载且可用，一个类被添加到文档中，用于设置页面正确的字体。
逐步加载字体将导致FOUT（没有样式的文本闪动）和FOFT（仿文本闪动），这取决于它是如何做的。
然而，好处是内容一直可见，而不会出现看不见的情况。关于如何击败FOIT，我写了一篇的深入文章 使用字体事件加载字体。
其他方法，如启用gzip和缓存、配置SSL和从内容分发网络（CDN）获取资源，可以提高前端性能，但需要一些服务器端支持。基于篇幅所限，我不会深入他们。然而我想强调的是，我推荐使用这些方法，他们将会对你的网站性能有一个全面和积极的影响。
我将提到，因为我的网站的访问量百分比相当一部分来自美国以外，而我的服务器是位于纽约，我于是决定把我的一些资源发布到CDN上。他们部署到一个 Amazon S3 bucket上，绑定到一个CloudFront版本。
收藏(0)
赞 
粤公网安备44010602001432号