深圳锐明技术前端开发笔试题
目录
1. JavaScript 计算浏览器的刷新频率
2. 同源策略是什么？如何解决或避免浏览器同源请求和并发限制？
3. 数组分堆
4. 将一个数组对象改为树状结构
1. JavaScript 计算浏览器的刷新频率
实现计算浏览器刷新频率的思路如下：
-
使用浏览器的重绘机制：利用
requestAnimationFrame函数在每次浏览器重绘时执行回调。 -
帧计数：在回调函数中，每次调用时增加一个帧计数器，记录在特定时间内的渲染次数。
-
时间监测：设置一个1秒的时间窗口，监测自上次计数以来经过的时间。
-
输出与重置：当时间窗口结束时，输出当前的帧数，并重置计数器和时间，准备开始下一轮计数。
示例代码如下：
//获取当前高精度时间戳。
let lastTime = performance.now();
//用于计数在一秒内的帧数。
let frameCount = 0;
//当经过1秒时，输出当前的帧数并重置计数。
let fps = 0;function calculateFPS() {//浏览器每次重绘时调用指定的回调函数。const currentTime = performance.now();frameCount++;// 每秒计算一次 FPSif (currentTime - lastTime >= 1000) {fps = frameCount;console.log(`FPS: ${fps}`);frameCount = 0;lastTime = currentTime;}requestAnimationFrame(calculateFPS);
}requestAnimationFrame(calculateFPS);
代码解析：
- performance.now()：获取当前高精度时间戳。
- requestAnimationFrame()：浏览器每次重绘时调用指定的回调函数。
- frameCount：用于计数在一秒内的帧数。
- FPS计算：当经过1秒时，输出当前的帧数并重置计数。
2. 同源策略是什么？如何解决或避免浏览器同源请求和并发限制？
同源策略是浏览器的一种安全机制，旨在保护用户数据，防止恶意网站对其他网站的内容进行访问。具体来说，同源策略要求，只有在协议、域名和端口完全相同的情况下，网页才能互相访问资源。
如何解决或避免同源请求并发限制：
-
CORS（跨源资源共享）：
- 通过在服务器端设置特定的HTTP头（如
Access-Control-Allow-Origin），允许指定的源访问资源。 - CORS 允许服务器安全地控制哪些源可以访问资源。
- 通过在服务器端设置特定的HTTP头（如
-
JSONP（JSON with Padding）：
- 通过动态创建
<script>标签来实现跨域请求，利用callback函数处理返回的数据。 - 适用于GET请求，但不再推荐使用，因其存在安全隐患。
- 通过动态创建
-
代理服务器：
- 通过设置一个同源的服务器作为代理，将请求转发到目标服务器，浏览器与代理服务器之间是同源的。
- 这种方法可以有效地绕过同源限制。
-
WebSocket：
- WebSocket协议不受同源策略的限制，允许跨域通信，适用于需要持续连接的场景。
-
使用服务端渲染：
- 将请求在服务器端处理，然后将结果返回给前端，这样可以避免浏览器的同源策略。
3. 数组分堆
将一个数组划分为3个数组，使其每个数组的和尽量相等，如数组[1,2,3,4]，划分为[1,2]，[3]，[4]
function partitionIntoThree(nums) {const totalSum = nums.reduce((sum, num) => sum + num, 0);// 如果总和不能被3整除，直接返回空数组if (totalSum % 3 !== 0) {return [];}const target = totalSum / 3;const subsets = [[], [], []];let currentSum = [0, 0, 0];// 尝试将数组元素分配到三个子数组for (let num of nums) {// 将当前元素放入一个子数组中for (let i = 0; i < 3; i++) {if (currentSum[i] + num <= target) {subsets[i].push(num);currentSum[i] += num;break; // 放入后跳出循环}}}return subsets;
}// 示例
const nums = [1, 2, 3, 4];
const result = partitionIntoThree(nums);
console.log(result); // 输出可能的划分结果
4. 将一个数组对象改为树状结构
将一个一维数组转化为树状对象，如
arr = [{ id: 0, parent: null },{ id: 1, parent: 1 },{ id: 2, parent: 2 },
]转换为：
{id: 0,parent: null,child: {id: 1,parent: 1,child: {id: 2,parent: 2,child: null}}
}代码实现：