Speed up string<->buffer conversion everywhere

pimterry · pimterry · commit bb71759d503e · 2023-03-22T19:10:44.000+01:00
This reduces conversion for very large buffers (~25MB) from about 600ms
to 100ms or less, which makes a big difference for the resulting UX!
Most important when editing a very large breakpointed body.
diff --git a/src/components/editor/content-viewer.tsx b/src/components/editor/content-viewer.tsx
@@ -8,6 +8,7 @@ import * as portals from 'react-reverse-portal';
 import { css, styled } from '../../styles';
 import { ObservablePromise, isObservablePromise } from '../../util/observable';
 import { asError } from '../../util/error';
+import { stringToBuffer } from '../../util';
 
 import { ViewableContentType } from '../../model/events/content-types';
 import { Formatters, isEditorFormatter } from '../../model/events/body-formatting';
@@ -70,7 +71,7 @@ export class ContentViewer extends React.Component<ContentViewerProps> {
     @computed
     private get contentBuffer() {
         return _.isString(this.props.children)
-            ? Buffer.from(this.props.children)
+            ? stringToBuffer(this.props.children)
             : this.props.children;
     }
 
diff --git a/src/components/intercept/config/android-device-config.tsx b/src/components/intercept/config/android-device-config.tsx
@@ -9,6 +9,7 @@ import {
 } from 'mockttp';
 
 import { styled } from '../../../styles';
+import { stringToBuffer } from '../../../util';
 
 import { Interceptor } from '../../../model/interception/interceptors';
 import { ProxyStore } from '../../../model/proxy-store';
@@ -61,7 +62,8 @@ const Spacer = styled.div`
 `;
 
 function urlSafeBase64(content: string) {
-    return Buffer.from(content, 'utf8').toString('base64')
+    return stringToBuffer(content)
+        .toString('base64')
         .replace(/\+/g, '-')
         .replace(/\//g, '_');
 }
diff --git a/src/components/mock/handler-config.tsx b/src/components/mock/handler-config.tsx
@@ -9,7 +9,13 @@ import { css, styled } from '../../styles';
 import { WarningIcon } from '../../icons';
 import { uploadFile } from '../../util/ui';
 import { asError, isErrorLike, UnreachableCheck } from '../../util/error';
-import { byteLength, asBuffer, isProbablyUtf8 } from '../../util';
+import {
+    byteLength,
+    asBuffer,
+    isProbablyUtf8,
+    stringToBuffer,
+    bufferToString
+} from '../../util';
 
 import {
     Handler,
@@ -446,7 +452,7 @@ class StaticResponseHandlerConfig extends HandlerConfig<StaticResponseHandler |
 
     @action.bound
     setBody(body: string) {
-        this.body = Buffer.from(body, this.textEncoding);
+        this.body = stringToBuffer(body, this.textEncoding);
     }
 
     updateHandler() {
@@ -1158,7 +1164,7 @@ const RawBodyTransfomConfig = (props: {
             <ThemedSelfSizedEditor
                 contentId={null}
                 language={contentType}
-                value={props.body.toString('utf8')}
+                value={bufferToString(props.body)}
                 onChange={props.updateBody}
             />
         </BodyContainer>
@@ -1914,7 +1920,7 @@ class IpfsCatTextHandlerConfig extends HandlerConfig<IpfsCatTextHandler> {
 
     @action.bound
     setBody(body: string) {
-        this.body = Buffer.from(body, this.textEncoding);
+        this.body = stringToBuffer(body, this.textEncoding);
         this.props.onChange(
             new IpfsCatTextHandler(this.body)
         );
@@ -2415,7 +2421,7 @@ class RTCSendMessageStepConfig extends HandlerConfig<SendStepDefinition> {
 
     @action.bound
     setMessage(message: string) {
-        this.message = Buffer.from(message, this.textEncoding);
+        this.message = stringToBuffer(message, this.textEncoding);
         this.updateHandler();
     }
 
diff --git a/src/components/view/http/http-breakpoint-body-card.tsx b/src/components/view/http/http-breakpoint-body-card.tsx
@@ -5,7 +5,12 @@ import { observer, disposeOnUnmount } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
 import { Headers } from '../../../types';
-import { lastHeader, isProbablyUtf8 } from '../../../util';
+import {
+    lastHeader,
+    isProbablyUtf8,
+    bufferToString,
+    stringToBuffer
+} from '../../../util';
 import {
     EditableContentType,
     EditableContentTypes,
@@ -75,7 +80,7 @@ export class HttpBreakpointBodyCard extends React.Component<{
             onExpandToggled
         } = this.props;
 
-        const bodyString = body.toString(this.textEncoding);
+        const bodyString = bufferToString(body, this.textEncoding);
 
         return <CollapsibleCard
             direction={direction}
@@ -121,7 +126,7 @@ export class HttpBreakpointBodyCard extends React.Component<{
     }
 
     private onBodyChange = (body: string) => {
-        this.props.onChange(Buffer.from(body, this.textEncoding));
+        this.props.onChange(stringToBuffer(body, this.textEncoding));
     }
 
 }
diff --git a/src/components/view/stream-message-rows.tsx b/src/components/view/stream-message-rows.tsx
@@ -5,7 +5,7 @@ import { disposeOnUnmount, observer } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
 import { styled, warningColor } from '../../styles';
-import { asBuffer } from '../../util';
+import { asBuffer, bufferToString } from '../../util';
 import { ArrowIcon } from '../../icons';
 
 import {
@@ -57,12 +57,12 @@ export const StreamMessageCollapsedRow = React.memo((p: {
     <MessageArrow selected={false} messageDirection={visualDirection(p.message)} />
     <CollapsedStreamContent>
         {
-            p.message.content
-            // Limit the length - no point showing huge messages here. On a typical UI, we show about
-            // 100 chars here, so this should give us a good bit of buffer
-            .slice(0, 200)
-            // Show everything as UTF-8 - binary data can be viewed up close instead.
-            .toString('utf8')
+            bufferToString( // Show everything as UTF-8 - binary data can be viewed up close instead.
+                p.message.content
+                // Limit the length - no point showing huge messages here. On a typical UI, we show about
+                // 100 chars here, so this should give us a good bit of buffer
+                .slice(0, 200)
+            )
         }
     </CollapsedStreamContent>
     {
diff --git a/src/model/events/body-formatting.ts b/src/model/events/body-formatting.ts
@@ -2,6 +2,7 @@ import { styled } from '../../styles';
 
 import { ViewableContentType } from '../events/content-types';
 import { ObservablePromise, observablePromise } from '../../util/observable';
+import { bufferToString } from '../../util';
 
 import type { WorkerFormatterKey } from '../../services/ui-worker-formatters';
 import { formatBufferAsync } from '../../services/ui-worker-api';
@@ -64,7 +65,7 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         language: 'text',
         cacheKey: Symbol('text'),
         render: (input: Buffer) => {
-            return input.toString('utf8');
+            return bufferToString(input);
         }
     },
     base64: {
@@ -96,8 +97,8 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         language: 'json',
         cacheKey: Symbol('json'),
         render: (input: Buffer) => {
-            if (input.byteLength < 2000) {
-                const inputAsString = input.toString('utf8')
+            if (input.byteLength < 10000) {
+                const inputAsString = bufferToString(input);
 
                 try {
                     // For short-ish inputs, we return synchronously - conveniently this avoids
@@ -130,7 +131,7 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
     'url-encoded': {
         scrollable: true,
         Component: styled(ReadOnlyParams).attrs((p: FormatComponentProps) => ({
-            content: p.content.toString('utf8')
+            content: bufferToString(p.content)
         }))`
             padding: 5px;
         ` as FormatComponent
diff --git a/src/model/filters/search-filters.ts b/src/model/filters/search-filters.ts
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 
 import { CollectedEvent } from '../../types';
 import { joinAnd } from '../../util/text';
+import { stringToBuffer } from '../../util';
 
 import { getStatusDocs } from '../http/http-docs';
 import { getReadableSize } from '../events/bodies';
@@ -1214,7 +1215,7 @@ class BodyFilter extends Filter {
         const [, op, expectedBody] = parseFilter(BodyFilter, filter);
         this.op = op;
 
-        this.expectedBody = Buffer.from(expectedBody);
+        this.expectedBody = stringToBuffer(expectedBody);
         this.predicate = bufferOperations[this.op];
     }
 
diff --git a/src/model/http/exchange-breakpoint.ts b/src/model/http/exchange-breakpoint.ts
@@ -12,7 +12,7 @@ import {
     BreakpointBody,
     MockttpBreakpointResponseResult,
 } from "../../types";
-import { asHeaderArray } from "../../util";
+import { asHeaderArray, stringToBuffer } from "../../util";
 import { getDeferred, Deferred } from "../../util/promise";
 import { reportError } from "../../errors";
 
@@ -36,8 +36,8 @@ function getBody(message: MockttpBreakpointedRequest | MockttpBreakpointedRespon
             check content-encoding
         `;
         return {
-            encoded: Buffer.from(error),
-            decoded: Buffer.from(error)
+            encoded: stringToBuffer(error),
+            decoded: stringToBuffer(error)
         };
     });
 }
@@ -68,8 +68,8 @@ export function getDummyResponseBreakpoint(httpVersion: 1 | 2) {
             statusMessage: undefined,
             headers: httpVersion === 2 ? { ':status': '200' } : {},
         },
-        Buffer.from(''),
-        Buffer.from('')
+        stringToBuffer(''),
+        stringToBuffer('')
     );
 
     return breakpoint;
diff --git a/src/model/http/exchange.ts b/src/model/http/exchange.ts
@@ -21,6 +21,7 @@ import {
     FakeBuffer,
     asHeaderArray,
     lastHeader,
+    stringToBuffer,
 } from '../../util';
 import { UnreachableCheck } from '../../util/error';
 import { lazyObservablePromise, ObservablePromise, observablePromise } from "../../util/observable";
@@ -108,7 +109,7 @@ export class HttpBody implements MessageBody {
         headers: Headers
     ) {
         if (!('body' in message) || !message.body) {
-            this._encoded = Buffer.from("");
+            this._encoded = stringToBuffer("");
         } else if ('buffer' in message.body) {
             this._encoded = message.body.buffer;
         } else {
diff --git a/src/model/http/har.ts b/src/model/http/har.ts
@@ -4,7 +4,7 @@ import * as HarFormat from 'har-format';
 import * as HarValidator from 'har-validator';
 import * as querystring from 'querystring';
 
-import { lastHeader } from '../../util';
+import { lastHeader, stringToBuffer } from '../../util';
 import { ObservablePromise } from '../../util/observable';
 import {
     Headers,
@@ -615,10 +615,10 @@ function parseHarRequestContents(data: RequestContentData): Buffer {
 function parseHarPostData(data: HarFormat.PostData | undefined): Buffer {
     if (data?.text) {
         // Prefer raw exported 'text' data, when available
-        return Buffer.from(data.text, 'utf8');
+        return stringToBuffer(data.text, 'utf8');
     } else if (data?.params) {
         // If only 'params' is available, stringify and use that.
-        return Buffer.from(
+        return stringToBuffer(
             // Go from array of key-value objects to object of key -> value array:
             querystring.stringify(_(data.params)
                 .groupBy(({ name }) => name)
@@ -627,7 +627,7 @@ function parseHarPostData(data: HarFormat.PostData | undefined): Buffer {
             )
         );
     } else {
-        return Buffer.from('');
+        return stringToBuffer('');
     }
 }
 
diff --git a/src/util/index.ts b/src/util/index.ts
@@ -70,7 +70,11 @@ export function fakeBuffer(byteLength: number): FakeBuffer {
 }
 export type FakeBuffer = { byteLength: number };
 
-const encoder = new TextDecoder('utf8', { fatal: true });
+const encoder = new TextEncoder();
+
+const strictDecoder = new TextDecoder('utf8', { fatal: true });
+const laxDecoder = new TextDecoder('utf8', { fatal: false });
+const binaryLaxDecoder = new TextDecoder('latin1', { fatal: false });
 
 // Not a perfect or full check, but a quick test to see if the data in a buffer
 // is valid UTF8 (so we should treat it as text) or not (so we should treat it as
@@ -81,13 +85,33 @@ export function isProbablyUtf8(buffer: Buffer) {
     try {
         // Just check the first 1kb, in case it's a huge file
         const dataToCheck = buffer.slice(0, 1024);
-        encoder.decode(dataToCheck);
+        strictDecoder.decode(dataToCheck);
         return true; // Decoded OK, probably safe
     } catch (e) {
         return false; // Decoding failed, definitely not valid UTF8
     }
 }
 
+export function stringToBuffer(input: string, encoding: 'utf8' | 'binary' = 'utf8') {
+    if (encoding === 'utf8') {
+        return Buffer.from(encoder.encode(input)); // ~4x faster than Buffer.from(input, 'utf8')
+    } else if (encoding === 'binary') {
+        return Buffer.from(input, encoding); // Slower, but we have no option as TextEncoder is UTF8 only
+    } else {
+        throw new Error(`Cannot decode string from unrecogized encoding: ${encoding}`);
+    }
+}
+
+export function bufferToString(input: Buffer, encoding: 'utf8' | 'binary' = 'utf8') {
+    if (encoding === 'utf8') {
+        return laxDecoder.decode(input); // ~5x faster than buffer.toString('utf8')
+    } else if (encoding === 'binary') {
+        return binaryLaxDecoder.decode(input);
+    } else {
+        throw new Error(`Cannot convert buffer to unrecogized encoding: ${encoding}`);
+    }
+}
+
 export function isSerializedBuffer(obj: any): obj is MockttpSerializedBuffer {
     return obj && obj.type === 'Buffer' && !!obj.data;
 }
@@ -98,7 +122,7 @@ export function asBuffer(data: string | Buffer | Uint8Array | MockttpSerializedB
     } else if (Buffer.isBuffer(data)) {
         return data;
     } else if (typeof data === 'string') {
-        return Buffer.from(data, 'utf8');
+        return stringToBuffer(data);
     } else if (isSerializedBuffer(data)) {
         return Buffer.from(data.data);
     } else {
