Is it possible to find why a file loads slow

Recently I found a file that could not be load(precisely load very slow mostly load failed), the client I am using codemirrir6. Then load the file, the memory was increase unnormal way.

is it possible to found the reason of load slow? what should I do, this issue bothered me for weeks. This file is very smalll just contains less than 100 line. any clue or suggestion is welcome. This is the code how I connect the server:

export function initEditor(editorAttr: EditorAttr,
    activeEditorView: EditorView | undefined,
    edContainer: RefObject<HTMLDivElement>): [EditorView | undefined, WebsocketProvider] {
    if (activeEditorView) {
        activeEditorView.destroy();
    }
    let docOpt = {
        guid: editorAttr.docId,
        collectionid: editorAttr.projectId
    };
    const ydoc = new Y.Doc(docOpt);
    const ytext = ydoc.getText(editorAttr.docId);
    const undoManager = new Y.UndoManager(ytext);
    let wsProvider: WebsocketProvider = doWsConn(ydoc, editorAttr);
    ydoc.on('update', (update, origin) => {
        try {
            let current_connection_status = wsProvider.bcconnected;
            if(!current_connection_status){
                //debugger
            }
            Y.logUpdate(update);
        } catch (e) {
            console.log(e);
        }
    });
    const highlight_extension = StateField.define({
        create() { return Decoration.none },
        update(value, transaction) {
            value = value.map(transaction.changes)
            for (let effect of transaction.effects) {
                if (effect.is(highlight_effect) && effect.value) {
                    value = value.update({ add: effect.value, sort: true })
                }
            }
            return value
        },
        provide: f => EditorView.decorations.from(f)
    });
    const state = EditorState.create({
        doc: ytext.toString(),
        extensions: [
            basicSetup,
            yCollab(ytext, wsProvider.awareness, { undoManager }),
            extensions,
            themeConfig.of(themeMap.get("Solarized Light")!),
            autocompletion({ override: [myCompletions] }),
            highlight_extension
        ],
    });
    if (edContainer.current && edContainer.current.children && edContainer.current.children.length > 0) {
        return [undefined, undefined];
    }
    const editorView: EditorView = new EditorView({
        state,
        parent: edContainer.current!,
    });
    curEditorView = editorView;
    return [editorView, wsProvider];
}

this is the code to do the webscocket connection:

const doWsConn = (ydoc: Y.Doc, editorAttr: EditorAttr): WebsocketProvider => {
    let contains = projHasFile(editorAttr.docId, editorAttr.projectId);
    if(!contains) {
        console.error("initial the file do not belong the project");
        debugger
        return;
    }
    const wsProvider: WebsocketProvider = new WebsocketProvider(readConfig("wssUrl"), editorAttr.docId, ydoc, {
        maxBackoffTime: 1000000,
        params: {
            // https://self-issued.info/docs/draft-ietf-oauth-v2-bearer.html#query-param
            access_token: localStorage.getItem(WheelGlobal.ACCESS_TOKEN_NAME) ?? ""
        }
    });
    const uInfo = localStorage.getItem("userInfo");
    if (!uInfo) {
        console.error("user info is null", uInfo);
        return;
    };
    const user: UserModel = JSON.parse(uInfo);
    const ydocUser = {
        name: user.nickname,
        color: userColor.color,
        colorLight: userColor.light
    };
    const permanentUserData = new Y.PermanentUserData(ydoc);
    permanentUserData.setUserMapping(ydoc, ydoc.clientID, ydocUser.name)
    wsProvider.awareness.setLocalStateField('user', ydocUser);
    wsProvider.on('auth', (event: any) => {
        // https://discuss.yjs.dev/t/how-to-refresh-the-wsprovider-params-when-token-expire/2131
        handleWsAuth(event, wsProvider, editorAttr, ydoc);
    });
    wsProvider.on('connection-error', (event: any) => {
        debugger
        wsProvider.shouldConnect = false;
        wsProvider.ws?.close(4001)
    });
    wsProvider.on('message', (event: MessageEvent) => {
        const data: Uint8Array = new Uint8Array(event.data);
        const decoder = decoding.createDecoder(data)
        const messageType = decoding.readVarUint(decoder)
    });
    wsProvider.on('status', (event: any) => {
        if (event.status === 'connected') {
            
        } else if (event.status === 'disconnected' && wsRetryCount < wsMaxRetries) {
            console.error("wsProvider disconnected");
            wsRetryCount++;
            setTimeout(() => {
                wsProvider.connect();
            }, 2000);
        } else {
            console.error(event.status)
            wsProvider.ws?.close(4002)
            wsProvider.destroy();
            console.error("wsProvider destory");
            return;
        }
    });
    return wsProvider;
}

I found the load slow file did not response for the client perioid userinfo. the normal conect file should send and response for user info just looks like ping-pong. but the load slow file the client just send peroid and the server did not response the client ping. I am confusing where is going on with the specify special file.

By file, do you mean Y.Doc?

If so, how big is the Y.Doc? That’s going to be more relevant for load time than the current snapshot size.

this y doc is very small I think it less than 1k, about 500 words.

YJS Docs contain the entire history of edits, so the size on disk isn’t necessarily related to the size as seen by the user. You should verify the total size of the Doc updates to rule out to rule out this possibility. It will help you with your troubleshooting.

how would I know the actual size of this slow docs with the whole histroy? is there any way to check and output the actual whole size?

Once the Doc has loaded, you can encode it and measure the compacted size:

Y.encodeStateAsUpdate(doc).length

It could also be worth measuring the number of updates if they are stored separately, but this should give you a good baseline.

1 Like

using your code, I found the nomal load file’s length looks like normal. the length from 5000-15000, but the load slow file’s length is 2. it look like the file is null. and the websocket will automatically close when load the file length with 2. very strange.

Yeah, length 2 means empty. That seems like the Doc is not syncing at all.

2 Likes