更新 Web前端面试题.md

Web前端面试题.md

@@ -11,13 +11,87 @@ async await 是es7里面的新语法，async 用于声明一个异步函数，aw
 - Cookie 是 http 协议的组成部分，会在同源 http 请求中携带，数据根据不同浏览器限制，大小一般不能超过4k
 - LocalStorage 和 SessionStrorage 仅会持久化存储，大小一般是5M
 
-## this 的指向有哪些
+## Vue组件中的data为什么是一个函数而不是一个对象
 
-1、普通函数中的 this 指向 window
-2、定时器中的 this 指向 window
-3、箭头函数没有 this，它的 this 指向取决于外部环境
-4、事件中的 this 指向事件的调用者 黑马程序员
-5、构造函数中 this 和原型对象中的 this，都是指向构造函数 new 出来实例对象
-6、class 中的 this 指向由 constructor 构造器 new 出来的实例对象
-7、自调用函数中的 this 指向 window
+组件共享 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 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验