Skip to main content

[cheatSheet] 前端知識點

JS​

  • closure (lexical environment, environment record, outer environment reference)
  • event loop(microTask, macroTask, callStack)
  • event delegation(e.stopPropagation vs e.preventDefault)
  • let, const and var(scope, hoisting, TDZ)
  • call, apply, bind(this)
  • by value vs by reference
  • shallow copy, deep copy
  • arrow function vs normal function
  • prototype
  • == vs === vs Object.is()
  • Map vs WeakMap

CSS​

  • Specificity scoring（css 優先級）
  • Box model(content, padding, border, margin)
  • Position(static, relative, absolute, fixed, sticky)
  • rem vs em vs px
  • Display(block, inline, inline-block, flex, grid)
  • display:none vs visibility: hidden

HTML​

  • semantic element? pros/cons
  • DOMContentLoaded, load, beforeunload, unload ?
  • async script, defer script? Where to put <link> and <script> in the HTML file ?
  • prefetch vs preload vs preconnect

前端框架​

React​

  • Data binding
  • key ?
  • useCallBack vs useMemo vs React.memo
  • lifeCycle(mount, update, unmount)
  • render, commit
  • fragment ?
  • synthetic event(root vs document)
  • time slicing(16m/s, browser render process)

WEB​

  • Browser rendering(CSSOM, DOM, Render Tree, Layout, Paint), how to avoid reflow and repaint
  • Browser compatibility(PostCss, Autoprefixer, browserList)
  • CORS(簡單 vs 非簡單, preflight request, do we really need preflight request?, proxy, Jsonp(只支援 get))
  • cookie vs session
  • design pattern (ex, Container/Component pattern, Provider/Consumer pattern)
  • CSR vs SSR vs SSG
  • 前端登入(cookie+session, JWT, OAuth)
  • http cache

前端工具​

  • 模組化(IIFE、Common.js、ESM) pros and cons
  • webpack vs vite
  • npm vs yarn vs pnpm
  • jpg vs png vs webp vs SVG

前端手寫​

  • Promise.all
  • Promise.race
  • debounce
  • throttle
  • Array method(Reduce, map, filter, forEach,every, some, sort )
  • shallow copy
  • deep copy
  • memoize function
  • Lodash's get()

Computer science​

  • http vs https
  • HTTP1 vs HTTP1.1(http status 100(continue), methods(OPTIONS、PUT、PATCH、DELETE..etc)、Cache-control header)
  • HTTP1.1 vs HTTP2(Request multiplexing, head-of-line blocking, header 壓縮, server push)
  • TCP/IP
  • TCP vs UDP