浏览器加载页面缓慢优化(UI体验优化)

最新推荐文章于 2024-04-23 16:26:38 发布

码到城攻

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量239

点赞数

分类专栏：网页设计文章标签：前端码到城攻浏览器优化网页加载

本文链接：https://blog.csdn.net/Li_Ning_/article/details/128569047

版权

网页设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

优化效果

浏览器加载页面缓慢优化(UI体验优化)

优化说明

这里并非说，能优化的多快，导致慢的因素太多，有些可以在逻辑上优化，可有些确实硬件硬伤。这里呢，我们提供了人性化的展示，比如再加载资源慢时，可以先展示正在加载之类的动作。

优化效果

效果在本站，任意文章详情页面，都可以体验到，尤其是留言页面，加载资源较多，更容易体现，欢迎查看。如下是效果动图：

项目结构

项目直接用 HBuilder 开发，是一个独立项目，下载后，直接可浏览器查看效果。

部分源码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<link href="./css/common.css" rel="stylesheet">
		<script type="text/javascript" src="./js/common.js"></script>
	</head>
	<body>
		<div class="loading-page">
			<div class="load-up" style="animation: myWait 0.8s infinite">
				<div class="load-down"></div>
				<div class="black">
					<div class="small-white"></div>
				</div>
				<div class="white">
					<div class="small-black"></div>
				</div>
			</div>
			<div class="margin-top">当前内容 5264589 字，在路上，马上到，马上到</div>
		</div>
		<div id="your-self-code" style="text-align: center;">
			模拟正文内容，模拟浏览器加载3秒后，加载完成
		</div>
	</body>
</html>