浏览器加载页面缓慢优化(UI体验优化)
Posted 码到城攻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器加载页面缓慢优化(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>
以上是关于浏览器加载页面缓慢优化(UI体验优化)的主要内容，如果未能解决你的问题，请参考以下文章