一、HTML1.浏览器渲染页面流程解析HTML生成DOM树解析CSS生成CSSOM规则树DOMCOSSDOM合成渲染树只包含可见元素Layout回流/重排计算元素位置大小Paint重绘像素填充颜色、图片、阴影Composite分层绘制GPU分层合成页面2.回流重绘VS 重绘重绘元素样式改变不影响布局color、background),只重新上色性能开销小回流重排元素几何尺寸/位置变化宽高、margin\display\offsetTop读取页面重新布局开销极大。优化批量修改DOM、使用文档碎片、使用transform代替top/left、避免频繁读取布局属性二、css1.css选择器权重优先级!important 行内样式(1000) ID选择器100 类/属性/伪类10 标签/伪元素1)2.水平垂直居中所有方案flex: 父元素{display:flex;just-content:center;align-itemsLcenter}元素不定宽高定位transfrom子元素{position:absolute:left:50%;top:50%;transfrom:translate-50%-50%} 元素固定宽高定位负margin(固定宽高table-cell 古老方案grid:父{display:grid;place-items:center}3.移动端适配方案remflexiblevw/vh主流1vw 屏幕宽度100%媒体查询media响应式布局 flex/grid meta视口标签必须加meta nameviewport contentwidthdevice-width,inital-scale1,maximum-scale1三、JavaScript1.var/let/const区别var: 函数作用域有变量提升可以重复声明存在变量污染let: 块级作用域提升但存在暂时性死区不可重复声明可修改值const: 块级作用域不可重复声明不可重新赋值引用类型对象/数组内部属性可改变量提升JS执行前扫描代码var/函数声明提前到作用域顶部TDZ 暂时性死区let/const存在提升但声明前访问直接报错直到声明语句执行结束才解除死区2.this指向全局thiswindow(浏览器普通函数调用thiswindow对象方法调用this调用方法的对象new构造函数this新创建实例call/apply/bind手动指定箭头函数无this继承外层作用域this,不能new、不能改变this3.原型、原型链每个函数有prototype显式原型原型对象每个实例有_proto_隐式原型指向构造函数prototype原型链实例.proto →构造函数.prototype→父类prototype...→Object.prototype→null查找属性规则自身找不到沿着原型链向上查找直到null4.闭包定义 函数A内部返回函数BB持有A作用域变量形成闭包特点内层函数可访问外层变量外层变量不会被浏览器的垃圾回收机制回收用途私有变量、防抖节流、柯里化、模块化缺点内存常驻滥用造成内存泄漏5.垃圾回收机制GC浏览器两种回收机制标记清除主流标记可达对象清除未标记垃圾引用计数统计引用次数0则回收循环引用会内存泄漏。内存泄漏场景全局变量、未清理定时器、闭包滥用、DOM事件未解绑6.作用域 作用域链作用域变量可访问范围全局、函数、块级作用域链当前作用域所有父级作用域链表查找变量由内向外7.深浅拷贝浅拷贝只拷一层Object.assign、扩展运算符{...obj}、slice、concat问题引用类型属性共用内存修改互相影响深拷贝完整递归复制JSON.parse(JSON.stringify(obj)缺陷无法拷贝函数、正则、Date\undefined、循环引用递归手写深拷贝structuredClone【浏览器、Node.js17 原生 API】第三方库 lodash.cloneDeep8.防抖节流防抖debounce频繁触发停止触发后延迟执行搜索输入框、窗口resize)节流throttle固定时间只执行一次滚动监听、拖拽按钮频繁点击9.同步/异步宏任务微任务JS单线程事件循环机制 任务优先级同步代码异步代码(微任务宏任务异步中又分微任务和宏任务微任务宏任务微任务 microTaskPromise.then/catch/finally、queueMicrotask、await 后代码、MutationObserver宏任务 macroTasksetTimeout、setInterval、script 整体、ajax、DOM 事件、IO事件循环流程执行所有同步代码清空所有微任务队列取出一个宏任务执行重复循环10.Promise详解三种状态pending(等待、fulfilled(成功、rejected(失败状态不可逆核心APIthen接收成功回调链式调用返回新Promisecatch捕获失败可捕获前面所有错误finally无论成功失败都执行静态方法Promise.all全部成功才resolve一个失败立即rejectPromise.race最先完成的结果无论成败Promise.allSettled全部执行完返回每个结果状态Promise.resolve/Promise.reject11.async/await语法糖基于Promiseasync函数默认返回Promiseawait等待Promise完成阻塞后续代码错误捕获try/catch包裹await代码 注意await只能在async函数内使用12.数组常用高阶方法map映射返回新数组filter过滤符合条件元素reduce累加器求和/去重/分组forEach遍历无返回值some任一满足返回trueevery全部满足返回truefind/findIndex查找第一个匹配项13.跨域问题同源策略协议、域名、端口任一不同即跨域 跨域解决方案CORS后端设置Acess-Control-Allow-Orgin生产主流JSONP仅GET兼容老浏览器不安全Nginx反向代理WebSocket 不受同源限制vite/webpack 本地代理开发环境