前端面经真题解析8-海康/前端/超详细记录

1.CSS常用单位

在 CSS 中，常用的单位包括以下几种：

像素（px）：像素是最常见的单位，它表示屏幕上的一个物理像素点。特点是精确度高，可以精确地控制元素的尺寸和位置。适用于绝大多数情况。

百分比（%）：百分比单位是相对于父元素的大小来计算的。例如，使用宽度为 50% 的元素会占据其父元素宽度的一半。特点是可以根据父元素的大小自适应调整元素的尺寸。适用于响应式设计和相对布局。

em（em）：em 是相对单位，相对于元素的字体大小（font-size）。1em 等于元素的字体大小。如果应用于父元素的字体大小上，那么子元素的 em 值就相对于父元素的字体大小来计算。特点是可以根据元素的字体大小进行相对调整。适用于响应式设计和相对布局。

rem（rem）：rem 也是相对单位，相对于根元素（通常是 元素）的字体大小。1rem 等于根元素的字体大小。特点是可以根据根元素的字体大小进行相对调整，并且不会受到父元素字体大小的影响。适用于响应式设计和相对布局。

视窗单位（vw、vh、vmin、vmax）：视窗单位是相对于浏览器窗口大小的单位。vw 表示视窗宽度的百分比，vh 表示视窗高度的百分比，vmin 表示视窗宽度和高度中较小的百分比**，vmax** 表示视窗宽度和高度中较大的百分比。特点是可以根据视窗大小进行相对调整，适用于响应式设计和全屏布局。

固定单位（pt、in、cm、mm）：这些单位是绝对单位，表示固定的长度。pt 表示点（1/72 英寸），in 表示英寸，cm 表示厘米，mm 表示毫米。特点是不会随着屏幕大小或字体大小的变化而改变。适用于打印样式表或需要精确控制打印尺寸的情况。

选择使用哪种单位主要取决于具体的需求和设计目标。一般来说，像素（px）是最常用的单位，可以提供精确的控制。而百分比、em、rem 和视窗单位则适用于响应式设计和相对布局，可以根据不同屏幕尺寸和设备自适应地调整元素的尺寸。固定单位适用于需要精确控制尺寸的场景，如打印样式表。

2.数据量大时如何处理

当在前端处理大量数据时，可以采取以下几种策略来提高性能和用户体验：

1.数据分页：

将数据分为多个页面或分段加载，只在需要时请求并加载数据。这样可以减少一次性加载大量数据所带来的性能问题，并提高页面加载速度。可以使用分页组件或手动实现分页逻辑。

2.虚拟滚动：

对于长列表或表格，使用虚拟滚动技术只渲染可见部分的数据，而不是全部渲染。这可以减少DOM元素的数量，提高渲染性能。常见的虚拟滚动库包括react-virtualized和react-window。

3.数据缓存：

在前端使用缓存来存储已经获取到的数据，以避免重复请求相同的数据。可以使用浏览器的本地存储（如LocalStorage或SessionStorage）或者使用内存缓存库（如lru-cache）。

4.前端分片计算：

如果可能，可以将一些数据处理操作从前端转移到后端，以减轻前端的负担。例如，通过使用分布式计算或使用后端的数据聚合功能，可以减少前端处理大量数据的需求。

5.前端性能优化：

进行前端性能优化，减少不必要的渲染、减小JavaScript和CSS的文件大小、压缩资源、使用合适的图片格式等。这些优化可以减少数据传输和渲染所需的时间，提高前端性能。

6.增量加载和懒加载：

对于一些需要逐步加载的数据，可以采用增量加载或懒加载的方式。只在用户需要时加载新的数据块，而不是一次性加载全部数据。

7.Web Workers：

使用Web Workers可以将一些计算密集型任务放在后台线程中进行，避免阻塞主线程，提高页面的响应性能。Web Workers可以用于数据处理、计算、排序等任务。

以上策略可以根据具体情况的需求进行选择和组合。注意在实施前，评估性能瓶颈，并对关键代码进行性能测试和优化。

3.左边固定右边自适应的布局怎么实现（CSS）

在前端中实现左固定右自适应的两栏布局，有以下几种方案：

1.使用CSS的float属性：

