前端技术文章
-
<header>专用于语义上的页面或区块入口内容，必须包含标题（如<h1>或<h2>），可含logo、主导航<nav>（需aria-label）、搜索<form>（建议role="search"），不可塞轮播图、广告等非入口内容，无默认样式且IE8以下不支持，多<header>需明确归属，禁止嵌套或滥用。447 收藏
最省事方案是用fetch加载questions.json，需本地服务器避免CORS；题库扁平结构，localStorage存新题并校验字段；渲染用template标签防XSS，导出用Blob限数量。447 收藏
ResizeObserver构造函数必须传入回调函数，否则报TypeError；监听目标须为已挂载DOM元素；contentRect仅含contentbox尺寸；需手动调用unobserve或disconnect清理，避免内存泄漏。447 收藏
String.prototype.endsWith()是校验文件扩展名最直接高效的方法，适合判断原始文件名是否以指定后缀结尾，需注意大小写、路径无关性，并推荐结合MIME类型与服务端校验。447 收藏
Array.prototype.at()能安全简洁地从路径字符串分割后的数组中按相对位置取值，如parts.at(-1)取末段、at(-2)取父目录，避免length计算和空数组报错，支持链式调用与可选链降级。447 收藏
答案：构建沉浸式WebXR体验需确保浏览器支持并启用HTTPS，通过navigator.xr检查VR会话兼容性，绑定用户触发事件启动immersive-vr会话，结合Three.js等库建立渲染循环，利用requestAnimationFrame逐帧更新双目视图，获取XRFrame中的姿态数据同步摄像头位置，并通过referenceSpace管理空间坐标系，监听输入设备变化实现交互响应，同时采用分层渲染、LOD与纹理优化保障性能，为不支持设备提供全景降级方案，确保跨平台可用性。447 收藏
WebSerialAPI通过ReadableStream事件驱动模型实现异步读写与DOM实时更新：用port.readable.getReader()启动非阻塞读取循环，TextDecoder解码字节，缓存切分协议帧，队列化解析结果，requestIdleCallback批量更新DOM，并绑定至响应式数据结构。447 收藏
应优先使用100dvh并降级至100vh，同时必须配置viewport标签、重置html/body尺寸、统一box-sizing，并在关键场景用JS监听resize/scroll/orientationchange动态同步window.innerHeight。447 收藏
锚点链接生效需同时满足DOM存在、CSS定位流正常、路由未拦截三条件；目标必须用合法唯一id，动态内容需确保挂载后滚动，fixed导航需用scroll-margin-top避让，SPA中须绕过路由拦截并手动处理hash。447 收藏
页面将在3秒后跳转到">
最快实现跳转是用<metahttp-equiv="refresh"content="0;url=/login.html">，纯HTML、零JS、兼容老IE；需放<head>中，0秒立即跳转，相对路径推荐用/login.html而非./login.html。447 收藏
JavaScript前端无法直接生成PDF，但可用jsPDF（适合绘图/票据）、pdfmake（适合数据驱动排版）、html2pdf.js（HTML区块转PDF）或Puppeteer（服务端高保真）实现；需注意中文字体、内存限制及加密等高级功能须后端支持。447 收藏
JavaScript事件内存泄漏本质是闭包引用未释放：监听器未解绑或函数引用不一致导致DOM节点及关联数据无法回收，AbortController可统一管理生命周期。447 收藏
poster仅在视频未播放、元数据未加载或加载失败时生效，loadedmetadata触发后浏览器可能立即用首帧覆盖；首帧截取须等seeked事件，而非loadeddata。447 收藏
设计稿与页面尺寸不符的四大主因：box-sizing被覆盖致内容区变窄；rem换算基准（font-size）不统一；transform/zoom缩放干扰布局测量；DPR导致量尺工具读数虚高。447 收藏
CustomEvent构造函数创建自定义事件需传入事件名和含detail属性的配置对象，detail为必需字段用于携带任意数据；通过dispatchEvent触发，addEventListener监听时通过event.detail读取数据；可选bubbles、cancelable等配置控制事件行为。447 收藏
