MTU Path Discovery & Fragmentation Analyzer
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.calc-container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
}
.calc-header {
margin-bottom: 30px;
padding: 25px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
color: white;
}
.calc-header h2 {
margin-top: 0;
color: white;
font-size: 28px;
margin-bottom: 10px;
}
.calc-header p {
margin: 10px 0 20px 0;
opacity: 0.95;
font-size: 15px;
}
.preset-section {
margin: 20px 0;
}
.preset-label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 14px;
}
.preset-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.preset-btn {
padding: 10px 16px;
background: rgba(255,255,255,0.15);
color: white;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
transition: all 0.2s ease;
white-space: nowrap;
}
.preset-btn:hover {
background: rgba(255,255,255,0.25);
border-color: rgba(255,255,255,0.5);
transform: translateY(-2px);
}
.input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: rgba(255,255,255,0.95);
}
.input-group input,
.input-group select {
padding: 14px;
font-size: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
font-family: 'Courier New', monospace;
background: rgba(255,255,255,0.95);
transition: all 0.3s ease;
}
.input-group input:focus,
.input-group select:focus {
outline: none;
border-color: #4CAF50;
background: white;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
.button-group {
display: flex;
gap: 10px;
margin-top: 15px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.btn-secondary {
background: rgba(255,255,255,0.2);
color: white;
border: 1px solid rgba(255,255,255,0.3);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.3);
}
.encap-stack {
margin-top: 15px;
min-height: 50px;
}
.encap-layer {
background: rgba(255,255,255,0.15);
padding: 10px 15px;
margin-bottom: 8px;
border-radius: 6px;
border-left: 4px solid #4CAF50;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.encap-layer .name {
font-weight: 600;
}
.encap-layer .overhead {
background: #4CAF50;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-weight: bold;
font-size: 12px;
margin-right: 10px;
}
.encap-layer .remove-btn {
background: #dc3545;
color: white;
border: none;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
.section {
margin-bottom: 30px;
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.section h3 {
margin-top: 0;
margin-bottom: 20px;
color: #333;
border-left: 5px solid #667eea;
padding-left: 15px;
font-size: 20px;
}
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.result-card {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
transition: transform 0.2s ease;
}
.result-card:hover {
transform: translateY(-2px);
}
.result-card.warning {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: #000;
}
.result-card.error {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.result-card.neutral {
background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}
.result-label {
font-size: 14px;
opacity: 0.9;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.status-text {
font-size: 11px;
opacity: 0.8;
font-weight: normal;
text-transform: capitalize;
}
.result-value {
font-size: 42px;
font-weight: bold;
margin: 10px 0;
font-family: 'Courier New', monospace;
}
.result-detail {
font-size: 13px;
opacity: 0.9;
}
/* Packet Visualization */
.packet-diagram {
margin: 20px 0;
}
.packet {
border: 2px solid #667eea;
border-radius: 8px;
margin-bottom: 15px;
overflow: hidden;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.packet-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 10px 15px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.packet-body {
padding: 15px;
background: #f8f9fa;
}
.packet-section {
display: flex;
margin-bottom: 8px;
border-left: 3px solid #667eea;
padding-left: 10px;
}
.packet-section-label {
font-weight: bold;
min-width: 150px;
color: #555;
}
.packet-section-value {
font-family: 'Courier New', monospace;
color: #333;
}
.fragment-visual {
display: flex;
gap: 10px;
margin: 20px 0;
flex-wrap: wrap;
}
.fragment-box {
flex: 1;
min-width: 200px;
border: 2px solid #17a2b8;
border-radius: 6px;
padding: 15px;
background: white;
position: relative;
}
.fragment-box::before {
content: attr(data-fragment);
position: absolute;
top: -12px;
left: 10px;
background: #17a2b8;
color: white;
padding: 2px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: bold;
}
/* PMTUD Flowchart */
.flowchart {
margin: 20px 0;
}
.flow-node {
background: white;
border: 2px solid #667eea;
border-radius: 8px;
padding: 20px;
margin: 15px auto;
max-width: 600px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.flow-node:hover {
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
transform: scale(1.02);
}
.flow-node.decision {
background: #fff3cd;
border-color: #ffc107;
}
.flow-node.success {
background: #d4edda;
border-color: #28a745;
}
.flow-node.problem {
background: #f8d7da;
border-color: #dc3545;
}
.flow-node-title {
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
color: #333;
}
.flow-node-content {
color: #555;
line-height: 1.6;
}
.flow-options {
display: flex;
gap: 10px;
margin-top: 15px;
}
.flow-btn {
flex: 1;
padding: 10px;
border: 2px solid #667eea;
background: white;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.2s ease;
}
.flow-btn:hover {
background: #667eea;
color: white;
}
.flow-arrow {
text-align: center;
color: #667eea;
font-size: 24px;
margin: 10px 0;
}
.solution-box {
background: #d1ecf1;
border-left: 4px solid #17a2b8;
padding: 15px;
border-radius: 6px;
margin-top: 15px;
}
.solution-box h4 {
margin-top: 0;
color: #0c5460;
}
.solution-box code {
background: #2d2d2d;
color: #f8f8f2;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
.alert {
padding: 15px 20px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid;
}
.alert-info {
background: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
}
.alert-warning {
background: #fff3cd;
border-color: #ffc107;
color: #856404;
}
.alert-danger {
background: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.data-row {
display: flex;
margin: 12px 0;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #667eea;
}
.data-label {
font-weight: bold;
color: #555;
min-width: 200px;
flex-shrink: 0;
}
.data-value {
color: #333;
font-family: 'Courier New', monospace;
}
.hidden {
display: none;
}
/* Encapsulation Stack Builder */
.stack-builder {
background: white;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.stack-builder h4 {
margin-top: 0;
margin-bottom: 15px;
color: #333;
}
.stack-container {
min-height: 100px;
border: 2px dashed #dee2e6;
border-radius: 8px;
padding: 10px;
background: #f8f9fa;
}
.stack-empty {
text-align: center;
padding: 40px 20px;
color: #6c757d;
font-style: italic;
}
.stack-layer {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px;
border-radius: 8px;
margin-bottom: 10px;
cursor: move;
transition: all 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.stack-layer:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.stack-layer.dragging {
opacity: 0.5;
cursor: grabbing;
}
.layer-info {
flex: 1;
display: flex;
align-items: center;
gap: 15px;
}
.drag-handle {
font-size: 20px;
cursor: grab;
user-select: none;
}
.drag-handle:active {
cursor: grabbing;
}
.layer-name {
font-weight: 600;
font-size: 16px;
}
.layer-overhead {
display: flex;
align-items: center;
gap: 10px;
}
.overhead-value {
font-family: 'Courier New', monospace;
font-size: 18px;
font-weight: bold;
background: rgba(255,255,255,0.2);
padding: 4px 12px;
border-radius: 4px;
min-width: 60px;
text-align: center;
}
.overhead-edit {
display: none;
}
.overhead-value.editing {
display: none;
}
.overhead-value.editing + .overhead-edit {
display: block;
}
.overhead-edit input {
width: 60px;
padding: 4px 8px;
border: 2px solid white;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 16px;
text-align: center;
}
.layer-actions {
display: flex;
gap: 8px;
}
.layer-btn {
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
color: white;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
.layer-btn:hover {
background: rgba(255,255,255,0.3);
}
.layer-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
}
.effective-mtu-display {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
padding: 20px;
border-radius: 8px;
margin-top: 15px;
text-align: center;
font-size: 18px;
font-weight: 600;
}
.effective-mtu-display.warning {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.effective-mtu-display.error {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.mtu-value-large {
font-size: 36px;
font-family: 'Courier New', monospace;
margin: 10px 0;
}
.preset-badge {
background: rgba(102, 126, 234, 0.1);
border: 2px solid #667eea;
color: #667eea;
padding: 10px 15px;
border-radius: 8px;
margin-top: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.add-layer-section {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #dee2e6;
}
@media (max-width: 768px) {
.input-grid {
grid-template-columns: 1fr;
}
.preset-buttons {
flex-direction: column;
}
.preset-btn {
width: 100%;
}
.result-grid {
grid-template-columns: 1fr;
}
.fragment-visual {
flex-direction: column;
}
/* Minimum touch target size for mobile accessibility */
.btn, button, .preset-btn, .layer-btn {
min-height: 44px;
min-width: 44px;
}
}
@media (max-width: 600px) {
.input-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.calc-header h2 {
font-size: 22px;
}
.calc-header p {
font-size: 14px;
}
.btn {
width: 100%;
padding: 10px 16px;
}
.preset-buttons {
flex-direction: column;
}
.preset-btn {
width: 100%;
padding: 10px 12px;
}
.fragment-box {
margin-bottom: 10px;
}
.flow-node {
max-width: 100%;
margin: 10px auto;
}
.flow-node-title {
font-size: 15px;
}
}
@media (max-width: 480px) {
.calc-header {
padding: 15px;
margin-bottom: 20px;
}
.calc-header h2 {
font-size: 20px;
}
.preset-buttons {
gap: 8px;
}
.preset-btn {
font-size: 12px;
padding: 8px 12px;
}
.input-grid {
gap: 10px;
}
.btn {
font-size: 14px;
padding: 10px 12px;
}
.flow-node {
padding: 12px;
}
.flow-node-title {
font-size: 14px;
}
.flow-node-content {
font-size: 13px;
}
code {
font-size: 12px;
}
.packet-section-label {
font-size: 12px;
}
.packet-section-value {
font-size: 12px;
}
}
Huy hiệu cài sẵn (hiển thị khi cài đặt trước được kích hoạt)
Trình tạo ngăn xếp đóng gói
Hiển thị MTU hiệu quả
Thêm phần lớp
Kiểm soát phiên
Kết quả MTU
Trực quan hóa phân mảnh
Máy tính lãng phí băng thông (Tính năng P0)
Trình khắc phục sự cố tương tác PMTUD
Ví dụ về cấu hình
Phân tích khung Jumbo
📦 Trình phân tích phân mảnh và khám phá đường dẫn MTU
Tính toán MTU hiệu quả sau chi phí đóng gói, trực quan hóa sự phân mảnh và khắc phục sự cố PMTUD
🏗️ Ngăn xếp đóng gói(Kéo để sắp xếp lại)
Không có lớp đóng gói nào được thêm vào. Thêm một lớp bên dưới để xem nó ảnh hưởng đến MTU như thế nào.
MTU tải trọng hiệu quả
1500
byte có sẵn cho dữ liệu
Chưa lưu
Khôi phục biểu ngữ
Cách sử dụng bảng điều khiển
📖 Cách sử dụng công cụ này
- Bắt đầu nhanh:Nhấp vào nút cài sẵn (Internet, PPPoE, Azure, v.v.) để tải các tình huống phổ biến
- Tính toán tùy chỉnh:Đặt MTU cơ sở của bạn và thêm từng lớp đóng gói
- Kết quả:Xem MTU tải trọng hiệu quả của bạn, MSS TCP được đề xuất và phân tích chi phí chung
- Phân mảnh:Nếu MTU < 1500, sơ đồ phân mảnh trực quan sẽ tự động xuất hiện
- Khắc phục sự cố:Sử dụng sơ đồ PMTUD để chẩn đoán các sự cố Khám phá Đường dẫn MTU
- Tác động hiệu suất:Công cụ tính toán lãng phí băng thông cho thấy chi phí thực sự của việc phân mảnh
Kết quả tính toán MTU
MTU tải trọng hiệu quả
1500
byte có sẵn cho dữ liệu
Tổng chi phí
0
byte đã tiêu thụ
MSS TCP được đề xuất
1460
MTU - 40 (tiêu đề IP+TCP)
MTU cơ sở:
1500 byte
Chi phí đóng gói:
0 byte
MTU hiệu quả:
1500 byte
Tiêu đề IP + TCP:
40 byte (20 IP + 20 TCP)
Tải trọng TCP tối đa:
1460 byte
Hiệu quả:
97,3%
💸 Máy tính lãng phí băng thông
ℹ️ Tác động đến hiệu suất:Tính toán chi phí thực tế của việc phân mảnh băng thông mạng của bạn.
⚠ Lãng phí băng thông(Cảnh báo)
0
Mbps bị mất do chi phí phân mảnh
✗ Tỷ lệ chi phí chung(Phê bình)
0%
tổng băng thông bị lãng phí
⚠ Mảnh vỡ bổ sung(Cảnh báo)
0
gói bổ sung mỗi giây
Các mảnh trên mỗi gói gốc:
1
Chi phí chung cho mỗi gói:
0 byte
Tổng chi phí mỗi giây:
0 byte
Hành động được đề xuất:
Tăng MTU hoặc kích hoạt PMTUD
🔍 Trình khắc phục sự cố tương tác Path MTU Discovery (PMTUD)
ℹ️ Sơ đồ tương tác:Nhấp qua các bước chẩn đoán bên dưới để khắc phục sự cố PMTUD.
🚀 Bắt đầu: Bị mất gói hoặc hiệu suất chậm?
Bấm vào để bắt đầu quá trình chẩn đoán. Chúng tôi sẽ hướng dẫn các bước khắc phục sự cố mang tính hệ thống.
🔧 Ví dụ về cấu hình
ℹ️ Kẹp TCP MSS:Định cấu hình những thứ này trên bộ định tuyến của bạn để ngăn chặn sự phân mảnh.
! Cisco IOS/IOS-XE
interface GigabitEthernet0/0
ip tcp adjust-mss 1460
! Juniper JunOS
set interfaces ge-0/0/0 unit 0 family inet mtu 1500
set interfaces ge-0/0/0 unit 0 family inet tcp-mss 1460
# iptables Linux
iptables -t mangle -A FORWARD -p tcp --tcp-flags SYN,RST SYN -j TCPMSS --set-mss 1460
🚀 Phân tích khung Jumbo
ℹ️ Khung Jumbo:Kích thước MTU lớn hơn cải thiện thông lượng cho mạng lưu trữ và trung tâm dữ liệu.
Hiệu suất khung tiêu chuẩn:
97,3% (1460/1500)
Khung Jumbo (9000 MTU):
Hiệu suất 99,6% (8960/9000)
Số khung hình trên GB (Hiện tại):
~731.000 khung hình
Số khung hình trên GB (Jumbo 9000):
~119.000 khung hình (giảm 84%)
Tiết kiệm CPU (Jumbo so với Std):
~84% số lần ngắt ít hơn
Khuyến nghị:
- Tiêu chuẩn 1500 MTU:Internet, mạng chung của trường, môi trường hỗn hợp
- Bé Jumbo (2000):Metro Ethernet, một số mạng MPLS
- Khung Jumbo (9000):iSCSI, NFS, kết cấu từ máy chủ đến máy chủ, trung tâm dữ liệu
- Siêu Jumbo (9216):Mạng lưu trữ, trung tâm dữ liệu 10GbE+