可以将左侧固定栏设置为浮动（float: left;），右侧自适应栏设置为相对定位（position: relative;）并添加左边距（margin-left），使其避开左侧固定栏。

<style>
  .container {
   
    overflow: hidden;
  }

  .left {
   
    float: left;
    width: 200px; /* 左侧固定栏宽度 */
    background-color: #ccc;
  }

  .right {
   
    margin-left: 200px; /* 左侧固定栏宽度, 注意是margin-left 而不是 left */
    background-color: #f1f1f1;
  }
</style>

<div class="container">
  <div class="left">
    <!-- 左侧固定栏内容 -->
  </div>
  <div class="right">
    <!-- 右侧自适应栏内容 -->
  </div>
</div>

2.使用CSS的flexbox布局：

使用flexbox可以更方便地实现两栏布局，通过设置flex属性可以使左侧固定栏占据固定宽度，右侧自适应栏占据剩余空间。

<style>
  .container {
   
    display: flex;
  }

  .left {
   
    width: 200px; /* 左侧固定栏宽度 */
    background-color: #ccc;
  }

  .right {
   
    flex: 1; /* 右侧自适应栏占据剩余空间 */
    background-color: #f1f1f1;
  }
</style>

<div class="container">
  <div class="left">
    <!-- 左侧固定栏内容 -->
  </div>
  <div class="right">
    <!-- 右侧自适应栏内容 -->
  </div>
</div>

3.使用CSS的grid布局：

使用CSS的grid布局也可以实现两栏布局，通过设置grid-template-columns属性可以将左侧固定栏和右侧自适应栏划分为两列。

<style>
  .container {
   
    display: grid;
    grid-template-columns: 200px 1fr; /* 左侧固定栏宽度，右侧自适应栏占据剩余空间 */
  }

  .left {
   
    background-color: #ccc;
  }

  .right {
   
    background-color: #f1f1f1;
  }
</style>

<div class="container">
  <div class="left">
    <!-- 左侧固定栏内容 -->
  </div>
  <div class="right">
    <!-- 右侧自适应栏内容 -->
  </div>
</div>

这些方案都能实现左固定右自适应的两栏布局，具体选择哪种方案取决于你的项目需求和使用习惯。

4.JS数组有哪些方法，从JS数组中删除指定元素怎么做（splice）

（1）js数组常用方法介绍

JavaScript数组有许多常用的方法，用于对数组进行操作和处理。下面是一些常见的JavaScript数组方法：

1.push(): 在数组末尾添加一个或多个元素，并返回修改后的数组长度。

2.pop(): 删除并返回数组的最后一个元素。

3.shift(): 删除并返回数组的第一个元素。

4.unshift(): 在数组开头添加一个或多个元素，并返回修改后的数组长度。

5.slice(): 返回一个新数组，其中包含从开始索引到结束索引（不包括结束索引）的元素。原数组不会被修改。

6.splice(): 从指定的索引位置开始，删除或替换指定数量的元素，并可以插入新的元素。

7.concat(): 返回一个新数组，其中包含原数组和一个或多个数组或值连接而成的元素。

8.join(): 将数组的所有元素连接成一个字符串，并返回该字符串。

9.indexOf(): 返回指定元素在数组中首次出现的索引，如果不存在则返回-1。

10.lastIndexOf(): 返回指定元素在数组中最后一次出现的索引，如果不存在则返回-1。

11.includes(): 判断数组是否包含指定元素，返回布尔值。

12.forEach(): 遍历数组的每个元素，并执行回调函数。

13.map(): 创建一个新数组，其中包含对原数组的每个元素应用回调函数后的结果。

14.filter(): 创建一个新数组，其中包含符合条件的原数组的元素。

15.reduce(): 对数组的每个元素执行回调函数，将结果累加为单个值。

16.reduceRight(): 与reduce()方法类似，但是从数组的最后一个元素开始向前迭代。

17.sort(): 对数组进行排序，默认按照字符串的Unicode码点进行排序。

18.reverse(): 反转数组的顺序。

（2）代码示例

1.push():

const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出: [1, 2, 3, 4]

2.pop():

const arr = [1, 2, 3];
const poppedElement = arr.pop();
console.log(arr); // 输出: [1, 2]
console.log(poppedElement); // 输出: 3

3.shift():

const arr = [1, 2, 3];
const shiftedElement = arr.shift