“前端面试常被问到的小程序问题整理到一起了。”
在前端面试中,小程序相关的问题常常被提及,这些问题涉及到小程序的渲染机制、性能优化、模板引用、样式处理等多个方面。以下是对这些关键知识点的详细解释:
1. **列表数据改变与页面渲染**
当列表数据发生改变,需要重新渲染页面时,可以使用`key`属性来保持列表项的状态。例如,如果在`input`组件中输入了内容,不希望在页面重新渲染后内容丢失,设置`key`属性可以确保带有`key`的组件在重排而不是重新渲染,从而提高页面渲染性能。
2. **`wx:key`的作用**
不提供`wx:key`时,小程序会警告。如果列表是静态的或者不需要关注顺序,可以忽略此警告。`wx:key`有助于避免不必要的组件重建,提升性能。
3. **`Block`与`wx:if`和`hidden`的区别**
- `Block`是一个用于包裹元素的结构,但并不作为一个组件呈现。
- `wx:if`在切换时有局部渲染的过程,适合销毁和重新渲染条件块,适合元素需要频繁切换的情况。
- `hidden`始终渲染,用于控制视图上元素的显示和隐藏,适合初始化渲染,但频繁切换时性能较低。
4. **模板引用**
- `import`用于引入模板文件的内容,只能引用定义的模板块。
- `include`则将目标文件内的所有代码(除模板代码块外)引入,等同于将内容复制到`include`的位置。
5. **Wxss与CSS的差异**
- **尺寸单位rpx**:适应不同屏幕尺寸,750rpx对应设计稿的标准宽度,可以根据屏幕宽度进行自适应,类似rem但不依赖html的`fontSize`。
- **样式导入**:支持外联样式`@import`和内联样式`style`,其中`style`通常用于动态样式。
- **选择器优先级**:当需要覆盖他人插件样式时,可以使用`!important`提升优先级。
6. **小程序运行机制**
- **启动方式**:包括冷启动和热启动。冷启动是首次打开小程序或长时间未使用后重新打开,需要完整加载;热启动则是在短时间内再次打开已打开过的小程序,仅需将后台小程序切换至前台。
以上内容是面试中关于小程序可能遇到的关键问题,理解和掌握这些知识点对于前端开发者在面试中展示小程序领域的专业能力至关重要。