前端性能优化

前端性能优化的目标是提高网站或应用程序的响应速度、性能表现和用户体验。

影响前端性能两个重要 http 请求数量和资源大小，几乎所有的优化手段都和这两个有关。

代码层面优化

预加载，提前加载后续所需要的资源；
预获取，空闲时加载将来需要的资源；
图片懒加载，减少不必要的 http 请求；
防抖与节流，限制高频操作；
原型链查询，避免多次原型链上的查询；
css 文件放在 <head> 元素中，避免闪烁；
js 文件放在 <body> 元素底部，避免阻塞；
css 书写顺序，定位，自身，文字文本，避免频繁回流和重绘；
动画使用 transform 来完成，避免频繁回流和重绘；

打包层面优化

异步组件，减少单个资源大小；
使用开启多线程打包，提升打包速度；
限制 loader 处理文件范围，减少处理文件数量，提升打包速度；
使用缓存，提升二次打包速度；
动态库 dll，提前制作，避免重复打包；
tree-shaking，丢弃未使用的代码，减少资源大小；
开启代码压缩，减少资源大小；
提取公共代码，去除重复代码，减少资源大小；
图片优化
- 简单元素使用 css；
- 小图片使用 base64，大图片不建议使用，因为 base64 算法是将 3 个字节原数据编码为 4 个字节新数据，所以 base64 编码后的数据比原始数据略长，为原来的 4/3。；
- 雪碧图；

服务器

使用 cnd 加速，对于一些不常变动的资源放在 CND 上，能减少服务器的压力；
nginx 配置 gzip 压缩；

首屏

白屏现象指的是用户在打开一个网站或应用程序时，页面一直是空白的状态，没有任何内容显示出来。

当页面白屏时间过长时，通常是由于以下原因之一或多个原因共同导致的：

大量或者过大的资源文件：如 CSS、JavaScript 等文件过多或者过大会增加页面加载时间，从而延长白屏时间。
服务器响应缓慢：如果服务器响应请求过程中出现问题或服务器性能低下，将会导致页面长时间无响应，从而造成白屏现象。
网络连接问题：当网络不稳定或者连接速度过慢时，会影响页面资源文件的加载速度，从而导致白屏现象。

针对上述情况，我们可以采取以下措施来优化页面加载速度，缩短白屏时间：

懒加载：需要用到资源时才去加载，减少首屏加载资源数量，例如图片懒加载，异步组件等。
代码分割：将较大资源进行拆分，减少单个包体积。
代码压缩：减少包体积，例如 js 压缩，css 压缩，nginx 中开启 gzip 等。
CDN：减少服务器压力。
预加载：使用资源之前就提前加载资源，缩短页面加载时间。