Advanced-Frontend/Daily-Interview-Question

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

yygmind opened this issue · 14 comments

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

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

解决办法：

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

优化首页加载速度：

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

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

FontEndArt commented

首先分析原因

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

考虑解决办法

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

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

  • 👍55
  • 🎉1
  • ❤️2
  • 👀3
lhyt commented

为什么

这类问题不仅是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、浏览器缓存什么的就不多说了
  • 👍15
chejingchi commented

我的理解

白屏和首页加载过慢原因

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

修改方法

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

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

childmoon commented

学习了学习了

weimingxinas commented
  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
  • 👍1
MissNanLan commented

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

yandongSS commented

广告时间

Shirleyhsl commented

我太难了(；д；)

xmasong commented

首先分析原因

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

考虑解决办法

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

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

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

hbbaly commented

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

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

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

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

原因：

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

解决：

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