Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
yygmind opened this issue Aug 2, 2019 · 14 comments
Labels

Comments

@yygmind
Copy link
Contributor

yygmind commented Aug 2, 2019

No description provided.

@hugeorange
Copy link

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

解决办法:

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

@jdkwky
Copy link

jdkwky commented Aug 2, 2019

优化首页加载速度:

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

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

@FontEndArt
Copy link

FontEndArt commented Aug 2, 2019

首先分析原因

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

考虑解决办法

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

个人意见,如有错误,烦请指正,谢谢!

@lhyt
Copy link

lhyt commented Aug 2, 2019

为什么

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

@michaelChe956
Copy link

我的理解

白屏和首页加载过慢原因

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

修改方法

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

@HduSy
Copy link

HduSy commented Aug 4, 2019

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

@childmoon
Copy link

学习了学习了

@weimingxinas
Copy link

  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

@MissNanLan
Copy link

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

@yandongSS
Copy link

广告时间

@Shirleyhsl
Copy link

我太难了(;д;)

@xmasong
Copy link

xmasong commented Sep 26, 2019

首先分析原因

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

考虑解决办法

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

个人意见,如有错误,烦请指正,谢谢!

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

@hbbaly
Copy link

hbbaly commented Oct 28, 2019

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

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

解决方案(工作中用到的):

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

@gauseen
Copy link

gauseen commented Nov 26, 2019

原因:

  • 需要下载静态资源(如:js css img)
  • spa 应用 dom 树是由 js 执行生成的,需要时间

解决:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests