背景

why为什么要进行性能优化

数据来源：www.slideshare.net/bitcurrent/… stevesouders.com/docs/jsdayi…

why为什么要做前端监控

“If you cannot measure it, you cannot improve it” ———— William Thomson

你不能监控，就无从优化。

性能优化这个专题的跨度比较大，包括开发代码规范、构建优化、静态资源加载策略、线上监控数据采集分析等过程。项目真正到了优化阶段需要强依赖前端监控和分析工具。整个过程是循环迭代的。

简单讲就是要解决页面从服务端到页面渲染完成和功能可用耗时问题。中间过程比较复杂，需要依赖多种技术手段来优化。

我发现一篇文章根本梳理不完前端监控和性能优化两个话题，就算单说优化也不能展开讲，所以监控部分会另起一篇。

一.性能优化基本概念

1.性能分析

Start Render，顾名思义指的是浏览器开始渲染的时间，从用户角度出发则可以定义为用户在页面上看到的第一个内容的时间。
DOM Ready，指的是页面解析完成的时间，在高级浏览器里有对应的DOM事件 - DOMContentLoaded，即该事件在文档解析完成时会触发。
Page Load，指的就是window.onload事件触发的时间。与DOM Ready时间相比，Page Load的时间往往要更靠后一些，因为Page Load不仅仅是HTML文档解析完毕还包括了所有资源加载所需要的时间，例如图片资源的加载、iframe的加载等。
TTI(Time To Interact) 指的是页面可交互的时间。页面中的交互包括很多方面，例如点击一个链接、点击一个搜索按钮都属于页面交互的范畴，但是对于衡量性能的TTI则主要指核心功能可以交互的时间。可交互时间，google提出新的指标 developers.google.com/web/fundame…
TTFB(Time To First Byte)：发起请求到服务器返回数据的时间详情可以看这里

SSL看起来挺耗时间的，这里是因为首次加载和网络环境的原因。再次刷新就没问题了。所以说做性能优化不要想当然，一定要以数据说话，严谨检查逻辑。

最上面这一栏是network的时间线栏；
waterfall瀑布是加载顺序和耗时；
最下方是DOMContentLoaded：DOM Ready指标并不直接影响感官体验，往往影响的是交互功能何时可用。为何影响的是交互呢？由于DOMContentLoaded事件触发时是所有DOM节点可以进行操作的时候，比如添加事件、增删改节点等，因此用Javascript实现的一些交互功能往往会在DOMContentLoaded事件中去初始化，也只有在DOMContentLoaded事件触发后这项功能才可用。

DCL、FP、FCP、FMP

2.回流和重绘

回流 reflow：当render tree中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变时，浏览器重新渲染部分DOM或全部DOM的过程称为回流。

重绘 repaint：当页面元素样式改变不影响元素在文档流中的位置时（如background-color，border-color，visibility），浏览器只会将新样式赋予元素并进行重新绘制操作。

回流必将引起重绘，而重绘不一定会引起回流

www.cnblogs.com/hope192168/…

www.bilibili.com/medialist/p…

3.浏览器存储和缓存

IndexedDB，存储能力250mb~ 无限大 www.ruanyifeng.com/blog/2018/0… cloud.tencent.com/developer/a…

IndexedDB1.0 已经支持的不错了

4.PWA 与 Service Work

谷歌将PWA提到了和Android一样的高度。根据网络速度、离线状态等不同条件，渐进式的为用户提供从最基本可用提升到最完整的可用页面。方向：可靠、快速、融入。

可以使用lighthouse 对网站性能进行检测。可以看到主流完整用了哪些技术。要求网站不校验登录态。可以看淘宝、京东、美团、百度等主流网站的经验。下面就是使用这个工具进行整理。

PageSpeed

ios 从 2018年5月份开支支持service work，未来一定是趋势

离线应用

关于是否用flutter ，这里有一篇作文，写的这不错

5.服务端性能优化

Vue SSR server side rendering

更快的首屏内容展示速度，单页应用需要等待JS文件加载完成，然后再进行页面渲染，而SSR是将渲染完毕的html传输给客户端；如果用一句话概括Vue.js SSR的运作过程，那就是在服务端将Vue.js实例转换成html字符串传输到客户端，然后进行客户端激活，使网页内容能在Vue实例的控制之下。
构件层模板；数据无关的prerender方式；服务端渲染；
SSRdemo: github.com/muwoo/douba…

附录：指标

白屏时间
首屏时间
用户可操作时间
页面总下载时间
TP(Top Percentile)指标：tp90、tp95、avg

前后端拿数据说话。

整体目标前端目标，具体到页面；后端目标单个接口或链路接口如何优化，分别需要优化多少秒。

附录：性能优化相关工具

PageSpeed Insight
Chrome User Experience Report
Audit Panel
Profile Panel
Performance Budget
Lighthouse CI

二.性能优化常用配置

1.head部分配置

# dns预解析, 很多主流网站都做了这样的处理，也可以学习一下这些网站还做了哪些配置
# href 指向cdn域名
<head>
# 打开和关闭DNS预读取
<meta http-equiv="x-dns-prefetch-control" content="off">
<link rel="dns-prefetch" href="//dss1.bdstatic.com"/>
# preload 控制资源加载顺序（资源加载默认是无序的），这样可以让parseHTML过程提前开始; prefetch是为下一个页面预加载，优先级不高；subresource没有办法处理优先级
# as也支持10多种类型
<link rel="preload" href="https://app.js" as="script"/>
<link rel="prefetch" href="/images/test.jpg"/> 
</head>

# 减少Start Render时间，尽量缩短head中执行的内容
# 在head中使用link提前加载，只加载不执行； 在body中去执行
<link rel="modulepreload " href="main.js">
# 等价于
<script type="module" src="main.js">

2.静态资源优化

1. CDN多域名，防止浏览器对同一个域名的并发限制
2. 设置dns预解析，减少dns查找耗时
3. 预展示懒加载,用低质量图片占位，使用data-url属性存放正式图片
4. 预加载则是对下一个要访问的页面进行提前加载, pre-fetch就是这样的一个属性
5. 页面分屏加载，可分页，减少首屏加载
6. 减少重定向，减少tcp开销

3. 代码优化

2. 骨架图:首页\请求接口较多的页面
4. 代码瘦身，thee shaking
6. 优化接口，减少无用数据返回
7. 子组件需要的数据，并不是子组件视图需要的数据；数据还是要分类；不要污染组件data

4. Vue框架优化

Vue 9 Perf Secrets 2019年开发者大会上总结的方法

Functional components
Child component splitting
Local variables
Reuse DOM with v-show
Keep alive(DOM-Reusing Router View)
Deferred features
Vuex demo

5. 相关优化

1. http2 能解决很多问题
2. BigPipe过时了，这种思想有很多变种
3. cors更强大支持多种请求方式，已经取代了 jsonp
http://www.ruanyifeng.com/blog/2016/04/cors.html

三.性能优化预加载方案

采用Hybrid架构开发的APP，可以在端上增加一些预加载的方案，例如打开多个后台webview, 将页面预加载完成DOM Ready。

四.性能优化离线包方案

借助小程序的思想，将H5打包成一个可以下载到APP本地缓存的应用。随用随调。

福利资源

雅虎前端优化35条军规虽然过时，依然经典

前端监控和性能优化(一)

背景