优化首页动态视觉加载性能

(改成cdn加速,可能对中国大陆用户不太友好?)
This commit is contained in:
Chenx221 2024-06-14 16:05:29 +08:00
parent 22a130b6ef
commit 90eac27dae
Signed by: chenx221
GPG Key ID: D7A9EC07024C3021
5 changed files with 137 additions and 84 deletions

View File

@ -1,13 +0,0 @@
<?php
namespace app\assets;
use yii\web\AssetBundle;
class EChartsLiquidFillAsset extends AssetBundle
{
public $sourcePath = '@npm/echarts-liquidfill/dist';
public $js = [
'echarts-liquidfill.js',
];
}

View File

@ -6,8 +6,8 @@ use yii\web\AssetBundle;
class TSParticlesAsset extends AssetBundle class TSParticlesAsset extends AssetBundle
{ {
public $sourcePath = '@npm/tsparticles--slim'; //use remote js file instead of local file (for better performance?)
public $js = [ public $js = [
'tsparticles.slim.bundle.min.js', 'https://cdn.jsdelivr.net/npm/@tsparticles/slim@3.4.0/tsparticles.slim.bundle.min.js'
]; ];
} }

View File

@ -51,9 +51,7 @@
"kartik-v/yii2-editable": "dev-master", "kartik-v/yii2-editable": "dev-master",
"chenx221/yii2-bootstrap5": "dev-master", "chenx221/yii2-bootstrap5": "dev-master",
"npm-asset/echarts": "^5.5", "npm-asset/echarts": "^5.5",
"npm-asset/echarts-liquidfill": "^3.1",
"npm-asset/quill": "^1.3", "npm-asset/quill": "^1.3",
"npm-asset/tsparticles--slim": "3.3.0",
"ext-mbstring": "*" "ext-mbstring": "*"
}, },
"require-dev": { "require-dev": {

View File

@ -9,7 +9,6 @@ use yii\helpers\Url;
$this->title = '首页'; $this->title = '首页';
TSParticlesAsset::register($this); TSParticlesAsset::register($this);
//$latestAnnouncements = []; emulating empty data
?> ?>
<div id="tsparticles" style="position: absolute;z-index: -1"></div> <div id="tsparticles" style="position: absolute;z-index: -1"></div>
<div class="site-index"> <div class="site-index">
@ -105,12 +104,12 @@ $(document).ready(function() {
}); });
}); });
}); });
async function loadParticles(options) { (async () => {
await loadSlim(tsParticles);
await tsParticles.load({ id: "tsparticles", options }); await tsParticles.load({
} id: "tsparticles",
options: {
const configs = {
fpsLimit: 60, fpsLimit: 60,
particles: { particles: {
number: { number: {
@ -171,9 +170,78 @@ const configs = {
} }
} }
} }
}; }
});
loadParticles(configs).then(r => console.log("Particles loaded")); })();
// async function loadParticles(options) {
//
// await tsParticles.load({ id: "tsparticles", options });
// }
//
// const configs = {
// fpsLimit: 60,
// particles: {
// number: {
// value: 100,
// density: {
// enable: true,
// area: 800
// }
// },
// color: {
// value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
// },
// shape: {
// type: "circle"
// },
// opacity: {
// value: 0.4
// },
// size: {
// value: { min: 4, max: 8 }
// },
// links: {
// enable: true,
// distance: 150,
// color: "#808080",
// opacity: 0.4,
// width: 1
// },
// move: {
// enable: true,
// speed: 1,
// outModes: {
// default: "out"
// }
// }
// },
// interactivity: {
// events: {
// onHover: {
// enable: true,
// mode: "grab"
// },
// onClick: {
// enable: true,
// mode: "push"
// }
// },
// modes: {
// grab: {
// distance: 230,
// links: {
// opacity: 1,
// color: "#808080"
// }
// },
// push: {
// quantity: 4
// }
// }
// }
// };
//
// loadParticles(configs).then(r => console.log("Particles loaded"));
JS; JS;