Kyle Mo kylemocode

DOM Performance

How the browser renders the document
- Receives the data (bytes) from the server.
- Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
- Turns tokens into nodes.
- Turns nodes into the DOM tree.
Builds CSSOM tree from the css rules.

	M1:{"id":"./src/SearchField.client.js","chunks":["client5"],"name":""}
	M2:{"id":"./src/EditButton.client.js","chunks":["client1"],"name":""}
	S3:"react.suspense"
	M4:{"id":"./src/SidebarNote.client.js","chunks":["client6"],"name":""}
	J0:["$","div",null,{"className":"main","children":[["$","section",null,{"className":"col sidebar","children":[["$","section",null,{"className":"sidebar-header","children":[["$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"}],["$","strong",null,{"children":"React Notes"}]]}],["$","section",null,{"className":"sidebar-menu","role":"menubar","children":[["$","@1",null,{}],["$","@2",null,{"noteId":null,"children":"New"}]]}],["$","nav",null,{"children":["$","$3",null,{"fallback":["$","div",null,{"children":["$","ul",null,{"className":"notes-list skeleton-container","children":[["$","li",null,{"className":"v-stack","children":["$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}]}],["$","li"

	- uses: actions/cache@v2
	with:
	path: \|
	./node_modules
	${{ github.workspace }}/.next/cache
	# Generate a new cache whenever packages or source files change.
	key: ${{ runner.os }}-nextjs-${{ hashFiles('/yarn.lock') }}-${{ hashFiles('.[jt]s', '**.[jt]sx') }}
	# If source files changed but packages didn't, rebuild from a prior cache.
	restore-keys: \|
	${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-

	const express = require('express')
	const next = require('next')
	const Cache = require('lru-cache');
	const compression = require('compression')


	const port = parseInt(process.env.PORT, 10) \|\| 3000
	const dev = process.env.NODE_ENV !== 'production'
	const app = next({ dev })

	let mswEnabled = false;
	const customFetch = async (uri: string, options: RequestInit) => {
	if (typeof window !== 'undefined' && !mswEnabled) {
	const { worker } = await import('@/mocks/worker');
	await worker.start();
	mswEnabled = true;
	}

	return fetch(uri, options);
	};

	export const schemaWithMocks = addMocksToSchema({
	schema,
	mocks,
	resolvers: (store) => ({
	Query: {
	books: (_, { id }) => {
	return Array.from(
	{ length: 8 },
	() => store.get('Book', id)
	);

	/* mocks/index.ts */
	import { setupServer } from 'msw/node';
	import { setupWorker } from 'msw';

	import { handler } from '@/mocks/handler';

	export const server = setupServer(handler);
	export const worker = setupWorker(handler);

	import { addMocksToSchema, Ref } from '@graphql-tools/mock';
	import type { ExecutionResult, IntrospectionQuery } from 'graphql';
	import { buildClientSchema, graphql } from 'graphql';
	import { graphql as mswGraphql } from 'msw';

	import IntrospectionResultData from '@/generated/introspection.json';

	const schema = buildClientSchema(
	(IntrospectionResultData as unknown) as IntrospectionQuery
	);

	// 開始一個 transaction
	await conn.query("BEGIN");

	// 執行更新
	const sqlU= "update seats set isbooked = 1, name = $2 where id = $1 and isbooked = 0"
	const updateResult = await conn.query(sqlU,[id, name]);

	// 結束 transaction
	await conn.query("COMMIT");

	// 開始一個 transaction
	await conn.query("BEGIN");
	// 先 select 使用者指定的 seat，並確認 isbooked 的狀態是 false (FOR UPDATE 是關鍵，等等會說明)
	const sql = "SELECT * FROM seats where id = $1 and isbooked = 0 FOR UPDATE";
	const result = await conn.query(sql, [id]);

	if (result.rowCount === 0) {
	res.send({"error": "Seat already booked"})
	return;
	}