412 lines
24 KiB
HTML
412 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>中断实时性增强技术 - 隼瞻科技解决方案</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#165DFF', /* 隼瞻科技蓝 */
|
|
secondary: '#36CFC9', /* 辅助青色 */
|
|
accent: '#F7BA1E', /* 强调色 */
|
|
dark: '#111827', /* 统一底色 */
|
|
darker: '#0b1220',
|
|
'dark-card': '#1f2937',
|
|
'dark-text': '#94A3B8',
|
|
'code-bg': '#1e1e1e',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
|
mono: ['Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
|
|
},
|
|
boxShadow: {
|
|
'glow': '0 0 20px rgba(22, 93, 255, 0.3)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.glass-panel {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
box-shadow: 0 8px 32px -4px rgba(59, 130, 246, 0.1);
|
|
}
|
|
.glass-panel-light {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 1);
|
|
box-shadow: 0 4px 16px -2px rgba(59, 130, 246, 0.05);
|
|
}
|
|
.text-gradient {
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.section-padding {
|
|
@apply py-16 md:py-24;
|
|
}
|
|
.card-hover {
|
|
@apply transition-all duration-300 hover:translate-y-[-5px] hover:shadow-lg hover:shadow-primary/20;
|
|
}
|
|
/* 模拟代码高亮颜色 */
|
|
.token-keyword { color: #8e24aa; }
|
|
.token-reg { color: #0288d1; }
|
|
.token-val { color: #388e3c; }
|
|
.token-comment { color: #689f38; }
|
|
.token-instr { color: #1565c0; font-weight: bold; }
|
|
}
|
|
</style>
|
|
<style>
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
/* WordPress 兼容性样式 - 确保字体颜色不被覆盖 */
|
|
#wingsemi-interrupt-page,
|
|
#wingsemi-interrupt-page * {
|
|
color: inherit;
|
|
}
|
|
|
|
#wingsemi-interrupt-page { background-color: transparent !important; color: #1e293b !important; }
|
|
|
|
|
|
|
|
|
|
|
|
#wingsemi-interrupt-page .text-slate-500 font-bold {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-slate-500 font-medium {
|
|
color: #6b7280 !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-primary {
|
|
color: #165DFF !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page .text-secondary {
|
|
color: #36CFC9 !important;
|
|
}
|
|
|
|
#wingsemi-interrupt-page h1, #wingsemi-interrupt-page h2, #wingsemi-interrupt-page h3, #wingsemi-interrupt-page h4, #wingsemi-interrupt-page h5, #wingsemi-interrupt-page h6 { color: #1e293b !important; }
|
|
|
|
#wingsemi-interrupt-page p {
|
|
color: inherit !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800 font-sans antialiased">
|
|
<!-- 固定在背景的全局毛玻璃淡蓝光晕 -->
|
|
<div class="fixed inset-0 z-0 pointer-events-none bg-slate-50">
|
|
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] rounded-full bg-blue-200/50 blur-[100px]"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-sky-200/40 blur-[100px]"></div>
|
|
<div class="absolute top-[40%] right-[10%] w-[30%] h-[30%] rounded-full bg-indigo-100/60 blur-[80px]"></div>
|
|
<div class="absolute bottom-[20%] left-[20%] w-[30%] h-[30%] rounded-full bg-blue-100/50 blur-[80px]"></div>
|
|
</div>
|
|
<div id="wingsemi-interrupt-page" class="relative z-10">
|
|
<!-- 1. 头部 Banner -->
|
|
<section class="relative overflow-hidden pt-20 pb-24 md:pt-32 md:pb-40">
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-64 bg-primary/10 blur-[120px] rounded-full pointer-events-none"></div>
|
|
<!-- 科技感背景网格 -->
|
|
|
|
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<div class="inline-block px-3 py-1 mb-6 rounded-full bg-primary/20 border border-primary/40 text-primary text-sm font-medium">
|
|
WingSemi Technology 隼瞻科技
|
|
</div>
|
|
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6">
|
|
中断实时性<span class="text-gradient bg-gradient-to-r from-primary to-secondary">增强技术</span>
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-slate-600 font-medium mb-10 max-w-2xl mx-auto leading-relaxed">
|
|
通过自定义指令集优化压栈出栈，并行处理上下文切换，打破传统 RISC-V 中断响应瓶颈，实现微秒级确定性响应。
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a href="#cycle-comparison" class="px-8 py-3 bg-primary hover:bg-primary/90 text-slate-800 font-bold rounded-lg transition-all shadow-glow flex items-center gap-2 cursor-pointer">
|
|
<i class="fa fa-flash"></i> 查看性能对比
|
|
</a>
|
|
<a href="#instruction-optimization" class="px-8 py-3 bg-white/5 border border-slate-200 hover:bg-white/10 text-slate-800 font-medium rounded-lg transition-all cursor-pointer">
|
|
了解指令集优化
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 2. 核心技术：指令集优化 (对应图片1上半部分) -->
|
|
<section id="instruction-optimization" class="section-padding relative z-10">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">指令级优化</h2>
|
|
<p class="text-slate-600 font-medium text-lg">通过增强指令优化压栈和出栈，大幅加速中断响应速度</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-8 items-center max-w-7xl mx-auto" style="grid-template-columns: 1fr auto 1fr;">
|
|
<!-- 左侧：传统方式 -->
|
|
<div class="glass-panel-light border border-white rounded-xl border border-slate-200 overflow-hidden relative group">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-slate-200"></div>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-slate-500 font-bold">常规 RISC-V 处理</h3>
|
|
<span class="text-xs bg-slate-100 px-2 py-1 rounded">由于指令多，周期长</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 p-4 rounded-lg font-mono text-sm leading-relaxed border border-slate-200">
|
|
<div class="flex gap-4">
|
|
<div class="text-slate-500 font-medium select-none text-right">
|
|
1<br>2<br>3<br>4<br>5
|
|
</div>
|
|
<div>
|
|
<span class="token-instr">csrr</span> <span class="token-reg">a0</span>, <span class="token-val">mcause</span> <span class="token-instr">sw</span> <span class="token-reg">a0</span>, 4*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">csrr</span> <span class="token-reg">a1</span>, <span class="token-val">mstatus</span> <span class="token-instr">sw</span> <span class="token-reg">a1</span>, 3*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">csrr</span> <span class="token-reg">a2</span>, <span class="token-val">mtval</span> <span class="token-instr">sw</span> <span class="token-reg">a2</span>, 2*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">csrr</span> <span class="token-reg">a3</span>, <span class="token-val">mepc</span> <span class="token-instr">sw</span> <span class="token-reg">a3</span>, 1*4(<span class="token-reg">sp</span>)<br>
|
|
<span class="token-instr">addi</span> <span class="token-reg">sp</span>, <span class="token-reg">sp</span>, <span class="token-val">-5*4</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中间箭头 (在移动端隐藏) -->
|
|
<div class="hidden lg:flex justify-center items-center text-primary text-4xl animate-pulse px-6">
|
|
<i class="fa fa-long-arrow-right"></i>
|
|
</div>
|
|
|
|
<!-- 右侧：隼瞻优化 -->
|
|
<div class="glass-panel-light border border-white rounded-xl border border-primary/50 overflow-hidden relative shadow-glow">
|
|
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-primary to-secondary"></div>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-slate-800">隼瞻增强技术</h3>
|
|
<span class="text-xs bg-primary/20 text-primary px-2 py-1 rounded border border-primary/20">减少5条指令</span>
|
|
</div>
|
|
<div class="bg-slate-50 border border-slate-200 p-4 rounded-lg font-mono text-sm leading-relaxed border border-primary/20 relative">
|
|
<!-- 绿色云朵标签模拟 -->
|
|
<div class="absolute -right-2 -top-2 bg-green-600/90 text-slate-800 text-xs px-2 py-1 rounded-bl-lg shadow-lg z-10 transform rotate-2">
|
|
效率提升
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="text-slate-500 font-medium select-none text-right">
|
|
1<br>2<br>3<br>4
|
|
</div>
|
|
<div>
|
|
<span class="token-instr font-bold text-secondary">csr.push</span> <span class="token-val">mcause</span>, -16<br>
|
|
<span class="token-instr font-bold text-secondary">csr.push</span> <span class="token-val">mstatus</span>, -12<br>
|
|
<span class="token-instr font-bold text-secondary">csr.push</span> <span class="token-val">mtval</span>, -8<br>
|
|
<span class="token-instr font-bold text-secondary">csr.push</span> <span class="token-val">mepc</span>, -4
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. 工作原理与 Cycle 对比 (对应图片1下半部分) -->
|
|
<section id="cycle-comparison" class="section-padding relative z-10 relative">
|
|
<div class="container mx-auto px-4">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">并行处理与硬件加速</h2>
|
|
<p class="text-center text-slate-600 font-medium max-w-3xl mx-auto">
|
|
在嵌套中断服务中，通过<span class="text-primary font-bold">优化中断采样逻辑</span>、<span class="text-primary font-bold">优化中断接入逻辑</span>，并创造性地实现<span class="text-secondary font-bold">并行处理上下文切换</span>。
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 流程对比图表 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
|
|
<!-- 左侧：流程步骤对比 -->
|
|
<div class="space-y-8">
|
|
<div>
|
|
<h4 class="text-slate-600 font-medium mb-3 text-sm uppercase tracking-wider">常规中断处理步骤</h4>
|
|
<div class="flex w-full text-xs md:text-sm text-center">
|
|
<div class="bg-slate-100 py-3 px-1 w-1/3 rounded-l-lg border-r border-slate-200">中断发起<br>跳转时间</div>
|
|
<div class="bg-slate-100 py-3 px-1 w-1/3 border-r border-slate-200">中断处理<br>时间</div>
|
|
<div class="bg-slate-100 py-3 px-1 w-1/3 rounded-r-lg">上下文切换<br>时间</div>
|
|
</div>
|
|
<div class="text-center mt-2 text-xs text-slate-500 font-medium">串行执行，耗时累加</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-primary mb-3 text-sm uppercase tracking-wider font-bold">隼瞻增强技术步骤</h4>
|
|
<div class="relative pt-6">
|
|
<!-- 连接线 -->
|
|
<div class="flex w-full text-xs md:text-sm text-center relative z-10">
|
|
<div class="bg-primary/80 py-3 px-1 w-1/2 rounded-l-lg border-r border-blue-500/50 text-slate-800">中断发起<br>跳转时间</div>
|
|
<div class="bg-primary/80 py-3 px-1 w-1/2 rounded-r-lg text-slate-800">向量中断、缩短<br>接入服务时间</div>
|
|
</div>
|
|
<!-- 并行块 -->
|
|
<div class="absolute top-0 mt-8 right-0 w-1/2 h-full -z-0">
|
|
<div class="absolute top-16 left-4 right-4 bg-secondary/20 border border-secondary/50 text-secondary py-2 rounded text-xs text-center">
|
|
<i class="fa fa-random mr-1"></i> 并行处理上下文切换
|
|
</div>
|
|
<!-- 箭头示意并行 -->
|
|
<div class="absolute top-[3.5rem] left-1/2 -translate-x-1/2 h-6 w-0.5 bg-secondary/50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：Cycle 数对比柱状图 -->
|
|
<div class="glass-panel-light border border-white p-6 rounded-xl border border-slate-200 flex flex-col justify-center">
|
|
<h3 class="text-xl font-bold mb-6">进入中断所需 Cycle 数对比</h3>
|
|
|
|
<div class="space-y-6">
|
|
<!-- 常规 -->
|
|
<div>
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="text-slate-500 font-bold">常规中断处理</span>
|
|
<span class="font-mono font-bold">26 Cycles</span>
|
|
</div>
|
|
<div class="w-full bg-slate-100 rounded-full h-4 overflow-hidden">
|
|
<div class="bg-slate-300 h-full rounded-full" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 隼瞻 -->
|
|
<div class="relative">
|
|
<div class="flex justify-between text-sm mb-2">
|
|
<span class="text-slate-800 font-bold">隼瞻实时性增强技术</span>
|
|
<span class="font-mono font-bold text-primary">12 Cycles</span>
|
|
</div>
|
|
<div class="w-full bg-slate-100 rounded-full h-4 overflow-hidden">
|
|
<div class="bg-gradient-to-r from-primary to-secondary h-full rounded-full shadow-glow" style="width: 46%"></div>
|
|
</div>
|
|
|
|
<!-- 下降箭头指示 -->
|
|
<div class="absolute right-[30%] top-[-1.5rem] hidden md:flex flex-row items-center gap-2">
|
|
<div class="flex flex-col items-center">
|
|
<div class="h-8 w-0.5 bg-red-500/50"></div>
|
|
<i class="fa fa-caret-down text-red-500 text-xl"></i>
|
|
</div>
|
|
<span class="text-2xl font-bold pb-1 text-red-500">-53.85%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. 实时性优势与确定性 (对应图片2) -->
|
|
<section class="section-padding relative z-10">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">不仅更快，而且更稳</h2>
|
|
<p class="text-slate-600 font-medium text-lg">同时达成 <span class="text-slate-800 font-bold">中断时延的确定性</span> 和 <span class="text-slate-800 font-bold">响应中断的及时性</span></p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
<!-- 左侧：绝对时间优势 -->
|
|
<div class="glass-panel-light border border-white p-8 rounded-xl border border-slate-200 hover:border-primary/30 transition-colors">
|
|
<h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
|
|
<i class="fa fa-clock-o text-primary"></i> 绝对时间优势
|
|
</h3>
|
|
<div class="relative pt-10 pb-4">
|
|
<div class="flex items-end justify-center gap-8 h-48">
|
|
<!-- 柱子1 -->
|
|
<div class="w-24 group relative">
|
|
<div class="absolute -top-8 w-full text-center text-slate-500 font-bold font-mono">常规</div>
|
|
<div class="h-40 bg-slate-200 rounded-t-lg w-full relative"></div>
|
|
</div>
|
|
<!-- 柱子2 -->
|
|
<div class="w-24 group relative">
|
|
<div class="absolute -top-16 w-full text-center text-primary font-mono font-bold">增强版</div>
|
|
<div class="h-16 bg-gradient-to-t from-primary to-secondary rounded-t-lg w-full relative shadow-lg">
|
|
<div class="absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap text-secondary font-bold">
|
|
-61.54%
|
|
</div>
|
|
<!-- 红色下降箭头 -->
|
|
<div class="absolute -top-4 left-1/2 -translate-x-1/2 text-red-500">
|
|
↓
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-center mt-6 text-slate-500 font-bold text-sm">中断响应周期大幅缩减</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：时间确定性 (Jitter对比) -->
|
|
<div class="glass-panel-light border border-white p-8 rounded-xl border border-slate-200 hover:border-secondary/30 transition-colors">
|
|
<h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
|
|
<i class="fa fa-line-chart text-secondary"></i> 时间确定性 (Jitter)
|
|
</h3>
|
|
|
|
<div class="space-y-8">
|
|
<!-- 隼瞻表现 -->
|
|
<div>
|
|
<div class="text-sm text-slate-500 font-bold mb-2">隼瞻中断实时性技术</div>
|
|
<div class="flex gap-1 h-12">
|
|
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 font-bold text-xs shadow-lg">10 Cycle</div>
|
|
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 font-bold text-xs shadow-lg">12 Cycle</div>
|
|
<div class="flex-1 bg-primary rounded flex items-center justify-center text-slate-800 font-bold text-xs shadow-lg">10 Cycle</div>
|
|
</div>
|
|
<div class="text-right text-xs text-secondary mt-1">波动极小，稳定可控</div>
|
|
</div>
|
|
|
|
<div class="text-center font-bold text-2xl text-gray-600 italic">VS</div>
|
|
|
|
<!-- 常规表现 -->
|
|
<div>
|
|
<div class="text-sm text-slate-500 font-bold mb-2">常规 RISC-V IP</div>
|
|
<div class="flex gap-1 h-12 items-end">
|
|
<div class="w-1/2 bg-slate-100 h-8 rounded flex items-center justify-center text-slate-500 font-bold text-xs">24 Cycle</div>
|
|
<div class="w-1/2 bg-slate-100 h-full rounded flex items-center justify-center text-slate-500 font-bold text-xs border border-red-500/30">40 Cycle</div>
|
|
</div>
|
|
<div class="text-right text-xs text-red-400 mt-1">波动巨大，不可预测</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. 底部 CTA -->
|
|
<section class="py-16 relative z-10 border-t border-slate-200 text-center">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-8">准备好提升您的处理器性能了吗？</h2>
|
|
<button class="px-10 py-4 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-slate-800 font-bold text-lg rounded-full transition-all transform hover:scale-105 shadow-xl">
|
|
联系隼瞻科技获取方案
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
// 简单的滚动显现动画逻辑
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const observerOptions = {
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('opacity-100', 'translate-y-0');
|
|
entry.target.classList.remove('opacity-0', 'translate-y-8');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
const elements = document.querySelectorAll('.glass-panel-light border border-white, h2, h3');
|
|
elements.forEach(el => {
|
|
el.classList.add('transition-all', 'duration-700', 'opacity-0', 'translate-y-8');
|
|
observer.observe(el);
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html> |