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

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

一、白屏时间

即用户点击一个链接或打开浏览器输入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 文件和样式表文件,使用不当会影响到页面性能的

相关文章
|
19天前
|
缓存 前端开发 JavaScript
前端性能优化:如何提升页面加载速度与用户体验?
在当今互联网时代,用户对网页加载速度的要求越来越高。本文将介绍前端性能优化的重要性,并提供一些实用的技巧和策略,帮助开发者提升页面加载速度,从而提升用户体验。
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 性能优化:如何减少页面加载时间?
JavaScript 性能优化:如何减少页面加载时间?
56 0
|
17天前
|
缓存 前端开发 JavaScript
解决白屏问题:让你的网站重焕生机
解决白屏问题:让你的网站重焕生机
|
19天前
|
缓存 前端开发 JavaScript
优化前端性能:减少页面加载时间的六大技巧
本文将探讨如何通过改善前端性能来减少页面加载时间,从而提升用户体验。我们将介绍六种实用的技巧,包括减少HTTP请求、压缩资源文件、使用CDN加速、延迟加载、缓存策略和代码优化,帮助开发人员有效地提升网页性能。
|
19天前
|
缓存 前端开发 JavaScript
前端性能优化:提升页面加载速度
想要吸引用户并提高网站流量,页面加载速度是至关重要的。本文将介绍前端性能优化的基本原则和实践技巧,帮助您提高页面加载速度和用户体验。
|
10月前
|
域名解析 缓存 JavaScript
导致页面加载白屏时间长的原因有哪些,怎么进行优化?
导致页面加载白屏时间长的原因有哪些,怎么进行优化?
237 0
|
10月前
|
存储 缓存 固态存储
三分钟解决AE缓存预览渲染错误、暂停、卡顿问题
三分钟解决AE缓存预览渲染错误、暂停、卡顿问题
682 2
|
前端开发 JavaScript Go
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
101 0
浏览器原理 22 # 渲染流水线:CSS如何影响首次加载时的白屏时间?
|
网络协议 JavaScript 前端开发
页面加载时,有较长时间的白页,有可能是什么原因造成的
b.资源的加载顺序。资源的加载顺序决定了页面的逻辑能否正常的执行,当页面加载顺序出现问题导致页面无法正常执行,最终导致白页现象。或者网速较慢,下载相关资源很慢,这时就会出现暂时的空白页的现象。
|
数据采集 缓存 移动开发
当考虑网页首屏时长优化的时候,我们在考虑什么?
当考虑网页首屏时长优化的时候,我们在考虑什么?
198 0
当考虑网页首屏时长优化的时候,我们在考虑什么?