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

[1. JavaScript 计算浏览器的刷新频率](#1. JavaScript 计算浏览器的刷新频率)

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

[3. 数组分堆](#3. 数组分堆)

[4. 将一个数组对象改为树状结构](#4. 将一个数组对象改为树状结构)

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

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

使用浏览器的重绘机制 ：利用 **requestAnimationFrame**函数在每次浏览器重绘时执行回调。
帧计数：在回调函数中，每次调用时增加一个帧计数器，记录在特定时间内的渲染次数。
时间监测：设置一个1秒的时间窗口，监测自上次计数以来经过的时间。
输出与重置：当时间窗口结束时，输出当前的帧数，并重置计数器和时间，准备开始下一轮计数。

示例代码如下：

javascript 复制代码

//获取当前高精度时间戳。
let lastTime = performance.now();
//用于计数在一秒内的帧数。
let frameCount = 0;
//当经过1秒时，输出当前的帧数并重置计数。
let fps = 0;

function calculateFPS() {
    //浏览器每次重绘时调用指定的回调函数。
    const currentTime = performance.now();
    frameCount++;

    // 每秒计算一次 FPS
    if (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 允许服务器安全地控制哪些源可以访问资源。
JSONP（JSON with Padding）：
- 通过动态创建**<script>标签** 来实现跨域请求，利用callback函数处理返回的数据。
- 适用于GET请求，但不再推荐使用，因其存在安全隐患。
代理服务器：
- 通过设置一个同源的服务器作为代理，将请求转发到目标服务器，浏览器与代理服务器之间是同源的。
- 这种方法可以有效地绕过同源限制。
WebSocket：
- WebSocket协议不受同源策略的限制，允许跨域通信，适用于需要持续连接的场景。
使用服务端渲染：
- 将请求在服务器端处理，然后将结果返回给前端，这样可以避免浏览器的同源策略。

3. 数组分堆

将一个数组划分为3个数组，使其每个数组的和尽量相等，如数组 $1,2,3,4$ ，划分为 $1,2$ ， $3$ ， $4$

javascript 复制代码

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. 将一个数组对象改为树状结构

将一个一维数组转化为树状对象，如

javascript 复制代码

arr = [
  { id: 0, parent: null },
  { id: 1, parent: 1 },
  { id: 2, parent: 2 },
]

转换为：

javascript 复制代码

{
  id: 0,
  parent: null,
  child: {
    id: 1,
    parent: 1,
    child: {
      id: 2,
      parent: 2,
      child: null
    }
  }
}

代码实现：