Analysis of Common Frontend Issues

During frontend development, developers frequently encounter a variety of problems and pitfalls. This article explores common issues related to data types, asynchronous behavior, styling, performance, and compatibility, offering explanations and concrete code examples to help readers understand and resolve them.

Data Types

Numbers

1. Base conversion issues:

/**
*  为什么 010 会是 8
*/
const num1 = 09 // 9
const num2 = 010 // 8

Numbers starting with 0 are interpreted as octal. For explicit octal, binary, or hexadecimal literals, use 0o, 0b, and 0x respectively.

2. Precision loss:

0.1+0.2 // 0.30000000000000004
2.55.toFixed(1) // '2.5'
2.45.toFixed(1) // '2.5'
2..toFixed(1) // '2.0'

JavaScript stores numbers as 64‑bit IEEE‑754 floating‑point values, which can introduce rounding errors during arithmetic operations.

3. Function length (parameter count):

function fn(a,b,c){ return a+b+c }
fn.length // 3
function fn1(a = 1,b,c){ return a+b+c }
fn1.length // 0 (default parameters are not counted)
function fn2(a,b=1,c){ return a+b+c }
fn2.length // 1 (counts parameters before the first default)

Object ordering – numeric keys are sorted ascending, then string keys in insertion order.

a.b=1
a.a=1
a.c=1
a[2]=2
a[12]=2
a[1]=2
// Result: {1:2, 2:2, 12:2, b:1, a:1, c:1}

Assignment interruption – JavaScript lacks transaction mechanisms; partial assignments remain if an error occurs.

Asynchronous

Timer inaccuracy – Timers can be delayed when the page is hidden, the main thread is blocked, or the event loop is busy. Modern browsers often clamp the minimum interval to about 1 second when a tab is inactive.

Reference: MDN setTimeout

Race conditions – Simultaneous requests may return out of order, causing stale data to be displayed. Three mitigation patterns are presented:

Chain calls using a promise queue.

export class SequenceQueue {
  promise = Promise.resolve();
  excute(promise) {
    this.promise = this.promise.then(() => promise);
    return this.promise;
  }
};

Use a counter (ref) to identify the latest request.

const fetchRef = useRef(0);
const debounceFetcher = useMemo(() => {
  const loadOptions = (value) => {
    fetchRef.current += 1;
    const fetchId = fetchRef.current;
    setOptions([]);
    setFetching(true);
    fetchOptions(value).then(newOptions => {
      if (fetchId !== fetchRef.current) return; // stale response
      setOptions(newOptions);
      setFetching(false);
    });
  };
  return debounce(loadOptions, debounceTimeout);
}, [fetchOptions, debounceTimeout]);

Cancelable requests using Promise.race.

function cancelableRequest(requestPromise) {
  const cancelToken = {};
  const cancelablePromise = new Promise((resolve, reject) => {
    cancelToken.cancel = () => reject(new Error('Request was canceled'));
    Promise.race([requestPromise, cancelToken])
      .then(resolve)
      .catch(reject);
  });
  return { promise: cancelablePromise, cancel: cancelToken.cancel };
}
// Usage example
const mockApi = () => new Promise(resolve => {
  setTimeout(() => {
    resolve([{ title: 'Post 1' }, { title: 'Post 2' }, { title: 'Post 3' }]);
  }, 3000);
});
const { promise, cancel } = cancelableRequest(mockApi());
promise.then(posts => console.log(posts)).catch(err => console.error(err.message));
// cancel();

Styling

Positioning – position: fixed can degrade to absolute when any ancestor has a non‑none transform, perspective, filter, etc., because those properties create a new containing block.

Stacking context – The cascade determines which rule wins based on origin, importance, specificity, and source order. Detailed steps include relevance, importance, origin, layer, specificity, and order. See MDN for a full description.

Performance

Performance problems are grouped into three categories: network, rendering, and runtime computation.

Network optimization : compress/merge resources, use caching, CDN, DNS pre‑fetch, and load scripts at the bottom of the page.

Rendering optimization : minimize DOM reads/writes, use CSS for visual changes, employ lazy loading, virtual DOM, modular JavaScript, and Web Workers.

Runtime optimization : write efficient algorithms, use event delegation, throttle/debounce, and release unused memory.

Compatibility

Some features behave differently across browsers; for example, look‑behind regular expressions are not supported in older IE versions.

References

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block

https://caniuse.com/

https://standards.ieee.org/ieee/754/6210/