chore: optimize render performance

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "moe-counter-cf",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Fork of Moe Counter for fast global access powered by Cloudflare Workers.",
   "author": "DSRKafuU <dsrkafuu@outlook.com> (https://dsrkafuu.net)",
   "license": "MIT",
@@ -13,7 +13,6 @@
     "publish": "wrangler publish"
   },
   "dependencies": {
-    "base64-arraybuffer": "~1.0.2",
     "itty-router": "~2.6.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -2,7 +2,6 @@ lockfileVersion: 5.4
 
 specifiers:
   '@cloudflare/wrangler': ~1.19.12
-  base64-arraybuffer: ~1.0.2
   clean-webpack-plugin: ~4.0.0
   eslint: ~8.15.0
   itty-router: ~2.6.1
@@ -11,7 +10,6 @@ specifiers:
   webpack-cli: ~4.9.2
 
 dependencies:
-  base64-arraybuffer: 1.0.2
   itty-router: 2.6.1
 
 devDependencies:
@@ -340,11 +338,6 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /base64-arraybuffer/1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-    dev: false
-
   /brace-expansion/1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
     dependencies:

src/index.js

@@ -34,7 +34,6 @@ router.all('*', async () => {
 
 addEventListener('fetch', (event) => {
   const req = event.request;
-  req.time = Date.now(); // for response time calculation
   event.respondWith(
     router.handle(req, event).catch((e) => genErrorResponse(req, e))
   );

src/response.js

@@ -1,5 +1,3 @@
-import { getETag } from './utils';
-
 /**
  * @param {Request} req
  * @param {Response} res mutable response
@@ -20,8 +18,6 @@ function applyCommonHeaders(req, res) {
   } else if (!res.headers.get('Content-Type')) {
     res.headers.set('Content-Type', 'text/plain; charset=utf-8');
   }
-  // custom response time
-  res.headers.set('X-Response-Time', `${Date.now() - req.time}ms`);
   return res;
 }
 
@@ -31,23 +27,7 @@ function applyCommonHeaders(req, res) {
  * @param {ResponseInit|undefined} init
  */
 export async function genResponse(req, body, init) {
-  let res;
-  // 304
-  const buffer = await new Response(body, init).arrayBuffer();
-  const etag = await getETag(buffer);
-  if (etag && req.headers.get('If-None-Match') === etag) {
-    res = new Response(null, {
-      status: 304,
-      headers: {
-        ETag: etag,
-      },
-    });
-  }
-  // normal response
-  else {
-    res = new Response(body, init);
-    res.headers.set('ETag', etag);
-  }
+  const res = new Response(body, init);
   return applyCommonHeaders(req, res);
 }
 
@@ -67,24 +47,8 @@ export async function genProxyResponse(req, event, proxy) {
     resCache = await fetch(proxy);
     event.waitUntil(cache.put(cacheKey, resCache.clone()));
   }
-  let res;
-  // 304
-  const etag = resCache.headers.get('ETag');
-  if (etag && req.headers.get('If-None-Match') === etag) {
-    res = new Response(null, {
-      status: 304,
-      headers: {
-        'Cache-Control': resCache.headers.get('Cache-Control'),
-        'X-Proxy-Cache': 'HIT',
-        ETag: etag,
-      },
-    });
-  }
-  // normal response
-  else {
-    res = new Response(resCache.body, resCache);
-    res.headers.set('X-Proxy-Cache', usingCache ? 'HIT' : 'MISS');
-  }
+  const res = new Response(resCache.body, resCache);
+  res.headers.set('X-Proxy-Cache', usingCache ? 'HIT' : 'MISS');
   return applyCommonHeaders(req, res);
 }
 

src/routes/image.js

@@ -2,7 +2,7 @@
 import settings from '../../settings.json';
 import themes from '../../themes';
 import { genResponse } from '../response';
-import { validateID, minify } from '../utils';
+import { validateID } from '../utils';
 
 /**
  * @param {number} count
@@ -27,21 +27,13 @@ function genImage(count, theme, length, pixelated) {
     return pre + image;
   }, '');
 
-  const svg = `
-  <?xml version="1.0" encoding="UTF-8"?>
-  <svg
-    width="${x}"
-    height="${height}"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    ${pixelated ? 'style="image-rendering: pixelated"' : ''}
-  >
-    <title>Moe Counter</title>
-    <g>${parts}</g>
-  </svg>
-  `;
-  return minify(svg);
+  return (
+    '<?xml version="1.0" encoding="UTF-8"?>' +
+    `<svg width="${x}" height="${height}" version="1.1"` +
+    ' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"' +
+    `${pixelated ? ' style="image-rendering: pixelated"' : ''}>` +
+    `<title>Moe Counter</title><g>${parts}</g></svg>`
+  );
 }
 
 /**

src/utils.js

@@ -1,5 +1,5 @@
+// import { encode } from 'base64-arraybuffer';
 import settings from '../settings.json';
-import { encode } from 'base64-arraybuffer';
 import { ResError } from './response';
 
 /**
@@ -9,6 +9,7 @@ export function minify(str) {
   return str
     .replace(/[\r\n]/g, ' ')
     .replace(/> +</g, '><')
+    .replace(/ +/g, ' ')
     .trim();
 }
 
@@ -25,24 +26,24 @@ export function validateID(id) {
   return id;
 }
 
-/**
- * https://github.com/jshttp/etag/blob/master/index.js#L39
- * @param {ArrayBuffer} buffer
- */
-export async function getETag(buffer) {
-  // fast empty etag
-  if (buffer.byteLength === 0) {
-    return 'W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"';
-  }
-  try {
-    // body hash
-    const digest = await crypto.subtle.digest('SHA-1', buffer);
-    const base64 = encode(digest);
-    const hash = base64.substring(0, 27); // remove trailing `=`s
-    // body length
-    const length = buffer.byteLength.toString(16);
-    return `W/"${length}-${hash}"`;
-  } catch {
-    return null;
-  }
-}
+// /**
+//  * https://github.com/jshttp/etag/blob/master/index.js#L39
+//  * @param {ArrayBuffer} buffer
+//  */
+// export async function getETag(buffer) {
+//   // fast empty etag
+//   if (buffer.byteLength === 0) {
+//     return 'W/"0-2jmj7l5rSw0yVb/vlWAYkK/YBwk"';
+//   }
+//   try {
+//     // body hash
+//     const digest = await crypto.subtle.digest('SHA-1', buffer);
+//     const base64 = encode(digest);
+//     const hash = base64.substring(0, 27); // remove trailing `=`s
+//     // body length
+//     const length = buffer.byteLength.toString(16);
+//     return `W/"${length}-${hash}"`;
+//   } catch {
+//     return null;
+//   }
+// }