Skip to content

Commit 0848830

Browse files
ChronostasysChronostasys
committed
fix: even better performance
1 parent 07a93fb commit 0848830

File tree

5 files changed

+41
-22
lines changed

5 files changed

+41
-22
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image" href="src/assets/logo.png" />
6+
<link fetchpriority="high" rel="preload" href="src/assets/background.jpg" as="image">
67
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
78
<title>Pivot Lang</title>
89
</head>

‎src/components/index/firstPage.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function scrollToCode() {
2020
<div class="detail-describe">Rust-like grammar with GC.</div>
2121
</div>
2222
<div v-show="sizeCnt <= 1" class="background-container">
23-
<img src="@/assets/background.jpg" />
23+
<img fetchpriority="high" src="@/assets/background.jpg" />
2424
</div>
2525
<div class="bottom">
2626
<div class="start-button" @click="scrollToCode" style="cursor: pointer">Try It</div>
@@ -40,6 +40,7 @@ function scrollToCode() {
4040
position: absolute;
4141
top: 200px;
4242
left: 100px;
43+
z-index: 100;
4344
@media (max-width: 960px) {
4445
position: absolute;
4546
top: 100px;

‎src/components/memberCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function gotoGithub() {
77
<template>
88
<div class="container" @click="gotoGithub">
99
<div>
10-
<img class="avatar" :src="props.avatar" />
10+
<img class="avatar" loading="lazy" :src="props.avatar" />
1111
</div>
1212
<div class="name">{{ props.name }}</div>
1313
<div>{{ props.identity }}</div>

‎src/hooks/detectElm.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export function isElementInViewport (el:Element) {
2+
var rect = el.getBoundingClientRect();
3+
4+
return (
5+
rect.top >= 0 &&
6+
rect.left >= 0 &&
7+
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
8+
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
9+
);
10+
}

‎src/pages/index.vue‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
import { ref, onMounted, watch } from "vue";
1616
import { basicCode } from "@/constant";
1717
import { memberList } from "@/constant";
18+
import { isElementInViewport } from "@/hooks/detectElm";
1819
// import createMonaco, { PlMonaco } from "@pivot-lang/create-monaco";
1920
import CodeBlock from "@/components/codeBlock.vue";
2021
import { cp } from "fs";
@@ -26,6 +27,7 @@ const tabList = basicCode.map((item) => item.title);
2627
let code = ref("");
2728
let runResult = ref("");
2829
let initialized = ref(false);
30+
let startLoad = ref(false);
2931
let watchCallback = (val:string) => {
3032
console.log('not initialized yet...');
3133
};
@@ -51,22 +53,27 @@ function handleOutput(re: string) {
5153
5254
onMounted(async () => {
5355
code.value = basicCode[0].code;
54-
import("@pivot-lang/create-monaco").then(async pl=>{
55-
let monaco = await pl.default(
56-
document.getElementById("container")!,
57-
basicCode[0].code
58-
);
59-
monaco.editor.onDidChangeModelContent(() => {
60-
code.value = monaco.editor.getModel()!.getValue();
61-
});
62-
terminal.open(document.querySelector(".code-block") as HTMLElement);
63-
terminal.resize(44, 17);
64-
watchCallback = (val) => {
65-
const code1 = basicCode.find((item) => item.title === val)?.code || "";
66-
code.value = code1;
67-
monaco.setContent(code1);
68-
};
69-
initialized.value = true;
56+
window.addEventListener("scroll", () => {
57+
if (!startLoad.value && isElementInViewport(document.getElementById("spinner")!)) {
58+
startLoad.value = true;
59+
import("@pivot-lang/create-monaco").then(async pl=>{
60+
let monaco = await pl.default(
61+
document.getElementById("container")!,
62+
basicCode[0].code
63+
);
64+
monaco.editor.onDidChangeModelContent(() => {
65+
code.value = monaco.editor.getModel()!.getValue();
66+
});
67+
terminal.open(document.querySelector(".code-block") as HTMLElement);
68+
terminal.resize(44, 17);
69+
watchCallback = (val) => {
70+
const code1 = basicCode.find((item) => item.title === val)?.code || "";
71+
code.value = code1;
72+
monaco.setContent(code1);
73+
};
74+
initialized.value = true;
75+
});
76+
}
7077
});
7178
});
7279
watch(
@@ -105,7 +112,7 @@ watch(
105112
<div class="code-block"></div>
106113
</div>
107114
</div>
108-
<div v-show="!initialized" class="code-now-container">
115+
<div v-show="!initialized" id="spinner" class="code-now-container">
109116
<div class="spinner"></div>
110117
</div>
111118
</div>
@@ -118,7 +125,7 @@ watch(
118125
to be highly concurrent and to exploit the locality of reference
119126
patterns in modern programs.
120127
</div>
121-
<GcEcharts></GcEcharts>
128+
<GcEcharts v-if="startLoad"></GcEcharts>
122129
</div>
123130
<div id="advantage">
124131
<div class="gradient-font title">Reliability</div>
@@ -127,14 +134,14 @@ watch(
127134
We have a large number of unit tests and integration tests to ensure
128135
that the coverage of the code is as high as possible.
129136
</div>
130-
<CodeCovEcharts></CodeCovEcharts>
137+
<CodeCovEcharts v-if="startLoad"></CodeCovEcharts>
131138
</div>
132139
<CrossPlatforms></CrossPlatforms>
133140
<VscSupportShow></VscSupportShow>
134141
<div id="team">
135142
<div class="gradient-font title">Meet The Team</div>
136143
<div class="team-card">
137-
<div class="card-container">
144+
<div v-if="startLoad" class="card-container">
138145
<MemberCard
139146
v-for="member in memberList"
140147
:key="member.name"

0 commit comments

Comments
 (0)