TEL::0898-88889999

网站公告:

诚信为本:市场永远在变,诚信永远不变。

盛煌注册

  • 主营项目标题六
  • 主营项目标题五
  • 主营项目标题四
  • 主营项目标题三
  • 主营项目标题二
  • 主营项目标题一

盛煌动态

当前位置: 首页 > 盛煌动态

vue导致页面加载白屏时间长的原因有哪些,怎么优化

发布时间:2024-03-04 12:29:35 点击量:

?写在前面:vue是单页面应用,默认index.html里只要一个空的div。需要将所有的资源都下载到浏览器端进行解析。当网速较差时会出现一定程度的白屏。

白屏时间是指用户输入内容回车到浏览器开始出现第一个字符,也就是说(页面)开始显示内容的时间。

当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。这样可以极大的提升用户的体验,减少用户的跳出,提升页面的留存率

1、首先,在浏览器地址栏中输入url。

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接显示页面内容;若没有,就需要向后台发送请求。

3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。(一个IP可以对应多个域名,一个域名只能对应一个IP)

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。

5、握手成功后,浏览器向服务器发送http请求,请求数据包。

6、服务器处理收到的请求,将数据返回至浏览器。

7、浏览器收到HTTP响应,读取页面内容,开始进行渲染。

  • 浏览器缓存:浏览器会记录DNS一段时间,因此,只是第一个地方解析DNS请求;
  • 操作系统缓存:如果在浏览器缓存中不包含这个记录,则会使系统调用操作系统,获取操作系统的记录(保存最近的DNS查询缓存);
  • 路由器缓存:如果上述两个步骤均不能成功获取DNS记录,继续搜索路由器缓存;
  • ISP缓存:若上述均失败,继续向ISP搜索。
  • 接受到服务器的响应内容后,浏览器的HTML解析器,会将HTML文件解析成一棵DOM树。
  • 将CSS解析成CSSOM树(CSS Rule Tree)
  • 结合DOM树和CSSOM树,来构建Render Tree(渲染树),注意渲染树,并不等于DOM树,因为一些像head或display:none的东西,就没有必要放在渲染树中了。
  • 有了Render Tree,浏览器已经能知道网页中有哪些节点,各个节点的CSS定义,以及它们的从属关系,下一步操作就是Layout,顾名思义,就是计算出每个节点在屏幕中的位置。
  • Layout后,浏览器已经知道哪些节点要显示,每个节点的CSS属性是什么,每个节点在屏幕中的位置是哪里,就进入了最后一步painting,按照算出来的规则,通过显卡,把内容画到屏幕上

注意:

  • 当我们浏览器获得HTML文件后,会自上而下的加载,并在加载过程中进行解析和渲染。
  • 加载说的就是获取资源文件的过程,如果在加载过程中遇到外部CSS文件和图片,浏览器会另外发送一个请求,去获取CSS文件和相应的图片,这个请求是异步的,并不会影响HTML文件的加载。
  • 但是如果遇到Javascript文件,HTML文件会挂起渲染的进程,等待JavaScript文件加载完毕后,再继续进行渲染。

因为JavaScript可能会修改DOM,导致后续HTML资源白白加载,所以HTML必须等待JavaScript文件加载完毕后,再继续渲染,这也就是为什么JavaScript文件在写在底部body标签前的原因。?

  • Repaint ——改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。
  • Reflow ——元件的几何尺寸变了,我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化
  • 比如display:none会触发reflow,而visibility:hidden只会触发repaint,因为没有发现位置变化。

reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

由输入url到页面加载过程,可以分析页面加载白屏时间长可能与以下几个因素有关:

如果页面需要加载大量的资源文件,比如CSS、JavaScript、图片等,会导致页面加载时间延长。可以通过减少资源文件的大小、合并文件、使用CDN本地缓存等方式来优化。

如果页面中的JavaScript代码执行时间过长,会阻塞页面的渲染,导致白屏时间延长。可以通过优化JavaScript代码、延迟加载部分脚本、使用异步加载等方式来优化。

如果页面中包含大量的Vue组件,或者某个Vue组件非常复杂,会导致页面加载和渲染时间增加。可以考虑对Vue组件进行拆分、懒加载、使用虚拟滚动等方式来优化。

如果页面需要从后端请求大量数据,会增加页面加载时间。可以考虑减少不必要的数据请求、使用分页加载数据、使用缓存等方式来优化。

为了优化页面加载白屏时间长的问题,可以采取以下措施:

将页面代码拆分成多个小模块,按需加载,减少首屏加载时间。

延迟加载部分组件或资源,优先加载页面核心内容,提高用户体验。

压缩图片大小、使用适当的图片格式,减少图片加载时间。

将不影响首屏展示的内容延迟加载,提高页面加载速度。

使用服务端渲染(SSR)可以减少客户端渲染时间,提高页面加载速度。

首屏使用SSR+跳转使用SPA

平台注册入口