忘记拍照了，凭印象将以下几道web前端的面试题分享给大家。希望对大家有所帮助。

面试题是需要在电脑上作答的，而且要可以成功运行，大家可以自行尝试一下，为每次的前端面试做准备。

1. 使用Flex或者Grid实现3列布局，当在小屏幕上时，显示成从上到下的布局。

下面给出一个示例，可以仅供参考，大家尽量自己试试之后再看示例。

/*完整的html文件代码，大家自行编写一下*/
<div class="flex-container">  
  <div class="flex-item">1</div>  
  <div class="flex-item">2</div>  
  <div class="flex-item">3</div>  
</div>

.flex-container {  
  display: flex;  
  flex-wrap: wrap; /* 允许换行 */  
  justify-content: space-between; /* 水平方向上的对齐方式，可按需调整 */  
}  
  
.flex-item {  
  flex: 1 0 100%; /* 在小屏幕上，flex-basis设为100%以确保每个项目占满一行 */  
  max-width: calc(33.33% - 10px); /* 在大屏幕上的最大宽度，减去的值是为了处理间距 */  
  margin-bottom: 10px; /* 垂直间距 */  
}  
  
/* 媒体查询用于在小屏幕上改变布局 */  
@media (max-width: 600px) { /* 假设600px为小屏幕的分界点 */  
  .flex-item {  
    flex-basis: 100%; /* 在小屏幕上每个项目占满一行 */  
    margin-right: 0; /* 移除水平间距 */  
  }  
}

2. 实现一个deep clone的方法

示例参考如下：

function deepClone(obj) {  
    // 处理null和undefined  
    if (obj == null) {  
        return obj;  
    }  
  
    // 处理非对象类型（number, string, boolean, null, undefined）  
    if (typeof obj !== 'object' || obj instanceof Date || obj instanceof RegExp) {  
        return obj;  
    }  
  
    // 处理数组  
    if (Array.isArray(obj)) {  
        return obj.map(item => deepClone(item));  
    }  
  
    // 处理对象  
    const newObj = {};  
    for (let key in obj) {  
        if (obj.hasOwnProperty(key)) {  
            newObj[key] = deepClone(obj[key]);  
        }  
    }  
    return newObj;  
  
    // 注意：这里我们没有使用JSON.stringify和JSON.parse，因为这会忽略上述限制  
} 

3.实现一个react(或vue)中的常见的hook方法

示例，比如模拟一个useState:

// 自定义Hook: useCustomState  
function useCustomState(initialState) {  
  // 使用useReducer来模拟useState的行为  
  // 注意：这里的reducer非常简单，只是返回新的状态  
  const [state, dispatch] = useReducer((prevState, newState) => newState, initialState);  
  
  // 返回一个状态更新函数  
  function setState(newState) {  
    dispatch(newState);  
  }  
  
  // 返回状态和状态更新函数  
  return [state, setState];  
}  

4. 如何防止网站中上传文件对web服务器的xss攻击

示例：

在服务器端实施严格的输入验证和过滤机制，确保上传的文件不包含任何恶意代码或脚本

限制允许上传的文件类型，并验证文件的MIME类型是否与期望的相符

在显示用户上传的文件内容之前，始终进行输出编码和转义

等等

5.至少说出3种前端中的性能优化策略

示例：

webpack相关的代码压缩和分割

图片优化的懒加载和压缩以及cdn

浏览器的缓存策略等

这里只给出一些示例，大家可以根据这些线索进行联想和扩展，这是现场的真实面试题，希望对大家有所帮助。