Frontend Development Case Studies: Resource Loading Debugging, z-index Management, and CSS Transform Effects on Fixed Positioning

This article presents three frontend development case studies: diagnosing webpage resource loading issues, understanding CSS z-index stacking behavior, and examining how CSS3 transform affects position:fixed.

First, it describes a scenario where a recommendation list fails to load for some users. The team reproduces the issue by monitoring global resource load errors and JavaScript exceptions using window.addEventListener for 'error' and 'unhandledrejection', sending reports via a send() function. To capture details, they traverse up the DOM to generate an XPath that includes id or class attributes. They address cross‑origin script errors by adding the Access‑Control‑Allow‑Origin: * header to CDN resources and setting the crossorigin attribute on script tags, noting that Safari requires same‑origin resources, which can be achieved via an Nginx proxy for debugging. Slow resources are detected after the load event using Performance.getEntriesByType('resource') and filtering entries with duration > 1000ms, then reporting the list. The article also shows how to collect additional context such as performance.memory and navigator.connection, and how to obtain an image’s XPath from a resource timing entry.

window.addEventListener('error', event => { if (event.srcElement !== window) { console.log('资源加载失败，加载资源的元素是：', event.srcElement); send(); } else { console.log('JS报错：', event.message); send(); } }, true); window.addEventListener('unhandledrejection', event => { const error = event.reason || {}; console.log('JS报错：', error); send(); });

access-control-allow-origin: *

ctx.set('Access-Control-Allow-Origin', '*');

<script src="https://cdn.a.com/static/a.js" crossorigin="anonymous"></script>

const list = performance.getEntriesByType('resource'); const len = list.length; const slowList = []; for (let i = 0; i < len; i++) { const timing = list[i]; // 大于1s if (timing.duration > 1000) { slowList.push(timing); } } send(slowList);

// timing.name就是资源地址，适合 const img = document.body.querySelector('img[src="' + timing.name + '"]'); const xpath = getxpath(img);

Second, the article explains the z-index property: it sets the stack order of an element and whether the element creates a new stacking context. It reviews default auto, integer values, and inheritance, and describes basic rules for positioned elements—later‑over‑earlier when z‑index values are equal, and ancestor‑over‑descendant when z‑index values are numeric and nested. To avoid uncontrolled escalation of z‑index values in large projects, the authors provide a utility that centralizes z‑index management.

const KEY = '_tbv_z_index_'; function initZIndex$() { return (window[KEY] = 10000); } function once(fn) { const flag = true; return function () { if (flag) { flag = false; const args = Array.prototype.slice.call(arguments, 0); fn.apply(args); } }; } const initZIndex = once(initZIndex$); function zIndex$(zIndex) { if (zIndex) { return (window[KEY] = zIndex); } return (window[KEY] += 1); } const zIndex = zIndex$();

Third, it examines how CSS3 transform influences position:fixed. Normally a fixed element is positioned relative to the viewport, but when an ancestor has a transform property, the fixed element’s containing block becomes that transformed ancestor, causing it to scroll with the page. Additionally, transform creates a new stacking context, making z‑index values inside and outside the transform independent, which can lead to unexpected layering. The article includes diagrams illustrating these effects.