{"type":"excalidraw","version":2,"source":"https://AwesomeSystemDesign.dev","elements":[{"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-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":16,"y":16,"width":288,"height":121.8,"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":36,"y":34,"width":248,"height":85.8,"fontSize":22,"fontFamily":1,"text":"Client-Side\nOptimization\nTechniques","originalText":"Client-Side\nOptimization\nTechniques","textAlign":"left","verticalAlign":"middle","containerId":"shape-0","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":1}},{"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-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":16,"y":181.8,"width":288,"height":322,"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":36,"y":199.8,"width":248,"height":286,"fontSize":22,"fontFamily":1,"text":"1. DEBOUNCING\nUser types: h-e-l-l-o\nWithout debounce: 5\nrequests (h, he, hel,\nhell, hello)\nWith 100ms debounce:\n1-2 requests (hello,\nor hel + hello)\nSavings: ~60-70%\nfewer requests","originalText":"1. DEBOUNCING\nUser types: h-e-l-l-o\nWithout debounce: 5\nrequests (h, he, hel,\nhell, hello)\nWith 100ms debounce:\n1-2 requests (hello,\nor hel + hello)\nSavings: ~60-70%\nfewer requests","textAlign":"left","verticalAlign":"middle","containerId":"shape-2","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":2}},{"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-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":16,"y":547.8,"width":288,"height":465,"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":36,"y":565.8,"width":248,"height":429,"fontSize":22,"fontFamily":1,"text":"2. CLIENT-SIDE\nCACHE\nCache recent prefix →\nsuggestions in\nbrowser\nIf user types \"app\",\nthen backspaces to\n\"ap\", then types \"p\"\n→ serve \"app\"\nsuggestions from\nlocal cache, no\nnetwork call\nTypical cache: LRU,\n100-500 entries,\nsession-scoped","originalText":"2. CLIENT-SIDE\nCACHE\nCache recent prefix →\nsuggestions in\nbrowser\nIf user types \"app\",\nthen backspaces to\n\"ap\", then types \"p\"\n→ serve \"app\"\nsuggestions from\nlocal cache, no\nnetwork call\nTypical cache: LRU,\n100-500 entries,\nsession-scoped","textAlign":"left","verticalAlign":"middle","containerId":"shape-4","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":3}},{"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-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":16,"y":1056.8,"width":288,"height":379.2,"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":36,"y":1074.8,"width":248,"height":343.2,"fontSize":22,"fontFamily":1,"text":"3. PREFIX REUSE\nIf \"app\" returned\n[\"apple\", \"app store\",\n\"apple pie\"]\nand user types \"appl\"\n→ client can filter\nlocally:\n[\"apple\", \"apple pie\"]\nwithout a server call\nOnly call server if\nlocal filter yields < K\nresults","originalText":"3. PREFIX REUSE\nIf \"app\" returned\n[\"apple\", \"app store\",\n\"apple pie\"]\nand user types \"appl\"\n→ client can filter\nlocally:\n[\"apple\", \"apple pie\"]\nwithout a server call\nOnly call server if\nlocal filter yields < K\nresults","textAlign":"left","verticalAlign":"middle","containerId":"shape-6","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":4}},{"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-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":16,"y":1480,"width":288,"height":379.2,"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":36,"y":1498,"width":248,"height":343.2,"fontSize":22,"fontFamily":1,"text":"4. REQUEST\nCANCELLATION\nIf user types \"ap\"\nthen quickly \"app\"\nthen \"appl\":\nCancel in-flight \"ap\"\nand \"app\" requests\nOnly the latest\nrequest matters\nUse AbortController\n(browser) or cancel\ntoken","originalText":"4. REQUEST\nCANCELLATION\nIf user types \"ap\"\nthen quickly \"app\"\nthen \"appl\":\nCancel in-flight \"ap\"\nand \"app\" requests\nOnly the latest\nrequest matters\nUse AbortController\n(browser) or cancel\ntoken","textAlign":"left","verticalAlign":"middle","containerId":"shape-8","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":5}},{"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-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":16,"y":1903.2,"width":288,"height":236.20000000000002,"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":36,"y":1921.2,"width":248,"height":200.20000000000002,"fontSize":22,"fontFamily":1,"text":"5. PRELOADING\nWhen search box\ngets focus, prefetch\ntop queries (empty\nprefix)\n\"Most popular\nsearches right now\"","originalText":"5. PRELOADING\nWhen search box\ngets focus, prefetch\ntop queries (empty\nprefix)\n\"Most popular\nsearches right now\"","textAlign":"left","verticalAlign":"middle","containerId":"shape-10","lineHeight":1.3,"autoResize":false,"customData":{"revealStep":6}}],"appState":{"viewBackgroundColor":"#fbfbf8","gridSize":null},"files":{}}