前端技术文章
-
零基础可一天上线母婴商城静态页：用语义化HTML+CSS实现商品列表，突出年龄、材质、认证等关键信息，价格用class="price"标记，图片带描述性alt，响应式用Grid/Flex布局，购买按钮跳转真实buy.html并解析URL参数展示商品名，必加viewportmeta和触控适配，信息颗粒度需源自产品说明书与国标。357 收藏 -
应使用<linkrel="preload">预加载当前页明确需要的关键资源，如首屏字体、CSS、JS或图片；必须指定as属性（如as="font"）和必要crossorigin，否则资源可能被忽略或加载失败。357 收藏 -
aside仅负责语义标记，不控制布局；必须配合CSS（如flex或grid）才能实现右侧显示、响应式收起等视觉效果，否则默认为块级独占一行。357 收藏 -
grid-template三段式语法必须严格按「区域定义行定义/列定义」顺序书写，缺一不可；引号为必需语法，点号占位未用单元格，Firefox对换行更敏感，斜杠/是关键锚点。357 收藏 -
<script>放在<head>中会阻塞DOM构建，浏览器必须下载、解析并执行脚本后才继续解析HTML，导致首屏白屏；同步脚本尤其危险，document.write()甚至会清空文档。357 收藏 -
align-items设置所有子项列轴对齐，align-self单独调整某子项列轴对齐，justify-items控制所有子项行轴对齐，justify-self单独设置某子项行轴对齐，四者结合实现Grid布局精准对齐控制。357 收藏 -
子元素浮动导致父容器高度塌陷，可通过clearfix类或overflow:hidden解决；推荐使用clearfix::after添加清浮动，避免溢出问题，而overflow:hidden触发BFC但可能裁剪内容。357 收藏 -
resize是浏览器原生行为，直接写内联样式但不触发事件，JS无法自动感知变化；必须通过mouseup或requestAnimationFrame主动读取offsetWidth并同步到CSS变量。357 收藏 -
直接使用input[type="email"]即可精准定位type="email"的输入框，无需class或id；注意引号必须为英文且type值严格区分大小写。357 收藏 -
父容器高度塌陷时应设position:relative激活定位上下文，使absolute子元素相对于它定位；父容器需有明确尺寸或由其他非absolute内容撑开，不可依赖absolute元素反向撑高。357 收藏 -
应轮询检测window.devicePixelRatio变化：用requestAnimationFrame实现精准、低开销的实时监听，并首次加载时立即执行；resize事件不可靠，因缩放不必然改变窗口尺寸。357 收藏 -
typeofnull返回"object"是因底层32位标签中null的二进制00被误判为对象，属无法修复的历史bug；ECMA标准为兼容性保留该行为，开发者应使用===null或Object.prototype.toString.call()规避。357 收藏 -
will-change不是魔法属性，需在交互触发前一刻动态设置、动画结束后立即移除；仅对transform和opacity有效，滥用会导致图层爆炸、内存飙升和卡顿。357 收藏 -
用Sass@function动态生成box-shadow值，通过层级参数$level计算offset、blur、spread和透明度，返回统一单位的字符串；不可用CSS变量替代，因其不支持运行时拼接且性能差。357 收藏 -
HTML、CSS、JS压缩需分层处理：HTML用html-minifier-terser安全压缩，跳过<pre>等特殊标签；CSS必须用cssnano解析后优化；JS唯一推荐terser，兼容新语法并支持tree-shaking。357 收藏