Web 性能优化 转载《HTTP2基础教程》

1.DNS查询优化

a.限制不同域名的数量，通常不能控制域名数量。若迁移到HTTP/2，域名数量对性能的相对影响会只增不减。

b.保证低限度的解析延迟。根据最终用户分布的所有地域定期监控解析时间（可通过虚拟或真实用户的监控做到）。

c.在主体页面HTML或响应中利用DNS预取指令。这样，在下载并处理主体页面HTML的同时，预取指令就能开始解析页面上指定的域名 例如，下面这段代码会告诉浏览器预解析ajax.googleapis.com

 <link rel="dns-prefetch" href="//ajax.googleapis.com">

这些诀窍帮助确保域名解析的固定开销最小化。

 前端性能优化--预加载技术

2.优化TCP连接

 开启新连接是一个耗时过程。如果连接使用TLS，开销会更高。降低开销的方法如下

a.利用preconnect指令 ，连接在使用之前就建立好了（个人理解，使用之前就完成三次握手），处理流程的关键路径上就不必考虑连接时间，例如：

  <link rel="preconnect" href="//fonts.example.com" crossorigin>

b.尽早终止并响应。借助CDN,在距离上请求用户很近的边缘端点上，请求就可以获得响应，所以可以终止连接，大幅减少建立新连接的通信延迟

c.使用最新的TLS最佳实践优化HTTPS

3.避免重定向

重定向通常触发与额外域名建立连接。在无线网络中（手机用户），一次额外的重定向可能会增加延迟数百毫秒，不利于用户体验。简单解决方案就是彻底消灭重定向，因为对于重定向的使用往往并没有合理的原因，如果它们不能直接被消灭，有两种选择：

a.利用CDN代替客户端在云端实现重定向

b.如果是同一域名的重定向，使用Web服务器上的rewrite规则，避免重定向(外部重定向)。内部重定向与外部重定向的区别

通常，重定向和搜索引擎优化(SEO)的黑魔法一起，用于帮助短期内优化搜索结果，或避免后端信息架构为SEO调整，这些情况下，你不得不衡量重定向的代价是否抵得上SEO的好处。有时候一次到位的消灭重定向是最好的长期的解决方案。4.客户端缓存

没有什么比直接冲本地缓存获取资源来的更快，因为它不需要建立网络连接。最快的请求是根本不发起请求。从本地获取资源时，ISP或CDN供应商不会收取流量费。生存时间（TTL）指令告诉浏览器应该缓存某个资源多久。找到给定的资源的最佳TTL值并没有完美的科学方法。

a.所谓的静态内容，例如图片或带版本的数据，可以再客户端永久缓存。尽管如此，也需要记住，即便TTL被设置得很长，不如一个月，它还是会因为缓存提早回收或清理而过期，这时客户端可能不得不从源头再次获取。因此真实的TTL(效果)最终取决于设备特性（尤其是可用磁盘缓存空间）和最终用户的浏览习惯/历史记录

b.CSS/JS和个性化资源。缓存时间大约是会话（交互）平均时间的两倍。这段时间足够长，保证大多数用户在浏览网站时能够从本地拉取资源；同时也足够短，几乎能保证下次会话是从网络上拉取最新内容。

c.其他类型的资源，理想的TTL值会各有不同；这取决于你对特定资源能够容忍的旧数据的极限。所以，你必须结合自身需求来判断最佳值。

设置客户端缓存TTL，可以通过HTTP首部指定cache control（Cache-Control 是 HTTP 1.1 的字段） 以及键 max-age （以秒为单位），或expires 首部（Expires 是 HTTP 1.0 定义的字段）nginx设置js/css等静态文件过期时间5.6.条件缓存

如果缓存TTL过期，客户端回想服务器发起请求。在多数情况下，收到的响应其实和缓存的版本是一样的，重新下载已经在缓存里的内容也是一种良妃。HTTP提供条件请求机制，客户端能以邮箱的方式询问服务器：“如果内容变了，请返回内容本身；否则，直接告诉我内容没变。”当资源不经常变化时，使用条件请求可以显著节省带宽和性能；但是，保证资源的最新版迅速可用也是非常重要。使用条件缓存可以通过以下方式

a.在请求中包含HTTP首部 Last-Modified-Since。仅当最新内容在首部中指定的日期之后被更新过，服务器才返回完整内容；否则只返回304响应码，并在响应首部附带上新的时间戳Date字段。

b.在请求体重包含实体校验码，或者叫ETag；它唯一标识所请求的资源。ETag由服务器提供，内嵌于资源的响应首部中。服务器会比较当前ETag与请求首部中收到的ETag，如果一致，就返回304响应吗；否则返回完整内容。

一般来说，大多数Web服务器会对图片和CSS/JS使用这种技术；但是也应该考虑其他可缓存资源是否有用。7.压缩和代码极简化

所有的文本内容（HTML、JS、CSS、SVG、XML、JSON、字体等），可以从压缩和极简化中受益。这两种方法组合起来，可以显著减少资源大小。更少字节数对应着更少的请求-应答，也就意味着更短请求时间

极简化是指从文本资源中剥离所有非核心内容的过程。通常，这些内容是开发人员敲出来的，所以要考虑方便人类阅读和维护，尽管如此，浏览器并不关心可读性，放弃代码可读性反而能节省空间，代码中很多信息是浏览器所不需要的，包括注释、换行、空格，极简化的版本可能看起来不美观，但是，他的字节数少了一半。

在极简化的基础上，压缩可以进一步减少字节数。他通过可无损还原的算法减少资源大小。在发送资源前，如果服务器进行压缩处理，可以节省90%的大小。常见压缩算法包括gzip和deflate8.避免阻塞CSS/JS

a.定期校验资源使用情况，去除持续下载不在需要的JS

b.如果JS执行顺序无关紧要，并且必须要在onload实践触发之前运行，那么可设置async属性

 <script async src="/js/myfile.js">

只需要做到下载JS与解析HTML并行。（注：慎用docment.write指令，可能会终断页面执行)

c.如果JS执行顺序很重要，并且可承受脚本在DOM加载完成之后运行，可使用defer 属性

 <script defer src="/js/myjs/js">d.对不会影响到页面初次展示的 JS 脚本，必须在 onload 事件触发之后请求（处理）它

e.如果你不想延迟主页面的 onload 事件，可以考虑通过 iframe 获取 JS，因为它的处理独立于主页面。但是，通过 iframe 下载的 JS 访问不了主页面上的元素