删除 Web前端面试题.md

Web前端面试题.md

@@ -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 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验