一、 SPA(单页面应用)首屏加载速度慢的问题
首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容。首屏加载可以说是用户体验中最重要的环节。
我们可以通过DOMContentLoad或者 performance.timing来计算首屏的时间。
// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
console.log('first contentful painting');
});
// 方案二：
let 白屏时间 = firstPaint - performance.timing.navigationStart;
加载慢的原因
在页面渲染的过程，导致加载速度慢的因素可能如下：
- 网络延时问题
- 资源文件体积是否过大
- 资源是否重复发送请求去加载了
- 加载脚本的时候，渲染内容堵塞了
减少首屏渲染时间的方法有很多，总的来讲可以分成两大部分 ：资源加载优化 和 页面渲染优化
常见的几种SPA首屏优化方式
- 减小入口文件积
使用路由懒加载，以函数的形式加载路由。把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加。
component: () => import(‘./components/header.vue’)
- 静态资源本地缓存
后端返回 ：采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头；采用Service Worker离线缓存
前端合理利用localStorage
- UI框架按需加载
例如： import { Button, Input} from ‘element-ui’;
- 图片资源的压缩
图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素,对于图片资源可以进行适当的压缩。
对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。
- 组件重复打包
假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载.
在webpack的config文件中，修改CommonsChunkPlugin的配 minChunks: 3 表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件
- 开启GZip压缩
拆完包之后，我们再用gzip做一下压缩 安装compression-webpack-plugin,运行cnmp i compression-webpack-plugin -D，修改webpack配置。
在服务器也要做相应的配置 如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
- 使用SSR
SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器。
从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染
白屏的问题
白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，
白屏的过程。从输入url，到页面的画面展示的过程
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则发起http请求。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、解析HTML文件，构建 DOM Tree 。解析CSS，构建 CSSOM Tree(CSS规则树)
10、将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)，
reflow(重排)：根据Render tree进行节点信息计算（Layout） 也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式：“display:none;”。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局。
repaint(重绘)：根据计算好的信息绘制整个页面（Painting）。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。
每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。
浏览器下载HTML后，首先解析头部代码，进行样式表下载，然后继续向下解析HTML代码，构建DOM树，同时进行样式下载。当DOM树构建完成后，立即开始构造CSSOM树。理想情况下，样式表下载速度够快，DOM树和CSSOM树进入一个并行的过程，当两棵树构建完毕，构建渲染树，然后进行绘制。
Tips:浏览器安全解析策略对解析HTML造成的影响：
当解析HTML时遇到内联JS代码，会阻塞DOM树的构建，会先执行完JS代码;当CSS样式文件没有下载完成时，浏览器解析HTML遇到了内联JS代码，此时，浏览器暂停JS脚本执行，暂停HTML解析。直到CSS文件下载完成，完成CSSOM树构建，重新恢复原来的解析。
JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。
白屏-性能优化
- DNS解析优化
DNS（Domain Name System）是域名系统的英文缩写，是一个组织的系统管理机构，维护系统内的每一个主机的ip和主机名（域名）的对应关系。
针对DNS Lookup环节进行DNS解析优化。
1、DNS缓存优化
2、DNS预加载策略
3、稳定可靠的DNS服务器
-
TCP网络链路优化
-
服务端处理优化
后端的优化 -
浏览器下载、解析、渲染页面优化
1） 尽可能的精简HTML的代码和结构
2）尽可能的优化CSS文件和结构
3）一定要合理的放置JS代码，尽量不要使用内联的JS代码
4）将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的时间提前，从而缩短首屏渲染时间；
5）延迟首屏不需要的图片加载，而优先加载首屏所需图片
因为JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞 JavaScript 的执行，所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件，使用不当会影响到页面性能的。
长列表数据
假如有10000000条数据要展示，要怎么做优化使得用户体验好？
（1）将数据分页，利用分页的原理，每次服务器端只返回一定数目的数据，浏览器每次只对一部分进行加载。
（2）使用懒加载的方法，每次加载一部分数据，其余数据当需要使用时再去加载。
（3）使用数组分块技术，基本思路是为要处理的项目创建一个队列，然后设置定时器每过一段时间取出一部分数据，然后再使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器。
（4）虚拟列表，每次只渲染需要视口的部分