大部分性能优化都是基于缓存用空间换时间
HTML
- 压缩html体积，删除不必要的空格，注释以及中断行从而减少用户的下载时间；
- 生产环境中删除注释，使用remove-html-comments-npm；
- 删除不必要的属性，如type=“text/css”；
- 先引用css，在加载js，可以加快浏览器渲染速度；
- 尽量避免使用iframe；
- DNS预取，提前解析网页中的可能的网页链接域名，
<link rel="dns-prefetch" href="http://example.com/">， https默认关闭dns预解析， 使用<meta http-equiv="x-dns-prefetch-control" content="on">打开dns预解析
CSS
- 压缩css体积，删除不必要的空格，注释以及中断行从而减少用户的下载时间；
- css文件需要非阻塞引入，防止DOM花费更多时间渲染
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>
preload可以使css在浏览器显示内容之前加载css
FONT
- 使用WOFF2字体
图片
- 在保证压缩后的图片符合产品要求的情况下将图像进行优化，尽可能尝试使用CSS3效果（而不是用小图像替代） 尽可能使用字体图片 使用 SVG 使用编译工具并指定85以下的级别压缩；
- 适当选择图像格式；
- 推荐使用矢量图像而不是位图图像；
JS
- 压缩js体积，删除不必要的空格，注释以及中断行从而减少用户的下载时间；
- 使用defer属性或使用async来异步加载JavaScript文件 defer:在html解析完之后才会执行，如果是多个，按照加载之后的顺序依次执行； async：在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关；
<!-- Defer Attribute -->
<script defer src="foo.js">
<!-- Async Attribute -->
<script async src="foo.js">
Server
- 网站使用HTTPS，如果未使用HTTPS则地理定位，推送通知，和服务工作程序会不起作用；
- 页面大小 < 1500KB(理想 < 500kb)，页面加载时间 < 3S(保留用户)；
- TTFB < 1.3S，尽可能的减少浏览器在接收数据之前的等待时间；
- 消除不必要的cookie，如果使用cookie，请确保每个cookie不超过4096字节，每个域名下不超过20个cookie；
- 尽可能减少http请求；
- 使用CDN提供静态文件；
- 提供来自相同协议的文件；
- 合理设置HTTP缓存头；
- 使用GZIP压缩减少js文件的大小；
- 分域存放资源，由于浏览器在同一域名下并行下载数量有限，利用多域名主机存放静态资源，增加并行下载数，缩短资源加载时间；
- 减少页面重定向；
