From d67b9703a15eb4649448a0393ffe1f60ccf62e3e Mon Sep 17 00:00:00 2001 From: 8ga Date: Fri, 23 May 2025 09:39:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=20Web=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E9=9D=A2=E8=AF=95=E9=A2=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Web前端面试题.md | 97 ------------------------------------------------ 1 file changed, 97 deletions(-) delete mode 100644 Web前端面试题.md diff --git a/Web前端面试题.md b/Web前端面试题.md deleted file mode 100644 index 7b7b524..0000000 --- a/Web前端面试题.md +++ /dev/null @@ -1,97 +0,0 @@ -## v-if和v-show的区别，分别适合什么场景 - -v-if 操作的实际上是 dom 元素的创建或销毁。v-show 操作的是display:none/block属性。频繁地切换使用 v-show，否则使用 v-if。 - -## async await 关键字的用途 - -async await 是es7里面的新语法，async 用于声明一个异步函数，await 阻塞等待一个异步方法执行完成。 - -## Cookie 、LocalStorage 、 SessionStrorage的区别 - -- Cookie 是 http 协议的组成部分，会在同源 http 请求中携带，数据根据不同浏览器限制，大小一般不能超过4k -- LocalStorage 和 SessionStrorage 仅会持久化存储，大小一般是5M - -## Vue组件中的data为什么是一个函数而不是一个对象 - -组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一 个会影响其他 - -## 用CSS3让一个div垂直居中怎么写 - -#### transform -``` -#container { - position: relative; -} -#center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} -``` - -#### flex -``` -#container { - display: flex; - justify-content: center; - align-items: center; -} -``` - -## 谈谈性能优化案例 - -减少 http 请求次数、压缩上线代码、懒加载、动态渲染组件、CDN。 - -## Vue实例挂载在哪个标签 - -body 标签里，在 vue 中是获取不了 body 标签的，需要用原生js获取 - -## 用过Map和Set吗，Set和数组的区别是什么？Map和Object的区别 - -set 是 es6 提供的一种新的数据结构，它类似于数组，但是成员的值都是唯一的。 -map 是 es6 提供的一种新的数据结构,它类似于对象，也是键值对的集合，但是键的范围不仅限于字符串，各种类型的值都可以当做键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供 了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。 - -## 图片懒加载是怎么实现的？ - -就是我们先设置图片的 data-set 属性（当然也可以是其他任意的，只要不会发送 http 请求就行了，作用 就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。然后我们计算出页面 scrollTop 的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览 器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时 候我们再将 data-set 属性替换为 src 属性即可。 - -## 怎么防止被CSRF和XSS攻击 - -- CSRF （ Cross-site request forgery ）跨站请求伪造 - - Token 验证 - - 把token放在header - - Referer 验证，只接受本站的请求，服务器才做响应，如果不是就拦截 -- XSS（Cross Site Scripting）跨域脚本攻击 - - 对用户输入的数据进行 HTML Entity 编码 - - 移除用户输入的和事件相关的属性。如 onerror 可以自动触发攻击，还有 onclick 等 - - 移除用户输入的 Style 节点、 Script 节点、 Iframe 节点。 - -## Vue3的组件式API和选项式API的区别 - -- 选项API，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。 - - 如果是小组件，适合用选项式API - - 如果是大组件，属性的列表很长，会导致组件难以阅读和理解 -- 组件式API根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起，更高内聚、低耦合。 - - 对 tree-shaking 友好，代码也更容易压缩 - - 几乎用不到this，避免了this指向不明的情况 - -## Vue3是通过哪些方面提升性能的 - -- 编译阶段 - - diff算法优化 - - 静态提升 - - 事件监听缓存 - - SSR优化 -- 源码体积 - - Tree shanking：清除多余代码，优化项目打包体积 - - 任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小 -- 响应式 - - vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式 - - vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历 - -## Vue3新增的组件 - -- Fragment 不再限制 template 只有一个根节点 -- Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中 -- Suspense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验 \ No newline at end of file