前端测试题

前端测试题
# 前端测试题
一、选择题（每题2分，共20分）
1. 下列哪项不是HTML5的新特性？
A. 语义化标签
B. 地理位置定位
C. 支持Flash
D. 多媒体播放
2. CSS中的`display: none;`和`visibility: hidden;`有什么区别？
A. 两者都会导致元素不可见
B. `display: none;`会使元素在文档流中消失，而`visibility: hidden;`仅使其不可见但保留空间
C. `display: none;`仅使元素不可见，而`visibility: hidden;`会使其在文档流中消失
D. 两者效果相同
3. JavaScript中，以下哪个是正确的变量声明方式？
A. var x = 10;
B. let y = 20;
C. const z = 30;
D. 所有选项都是
4. 下列哪个JavaScript函数用于将字符串转换为数组？
A. `split()`
B. `join()`
C. `slice()`
D. `map()`
5. 以下哪个不是JavaScript中的异步编程方式？
A. Promise
B. Callback
C. Async/Await
D. Synchronous
6. 以下哪个不是CSS3的新特性？
A. 媒体查询
B. 圆角（border-radius）
C. 阴影（box-shadow）
D. 表格布局
7. 使用jQuery选择器时，哪个选择器用于选取页面中所有的`<p>`元素？
A. `$("p")`
B. `$("#p")`
C. `$("p.class")`
D. `$(".class")`
8. React中，状态（state）和属性（props）的主要区别是什么？
A. 状态是只读的，属性可以改变
B. 属性是只读的，状态可以改变
C. 状态和属性都不能改变
D. 状态和属性都可以改变
9. 以下哪个不是前端性能优化的方法？
A. 压缩JavaScript和CSS文件
B. 使用CDN加速静态资源加载
C. 增加页面的HTTP请求数量
D. 延迟加载非首屏资源
10. 在Web开发中，跨域资源共享（CORS）主要用于解决什么问题？
A. 不同域名之间的资源共享问题
B. 服务器端渲染问题
C. 数据库连接问题
D. 客户端存储问题
二、简答题（每题10分，共30分）
1. 解释什么是BEM（Block Element Modifier）命名方法，并简述其在CSS中的优势。

2. 描述React组件的生命周期，并说明在哪个生命周期阶段适合进行网络请求。

3. 什么是单页应用（SPA）？请简述其优缺点。

三、编程题（每题25分，共50分）
1. 编写一个JavaScript函数，实现数组去重的功能，要求不能使用ES6新特性如`Set`。

```javascript
function uniqueArray(arr) {
// Your code here
}
// 测试用例
console.log(uniqueArray([1, 2, 2, 3, 4, 4, 5])); // [1, 2, 3, 4, 5]
```
2. 请使用HTML、CSS和JavaScript创建一个简单的Todo List应用。

要求如下：
- 有一个输入框用于输入待办事项
- 有一个按钮用于添加待办事项到列表中
- 待办事项列表应该能够显示所有添加的事项
- 每个事项旁边有一个按钮用于删除该事项
四、案例分析题（共30分）
给定一个前端项目，描述如何进行前端性能测试，并列出至少5种性
能测试的指标。

请注意，这只是一个示例测试题，实际的测试题应根据具体需求和考
试范围进行调整。