首页白屏优化以及解决方法

首页白屏的原因： 单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的 js 文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏 VUE 首页加载过慢，其原因是因为它是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。 解决办法：

优化 webpack 减少模块打包体积，code-split 按需加载 服务端渲染，在服务端事先拼装好首页所需的 html ssr，在服务端处理好 html 然后返回浏览器 服务端开启 gzip 压缩 打包文件分包，提取公共文件包 优化打包后内容的体积， 去掉不必要的代码 增加 loading 首页加 loading 或 骨架屏 （仅仅是优化体验）

考虑解决办法 1.使用首屏 SSR + 跳转 SPA 方式来优化 2.改单页应用为多页应用，需要修改 webpack 的 entry 3.改成多页以后使用应该使用 prefetch 的就使用 4.处理加载的时间片，合理安排加载顺序，尽量不要有大面积空隙 5.CDN 资源还是很重要的，最好分开，也能减少一些不必要的资源损耗 6.使用 Quicklink，在网速好的时候 可以帮助你预加载页面资源 7.骨架屏这种的用户体验的东西一定要上，最好借助 stream 先将这部分输出给浏览器解析 8.合理使用 web worker 优化一些计算 9.缓存一定要使用，但是请注意合理使用 10.大概就这么多，最后可以借助一些工具进行性能评测，重点调优，例如使用 performance 自己实现下等

怎么办 代码拆分。code split、动态 import 多页面+单页面组合，不是整个网站都是同一个页面切换前端路由，酌情拆分一些其他页面作为新页面 直出 ssr。使用 ssr 减少前端跑 js 的时间，逻辑放服务端处理把完整的页面返回 部分直出。使用 ssr 服务端压力会变大，所以可以把页面重要的部分先直出，非重要部分放前端 接入 quicklink，实际上就是检查页面链接然后在浏览器空闲时间进行 prefetch 接入 service worker 缓存，和 ssr 一起搭配使用更佳 体验上。增加 lodaing、骨架屏 有了各种缓存，热启动是没什么问题了。最后要优化冷启动时间，使用 prefetch 前端渲染上。使用 raf 渲染，不阻塞主线程。react 里面已使用异步渲染 服务端 rpc 上。使用 pb 协议而不是文本协议 传输层使用 quic 协议传输。貌似没多少个团队用上～ 常规操作。cdn、减少请求、雪碧图、gzip、浏览器缓存什么的就不多说了

白屏和首页加载过慢原因 spa 项目，所有的 html 几乎都是通过 js 渲染出来的，一旦 js 过于庞大或网速不够的情况下，可能会出现短暂白屏的情况

修改方法 优化打包后内容的体积， 去掉不必要的代码 增加 loading js 做拆分，把主干 js 和次要 js 拆分开，按顺序加载 ssr，在服务端处理好 html 然后返回浏览器

解决方案（工作中用到的）：

ssr 技术 首页骨架图 一些三方资源可以上 cdn 可以尝试多页面（工作中使用 vue 多页面，有很大的改善） 开始 gzip 压缩 使用 iconfont 或者雪碧图 接口响应时间的优化 路由懒加载

决：

减少 http/1.1 请求次数 减少静态资源包大小 合理拆分库 用 gzip 压缩 合理加载静态资源 懒加载，根据路由分包，只加载需要的资源 非首屏资源，使用 preload、prefetch 避免阻塞渲染进程，减少 FP（首次渲染）时间 使用缓存 本地缓存 http 缓存 ssr 服务端直出 HTML，节省 js 生成 dom 树时间，直接渲染即可

参考文章：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/234 https://blog.csdn.net/weixin_45389051/article/details/109188392