feat(docs): enhance interactive demos and improve documentation
- Add new interactive components for frontend routing, browser rendering pipeline, and database transactions - Improve existing demos with better visuals, explanations, and examples - Update documentation structure and content for better clarity - Add new utility scripts and update package.json with new commands - Fix formatting and alignment in documentation tables
This commit is contained in:
sanbuphy
+242
-19
@@ -1,13 +1,58 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<div class="composite-demo">
|
||||
<div class="demo-header">
|
||||
<h4>{{ title }}</h4>
|
||||
<p class="hint">{{ description }}</p>
|
||||
<span class="icon">🎬</span>
|
||||
<span class="title">合成层演示</span>
|
||||
<span class="subtitle">浏览器渲染的最后阶段 - 图层合成</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
合成是浏览器渲染的最后一步。想象你在<span class="highlight">制作PPT动画</span>：你已经准备好了所有图层，现在只需要调整它们的位置、透明度，然后把它们叠在一起显示出来。这就是合成要做的事情。
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-alert type="info" :closable="false">
|
||||
合成层演示组件占位符 - 待实现具体交互
|
||||
</el-alert>
|
||||
<div class="layers-stage">
|
||||
<div
|
||||
v-for="layer in layers"
|
||||
:key="layer.id"
|
||||
class="layer-item"
|
||||
:class="{ animating: layer.isAnimating }"
|
||||
:style="getLayerStyle(layer)"
|
||||
>
|
||||
<div class="layer-visual">
|
||||
<span class="layer-emoji">{{ layer.emoji }}</span>
|
||||
<span class="layer-name">{{ layer.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="composite-result">
|
||||
<div class="result-box">
|
||||
<div class="result-title">合成结果</div>
|
||||
<div class="result-display">
|
||||
<div
|
||||
v-for="layer in layers"
|
||||
:key="layer.id"
|
||||
class="result-layer"
|
||||
:class="{ moving: layer.isAnimating }"
|
||||
:style="getResultLayerStyle(layer)"
|
||||
>
|
||||
{{ layer.emoji }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<button class="action-btn" @click="toggleAnimation">
|
||||
{{ isAnimating ? '⏸ 暂停动画' : '▶️ 开始动画' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心要点：</strong>合成阶段在 GPU 上执行，只调整位置、透明度等，不重新绘制像素。因此 transform 和 opacity 动画性能最好，不会触发重排和重绘。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,36 +60,214 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref('合成层演示')
|
||||
const description = ref('展示浏览器渲染的最后阶段，将各层合成最终页面')
|
||||
const isAnimating = ref(false)
|
||||
|
||||
const layers = ref([
|
||||
{
|
||||
id: 'bg',
|
||||
name: '背景层',
|
||||
emoji: '🖼️',
|
||||
x: 50,
|
||||
y: 20,
|
||||
opacity: 1,
|
||||
isAnimating: false
|
||||
},
|
||||
{
|
||||
id: 'content',
|
||||
name: '内容层',
|
||||
emoji: '📄',
|
||||
x: 50,
|
||||
y: 50,
|
||||
opacity: 1,
|
||||
isAnimating: false
|
||||
},
|
||||
{
|
||||
id: 'overlay',
|
||||
name: '浮层',
|
||||
emoji: '✨',
|
||||
x: 50,
|
||||
y: 80,
|
||||
opacity: 0.8,
|
||||
isAnimating: false
|
||||
}
|
||||
])
|
||||
|
||||
function toggleAnimation() {
|
||||
isAnimating.value = !isAnimating.value
|
||||
layers.value.forEach(layer => {
|
||||
layer.isAnimating = isAnimating.value
|
||||
})
|
||||
}
|
||||
|
||||
function getLayerStyle(layer) {
|
||||
return {
|
||||
left: `${layer.x}%`,
|
||||
top: `${layer.y}%`,
|
||||
opacity: layer.opacity
|
||||
}
|
||||
}
|
||||
|
||||
function getResultLayerStyle(layer) {
|
||||
if (!layer.isAnimating) {
|
||||
return {
|
||||
transform: `translate(${layer.x - 50}%, ${layer.y - 50}%)`,
|
||||
opacity: layer.opacity
|
||||
}
|
||||
}
|
||||
return {
|
||||
transform: `translate(${layer.x - 50}%, ${layer.y - 30}%)`,
|
||||
opacity: layer.opacity,
|
||||
transition: 'transform 0.5s ease-in-out, opacity 0.5s ease-in-out'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
.composite-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.layers-stage {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.layer-item.animating {
|
||||
animation: float 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(-50%, -50%); }
|
||||
50% { transform: translate(-50%, -70%); }
|
||||
}
|
||||
|
||||
.layer-visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.layer-emoji { font-size: 1.5rem; }
|
||||
.layer-name { font-size: 0.7rem; color: var(--vp-c-text-2); }
|
||||
|
||||
.composite-result {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-display {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-layer {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.result-layer.moving {
|
||||
animation: resultFloat 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes resultFloat {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(0, -20px); }
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--vp-c-brand-dark);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
+273
-23
@@ -1,50 +1,300 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<div class="dom-render-tree-demo">
|
||||
<div class="demo-header">
|
||||
<h4>{{ title }}</h4>
|
||||
<p class="hint">{{ description }}</p>
|
||||
<span class="icon">🌲</span>
|
||||
<span class="title">DOM到渲染树</span>
|
||||
<span class="subtitle">浏览器如何构建渲染树</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
浏览器需要把 HTML 和 CSS 合并成一棵"渲染树"。想象你在<span class="highlight">组装家具</span>：图纸是 DOM，说明书是 CSSOM，只有结合两者，才能知道每个零件长什么样、放在哪里。
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-alert type="info" :closable="false">
|
||||
DOM到渲染树演示组件占位符 - 待实现具体交互
|
||||
</el-alert>
|
||||
<div class="trees-container">
|
||||
<div class="tree-section">
|
||||
<div class="tree-title">DOM树</div>
|
||||
<div class="tree dom-tree">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag"><html></span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag"><head></span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag"><style></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node">
|
||||
<span class="node-tag"><body></span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag highlight-node"><div></span>
|
||||
</div>
|
||||
<div class="tree-node">
|
||||
<span class="node-tag"><span></span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag hidden-node"><script></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plus-sign">+</div>
|
||||
|
||||
<div class="tree-section">
|
||||
<div class="tree-title">CSSOM树</div>
|
||||
<div class="tree cssom-tree">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag">body</span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag">div</span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-prop">color: red</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node">
|
||||
<span class="node-tag">span</span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-prop">display: block</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-node">
|
||||
<span class="node-tag">script</span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-prop">display: none</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="equal-sign">=</div>
|
||||
|
||||
<div class="tree-section">
|
||||
<div class="tree-title">渲染树</div>
|
||||
<div class="tree render-tree">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag render-node">div</span>
|
||||
<div class="node-children">
|
||||
<div class="tree-node">
|
||||
<span class="node-tag render-node">span</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot highlight-node"></span>
|
||||
<span class="legend-text">可见节点</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot hidden-node"></span>
|
||||
<span class="legend-text">不可见节点（不包含在渲染树中）</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心要点：</strong>渲染树只包含可见的节点（display: none 的元素会被忽略）。每个渲染树节点都包含对应的 DOM 节点和计算出的样式信息。渲染树构建完成后，浏览器才能进入布局阶段。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref('DOM到渲染树演示')
|
||||
const description = ref('展示浏览器如何将DOM树和CSSOM树组合成渲染树的过程')
|
||||
// No reactive state needed for this demo
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
.dom-render-tree-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.trees-container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tree-section {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.tree-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tree {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
min-height: 180px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
position: relative;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.node-children {
|
||||
padding-left: 0.75rem;
|
||||
border-left: 1px solid var(--vp-c-divider);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.node-tag {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.4rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.node-prop {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.4rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.highlight-node {
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hidden-node {
|
||||
background: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-3);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.render-node {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plus-sign, .equal-sign {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-3);
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.legend-dot.highlight-node {
|
||||
background: var(--vp-c-brand-soft);
|
||||
border: 1px solid var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.legend-dot.hidden-node {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
+253
-20
@@ -1,50 +1,283 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<div class="layout-reflow-demo">
|
||||
<div class="demo-header">
|
||||
<h4>{{ title }}</h4>
|
||||
<p class="hint">{{ description }}</p>
|
||||
<span class="icon">📐</span>
|
||||
<span class="title">布局与重排</span>
|
||||
<span class="subtitle">看看布局计算如何影响页面</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-alert type="info" :closable="false">
|
||||
布局重排演示组件占位符 - 待实现具体交互
|
||||
</el-alert>
|
||||
<div class="control-panel">
|
||||
<div class="control-group">
|
||||
<label>选择要修改的属性：</label>
|
||||
<select v-model="selectedProperty" @change="resetDemo">
|
||||
<option value="transform">transform: translateY() (只触发合成)</option>
|
||||
<option value="width">width (触发重排)</option>
|
||||
<option value="marginLeft">margin-left (触发重排)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="toggle-btn" @click="toggleAnimation">
|
||||
{{ isAnimating ? '停止动画' : '开始动画' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="visualization">
|
||||
<div class="element-container">
|
||||
<div
|
||||
class="animated-element"
|
||||
:class="{ animating: isAnimating }"
|
||||
:style="elementStyle"
|
||||
>
|
||||
<span class="element-label">盒子</span>
|
||||
</div>
|
||||
<div class="neighbor-element">
|
||||
<span class="element-label">邻居元素</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-panel">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">触发阶段：</span>
|
||||
<span class="stat-value" :class="statClass">{{ currentStage }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">性能影响：</span>
|
||||
<span class="stat-value" :class="performanceClass">{{ performanceImpact }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">是否影响其他元素：</span>
|
||||
<span class="stat-value">{{ affectsOthers }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心要点：</strong>布局属性（如 width、margin）会触发重排，影响周围元素的位置。而 transform 只触发合成，在 GPU 上处理，不影响其他元素，性能更好。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const title = ref('布局重排演示')
|
||||
const description = ref('展示浏览器渲染过程中的布局计算和重排机制')
|
||||
const selectedProperty = ref('transform')
|
||||
const isAnimating = ref(false)
|
||||
|
||||
const elementStyle = computed(() => {
|
||||
if (!isAnimating.value) return {}
|
||||
|
||||
if (selectedProperty.value === 'transform') {
|
||||
return { transform: 'translateY(20px)' }
|
||||
} else if (selectedProperty.value === 'width') {
|
||||
return { width: '150px' }
|
||||
} else if (selectedProperty.value === 'marginLeft') {
|
||||
return { marginLeft: '20px' }
|
||||
}
|
||||
return {}
|
||||
})
|
||||
|
||||
const currentStage = computed(() => {
|
||||
if (!isAnimating.value) return '无'
|
||||
|
||||
if (selectedProperty.value === 'transform') {
|
||||
return '合成（Composite）'
|
||||
}
|
||||
return '布局（Layout）+ 重绘（Paint）+ 合成'
|
||||
})
|
||||
|
||||
const performanceClass = computed(() => {
|
||||
if (!isAnimating.value) return ''
|
||||
return selectedProperty.value === 'transform' ? 'good' : 'bad'
|
||||
})
|
||||
|
||||
const performanceImpact = computed(() => {
|
||||
if (!isAnimating.value) return '-'
|
||||
|
||||
if (selectedProperty.value === 'transform') {
|
||||
return '低（GPU加速）'
|
||||
}
|
||||
return '高（CPU计算）'
|
||||
})
|
||||
|
||||
const affectsOthers = computed(() => {
|
||||
if (!isAnimating.value) return '-'
|
||||
|
||||
if (selectedProperty.value === 'transform') {
|
||||
return '否'
|
||||
}
|
||||
return '是（需要重新计算）'
|
||||
})
|
||||
|
||||
function toggleAnimation() {
|
||||
isAnimating.value = !isAnimating.value
|
||||
}
|
||||
|
||||
function resetDemo() {
|
||||
isAnimating.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
.layout-reflow-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--vp-c-text-1);
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
.control-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
.control-group select {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
padding: 0.4rem 1rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
background: var(--vp-c-brand-dark);
|
||||
}
|
||||
|
||||
.visualization {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
.animated-element {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.neighbor-element {
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
background: var(--vp-c-text-3);
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.element-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stats-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.stat-value.good {
|
||||
color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.stat-value.bad {
|
||||
color: var(--vp-c-danger);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
+332
-19
@@ -1,13 +1,85 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<div class="macro-micro-task-demo">
|
||||
<div class="demo-header">
|
||||
<h4>{{ title }}</h4>
|
||||
<p class="hint">{{ description }}</p>
|
||||
<span class="icon">🔄</span>
|
||||
<span class="title">宏任务与微任务</span>
|
||||
<span class="subtitle">事件循环中的任务优先级</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
JavaScript 是单线程的，但可以通过<span class="highlight">任务队列</span>实现异步。就像餐厅只有一个厨师，但他可以同时处理多个订单：先做VIP订单（微任务），再做普通订单（宏任务）。
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-alert type="info" :closable="false">
|
||||
宏任务微任务演示组件占位符 - 待实现具体交互
|
||||
</el-alert>
|
||||
<div class="event-loop-flow">
|
||||
<div class="flow-container">
|
||||
<div class="flow-section main-thread">
|
||||
<div class="section-title">主线程（执行栈）</div>
|
||||
<div class="execution-box">
|
||||
<div class="exec-item" :class="{ active: currentStep === 'script' }">
|
||||
<span class="exec-label">同步代码</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-section task-queues">
|
||||
<div class="section-title">任务队列</div>
|
||||
<div class="queues-container">
|
||||
<div class="queue-box micro">
|
||||
<div class="queue-title">微任务队列（优先级高）</div>
|
||||
<div class="queue-items">
|
||||
<div
|
||||
v-for="task in microTasks"
|
||||
:key="task.id"
|
||||
class="queue-item"
|
||||
:class="{ active: task.isActive, processing: task.isProcessing }"
|
||||
>
|
||||
{{ task.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="queue-box macro">
|
||||
<div class="queue-title">宏任务队列（优先级低）</div>
|
||||
<div class="queue-items">
|
||||
<div
|
||||
v-for="task in macroTasks"
|
||||
:key="task.id"
|
||||
class="queue-item"
|
||||
:class="{ active: task.isActive, processing: task.isProcessing }"
|
||||
>
|
||||
{{ task.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-example">
|
||||
<div class="example-title">代码示例</div>
|
||||
<pre class="code-block"><code>console.log('1')
|
||||
|
||||
setTimeout(() => console.log('2'), 0) // 宏任务
|
||||
|
||||
Promise.resolve().then(() => console.log('3')) // 微任务
|
||||
|
||||
console.log('4')
|
||||
|
||||
<span class="code-comment">// 输出顺序：1 → 4 → 3 → 2</span></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="control-panel">
|
||||
<button class="run-btn" @click="runDemo">
|
||||
{{ isRunning ? '🔄 运行中...' : '▶️ 运行演示' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心要点：</strong>每次宏任务执行完后，会清空所有微任务，然后再执行下一个宏任务。这就是为什么 Promise.then() 比 setTimeout() 先执行。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,36 +87,277 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref('宏任务微任务演示')
|
||||
const description = ref('展示JavaScript事件循环中的宏任务和微任务执行顺序')
|
||||
const isRunning = ref(false)
|
||||
const currentStep = ref('script')
|
||||
|
||||
const microTasks = ref([
|
||||
{ id: 1, name: 'Promise.then()', isActive: false, isProcessing: false },
|
||||
{ id: 2, name: 'queueMicrotask()', isActive: false, isProcessing: false }
|
||||
])
|
||||
|
||||
const macroTasks = ref([
|
||||
{ id: 1, name: 'setTimeout()', isActive: false, isProcessing: false },
|
||||
{ id: 2, name: 'setInterval()', isActive: false, isProcessing: false },
|
||||
{ id: 3, name: 'I/O 操作', isActive: false, isProcessing: false }
|
||||
])
|
||||
|
||||
async function runDemo() {
|
||||
if (isRunning.value) return
|
||||
isRunning.value = true
|
||||
|
||||
// Reset
|
||||
microTasks.value.forEach(t => {
|
||||
t.isActive = false
|
||||
t.isProcessing = false
|
||||
})
|
||||
macroTasks.value.forEach(t => {
|
||||
t.isActive = false
|
||||
t.isProcessing = false
|
||||
})
|
||||
|
||||
// Step 1: Sync code
|
||||
currentStep.value = 'script'
|
||||
await sleep(800)
|
||||
|
||||
// Step 2: Process microtasks
|
||||
microTasks.value[0].isActive = true
|
||||
await sleep(500)
|
||||
microTasks.value[0].isActive = false
|
||||
microTasks.value[0].isProcessing = true
|
||||
await sleep(600)
|
||||
microTasks.value[0].isProcessing = false
|
||||
|
||||
microTasks.value[1].isActive = true
|
||||
await sleep(500)
|
||||
microTasks.value[1].isActive = false
|
||||
microTasks.value[1].isProcessing = true
|
||||
await sleep(600)
|
||||
microTasks.value[1].isProcessing = false
|
||||
|
||||
// Step 3: Process one macrotask
|
||||
macroTasks.value[0].isActive = true
|
||||
await sleep(500)
|
||||
macroTasks.value[0].isActive = false
|
||||
macroTasks.value[0].isProcessing = true
|
||||
await sleep(600)
|
||||
macroTasks.value[0].isProcessing = false
|
||||
|
||||
currentStep.value = ''
|
||||
isRunning.value = false
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
.macro-micro-task-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.event-loop-flow {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.flow-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.execution-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.exec-item {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.exec-item.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.queues-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.queue-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.queue-title {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.queue-box.micro .queue-title {
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.queue-box.macro .queue-title {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.queue-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.queue-item {
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--vp-c-text-2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.queue-item.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.queue-item.processing {
|
||||
background: var(--vp-c-success);
|
||||
color: white;
|
||||
border-color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.code-example {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-block code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.6;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.run-btn {
|
||||
padding: 0.5rem 1.5rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.run-btn:hover {
|
||||
background: var(--vp-c-brand-dark);
|
||||
}
|
||||
|
||||
.run-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
+301
-21
@@ -1,13 +1,57 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<div class="paint-layer-demo">
|
||||
<div class="demo-header">
|
||||
<h4>{{ title }}</h4>
|
||||
<p class="hint">{{ description }}</p>
|
||||
<span class="icon">🎨</span>
|
||||
<span class="title">绘制层优化</span>
|
||||
<span class="subtitle">浏览器如何通过分层提升性能</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-alert type="info" :closable="false">
|
||||
绘制层演示组件占位符 - 待实现具体交互
|
||||
</el-alert>
|
||||
<div class="layer-visualization">
|
||||
<div class="layers-container">
|
||||
<div
|
||||
v-for="(layer, index) in layers"
|
||||
:key="layer.id"
|
||||
class="layer"
|
||||
:class="{ active: layer.isActive, promoted: layer.isPromoted }"
|
||||
:style="{ zIndex: index }"
|
||||
>
|
||||
<div class="layer-header">
|
||||
<span class="layer-icon">{{ layer.icon }}</span>
|
||||
<span class="layer-name">{{ layer.name }}</span>
|
||||
<span v-if="layer.isPromoted" class="promoted-badge">GPU层</span>
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div v-if="layer.id === 'background'" class="background-box"></div>
|
||||
<div v-if="layer.id === 'card'" class="card-box">
|
||||
<div class="card-title">卡片</div>
|
||||
</div>
|
||||
<div v-if="layer.id === 'button'" class="button-box">按钮</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="properties-panel">
|
||||
<div class="panel-title">触发新层的 CSS 属性：</div>
|
||||
<div class="property-list">
|
||||
<div
|
||||
v-for="prop in promotedProperties"
|
||||
:key="prop.name"
|
||||
class="property-item"
|
||||
@mouseenter="highlightLayer(prop.layerId)"
|
||||
@mouseleave="clearHighlight"
|
||||
>
|
||||
<code class="property-code">{{ prop.code }}</code>
|
||||
<span class="property-desc">{{ prop.desc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心要点：</strong>浏览器把需要动画的元素提升到独立的 GPU 层，这样动画时只需要调整位置和透明度，不需要重绘。但不要滥用，每个层都会占用 GPU 内存。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,36 +59,272 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref('绘制层演示')
|
||||
const description = ref('展示浏览器渲染过程中的绘制层合成机制')
|
||||
const layers = ref([
|
||||
{
|
||||
id: 'background',
|
||||
name: '背景层',
|
||||
icon: '🖼️',
|
||||
isActive: false,
|
||||
isPromoted: false
|
||||
},
|
||||
{
|
||||
id: 'card',
|
||||
name: '内容层',
|
||||
icon: '📄',
|
||||
isActive: false,
|
||||
isPromoted: false
|
||||
},
|
||||
{
|
||||
id: 'button',
|
||||
name: '动画层',
|
||||
icon: '✨',
|
||||
isActive: false,
|
||||
isPromoted: true
|
||||
}
|
||||
])
|
||||
|
||||
const promotedProperties = [
|
||||
{
|
||||
name: '3D变换',
|
||||
code: 'transform: translate3d(0,0,0)',
|
||||
desc: '任何3D变换都会创建新层',
|
||||
layerId: 'button'
|
||||
},
|
||||
{
|
||||
name: '透明度动画',
|
||||
code: 'opacity',
|
||||
desc: '配合transition使用时',
|
||||
layerId: 'button'
|
||||
},
|
||||
{
|
||||
name: '固定定位',
|
||||
code: 'position: fixed',
|
||||
desc: '固定定位元素需要独立层',
|
||||
layerId: 'button'
|
||||
},
|
||||
{
|
||||
name: 'Will-change',
|
||||
code: 'will-change: transform',
|
||||
desc: '显式提示浏览器创建层',
|
||||
layerId: 'button'
|
||||
}
|
||||
]
|
||||
|
||||
function highlightLayer(layerId) {
|
||||
layers.value.forEach(layer => {
|
||||
layer.isActive = layer.id === layerId
|
||||
})
|
||||
}
|
||||
|
||||
function clearHighlight() {
|
||||
layers.value.forEach(layer => {
|
||||
layer.isActive = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
.paint-layer-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--vp-c-text-1);
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
.layer-visualization {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.layers-container {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: absolute;
|
||||
width: calc(100% - 2rem);
|
||||
height: calc(100% - 2rem);
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.layer:nth-child(1) {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.layer:nth-child(2) {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
|
||||
.layer:nth-child(3) {
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
|
||||
.layer.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.2);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.layer.promoted {
|
||||
border-color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.layer-header {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.layer-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.layer-name {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.promoted-badge {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
background: var(--vp-c-success);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.layer-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.background-box {
|
||||
width: 80%;
|
||||
height: 60%;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button-box {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.properties-panel {
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.property-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.property-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.property-item:hover {
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.property-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 3px;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.property-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
+269
-21
@@ -1,50 +1,298 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<div class="rendering-performance-demo">
|
||||
<div class="demo-header">
|
||||
<h4>{{ title }}</h4>
|
||||
<p class="hint">{{ description }}</p>
|
||||
<span class="icon">⚡</span>
|
||||
<span class="title">渲染性能优化</span>
|
||||
<span class="subtitle">让页面丝滑流畅的秘诀</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
渲染性能优化的目标是<span class="highlight">每秒60帧</span>（16.67ms/帧）。就像拍电影，每秒帧数越多，画面越流畅。超过这个时间，用户就会感觉卡顿。
|
||||
</div>
|
||||
|
||||
<div class="demo-content">
|
||||
<el-alert type="info" :closable="false">
|
||||
渲染性能演示组件占位符 - 待实现具体交互
|
||||
</el-alert>
|
||||
<div class="performance-comparison">
|
||||
<div class="comparison-section">
|
||||
<div class="section-title">❌ 不好的做法</div>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="code-comment">// 触发重排和重绘</span>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-keyword">function</span> <span class="code-func">animate</span>() {
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-indent"></span>element.style.width = <span class="code-string">'100px'</span>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-indent"></span>element.style.height = <span class="code-string">'100px'</span>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-indent"></span><span class="code-func">requestAnimationFrame</span>(animate)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="performance-meter bad">
|
||||
<div class="meter-label">性能开销</div>
|
||||
<div class="meter-bar">
|
||||
<div class="meter-fill bad-fill" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">VS</div>
|
||||
|
||||
<div class="comparison-section">
|
||||
<div class="section-title good">✅ 优化做法</div>
|
||||
<div class="code-block">
|
||||
<div class="code-line">
|
||||
<span class="code-comment">/* 只触发合成 */</span>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-keyword">function</span> <span class="code-func">animate</span>() {
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-indent"></span>element.style.transform = <span class="code-string">'translate3d(0,0,0)'</span>
|
||||
</div>
|
||||
<div class="code-line">
|
||||
<span class="code-indent"></span><span class="code-func">requestAnimationFrame</span>(animate)
|
||||
</div>
|
||||
<div class="code-line">
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="performance-meter good">
|
||||
<div class="meter-label">性能开销</div>
|
||||
<div class="meter-bar">
|
||||
<div class="meter-fill good-fill" style="width: 15%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="optimization-tips">
|
||||
<div class="tips-title">黄金法则：</div>
|
||||
<div class="tips-list">
|
||||
<div class="tip-item">
|
||||
<span class="tip-icon">1️⃣</span>
|
||||
<span class="tip-text">优先使用 <code>transform</code> 和 <code>opacity</code> 做动画</span>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<span class="tip-icon">2️⃣</span>
|
||||
<span class="tip-text">避免频繁读取布局属性（如 offsetWidth）</span>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<span class="tip-icon">3️⃣</span>
|
||||
<span class="tip-text">使用 <code>will-change</code> 提前告知浏览器</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心要点：</strong>渲染路径越长，性能越差。最佳路径是：合成（Composite）> 重绘（Paint）> 布局（Layout）> 样式计算（Style）。尽量让动画停留在"合成"阶段，在 GPU 上完成。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const title = ref('渲染性能演示')
|
||||
const description = ref('展示浏览器渲染性能优化技巧和最佳实践')
|
||||
// No reactive state needed for this demo
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
.rendering-performance-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.hint {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.performance-comparison {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comparison-section {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title.good {
|
||||
color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.code-line {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.code-keyword {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-func {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.code-string {
|
||||
color: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.code-indent {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.performance-meter {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.meter-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.meter-bar {
|
||||
height: 8px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meter-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.bad-fill {
|
||||
background: var(--vp-c-danger);
|
||||
}
|
||||
|
||||
.good-fill {
|
||||
background: var(--vp-c-success);
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.9rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.optimization-tips {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tip-text code {
|
||||
padding: 0.1rem 0.3rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
+189
-301
@@ -1,80 +1,53 @@
|
||||
<template>
|
||||
<div class="demo-container">
|
||||
<h4>浏览器渲染管线全景图</h4>
|
||||
<p class="demo-description">点击每个阶段查看详情，观察数据如何在管线中流动</p>
|
||||
<div class="rendering-pipeline-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🏭</span>
|
||||
<span class="title">渲染管线</span>
|
||||
<span class="subtitle">从代码到像素的五步旅程</span>
|
||||
</div>
|
||||
|
||||
<div class="pipeline-container">
|
||||
<div class="pipeline-flow">
|
||||
<div
|
||||
v-for="(stage, index) in stages"
|
||||
:key="stage.id"
|
||||
class="stage-card"
|
||||
:class="{
|
||||
active: activeStage === index,
|
||||
completed: activeStage > index,
|
||||
pending: activeStage < index
|
||||
}"
|
||||
@click="selectStage(index)"
|
||||
>
|
||||
<div class="stage-icon">{{ stage.icon }}</div>
|
||||
<div class="stage-name">{{ stage.name }}</div>
|
||||
<div class="stage-time">{{ stage.time }}</div>
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
想象你在<span class="highlight">印刷厂</span>工作：稿件要排版、印刷、装订，最后才能变成书本。浏览器渲染网页也一样，HTML 和 CSS 要经过一道道"工序"，才能变成屏幕上的画面。
|
||||
</div>
|
||||
|
||||
<div class="flow-arrows">
|
||||
<div v-for="i in stages.length - 1" :key="i" class="flow-arrow">
|
||||
<span class="arrow-line"></span>
|
||||
<span class="arrow-head">▶</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pipeline">
|
||||
<div
|
||||
v-for="(stage, i) in stages"
|
||||
:key="stage.id"
|
||||
class="stage"
|
||||
:class="{ active: activeStage === stage.id }"
|
||||
@click="activeStage = activeStage === stage.id ? null : stage.id"
|
||||
>
|
||||
<div class="stage-icon">{{ stage.icon }}</div>
|
||||
<div class="stage-name">{{ stage.name }}</div>
|
||||
<div class="stage-simple">{{ stage.simple }}</div>
|
||||
<div v-if="i < stages.length - 1" class="arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-detail" v-if="activeStage >= 0">
|
||||
<Transition name="fade">
|
||||
<div v-if="activeStage" class="stage-detail">
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ stages[activeStage].icon }}</span>
|
||||
<span class="detail-title">{{ stages[activeStage].name }}</span>
|
||||
<span class="detail-icon">{{ currentStage?.icon }}</span>
|
||||
<span class="detail-title">{{ currentStage?.name }}</span>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<p>{{ stages[activeStage].description }}</p>
|
||||
<div class="detail-meta">
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">输入:</span>
|
||||
<span class="meta-value">{{ stages[activeStage].input }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">输出:</span>
|
||||
<span class="meta-value">{{ stages[activeStage].output }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="meta-label">耗时:</span>
|
||||
<span class="meta-value">{{ stages[activeStage].time }}</span>
|
||||
</div>
|
||||
<p class="detail-desc">{{ currentStage?.detailDesc }}</p>
|
||||
<div class="detail-example">
|
||||
<div class="example-label">🌰 举个例子：</div>
|
||||
<div class="example-content">{{ currentStage?.example }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<div v-if="!activeStage" class="hint-text">
|
||||
👆 点击上方任意阶段，查看详细解释
|
||||
</div>
|
||||
|
||||
<div class="simulation-controls">
|
||||
<el-button type="primary" @click="startSimulation" :disabled="isSimulating">
|
||||
{{ isSimulating ? '模拟中...' : '开始模拟' }}
|
||||
</el-button>
|
||||
<el-button @click="resetSimulation">重置</el-button>
|
||||
<el-slider v-model="simulationSpeed" :min="1" :max="5" :step="1" style="width: 150px;" />
|
||||
</div>
|
||||
|
||||
<div class="pipeline-stats" v-if="showStats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ totalTime }}ms</div>
|
||||
<div class="stat-label">总耗时</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ bottleneckStage }}</div>
|
||||
<div class="stat-label">瓶颈阶段</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ optimizationTip }}</div>
|
||||
<div class="stat-label">优化建议</div>
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>每个阶段各司其职，前面的阶段为后面阶段准备数据。理解这个流程，你就能知道什么时候用什么方式修改页面，才能避免性能问题。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -82,322 +55,237 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const stages = [
|
||||
const activeStage = ref(null)
|
||||
|
||||
const stages = ref([
|
||||
{
|
||||
id: 'html',
|
||||
icon: '📄',
|
||||
name: 'HTML解析',
|
||||
time: '15ms',
|
||||
description: '浏览器接收HTML字节流，进行词法分析和语法分析，构建DOM树。这是渲染管线的起点。',
|
||||
input: 'HTML字节流',
|
||||
output: 'DOM树'
|
||||
id: 1,
|
||||
icon: '🌲',
|
||||
name: '构建DOM/CSSOM',
|
||||
simple: '解析代码',
|
||||
detailDesc: '浏览器把 HTML 标签解析成 DOM 树（骨架），把 CSS 解析成 CSSOM 树（样式）。这两个树是并行构建的，但 CSS 会阻塞渲染，因为浏览器必须知道样式才能正确显示页面。',
|
||||
example: '浏览器读到 <div class="container">，会在 DOM 树中创建一个 div 节点；读到 .container { width: 100px }，会在 CSSOM 树中记录这个样式规则。'
|
||||
},
|
||||
{
|
||||
id: 'css',
|
||||
id: 2,
|
||||
icon: '🎨',
|
||||
name: 'CSS解析',
|
||||
time: '12ms',
|
||||
description: '解析CSS样式表，处理选择器优先级，构建CSSOM树。CSSOM与DOM是并行构建的。',
|
||||
input: 'CSS字节流',
|
||||
output: 'CSSOM树'
|
||||
},
|
||||
{
|
||||
id: 'render',
|
||||
icon: '🌳',
|
||||
name: '构建渲染树',
|
||||
time: '8ms',
|
||||
description: '将DOM树和CSSOM树合并，生成渲染树。只包含可见节点，并计算每个节点的样式。',
|
||||
input: 'DOM + CSSOM',
|
||||
output: '渲染树'
|
||||
simple: '合并筛选',
|
||||
detailDesc: '把 DOM 树和 CSSOM 树合并，生成渲染树。只包含真正会显示在页面上的元素（不包括 head、script、display:none 的元素等）。',
|
||||
example: '就像从完整的建筑图纸中抠出"看得见的部分"，去掉墙里的电线、管道，只保留墙面和家具。这样后续的计算会更高效。'
|
||||
},
|
||||
{
|
||||
id: 'layout',
|
||||
id: 3,
|
||||
icon: '📐',
|
||||
name: '布局 (Reflow)',
|
||||
time: '25ms',
|
||||
description: '计算每个节点在视口中的精确位置和大小。这是最耗时的阶段之一，牵一发而动全身。',
|
||||
input: '渲染树',
|
||||
output: '几何信息'
|
||||
name: '布局',
|
||||
simple: '计算位置',
|
||||
detailDesc: '计算每个元素在屏幕上的精确位置和大小（几何信息）。这是最昂贵的操作之一，因为改一个元素可能影响其他元素的位置（"牵一发而动全身"）。',
|
||||
example: '浏览器算出："这个 div 在距离顶部 100px 的地方，宽度 200px，高度 50px"。如果改了这个 div 的宽度，它的子元素、兄弟元素的位置都要重新计算。'
|
||||
},
|
||||
{
|
||||
id: 'paint',
|
||||
id: 4,
|
||||
icon: '✏️',
|
||||
name: '绘制 (Paint)',
|
||||
time: '18ms',
|
||||
description: '将每个节点转换为屏幕上的实际像素。包括文本、颜色、图像、边框等视觉内容。',
|
||||
input: '几何信息',
|
||||
output: '绘制记录'
|
||||
name: '绘制',
|
||||
simple: '填充颜色',
|
||||
detailDesc: '把"计算好位置"的元素真正"画"成像素。包括填充背景色、绘制文字、绘制边框等。只改变外观（如 color、background-color）会触发重绘，成本比重排低。',
|
||||
example: '就像给家具上漆：改家具颜色只需要重新上漆（重绘），但改家具位置需要重新摆放所有家具（重排）。'
|
||||
},
|
||||
{
|
||||
id: 'composite',
|
||||
id: 5,
|
||||
icon: '🔮',
|
||||
name: '合成 (Composite)',
|
||||
time: '5ms',
|
||||
description: '将多个图层按照正确的层级顺序合并为最终图像。利用GPU加速，是现代浏览器的优化重点。',
|
||||
input: '绘制记录',
|
||||
output: '屏幕像素'
|
||||
name: '合成',
|
||||
simple: '合并图层',
|
||||
detailDesc: '现代浏览器的终极武器。把多个绘制层（Layer）按照正确的顺序合并成最终画面。利用 GPU 并行处理，性能极佳。transform 和 opacity 动画只触发这一步。',
|
||||
example: '就像 Photoshop 的图层：每个图层单独画，最后合并在一起。某些元素（如动画）会被提升到独立层，变化时只需要调整位置和透明度，不需要重绘。'
|
||||
}
|
||||
]
|
||||
])
|
||||
|
||||
const activeStage = ref(0)
|
||||
const isSimulating = ref(false)
|
||||
const simulationSpeed = ref(3)
|
||||
const showStats = ref(false)
|
||||
|
||||
const totalTime = computed(() => {
|
||||
return stages.reduce((sum, stage) => sum + parseInt(stage.time), 0)
|
||||
const currentStage = computed(() => {
|
||||
return stages.value.find(s => s.id === activeStage.value)
|
||||
})
|
||||
|
||||
const bottleneckStage = computed(() => '布局阶段')
|
||||
const optimizationTip = computed(() => '减少DOM操作')
|
||||
|
||||
function selectStage(index) {
|
||||
activeStage.value = index
|
||||
}
|
||||
|
||||
function startSimulation() {
|
||||
isSimulating.value = true
|
||||
showStats.value = true
|
||||
activeStage.value = 0
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (activeStage.value < stages.length - 1) {
|
||||
activeStage.value++
|
||||
} else {
|
||||
clearInterval(interval)
|
||||
isSimulating.value = false
|
||||
}
|
||||
}, (6 - simulationSpeed.value) * 800)
|
||||
}
|
||||
|
||||
function resetSimulation() {
|
||||
isSimulating.value = false
|
||||
activeStage.value = 0
|
||||
showStats.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
.rendering-pipeline-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px 0;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.demo-description {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pipeline-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pipeline-flow {
|
||||
.demo-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .icon { font-size: 1.25rem; }
|
||||
.demo-header .title { font-weight: bold; font-size: 1rem; }
|
||||
.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pipeline {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
padding: 12px 8px;
|
||||
border: 2px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: white;
|
||||
.stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
border-color: #409eff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
||||
.stage:hover {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.stage-card.active {
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.stage-card.completed {
|
||||
border-color: #67c23a;
|
||||
background: #f0f9eb;
|
||||
.stage.active {
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-brand);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.stage:hover .stage-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.stage-name {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 2px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.stage-time {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
.stage-simple {
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-top: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.flow-arrows {
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50px;
|
||||
right: 50px;
|
||||
height: 2px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
right: -12px;
|
||||
top: 20px;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.arrow-line {
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background: #dcdfe6;
|
||||
}
|
||||
|
||||
.arrow-head {
|
||||
margin-left: -5px;
|
||||
.hint-text {
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.stage-detail {
|
||||
background: #f5f7fa;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
padding: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
font-size: 20px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
.detail-desc {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-content p {
|
||||
margin: 0 0 12px 0;
|
||||
.detail-example {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #409eff;
|
||||
.example-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.simulation-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
.example-content {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pipeline-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #409eff;
|
||||
margin-bottom: 4px;
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pipeline-flow {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.flow-arrows {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
.info-box .icon { margin-right: 0.25rem; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user