前端性能优化
!!! 重点请看这篇文章
请说出三种减少页面加载时间的方法
- 压缩js、html、css和图片，使用gzip编码传输，减少传输时间
- 选择合适的图片格式，合理利用缓存，减少传输时间
- 合并js、css及图片（精灵图），减少请求数量
- 避免不必要的repaint和reflow，合理利用GPU加速渲染
- 避免不必要的重定向，使用长连接，优化网络结构
- 使用CDN（内容分发网络）减短数据传输路径
- 优化服务器，快速响应与负载均衡
什么是CDN？有哪些优点？
参考这篇文章
CDN，中文名叫内容分发网络，它的作用是减少传播时延，找最近的节点。CDN本质就一个是缓存，只是这个缓存离你特别近，不管是作为用户还是开发人员都能从中享受一点福利。
CDN的优点
- 访问加速
- 减轻源站（服务器）负载
- 抗住攻击
CDN的缺点
- 只能对静态内容加速
- 内容更新时需要分发到其他节点
- 代价高昂
CDN与传统网站访问的区别
- 传统网站访问：
- 使用了CDN的网站访问
与传统访问方式不同，CDN网络则是在用户和服务器之间增加缓存层，将用户的访问请求引导到最优的缓存节点而不是服务器源站点，从而增加访问速度。
完整的CDN工作流程
总结一下CDN的工作原理：通过权威DNS服务器来实现最优节点的选择，通过缓存来减少源站的压力。应用场景：静态网页、大文件下载、动态加速和应用加速等。
应用与踩坑
缓存设置
max-age在Cache-Control中经常用于缓存的控制，可是max-age设置的缓存会应用于一个请求经过的每一级，如果我们希望CDN不缓存那么久，要怎么办呢？那就是s-maxage，它用于设置代理服务器的缓存时间，会覆盖max-age的设置，这样我们可以把max-age用于本地缓存，把s-maxage用于CDN缓存时间，避免脏数据的产生。
缓存命中率
对于一个缓存而言，还有一点非常重要，就是你的缓存到底有没有用，衡量这个东西的就是缓存命中率。如果只是静态资源，在刷新缓存之后，可能导致命中率下降，因此CDN的资源不适合经常刷新，换句话说，如果一个请求结果会经常进行变更，那么CDN基本就没有什么存在的意义了。
判断是否命中缓存
还要考虑的一件事是：这个资源是否命中了CDN，是否是因为CDN导致的问题。
在各大厂商的CDN返回的数据中都会有一个X-Cache，上面内容是Hit或者Miss，还会加上诸如Memory或者Disk的缩写表示内存还是磁盘，如果出现Upstream或者Miss则表示没有命中。
资源预热
缓存设计中，预热是很重要的环节，在最初刚开始启动CDN的时候，CDN上并没有缓存数据，此刻大量的请求全部打向源站，肯定会把源站打挂，预热就是实现缓存热门数据，这样在业务上线时，CDN上已经有所需的数据了。
Vary
Range
无私钥HTTPS