深圳锐明技术前端开发笔试题

目录

1. JavaScript 计算浏览器的刷新频率

2. 同源策略是什么？如何解决或避免浏览器同源请求和并发限制？

3. 数组分堆

4. 将一个数组对象改为树状结构

---

1. JavaScript 计算浏览器的刷新频率

实现计算浏览器刷新频率的思路如下：

1. 使用浏览器的重绘机制：利用 requestAnimationFrame 函数在每次浏览器重绘时执行回调。

2. 帧计数：在回调函数中，每次调用时增加一个帧计数器，记录在特定时间内的渲染次数。

3. 时间监测：设置一个1秒的时间窗口，监测自上次计数以来经过的时间。

4. 输出与重置：当时间窗口结束时，输出当前的帧数，并重置计数器和时间，准备开始下一轮计数。

示例代码如下：

//获取当前高精度时间戳。
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. 同源策略是什么？如何解决或避免浏览器同源请求和并发限制？

同源策略是浏览器的一种安全机制，旨在保护用户数据，防止恶意网站对其他网站的内容进行访问。具体来说，同源策略要求，只有在协议、域名和端口完全相同的情况下，网页才能互相访问资源。

如何解决或避免同源请求并发限制：

1. CORS（跨源资源共享）：

   • 通过在服务器端设置特定的HTTP头（如Access-Control-Allow-Origin），允许指定的源访问资源。
   • CORS 允许服务器安全地控制哪些源可以访问资源。

2. JSONP（JSON with Padding）：

   • 通过动态创建<script>标签来实现跨域请求，利用callback函数处理返回的数据。
   • 适用于GET请求，但不再推荐使用，因其存在安全隐患。

3. 代理服务器：

   • 通过设置一个同源的服务器作为代理，将请求转发到目标服务器，浏览器与代理服务器之间是同源的。
   • 这种方法可以有效地绕过同源限制。

4. WebSocket：

   • WebSocket协议不受同源策略的限制，允许跨域通信，适用于需要持续连接的场景。

5. 使用服务端渲染：

   • 将请求在服务器端处理，然后将结果返回给前端，这样可以避免浏览器的同源策略。

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}}
}

代码实现：