首页白屏优化

链接

https://www.cnblogs.com/bounsail/p/15120288.html

首页白屏优化解决方案：

cdn分发、文件和数据缓存、减少请求、骨架屏、文件合并压缩、script标签的async和defer、懒加载预加载、WebP 的图片格式来代替现有的jpeg和png、img合并压缩、

1. Vue-Router路由懒加载（或者利用Webpack的代码切割）
2. 使用CDN加速，将通用的库从vendor进行抽离
3. Nginx的gzip压缩
4. Vue异步组件
5. 服务端渲染SSR
6. 如果使用了一些UI库，采用按需加载
7. Webpack开启gzip压缩
8. 如果首屏为登录页，可以做成多入口
9. Service Worker缓存文件处理
10. 使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）
    骨架屏

解析白屏

浏览器从服务器获取到Html数据后，会创建新的渲染进程。
此时渲染进程会产生一个空白页面，称为解析白屏。
在此阶段，会加载外部JS、加载外部CSS、解析生成DOM树、生成样式规则、执行JS、生成布局树、绘制页面等等。
而其中影响性能的主要因素在于加载外部CSS和JS、执行JS。

优化方案

对于小的外部文件可改为内嵌式，取消文件下载。
对外部文件进行压缩、清除注释等，减小文件大小。
在解析阶段可不执行的JS文件，采用异步加载，减轻阻塞。
对于大的CSS文件，采用媒体查询，拆分为不同用途的样式。在特定场景下，加载特定CSS文件。
先渲染首屏可视区域的页面，后面滚动加载数据（懒加载页面）；