第 119 题：Vue 如何优化首页的加载速度？Vue 首页白屏是什么问题引起的？如何解决呢？

Question

在 Vue 项目中，引入到工程中的所有 js、css 文件，编译时都会被打包进 vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么 vendor.js 文件体积将会相当的大，影响首屏的体验。

Answer 1

原因：

• 需要下载静态资源（如：js css img）
• spa 应用 dom 树是由 js 执行生成的，需要时间

解决：

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

Answer 2

原因：
vue是spa，进入首页的时候会把所有的js，css等资源下载，引起白屏问题。

工作中因为首页加载过慢白屏问题，进行过几次性能优化。

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

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

Answer 3

首先分析原因

VUE首页加载过慢，其原因是因为它是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。

考虑解决办法

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

个人意见，如有错误，烦请指正，谢谢！

请教下，quicklink对白屏首屏速度有提高么？感觉只能提高首屏中链接内容的渲染速度

Answer 4

我太难了(；д；)

Answer 5

广告时间

Answer 6

webpack提取公用的模块、分包打包

Answer 7

1. 合理使用resource hint，即preload，prefetch, dns-connect等
2. 利用webpack的code-split结合vue-router做懒加载
3. 合理利用缓存，结合wepack的contenthash模式，针对文件级别做更改
4. 图片方面，像淘宝，会优先使用webp，如果不支持再用jpg，以及，小图采用base64编码，雪碧图等
5. 代码压缩
6. ssr
7. 骨架屏
8. service worker

Answer 8

学习了学习了

Answer 9

大佬们说的技术都很不错啊

Answer 10

我的理解

白屏和首页加载过慢原因

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

修改方法

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

Answer 11

为什么

这类问题不仅是vue。因为是spa，而且所有的渲染都在脚本上，js执行需要时间。另外加载js也要时间，所以页面越大，加载时间越长，而且js执行的时间也长，dcl发生的时间点就更晚，所以会白屏

怎么办

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

Answer 12

首先分析原因

VUE首页加载过慢，其原因是因为它是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。

考虑解决办法

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

个人意见，如有错误，烦请指正，谢谢！

Answer 13

优化首页加载速度：

1. 服务端开启gzip压缩
2. 打包文件分包，提取公共文件包

首页白屏原因是首页需要加载比较大的js文件, 解决方法是 在路由返回前添加loading

Answer 14

首页白屏的原因：
单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏

解决办法：

1. 优化 webpack 减少模块打包体积，code-split 按需加载
2. 服务端渲染，在服务端事先拼装好首页所需的 html
3. 首页加 loading 或 骨架屏 （仅仅是优化体验）