-
微前端架构通过拆分大型应用为独立子应用实现团队自治,需选择合适集成方式(如路由分发或模块联邦),设计主控与子应用的协作机制,解决依赖共享与样式冲突,建立通信系统,并强化错误隔离与监控,适用于中大型团队协作。
-
:last-child伪类用于选中父元素的最后一个子元素,常用于去除列表最后一项的边框、调整样式,如.list-item:last-child{border-bottom:none;},也可改变颜色、背景或结合flex布局取消右边距,提升布局美观与维护性。
-
Autoprefixer结合Gulp可自动为CSS添加浏览器前缀,提升兼容性与开发效率。通过npm安装gulp、postcss、autoprefixer后,在gulpfile.js中配置css任务调用autoprefixer插件,并使用overrideBrowserslist或.browserslistrc文件指定目标浏览器范围,如>1%、last2versions;watch任务监听src/css/目录下的CSS文件变化,自动重新编译并输出到dist/css目录。推荐使用.browserslist
-
最简静态页部署是将index.html放入Nginx的/usr/share/nginx/html/或Apache的/var/www/html/目录;需注意权限、文件名、缓存及SPA路由配置(Nginx用try_files,Apache用.htaccess+mod_rewrite)。
-
答案是使用命名实体或数字实体转义特殊字符。通过<、>、&等命名实体或<、<等数字实体,可防止浏览器误解析为HTML代码,确保字符正确显示并避免安全风险。
-
OffscreenCanvas配合Worker线程可实现渲染与主线程解耦,避免卡顿;需主线程transferControlToOffscreen后传入Worker,Worker中用getContext('2d')绘制并支持requestAnimationFrame;支持双缓冲与WebGL加速。
-
JavaScript模块路径解析分三类:相对路径(./或../开头,基于当前文件位置)、绝对路径(/开头,仅浏览器中相对于站点根目录)、包名路径(无特殊前缀,Node.js特有,从node_modules查找)。
-
波纹效果本质是伪元素+动画+transform,用::after生成圆形遮罩并scale放大,Sass统一控制变量,JS触发is-rippling类实现交互。
-
动态导入结合代码分割可显著提升前端性能。通过import()语法实现按需加载,Webpack等工具将其拆分为独立chunk,避免静态导入导致的主bundle过大。常见应用于路由级分割,如React中使用React.lazy配合Suspense实现组件懒加载,支持预加载和魔法注释优化体验,合理配置chunk命名与拆分策略能有效减少首屏加载时间。
-
Lab色彩空间在CSS中目前无法直接使用,lab()函数未被主流浏览器实现,仅lch()和oklch()部分支持;lch()是当前最可行的替代方案,需配合rgb()/hsl()fallback使用。
-
HTML不决定商用授权费用,需人工在显眼位置用语义化文本明确标注,如“该图标为CC0协议,可免费商用”,并用CSS强化视觉;不可依赖meta、alt或title等隐藏属性,须确保文字在各设备持续可见且随授权变更同步更新。
-
图片未铺满全屏的根本原因是元素自身未占满视口,需确保目标元素(如html、body或容器)设height:100vh且margin:0,同时注意层叠上下文与移动端渲染差异。
-
transform-origin默认值为50%50%,即基于borderbox的中心点;需显式声明避免错位,语法仅支持“长度值”“关键字”“百分比”三类合法组合,且顺序、空格、单位须严格;SVG元素不响应CSStransform-origin,需用原生transform属性或包裹处理。
-
应改用display:flex布局替代float,为每组表单项容器设flex并垂直居中,统一box-sizing,避免在根form上直接设flex,注意Safari兼容性及键盘弹出异常。
-
user-select:none能阻止移动端长按选中,因它跳过文本选择流程;但滥用会损害可访问性,仅适用于装饰性元素等非文本操作目标,且需配合-webkit-touch-callout:none并注意继承问题。