前端技术文章
-
页码总数必须用Math.ceil(totalCount/pageSize)，数据为空时需显式设为1；HTML应用语义化nav+ol结构，当前页用aria-current="page"；禁用innerHTML拼接；URL参数须同步且正确编码。453 收藏 -
HTML5注释必须用<!--注释内容-->语法，禁止嵌套和含--或>，支持多行，禁用条件注释，需紧邻所注代码并遵循位置规范。383 收藏 -
使用CSS浮动布局实现图片画廊，通过设置float:left使图片并排排列并自动换行形成网格。1.基本结构为容器包裹多个img元素；2.为img设置宽度、外边距和float属性，确保每行显示合理数量图片；3.使用overflow:hidden或伪元素清除浮动，防止父容器高度塌陷；4.通过媒体查询调整不同屏幕下的图片宽度，实现响应式效果。该方法兼容旧项目，但现代布局推荐使用Flexbox或Grid。264 收藏 -
应改用performance.getEntriesByType('navigation')获取PerformanceNavigationTiming实例，因其基于timeOrigin、精度高、语义清、兼容好；旧timing已弃用且字段不可靠。349 收藏 -
key必须加在map返回的顶层JSX元素上，优先用数据唯一ID，慎用index或随机值，确保同一层级兄弟节点中稳定且不重复。430 收藏 -
能，但必须将绘图逻辑完全移入WebWorker且主线程禁用OffscreenCanvas绘制接口；newOffscreenCanvas创建独立离屏画布，transferControlToOffscreen()则移交DOMcanvas控制权并禁止主线程再获取上下文。225 收藏 -
闭包捕获组件ID实现局部单例监听机制：通过工厂函数创建绑定ID的监听器，委托事件+ID过滤，内聚处理逻辑，支持手动destroy销毁，统一校验ID响应原生与自定义事件。443 收藏 -
移动端iframe无法用padding-bottom百分比实现内容高度自适应，因其基于父容器宽度计算固定比例，与子页面实际内容高度无关；真正可靠方案是JS动态获取子页scrollHeight并设置iframe高度，同源监听onload，跨域通过postMessage通信并严格校验origin。225 收藏 -
Symbol.toPrimitive是JavaScript中控制对象类型转换的钩子方法，用于在数学运算、比较、显式转换等场景下按hint（'number'/'string'/'default'）返回合适原始值，提升大型业务对象的可读性与一致性。164 收藏 -
能，但仅移除项目符号或编号，不消除li的默认外边距和缩进；需配合重置padding和margin才真正“去掉样式”，并注意list-style-position对布局的影响。493 收藏 -
HTML中直接敲空格无效，因浏览器按W3C规范折叠空白符；最常用且稳妥的是 实体，适用于语义化占位如“姓 名”，禁用其对齐或堆叠。438 收藏 -
用MutationObserver监控DOM必须限定目标容器、关闭冗余选项、回调内轻量匹配，修复前先disconnect()，否则易拖垮性能或引发死循环；只监听具体业务节点，禁用全量监听body，配置childList/subtree/attributes铁三角，回调中精准校验变更类型与特征，修复前断开观察器。202 收藏 -
Array.prototype.some()天然支持短路，遇首个满足条件元素即返回true，适合权限校验；可结合解构、箭头函数、可选链及纯函数策略实现简洁、安全、可复用的多维权限判断。300 收藏 -
通过在父容器内嵌套一个相对定位的容器，将绝对定位的展开效果限制在该容器范围内，从而避免触发父元素的滚动条或布局重排。180 收藏 -
使用rel="preload"预加载关键CSS，内联首屏样式并异步加载非关键CSS，结合rel="prefetch"预取后续页面资源，避免渲染阻塞，提升页面加载速度与用户体验。419 收藏