-
JavaScript移动端性能优化核心是减少主线程阻塞、降低内存占用、适配弱网与低端设备,重点包括控制JS执行时间≤16ms、懒加载、TreeShaking、passive事件、RAF节流、及时清理资源及使用WeakMap等。
-
懒加载是“用到再加载”的网页性能优化技术,核心是图片进入可视区时才加载;推荐用IntersectionObserverAPI实现,兼容方案可用节流的scroll+getBoundingClientRect;需避免影响首屏关键图并处理加载失败。
-
position:sticky的top值需设为具体长度(如0、20px),表示元素距其最近滚动祖先顶部的距离开始吸附;若无效,主因是祖先未设overflow-y:auto/scroll且有明确高度。
-
容器默认无内边距,需按断点设置padding(如px-4sm:px-6lg:px-8),避免嵌套叠加,并为Header/Footer统一添加响应式内边距以保障视觉一致性。
-
flex-wrap:wrap用于允许flex子元素自动换行;设置display:flex和flex-wrap:wrap后,子元素在一行放不下时会折行排列,结合flex宽度与calc()可控制每行数量,适用于卡片网格、标签组等多行布局场景。
-
现代前端应用需要状态管理,因为随着应用复杂度提升,分散的状态导致维护困难,而状态管理通过集中控制和单向数据流确保可预测性;Redux作为典型方案,其核心是单一不可变状态树(store)、描述变化的动作(action)、纯函数reducer处理状态更新、以及通过dispatch触发更新的流程,四者协同实现清晰、可调试的状态管理机制。
-
网页邮件发送需结合前端与后端:一、用mailto:链接调用本地邮件客户端,预填信息但依赖环境;二、用Ajax调用后端API通过SMTP发信,可反馈状态;三、用表单+隐藏iframe实现兼容性提交;四、集成SendGrid等第三方SDK,需安全传递密钥。
-
HTML5中唯一可靠支持的字符编码是UTF-8;非UTF-8编码需用<metacharset>声明且限前1024字节,但浏览器已基本不支持GBK等旧编码,混用会导致乱码或解析错误。
-
JavaScript桌面通知需先调用Notification.requestPermission()获取用户授权,仅在用户点击等交互后有效,权限状态分granted/denied/default;获准后方可通过newNotification()发送通知,且要求HTTPS(localhost除外)。
-
navigator可获取userAgent、platform、vendor、hardwareConcurrency、deviceMemory、maxTouchPoints等属性,其中platform和maxTouchPoints相对可靠;iOS判断需结合UA匹配与触控特征;UA已因减损策略不可信,推荐用运行时能力探测替代字符串解析。
-
使用position:fixed+transform是推荐的模态框居中方案,通过top:50%、left:50%和transform:translate(-50%,-50%)实现未知宽高下的精准居中,兼容性好且无需预先知道尺寸;另一种是position:absolute配合负margin,适用于已知宽高情况,需父容器相对定位并手动设置边距,维护性较差。建议搭配fixed定位的半透明遮罩层提升体验,合理设置z-index确保层级正确。
-
浅拷贝只复制第一层属性,嵌套引用值共享内存;深拷贝递归复制所有层级,完全独立。常见浅拷贝方法有展开运算符、Object.assign()、slice()/concat();JSON深拷贝有缺陷,手写需处理循环引用,生产推荐Lodash或structuredClone()。
-
JavaScript的多态基于动态绑定、原型继承和鸭子类型,运行时根据对象实际方法决定行为;支持方法重写、结构匹配调用及函数内联多态,无需编译时类型检查。
-
图片垂直居中需据容器类型选择方案:行内元素用line-height+vertical-align:middle;块级容器用flex布局align-items:center;混合场景可用inline-flex,避免line-height与flex混用。
-
使用position:fixed可将元素固定在页面顶部,需设置top:0、width:100%、z-index等属性;注意避免父元素含transform/filter导致失效,iOS软键盘引发偏移可用sticky替代或JS修复,确保层级不被遮挡。