[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fV_op4ZuB-8eaO-Lgme6YpNgRMxsGREt55cqtQZeraZw":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":12,"notice":12,"visitCount":28,"commentCount":29,"keywords":30},116,"2024-07-06T10:55:22.848Z","分享第二张web前端面试题","忘记拍照了，凭印象将以下几道web前端的面试题分享给大家。希望对大家有所帮助。\n\n面试题是需要在电脑上作答的，而且要可以成功运行，大家可以自行尝试一下，为每次的前端面试做准备。\n\n## 1. 使用Flex或者Grid实现3列布局，当在小屏幕上时，显示成从上到下的布局。\n下面给出一个示例，可以仅供参考，大家尽量自己试试之后再看示例。\n\n```html\n/*完整的html文件代码，大家自行编写一下*/\n\u003Cdiv class=\"flex-container\">  \n  \u003Cdiv class=\"flex-item\">1\u003C/div>  \n  \u003Cdiv class=\"flex-item\">2\u003C/div>  \n  \u003Cdiv class=\"flex-item\">3\u003C/div>  \n\u003C/div>\n.flex-container {  \n  display: flex;  \n  flex-wrap: wrap; /* 允许换行 */  \n  justify-content: space-between; /* 水平方向上的对齐方式，可按需调整 */  \n}  \n  \n.flex-item {  \n  flex: 1 0 100%; /* 在小屏幕上，flex-basis设为100%以确保每个项目占满一行 */  \n  max-width: calc(33.33% - 10px); /* 在大屏幕上的最大宽度，减去的值是为了处理间距 */  \n  margin-bottom: 10px; /* 垂直间距 */  \n}  \n  \n/* 媒体查询用于在小屏幕上改变布局 */  \n@media (max-width: 600px) { /* 假设600px为小屏幕的分界点 */  \n  .flex-item {  \n    flex-basis: 100%; /* 在小屏幕上每个项目占满一行 */  \n    margin-right: 0; /* 移除水平间距 */  \n  }  \n}\n```\n\n\n## 2. 实现一个deep clone的方法\n示例参考如下：\n```language\nfunction deepClone(obj) {  \n    // 处理null和undefined  \n    if (obj == null) {  \n        return obj;  \n    }  \n  \n    // 处理非对象类型（number, string, boolean, null, undefined）  \n    if (typeof obj !== 'object' || obj instanceof Date || obj instanceof RegExp) {  \n        return obj;  \n    }  \n  \n    // 处理数组  \n    if (Array.isArray(obj)) {  \n        return obj.map(item => deepClone(item));  \n    }  \n  \n    // 处理对象  \n    const newObj = {};  \n    for (let key in obj) {  \n        if (obj.hasOwnProperty(key)) {  \n            newObj[key] = deepClone(obj[key]);  \n        }  \n    }  \n    return newObj; \n  \n    // 注意：这里我们没有使用JSON.stringify和JSON.parse，因为这会忽略上述限制  \n} \n```\n\n\n## 3.实现一个react(或vue)中的常见的hook方法\n示例，比如模拟一个useState:\n\n```language\n// 自定义Hook: useCustomState  \nfunction useCustomState(initialState) {  \n  // 使用useReducer来模拟useState的行为  \n  // 注意：这里的reducer非常简单，只是返回新的状态  \n  const [state, dispatch] = useReducer((prevState, newState) => newState, initialState);  \n  \n  // 返回一个状态更新函数  \n  function setState(newState) {  \n    dispatch(newState);  \n  }  \n  \n  // 返回状态和状态更新函数  \n  return [state, setState];  \n}  \n```\n\n## 4. 如何防止网站中上传文件对web服务器的xss攻击\n示例：\n\n在服务器端实施严格的输入验证和过滤机制，确保上传的文件不包含任何恶意代码或脚本\n\n限制允许上传的文件类型，并验证文件的MIME类型是否与期望的相符\n\n在显示用户上传的文件内容之前，始终进行输出编码和转义\n\n等等\n\n## 5.至少说出3种前端中的性能优化策略\n示例：\n\nwebpack相关的代码压缩和分割\n\n图片优化的懒加载和压缩以及cdn\n\n浏览器的缓存策略等\n\n\n\n这里只给出一些示例，大家可以根据这些线索进行联想和扩展，这是现场的真实面试题，希望对大家有所帮助。","忘记拍照了，凭印象将以下几道web前端的面试题分享给大家。希望对大家有所帮助。面试题是需要在电脑上作答的，而且要可以成功运行，大家可以自行尝试一下，为每次的前端面试做准备。","",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],67,0,"web前端,web面试题,web开发题,js面试题"]