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

简介: 导致页面加载白屏时间长的原因有哪些,怎么进行优化?

一、白屏时间

即用户点击一个链接或打开浏览器输入URL地址后,从屏幕空白到显示第一个画面的时间


二、白屏时间的重要性

当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时,就开始等待页面的展示。页面渲染的时间越短,用户等待的时间就越短,用户感知到页面的速度就越快。


这样可以极大的提升用户的体验,减少用户的跳出,提升页面的留存率。


三、白屏的过程

从输入url,到页面的画面展示的过程


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


2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。


3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。


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


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


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


7、浏览器收到HTTP响应


8、读取页面内容,浏览器渲染,解析html源码


9、生成Dom树、解析css样式、js交互,渲染显示页面


浏览器下载HTML后,首先解析头部代码,进行样式表下载,然后继续向下解析HTML代码,构建DOM树,同时进行样式下载。当DOM树构建完成后,立即开始构造CSSOM树。理想情况下,样式表下载速度够快,DOM树和CSSOM树进入一个并行的过程,当两棵树构建完毕,构建渲染树,然后进行绘制。


Tips:浏览器安全解析策略对解析HTML造成的影响:


当解析HTML时遇到内联JS代码,会阻塞DOM树的构建,会先执行完JS代码;当CSS样式文件没有下载完成时,浏览器解析HTML遇到了内联JS代码,此时,浏览器暂停JS脚本执行,暂停HTML解析。直到CSS文件下载完成,完成CSSOM树构建,重新恢复原来的解析。


JavaScript 会阻塞 DOM 生成,而样式文件又会阻塞 JavaScript 的执行,所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件,使用不当会影响到页面性能的。


四、白屏-性能优化

1. DNS解析优化

针对DNS Lookup环节,可以针对性的进行DNS解析优化。


DNS缓存优化

DNS预加载策略

稳定可靠的DNS服务器

2. TCP网络链路优化

3. 服务端处理优化

服务端的处理优化,是一个非常庞大的话题,会涉及到如Redis缓存、数据库存储优化或是系统内的各种中间件以及Gzip压缩等


4. 浏览器下载、解析、渲染页面优化

根据浏览器对页面的下载、解析、渲染过程,可以考虑一下的优化处理:


尽可能的精简HTML的代码和结构

尽可能的优化CSS文件和结构

一定要合理的放置JS代码,尽量不要使用内联的JS代码

将渲染首屏内容所需的关键CSS内联到HTML中,能使CSS更快速地下载。在HTML下载完成之后就能渲染了,页面渲染的时间提前,从而缩短首屏渲染时间;

延迟首屏不需要的图片加载,而优先加载首屏所需图片(offsetTop<clientHeight)

document.documentElement.clientHeight//获取屏幕可视区域的高度
element.offsetTop//获取元素相对于文档顶部的高度

因为JavaScript 会阻塞 DOM 生成,而样式文件又会阻塞 JavaScript 的执行,所以在实际的工程中需要重点关注 JavaScript 文件和样式表文件,使用不当会影响到页面性能的

相关文章
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
830 0
|
监控 前端开发 网络协议
Web前端页面性能及用户体验的监控与分析
WEB页面通常需要监控的指标包括:服务状态、HTTP响应码、总响应时间、DNS解析时间、连接时间、服务器响应时间、平均下载速度、页面大小、页面大小变化等指标。
1235 0
Web前端页面性能及用户体验的监控与分析
什么是瀑布流布局?瀑布流式布局的优缺点
什么是瀑布流布局?瀑布流式布局的优缺点
1369 0
|
JavaScript 数据可视化
JS如何优雅的实现模块自动滚动展示
【8月更文挑战第22天】JS如何优雅的实现模块自动滚动展示
448 1
JS如何优雅的实现模块自动滚动展示
|
JavaScript 搜索推荐 前端开发
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
412 1
|
存储 缓存 小程序
微信小程序登录流程解析
微信官方文档有小程序的登录流程时序图,本文围绕这张图从0到1做更具体的解析。微信小程序的登录看上去好像很复杂,实际上只是不同的接口调用、字段返回,整个过程有3方在参与:小程序、开发者服务器、微信服务器。
微信小程序登录流程解析
阿里云ECS服务器Ubuntu配置MySQL远程访问
root账户登录服务器Ubuntu16.04 apt-get update apt-get install mysql-server mysql-client; 安装时会让你设置root密码,输入2次。
|
人工智能 自然语言处理 机器人
在钉钉中与百炼DeepSeek大模型对话
DeepSeek发布了两款先进AI模型V3和R1,分别适用于对话AI、内容生成及推理任务。阿里云百炼提供DeepSeek模型API,通过AppFlow可在钉钉中快速配置与DeepSeek的对话功能,无需代码开发,10分钟内完成全部设置。用户需在钉钉开放平台创建应用、配置消息卡片、授权权限,并使用计算巢AppFlow创建连接流,最后配置钉钉机器人并发布应用版本,即可实现与DeepSeek大模型的交互。
1220 8
在钉钉中与百炼DeepSeek大模型对话