-
事件委托是利用事件冒泡将子元素事件交由父元素统一处理的技巧,通过e.target或closest()识别目标,减少绑定次数、支持动态元素、降低内存占用。
-
JavaScript代码压缩通过AST分析实现语义保留优化,UglifyJS已停更,推荐使用Terser;需权衡体积、可调试性与兼容性,并注意eval、字符串调用等压缩边界。
-
HTML响应式开发需用外部CSS文件+viewport声明,配合移动优先的媒体查询、vw/vh/clamp()单位,以及touch-action、IntersectionObserver等性能优化手段。
-
URLPatternAPI提供了一种浏览器原生、声明式且语义化的URL匹配与解析方案,相比正则表达式具有更高的可读性、更安全的参数提取和更好的性能。它通过URLPattern构造函数定义协议、主机名、路径等部分的匹配模式,支持动态参数(:param)、可选段(?)、通配符(*)和重复段(+),并利用test()和exec()方法实现路由判断与参数提取。其优势在于原生支持、清晰语法、精准匹配多维度URL组成部分及易于维护,适用于构建轻量级客户端路由器或集成到现有框架中,尤其适合需精细控制路由逻辑的场景。
-
HTML5应用“卸干”需四步:先注销ServiceWorker,再清缓存与Cookies,接着用开发者工具清除CacheStorage、IndexedDB和localStorage,最后验证首次加载变慢、登录态丢失、离线报错及PWA图标消失。
-
使用CSS的rgba()或opacity可实现图片覆盖层透明效果,其中rgba()仅影响背景色,避免文字变透明;通过:hover与transition可实现悬停时平滑显示覆盖层;还可利用linear-gradient创建渐变覆盖,增强视觉层次。
-
纯CSS无法让伪元素边框自动贴合文字长度,但可用transform:scaleX()配合inline-block容器模拟可变长效果;需设width:100%、transform-origin:leftcenter,并处理换行、继承、居中及兼容性问题。
-
用绝对定位图片时文字不绕行,需手动为文字设置margin避开图片区域,同时确保父容器设position:relative。
-
用rem因其基于根元素字号,配合媒体查询可批量响应式缩放;clamp()用rem和vw混合实现平滑弹性适配;行高用无单位值、字间距微调、中文断行加overflow-wrap;字体加载用font-display:swap配合preload避免闪动。
-
HTML5input[type="datetime-local"]的min和max为什么没生效?因为值格式不匹配——min/max要求严格按YYYY-MM-DDThh:mm格式(秒可选,但必须补零),且时区隐含为本地。浏览器一发现格式不对,直接忽略整个属性。错误写法:min="2024-01-01"(缺T和时间部分)正确写法:min="2024-01-01T00:00"或min="2024-01-01T00:00:00"注意:不能写成min="2024/01/01"或带空格的
-
JavaScriptMath对象提供随机数和最值计算方法:Math.random()生成[0,1)浮点数,需换算指定范围;Math.max()/Math.min()不支持直接传数组,须用展开运算符;注意边界概率、空数组及类型转换问题。
-
展开运算符(...)用于将数组或对象“摊开”处理,主要有三大用途:1.合并数组或对象,如[...arr1,...arr2]或{...obj1,...obj2};2.在函数调用中传递参数,如sum(...numbers);3.创建数组或对象的浅拷贝,如[...arr1]或{...obj1}。使用时需注意性能问题,避免在循环中频繁创建新结构,并留意其仅执行浅拷贝的特性。
-
JavaScript代码分割通过拆分JS文件为小chunk实现按需加载,提升首屏速度;常用动态import()、Reactlazy/Suspense、构建工具自动分割及prefetch/preload优化。
-
使用::placeholder伪元素可自定义输入框占位符样式,支持颜色、字体大小、粗细等;需注意浏览器兼容性,建议添加厂商前缀或由构建工具处理。
-
别用top/left配合position:relative做抖动,会触发重排导致卡顿;应改用transform:translate()+will-change:transform,配合5帧自然偏移(±2px~±4px)和properanimation控制。