【学习笔记】高性能网站建设指南

背景

性能优化的工作做得挺多的，但是还没系统的看过相关的书籍，周末有空，补补【高性能网站减少】这本书。

【高性能网站减少】是一本只有 146 页的小体量书，尽管已经出版了 14 年，但里面的优化建议放在现在也完全不过时。

该书介绍了提升网站页面速度的 14 条最佳实践：

• 减少 HTTP 请求
• 使用 CDN
• 添加 Expire 头
• 压缩文件大小
• 将样式表放在顶部
• 将脚本放在底部
• 避免 CSS 表达式
• 使用外部 JS 和 CSS
• 减少 DNS 查找
• 精简 JS
• 避免重定向
• 删除重复脚本
• 配置 ETag
• 使用 Ajax 可缓存

前言

在前言中，分别介绍了前端性能的重要性和 HTTP 的概述

前端性能的重要性

作者在跟踪 Web 页面性能时发现，只有 10%-20%的最终用户响应时间花在了下载 HTML 文档上。其余的 80%-90%时间花在了下载页面中的所有组件上。

因此在前端性能方面，也就是【下载页面中的所有组件的响应时间】，是有很大的优化空间。

下文我们将用到 HTTP 头、JS、CSS、Apache 等技术来介绍优化手段。

HTTP 的概述

HTTP 是浏览器和服务器进行通信的协议，由请求和响应构成。

HTTP 支持压缩，可以减小响应的大小。

HTTP 支持缓存，使用缓存时，可以大大提升响应速度。

HTTP 支持持久连接，提升响应速度。

减少 HTTP 请求

• 雪碧图

将一些 icon 拼接在一张图上，减少图片的请求量

• 内联图片

通过 data:url 的形式引入图片，减少图片的请求量

• 合并脚本和 CSS

合并请求，减少请求量

使用 CDN

• 将静态资源上传至 CDN

服务器离用户更近，加快 HTTP 响应速度

添加 Expire 头

• 添加 Expire 头

设置资源过期时间，在过期时间之前，直接拉取缓存，减少了 HTTP 请求的数量，并减小 HTTP 响应的大小

• 添加 Cache-Control 头

Cache-Control 通用是用于设置过期时间，因为 Expire 头是绝对时间，可能出现客户端和服务端的时间设置不一致的情况，而 Cache-Control 的 max-age 则是相对过期时间，因此更加准确。

• 修改文件名

设置了缓存后，文件有更新时怎么让用户拉取到新内容呢？答案是修改文件名，这个功能打包工具已经帮我们做了，也不需要关注这个。

压缩文件大小

• 添加 Accept-Encoding 头

Accept-Encoding: gzip,deflate表示压缩响应，能将响应的数据量减少将近 70%。

将样式表放在顶部

将样式表放在顶部，最先加载 HTML 文档及 CSS 文件，可以最快的展加载出页面。

将脚本放在底部

脚本的加载和运行会阻塞页面的渲染，因此把脚本放在底部可以优先渲染出页面的结构和样式。

避免 CSS 表达式

CSS 表达式会影响页面的加载时间，因此我们应该避免 CSS 表达式。

使用外部 JS 和 CSS

使用外部的 JS 和 CSS 可以有效的利用 HTTP 缓存，加快页面的响应速度。

减少 DNS 查找

Internet 是通过 IP 地址来查找服务器的。但是 IP 地址纯数字很难记忆，因此我们会通过域名来指定 IP 地址。

当我们在浏览器输入 www.baidu.com 时，连接到浏览器的 DNS 解析器或返回服务器的 IP 地址，这个过程就叫做 DNS 查找。

通过使用 Keep-Alive 和较少的域名来减少 DNS 查找。

每个页面都有大量的组件。我们应该将这些组件放在至少 2 个不超过 4 个的域名下，这将能够减少 DNS 查找，又允许高度并行下载。

精简 JS

精简 JS 能够进一步减小文件大小，加快响应速度。

避免重定向

实现重定向可能有很多不同的原因，包括网站重新设计、跟踪流量、记录广告点击和建立易于记忆的 URL，我们要注意的是，重定向会使页面变慢，我们应该避免重定向。

删除重复脚本

重复脚本的存在会导致资源的浪费，我们应该删除重复的脚本。

配置 ETag

ETag 是 HTTP 头的一种，用于确认缓存有效性的一种机制。

我们可以通过配置 ETag 来使用 HTTP 缓存。

使用 Ajax 可缓存

确保 Ajax 请求遵守性能指导，尤其应具有长久的 Expires 头。

小结

我们可以看到，这 14 条优化建议，大多数，打包工具已经在打包的过程中帮我们实现了，但是我们还是要清楚为什么要这么做，这样做的好处，有时间的朋友们可以去刷下原书，2 小时就可以看完。

希望能对你有所帮助，感谢阅读～

别忘了点个赞鼓励一下我哦，笔芯 ❤️