欢迎来到 Brotli 压缩测试

Brotli 是一种高效的压缩算法，特别适合 Web 内容的压缩传输。

`, css: `/* 现代 CSS 样式表 */ :root { --primary: #667eea; --secondary: #764ba2; --bg: #f8fafc; --text: #1a1a2e; --radius: 12px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); border: none; cursor: pointer; font-weight: 600; transition: all 0.2s; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 4px 12px rgba(102,126,234,0.3); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(102,126,234,0.4); } .card { background: #fff; border-radius: var(--radius); padding: 2rem; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } @media (max-width: 768px) { .container { padding: 0 1rem; } }`, json: `{ "name": "brotli-compression-test", "version": "1.0.0", "description": "Brotli 压缩算法测试数据集", "author": "Google", "license": "MIT", "dependencies": { "brotli-wasm": "^1.3.1", "pako": "^2.1.0" }, "config": { "compression": { "algorithm": "brotli", "quality": 11, "mode": "text", "windowBits": 22 }, "server": { "host": "localhost", "port": 8080, "enableBrotli": true, "enableGzip": true, "staticCacheDays": 30 } }, "benchmarks": [ {"file": "index.html", "original": 15420, "brotli": 3420, "gzip": 4100}, {"file": "style.css", "original": 8750, "brotli": 1980, "gzip": 2450}, {"file": "bundle.js", "original": 128500, "brotli": 32100, "gzip": 38900} ] }`, lorem: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Brotli compression is particularly effective for web content. It uses a large static dictionary that contains common strings found in HTML, CSS, and JavaScript files. This makes it especially suitable for compressing web resources. The algorithm combines LZ77, Huffman coding, and second-order context modeling to achieve excellent compression ratios. 在现代 Web 开发中，使用 Brotli 压缩可以显著减少传输数据量。与传统的 Gzip 相比，Brotli 通常能多节省 15-25% 的带宽。这对于移动端用户和网络条件较差的地区尤为重要。所有主流浏览器和 CDN 服务都已经支持 Brotli 压缩。 日本のウェブ開発においても、Brotliは非常に有用です。テキストコンテンツの圧縮率が高く、ページの読み込み速度を大幅に向上させることができます。多くの大手サイトがすでにBrotliを採用しています。` }; // ────────────────────────────────────── // Events // ────────────────────────────────────── $qualitySlider.on('input', function() { const val = $(this).val(); $qualityDisplay.text(val); $qualityBadge.text(val); }); $btnCompress.on('click', function() { doCompress(); }); $btnClear.on('click', function() { $input.val(''); fileBytes = null; fileName = null; $fileInfoArea.empty(); $resultsArea.hide(); $noResults.show(); lastCompressResult = null; $compressStatus.text(''); $('#stats-row').hide(); }); // Sample buttons $sampleBtns.on('click', '.btn-outline-sm', function() { const key = $(this).data('sample'); if (samples[key]) { $input.val(samples[key]); fileBytes = null; fileName = null; $fileInfoArea.empty(); $resultsArea.hide(); $noResults.show(); lastCompressResult = null; $compressStatus.text('已加载示例：' + $(this).text().trim() + '，点击压缩按钮测试'); $sampleBtns.find('.btn-outline-sm').removeClass('active-sample'); $(this).addClass('active-sample'); } }); // Drop zone $dropzone.on('click', function() { $fileInput.click(); }); $fileInput.on('change', function() { const file = this.files[0]; if (file) handleFile(file); }); $dropzone.on('dragover', function(e) { e.preventDefault(); $(this).addClass('drag-over'); }); $dropzone.on('dragleave', function() { $(this).removeClass('drag-over'); }); $dropzone.on('drop', function(e) { e.preventDefault(); $(this).removeClass('drag-over'); const file = e.originalEvent.dataTransfer.files[0]; if (file) handleFile(file); }); function handleFile(file) { fileName = file.name; const reader = new FileReader(); reader.onload = function(ev) { fileBytes = ev.target.result; // Try to display as text if it's a text file const textExtensions = ['.txt','.html','.htm','.css','.js','.json','.xml','.svg','.csv','.md','.log','.yml','.yaml','.php','.py','.rb','.java','.c','.cpp','.h','.ts','.tsx','.jsx']; const ext = '.' + fileName.split('.').pop().toLowerCase(); if (textExtensions.includes(ext) || file.type.startsWith('text/') || file.type === 'application/json' || file.type === 'application/xml') { try { const text = new TextDecoder().decode(fileBytes); $input.val(text); } catch(e) { $input.val('[二进制文件，无法预览文本内容]'); } } else { $input.val('[二进制文件：' + fileName + '，将基于原始字节进行压缩测试]'); } $fileInfoArea.html(' ' + fileName + ' (' + formatBytes(fileBytes.byteLength) + ') ×'); $('#remove-file').on('click', function() { fileBytes = null; fileName = null; $fileInfoArea.empty(); $input.val(''); $fileInput.val(''); $resultsArea.hide(); $noResults.show(); lastCompressResult = null; $compressStatus.text(''); }); $resultsArea.hide(); $noResults.show(); lastCompressResult = null; $compressStatus.text('文件已加载，点击压缩按钮测试').css('color','#374151'); }; reader.readAsArrayBuffer(file); } // Download buttons $(document).on('click', '#btn-download-br', function() { if (lastCompressResult && lastCompressResult.brotliData) { const name = fileName ? fileName + '.br' : 'compressed.br'; downloadBlob(lastCompressResult.brotliData, name); $compressStatus.text('✅ .br 文件已下载').css('color', '#059669'); } }); $(document).on('click', '#btn-download-gz', function() { if (lastCompressResult && lastCompressResult.gzipData) { const name = fileName ? fileName + '.gz' : 'compressed.gz'; downloadBlob(lastCompressResult.gzipData, name); $compressStatus.text('✅ .gz 文件已下载').css('color', '#059669'); } }); $(document).on('click', '#btn-copy-brotli-base64', function() { if (lastCompressResult && lastCompressResult.brotliData) { copyBase64(lastCompressResult.brotliData); } }); $(document).on('click', '#btn-copy-gzip-base64', function() { if (lastCompressResult && lastCompressResult.gzipData) { copyBase64(lastCompressResult.gzipData); } }); // FAQ accordion $(document).on('click', '#brotli-tool .faq-question', function() { const $item = $(this).parent('.faq-item'); $item.toggleClass('open'); // Close others $('#brotli-tool .faq-item').not($item).removeClass('open'); }); // Keyboard shortcut $(document).on('keydown', function(e) { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); doCompress(); } }); // ────────────────────────────────────── // Init // ────────────────────────────────────── initBrotli(); ensurePako().catch(() => { console.warn('pako not available, gzip comparison disabled'); }); $resultsArea.hide(); $('#stats-row').hide(); })();