怎么解决首屏加载速度过慢的问题

怎么解决首屏加载速度过慢的问题

    • 首屏加载速度指的是什么?
    • 解决方法

首屏加载速度指的是什么?

首屏加载速度指的是浏览器从响应用户输入网站地址到首屏内容渲染完成的时间。值得注意的是此时整个网页不一定要全部渲染完成,只需展示当前视窗所需要的内容,这个环节也是影响用户体验最重要的一个环节。有以下几个原因会影响加载速度:

  1. 网络延时问题(用户的网络以及服务器的带宽)
  2. 资源文件体积的大小(大文件耗费流量多加载时间长)
  3. 用户是否进行了重复请求而网站并未对此进行拦截
  4. 加载脚本的时候喧嚷内容堵塞

解决方法

通常有以下几种解决方法:

  1. UI框架按需加载

使用框架时不要一味的整个引用,要学会选择性、功能性的导入

  1. 压缩图片资源

图片资源索然不在编码的过程中,但它却是影响页面加载性能的最大因素,而对于这类资源,我们可以进行适当的压缩。再者,对于页面上使用到的icon,可以使用在线字体图标(如:iconfont),或者使用雪碧图(也叫精灵图) ,将众多的小图标合并到同一张图上,以减轻http的请求压力。

  1. 使用SSR

所谓SSR就是服务器端渲染,组件或者页面通过服务器·1生成html字符串,再发送到浏览器。然而,从头搭建一个服务器端渲染是很复杂的,vue应用推荐使用Nuxt.js来实现。

除上述几种方法外,还有静态资源本地缓存,减少入口文件体积,开启Gzip压缩等等都可以合理有效的解决这个问题。

这里是万物之恋,我们下次再见了!

你可能感兴趣的:(前端面试题,vue.js,javascript,前端)