{"type":"excalidraw","version":2,"source":"https://AwesomeSystemDesign.dev","elements":[{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-1"}],"updated":0,"link":null,"locked":false,"id":"shape-0","type":"rectangle","seed":41,"x":30,"y":30,"width":420,"height":68,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-1"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-1","type":"text","seed":114,"x":50,"y":52.3,"width":380,"height":23.400000000000002,"fontSize":18,"fontFamily":1,"text":"Client-Side Optimization Techniques","originalText":"Client-Side Optimization Techniques","textAlign":"left","verticalAlign":"middle","containerId":"shape-0","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":1}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-3"}],"updated":0,"link":null,"locked":false,"id":"shape-2","type":"rectangle","seed":187,"x":30,"y":123,"width":568.49692,"height":153,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-2"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-3","type":"text","seed":260,"x":50,"y":141,"width":528.49692,"height":117,"fontSize":18,"fontFamily":1,"text":"1. DEBOUNCING\nUser types: h-e-l-l-o\nWithout debounce: 5 requests (h, he, hel, hell, hello)\nWith 100ms debounce: 1-2 requests (hello, or hel + hello)\nSavings: ~60-70% fewer requests","originalText":"1. DEBOUNCING\nUser types: h-e-l-l-o\nWithout debounce: 5 requests (h, he, hel, hell, hello)\nWith 100ms debounce: 1-2 requests (hello, or hel + hello)\nSavings: ~60-70% fewer requests","textAlign":"left","verticalAlign":"middle","containerId":"shape-2","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":2}},{"angle":0,"strokeColor":"#9180ac","backgroundColor":"#f4effb","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-5"}],"updated":0,"link":null,"locked":false,"id":"shape-4","type":"rectangle","seed":333,"x":30,"y":301,"width":609.8241999999999,"height":153,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-3"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-5","type":"text","seed":406,"x":50,"y":319,"width":569.8241999999999,"height":117,"fontSize":18,"fontFamily":1,"text":"2. CLIENT-SIDE CACHE\nCache recent prefix → suggestions in browser\nIf user types \"app\", then backspaces to \"ap\", then types \"p\"\n→ serve \"app\" suggestions from local cache, no network call\nTypical cache: LRU, 100-500 entries, session-scoped","originalText":"2. CLIENT-SIDE CACHE\nCache recent prefix → suggestions in browser\nIf user types \"app\", then backspaces to \"ap\", then types \"p\"\n→ serve \"app\" suggestions from local cache, no network call\nTypical cache: LRU, 100-500 entries, session-scoped","textAlign":"left","verticalAlign":"middle","containerId":"shape-4","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":3}},{"angle":0,"strokeColor":"#6577aa","backgroundColor":"#eef1fc","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-7"}],"updated":0,"link":null,"locked":false,"id":"shape-6","type":"rectangle","seed":479,"x":30,"y":479,"width":515.34004,"height":153,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-4"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-7","type":"text","seed":552,"x":50,"y":497,"width":475.34004000000004,"height":117,"fontSize":18,"fontFamily":1,"text":"3. PREFIX REUSE\nIf \"app\" returned [\"apple\", \"app store\", \"apple pie\"]\nand user types \"appl\" → client can filter locally:\n[\"apple\", \"apple pie\"] without a server call\nOnly call server if local filter yields < K results","originalText":"3. PREFIX REUSE\nIf \"app\" returned [\"apple\", \"app store\", \"apple pie\"]\nand user types \"appl\" → client can filter locally:\n[\"apple\", \"apple pie\"] without a server call\nOnly call server if local filter yields < K results","textAlign":"left","verticalAlign":"middle","containerId":"shape-6","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":4}},{"angle":0,"strokeColor":"#628572","backgroundColor":"#edf5ee","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-5"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-9"}],"updated":0,"link":null,"locked":false,"id":"shape-8","type":"rectangle","seed":625,"x":30,"y":657,"width":495.535,"height":153,"customData":{"revealStep":5}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-5"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-9","type":"text","seed":698,"x":50,"y":675,"width":455.535,"height":117,"fontSize":18,"fontFamily":1,"text":"4. REQUEST CANCELLATION\nIf user types \"ap\" then quickly \"app\" then \"appl\":\nCancel in-flight \"ap\" and \"app\" requests\nOnly the latest request matters\nUse AbortController (browser) or cancel token","originalText":"4. REQUEST CANCELLATION\nIf user types \"ap\" then quickly \"app\" then \"appl\":\nCancel in-flight \"ap\" and \"app\" requests\nOnly the latest request matters\nUse AbortController (browser) or cancel token","textAlign":"left","verticalAlign":"middle","containerId":"shape-8","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":5}},{"angle":0,"strokeColor":"#a68a53","backgroundColor":"#fff7e6","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-6"],"frameId":null,"roundness":null,"boundElements":[{"type":"text","id":"shape-11"}],"updated":0,"link":null,"locked":false,"id":"shape-10","type":"rectangle","seed":771,"x":30,"y":835,"width":648.6519999999999,"height":106.2,"customData":{"revealStep":6}},{"angle":0,"strokeColor":"#394557","backgroundColor":"transparent","fillStyle":"solid","strokeWidth":1.5,"strokeStyle":"solid","roughness":0.7,"opacity":100,"version":1,"versionNonce":1,"isDeleted":false,"groupIds":["step-6"],"frameId":null,"roundness":null,"boundElements":null,"updated":0,"link":null,"locked":false,"id":"shape-11","type":"text","seed":844,"x":50,"y":853,"width":608.6519999999999,"height":70.2,"fontSize":18,"fontFamily":1,"text":"5. PRELOADING\nWhen search box gets focus, prefetch top queries (empty prefix)\n\"Most popular searches right now\"","originalText":"5. PRELOADING\nWhen search box gets focus, prefetch top queries (empty prefix)\n\"Most popular searches right now\"","textAlign":"left","verticalAlign":"middle","containerId":"shape-10","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":6}}],"appState":{"viewBackgroundColor":"#fbfbf8","gridSize":null},"files":{}}