2017-08-31读书笔记（前端优化）

今天看的是之前保存的一篇前端优化的相关文章。但是人家写了禁止转载，我这边学习的话就不抄太多东西了。

文章是这篇快速提升前端性能。

文章主要介绍了如下一些需要关注的点：

1、最小化请求

这个是说一般的页面中发的请求过多，会导致页面打开速度变慢。
解决的一种方法是分别编译或连接（组合、合并）CSS和javascript到一个文件中。让这个过程自动化（Grunt 或者 Gulp）是理想的效果，但至少也应该在生产环境下手动完成。

第三方脚本是增加额外请求最常见的罪魁祸首，很多获取额外的文件如脚本、图像或CSS的请求都不止1个。

2、压缩、优化

现在找到了减少请求的方法，然后就可以开始寻找各种方法来减重。文件越小，加载速度越快。

CSS和JavaScript

压缩样式表和JavaScript文件可以明显减少文件大小，我仅在压缩上就从一个文件上节省了56%的空间。

编写CSS，可以将一些冗长的类精简，比如“navigation” 变为 “nav”， “introduction” 变为 “intro”，都可以节省了一些空间。

有时候需要评估类库的必要性。作者总共写了135kb的代码，其中96kb是jquery，然后通过剥离jQuery和在Vanilla重写它，去除了122KB，最终压缩后的文件大小减少到13KB。（Vanilla是个梗具体可以看这个
Vanilla JS——世界上最轻量的JavaScript框架（没有之一））

之后作者设法去掉更多空间（压缩后7KB），最后脚本在压缩和gzipped后只有0.365KB。

图片

图片通常占到一个网站的大头。

可以抛弃了图标字体，使用内联SVG。SVG sprites可能是作者在整个网站使用中普通内联SVG图标的一个可行的替代解决方案。

在可能的情况下使用CSS代替图片，现在的CSS能做的已经很多了。

你也可以通过优化图片来压缩字节。有两种方法来优化图片：
有损压缩：降低图像的质量
无损压缩：不影响质量

2、页面渲染

消除render-blocking的JavaScript和CSS。

render-blocking文件增加了浏览器显示内容的时间，因为这些文件需要先下载并处理。多个render-blocking文件需要浏览器使用多个线程去获取和处理它们，等待时间进一步增加。

CSS

默认情况下，浏览器将CSS作为渲染阻塞；因此，当它加载时，浏览器暂停渲染，等待CSS已经被下载和处理。外部样式表意味着更多的网络线程，它增加了等待时间，同时大型样式表也会增加等待时间。
我们可以通过在标签内联“关键CSS”来改善页面渲染时间，这样浏览器可以~~~~不用再等待下载整个样式表，就可以快速地渲染页面内容，然后通过non-rendering-blocking方式加载完整的样式表。

确定哪些CSS是关键需要
（1）查看移动或桌面下页面视口（viewport ）大小
（2）识别视口中可见的元素
（3）选择这些元素关联的CSS

JavaScript

JavaScript也会导致render-blocking，因此它的加载也应该优化。可以使用以下的方法:
小的内联脚本。
在文档底部加载外部脚本。
使用defer属性推迟执行脚本。
使用async属性异步加载的脚本。

Web字体

Web字体使内容更加清晰和漂亮，但是也对页面渲染产生了负面影响。在加载页面时，特别是移动端的连接，你可能已经注意到文本在一段时间看不见。这被称为 FOIT（不可见文本闪动）。（FOIT：当浏览器尝试下载一个web字体，它将隐藏文本一段时间，直到它完成字体下载，才显示文本。在最糟糕的情况下，文本无限期地不可见，使内容完全不能阅读。）

其它

其他方法，如启用gzip和缓存、配置SSL和从内容分发网络（CDN）获取资源，可以提高前端性能，但需要一些服务器端支持。

这就是所有内容了，其他还有一些细节以及推荐，可以自己去看一下。希望不算侵权。