前端技术文章
-
HTML中图片下方空白间隙的真正原因是img默认为inline元素并按基线对齐，留出下降部空间；最有效修复是设置vertical-align:bottom等非baseline值。372 收藏 -
可通过innerHTML、textContent、className、classList和style五种方法动态更新HTML元素内容或样式：innerHTML替换全部HTML内容；textContent仅更新纯文本；className整体覆盖类名；classList精准增删改查单个类；style直接设置内联样式。372 收藏 -
直接赋值innerHTML会丢失脚本执行和样式加载，应使用DOMParser解析后动态注入并手动处理script标签，同时注意跨域、CSP限制及框架组件生命周期问题。372 收藏 -
qrcode.js不支持直接美化，需换库（如@xkeshi/qrcode）或用CSS容器装饰、Canvas二次绘制；前者支持logo、多色模块等原生配置，后者可导出含样式的高清PNG。372 收藏 -
:root是CSS伪类选择器，匹配文档根元素（HTML中为<html>），特异性高于html选择器，主要用于声明全局CSS自定义属性，是主题切换和设计系统变量管理的首选挂载点。372 收藏 -
用box-shadow模拟边框能绕过对齐问题，因为box-shadow不参与盒模型计算，不会改变元素宽高、padding或border-box尺寸，可严格保持Grid/Flex布局承诺，且天然兼容border-radius，但不支持虚线、点线及outline行为。372 收藏 -
本文详解在存在多个类名的情况下，如何准确通过querySelector匹配“至少有一个类名以指定字符串结尾”的HTML元素，涵盖*=、~=等属性选择器的适用场景与关键区别，并推荐最可靠方案。372 收藏 -
原生HTML无法实现多规格联动选择，必须配合JavaScript；关键在于HTML结构设计：用<fieldset>分组、<inputtype="radio">或<button>作为选项，添加data-spec和data-value属性，避免中文判断与硬编码映射。372 收藏 -
IndexedDB不能替代离线存储，仅负责结构化数据持久化；完整离线需配合CacheAPI或ServiceWorker缓存静态资源，二者分工明确、不可错配。372 收藏 -
HTML倒计时仅用于展示，不能替代真实时间控制；必须用Date.now()动态计算剩余时间戳，结合服务端下发的ISO时间统一时区，并做本地时钟偏移补偿。372 收藏 -
IE9及更早版本不支持HTML5动画核心特性，降级需放弃CSS动画、SVG动画等，改用JS驱动的DOM操作并规避重排，结合特性检测而非UA判断兼容性。372 收藏 -
答案：优化JavaScript代码分割需减少初始加载体积并提升响应速度。通过动态导入import()实现按需加载，适用于非首屏功能；结合路由级拆分，利用React.lazy与Suspense分离页面组件；提取公共模块至vendor包并添加哈希名以启用长期缓存；使用prefetch预取低优先级资源，preload加载关键资源，平衡拆分粒度以避免请求过多或更新成本过高，最终提升整体性能。372 收藏 -
本文介绍如何根据group字符串（如"1.2.2.1"）自动解析层级路径，并将扁平属性映射为深度嵌套的JSON结构，核心是逐级切分路径、惰性创建中间节点。372 收藏 -
最推荐Flex布局（justify-content:flex-end），因其无塌陷、响应式友好；次选float:right需处理父容器塌陷；absolute定位适合脱离文档流场景；Grid的justify-self:end适合单元素精准控制。372 收藏 -
Vue3响应式失效主因是响应式连接断裂，即操作了非Proxy代理对象的副本、解构值或新赋值对象；须避免直接重赋值reactive变量、正确使用toRefs解构、异步数据用Object.assign合并、嵌套属性无需额外处理、动态组件加key强制刷新。372 收藏