{{ active.template }}
-
| {{ strategy.name }} | +||||||||||
| + {{ strategy.name }} + | {{ strategy.speed }} | {{ strategy.updateDifficulty }} | {{ strategy.useCase }} | @@ -148,10 +168,34 @@ const strategies = [ url: 'https://example.com/', pageTitle: '页面加载缓慢', resources: [ - { icon: '📄', name: 'index.html', size: '5 KB', time: '200ms', cached: false }, - { icon: '🎨', name: 'style.css', size: '50 KB', time: '300ms', cached: false }, - { icon: '⚙️', name: 'app.js', size: '200 KB', time: '800ms', cached: false }, - { icon: '🖼️', name: 'image.jpg', size: '150 KB', time: '500ms', cached: false } + { + icon: '📄', + name: 'index.html', + size: '5 KB', + time: '200ms', + cached: false + }, + { + icon: '🎨', + name: 'style.css', + size: '50 KB', + time: '300ms', + cached: false + }, + { + icon: '⚙️', + name: 'app.js', + size: '200 KB', + time: '800ms', + cached: false + }, + { + icon: '🖼️', + name: 'image.jpg', + size: '150 KB', + time: '500ms', + cached: false + } ], loadTime: '1.8s', performanceClass: 'poor', @@ -160,7 +204,8 @@ const strategies = [ cacheHit: 0, requests: 4, requestDesc: '所有资源都从网络下载', - description: '不使用任何缓存，每次访问都要重新下载所有资源。速度最慢，但内容总是最新的。', + description: + '不使用任何缓存，每次访问都要重新下载所有资源。速度最慢，但内容总是最新的。', code: '# 禁用缓存\nCache-Control: no-cache', speed: '慢', updateDifficulty: '容易', @@ -172,10 +217,34 @@ const strategies = [ url: 'https://example.com/', pageTitle: '页面加载较快', resources: [ - { icon: '📄', name: 'index.html', size: '5 KB', time: '50ms', cached: true }, - { icon: '🎨', name: 'style.css', size: '50 KB', time: '30ms', cached: true }, - { icon: '⚙️', name: 'app.js', size: '200 KB', time: '20ms', cached: true }, - { icon: '🖼️', name: 'image.jpg', size: '150 KB', time: '25ms', cached: true } + { + icon: '📄', + name: 'index.html', + size: '5 KB', + time: '50ms', + cached: true + }, + { + icon: '🎨', + name: 'style.css', + size: '50 KB', + time: '30ms', + cached: true + }, + { + icon: '⚙️', + name: 'app.js', + size: '200 KB', + time: '20ms', + cached: true + }, + { + icon: '🖼️', + name: 'image.jpg', + size: '150 KB', + time: '25ms', + cached: true + } ], loadTime: '125ms', performanceClass: 'good', @@ -184,7 +253,8 @@ const strategies = [ cacheHit: 100, requests: 0, requestDesc: '所有资源都来自缓存', - description: '设置固定的过期时间（如 1 年）。速度极快，但更新内容需要用户清除缓存或强制刷新。', + description: + '设置固定的过期时间（如 1 年）。速度极快，但更新内容需要用户清除缓存或强制刷新。', code: '# Nginx 配置\nlocation ~* \\.(js|css|jpg|png)$ {\n expires: 1y;\n add_header: Cache-Control: public;\n}', speed: '极快', updateDifficulty: '困难', @@ -196,10 +266,34 @@ const strategies = [ url: 'https://example.com/', pageTitle: '页面加载快', resources: [ - { icon: '📄', name: 'index.html', size: '5 KB', time: '50ms', cached: true }, - { icon: '🎨', name: 'style.css', size: '50 KB', time: '30ms', cached: true }, - { icon: '⚙️', name: 'app.js', size: '200 KB', time: '350ms', cached: false }, - { icon: '🖼️', name: 'image.jpg', size: '150 KB', time: '25ms', cached: true } + { + icon: '📄', + name: 'index.html', + size: '5 KB', + time: '50ms', + cached: true + }, + { + icon: '🎨', + name: 'style.css', + size: '50 KB', + time: '30ms', + cached: true + }, + { + icon: '⚙️', + name: 'app.js', + size: '200 KB', + time: '350ms', + cached: false + }, + { + icon: '🖼️', + name: 'image.jpg', + size: '150 KB', + time: '25ms', + cached: true + } ], loadTime: '455ms', performanceClass: 'medium', @@ -208,7 +302,8 @@ const strategies = [ cacheHit: 75, requests: 1, requestDesc: '仅下载已更新的资源', - description: '使用 ETag 或 Last-Modified 进行验证。资源未改变时返回 304，资源改变时下载新内容。', + description: + '使用 ETag 或 Last-Modified 进行验证。资源未改变时返回 304，资源改变时下载新内容。', code: '# Nginx 配置\nlocation / {\n etag on;\n add_header Cache-Control: must-revalidate;\n}', speed: '快', updateDifficulty: '容易', @@ -220,10 +315,28 @@ const strategies = [ url: 'https://example.com/', pageTitle: '页面极速加载', resources: [ - { icon: '📄', name: 'index.html', size: '5 KB', time: '10ms', cached: true }, - { icon: '🎨', name: 'style.css', size: '50 KB', time: '5ms', cached: true }, + { + icon: '📄', + name: 'index.html', + size: '5 KB', + time: '10ms', + cached: true + }, + { + icon: '🎨', + name: 'style.css', + size: '50 KB', + time: '5ms', + cached: true + }, { icon: '⚙️', name: 'app.js', size: '200 KB', time: '5ms', cached: true }, - { icon: '🖼️', name: 'image.jpg', size: '150 KB', time: '5ms', cached: true } + { + icon: '🖼️', + name: 'image.jpg', + size: '150 KB', + time: '5ms', + cached: true + } ], loadTime: '25ms', performanceClass: 'excellent', @@ -232,8 +345,9 @@ const strategies = [ cacheHit: 100, requests: 0, requestDesc: '完全离线可用', - description: 'Service Worker 拦截网络请求，从缓存中返回资源。可实现离线访问和即时加载。', - code: '// 注册 Service Worker\nif (\'serviceWorker\' in navigator) {\n navigator.serviceWorker.register(\'/sw.js\');\n}\n\n// sw.js\ncaches.open(\'v1\').then(cache => {\n cache.addAll([\'/\', \'/style.css\', \'/app.js\']);\n});', + description: + 'Service Worker 拦截网络请求，从缓存中返回资源。可实现离线访问和即时加载。', + code: "// 注册 Service Worker\nif ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/sw.js');\n}\n\n// sw.js\ncaches.open('v1').then(cache => {\n cache.addAll(['/', '/style.css', '/app.js']);\n});", speed: '极快', updateDifficulty: '中等', useCase: 'PWA 应用和关键资源' @@ -416,7 +530,9 @@ onMounted(() => { } @keyframes spin { - to { transform: rotate(360deg); } + to { + transform: rotate(360deg); + } } .loading-text { diff --git a/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue index 416412b..501c2a9 100644 --- a/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue +++ b/docs/.vitepress/theme/components/appendix/frontend-performance/CriticalRenderingPathDemo.vue @@ -6,7 +6,9 @@|||||||
| {{ format.name }} | ++ {{ format.name }} + | {{ format.sizeLevel }} | {{ format.qualityLevel }} | {{ format.transparency ? '✓' : '✗' }} | {{ format.animation ? '✓' : '✗' }} |
-
{{ '★'.repeat(Math.round(format.rating)) }}{{ '☆'.repeat(5 - Math.round(format.rating)) }}
+
+ {{ '★'.repeat(Math.round(format.rating))
+ }}{{ '☆'.repeat(5 - Math.round(format.rating)) }}
+
|