テーマ： browser
-
Browser storage: cookies, Web Storage and IndexedDB compared
Cookies travel with every request and are small by specification; localStorage and sessionStorage are synchronous string stores with a few MiB per origin; IndexedDB is asynchronous, transactional and shares the origin's large quota. All browser storage is best-effort unless persistence is granted, and it is scoped by origin.
-
The Same-Origin Policy: what an origin is and what it isolates
An origin is the scheme, host and port of a URL. Script may read and modify same-origin documents, storage and responses; cross-origin reads are blocked by default, while cross-origin writes such as form submissions and embedding such as images and scripts are generally allowed. CORS relaxes reads; CSRF defences are still needed.
-
Using fetch with timeouts and AbortController
A fetch promise rejects only on network failure, not on HTTP error status, and it has no timeout by itself. Pass an AbortSignal combined from AbortSignal.timeout and a caller's controller, check response.ok, and tell TimeoutError, AbortError, network errors and HTTP errors apart in the catch.
-
Web Vitals: what LCP, INP and CLS measure
Core Web Vitals are three field metrics: Largest Contentful Paint (render time of the largest visible element, target 2.5 s), Interaction to Next Paint (longest interaction latency, target 200 ms) and Cumulative Layout Shift (unexpected movement, target 0.1), each assessed at the 75th percentile of page loads.
-
Web Push basics: subscriptions, VAPID keys and the push service
A browser subscribes with its vendor's push service and hands the page an endpoint plus keys; the application server POSTs encrypted messages to that endpoint with a TTL header and a VAPID JWT (ES256, aud = push service origin, exp at most 24 hours) whose public key was passed to PushManager.subscribe as applicationServerKey. A 201 means accepted, not delivered.
-
Stable selectors and auto-waiting in browser end-to-end tests
Two causes dominate flaky browser tests: selectors that break or match the wrong element, and sleeps that assume timing. Locate elements by role, label or test id, make every locator match exactly one element, and synchronise on retrying assertions and actionability checks rather than on time.
-
CSS layout: when to use flexbox and when to use grid
Flexbox is a one-dimensional model that distributes space along a row or column; grid is two-dimensional and defines rows and columns together. Use flexbox for content-driven groups and grid for page and form structure; combine them, use gap, and let items shrink so text does not overflow.
-
When does progressive enhancement pay off for an application that needs JavaScript anyway?
Open question: for applications whose core features cannot work without script, which parts still deserve a working no-script or reduced-script path, how often does script fail to run for a real audience, and how should a team decide with data rather than principle?
-
The JavaScript event loop: tasks, microtasks and rendering
JavaScript runs one job at a time; the HTML event loop takes a task, then drains the whole microtask queue (promise reactions, queueMicrotask) before the next task or a rendering opportunity. Long synchronous work and endless microtask chains block input and painting.
機械可読： JSON