前端性能优化

1. 尽量减少 HTTP 请求个数——须权衡
1. 使用CDN（内容分发网络）
1. 为文件头指定 Expires 或 Cache-Control ，使内容具有缓存性
1. 避免空的 src 和 href
1. 使用 gzip 压缩内容 br
1. 把 CSS 放到顶部
1. 把 JS 放到底部
1. 避免使用 CSS 表达式
1. 将 CSS 和 JS 放到外部文件中
1. 减少 DNS 查找次数
1. 精简 CSS 和 JS
1. 避免跳转
1. 剔除重复的 JS 和 CSS
1. 配置 ETags
1. 使 AJAX 可缓存
1. 尽早刷新输出缓冲
1. 使用 GET 来完成 AJAX 请求
1. 延迟加载
1. 预加载
1. 减少 DOM 元素个数
1. 根据域名划分页面内容
1. 尽量减少 iframe 的个数
1. 避免 404
1. 减少 Cookie 的大小
1. 使用无 cookie 的域
1. 优化图像
1. 优化css Spirite
1. 打包组件成复合文本

性能优化

》》 Nginx 开启http2 ：多路复用， http2 需要配合ssl :openSSL >=1.0.2

CloudFlare 网站加速原理

免费，pro 差异

https://www.cloudflare.com/zh-cn/plans/

Vue Webpack 优化

术语

TTFB （time to first byte）

第一个字节时间(TTFB)是web浏览器在请求一个web页面后接收响应的第一个字节所花费的时间。

There are three main components to TTFB

上面说”从发起请求到接收到服务器响应的第一个字节”仍然有一些模糊，精确一点说，是在完成 DNS 查询、TCP 握手、SSL 握手后发起 HTTP 请求报文

到 * 接收到服务端第一个响应报文的时间差距。

tcpdump 抓包

curl -o /dev/null -s -m 5 -w %{http_code}:%{time_connect}:%{time_starttransfer}:%{time_total} www.baschain.org
curl -o /dev/null -s -m 5 -w %{http_code}:%{time_connect}:%{time_starttransfer}:%{time_total} https://www.baschain.org
curl -o /dev/null -s -m 5 -w %{http_code}:%{time_connect}:%{time_starttransfer}:%{time_total} https://www.baidu.com
 # 200:0.461777:0.986970:0.987239

时间指标解释： http_code 网址状态码

time_connect 建立到服务器的 TCP 连接所用的时间

time_starttransfer 在发出请求之后，Web 服务器返回数据的第一个字节所用的时间 (TTFB)

time_total 完成请求所用的时间

TTFB 越低越好么

先直接放结论，** 不是的 ** 优化性能都是为了用户体验，而 TTFB 只是描述某一段过程的参考技术指标。他只所以被看得比较重要，是因为其受影响的因素相对没那么多，能够比较客观的反应服务端的处理时间 + 网络耗时。

Chrome 性能优化控制台参数

竖向蓝线含义 DOMConetentLoaded 3.06s
竖向红线含义整个页面静态资源（css,img,js…）加载完成
红线之后为异步请求资源，api 调用，fetch js …

Webpack

项目包含三种类型的代码:业务代码、第三方依赖库、webpack打包构建后的manifest

mainfest.js 就是在浏览器运行时，webpack用来链接模块化应用程序的所有代码

compression-webpack-plugin (Webpack 3.x 使用1.1.12) js css gzip

prerender-spa-plugin 中間頁優化

Issue 1 通過中間頁優化時，部分vue-router 沒有靜態化html ,在瀏覽器刷新頁面時，會報404錯誤。

解決方式之一是：Nginx try_files 指令

location / {
  try_files $uri $uri/ /index.html;
}

Webpack4 Optimization

https://www.jb51.net/article/151976.htm

Web Site 性能优化