前端面试题

1.简述一下对html标签语义化的理解
(1)HTML语义化让页面的内容结构化，结构更清晰，便于浏览器、搜索引擎解析；即使在没有css样式的情况下，也以一种文档格式显示，并且是容易阅读的
(2)搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于seo优化
(3)使阅读源代码的人更容易将网站分块，便于阅读维护理解
2.标签上 title 与 alt 属性的区别是什么？
鼠标悬浮显示title，图片加载失败显示alt内容
3.表单中readonly和disabled的区别？
共同点：能够使用户不能改变表单中的内容
不同点：
(1)readonly只对input和textarea有效，但是disabled对所有的表单元素都是有效的，
(2)包括radio、checkbox
(3)readonly可以获取到焦点，只是不能修改。
(4)disabled设置的文本框无法获取焦点
(5)如果表单的字段是disabled，则该字段不会发送（表单传值）和序列化
4.谈谈你对回流和重绘的理解？
回流：当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化
，导致需要重新构建页面的时候，就产生了回流
重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，
而只是改变了元素的外观风格的时候，就产生了重绘
5.css布局有哪些
(1)Flex布局
(2)Position布局
(3)Float布局
(4)多列布局(类暴布流)
(5)响应式设计（通过百分比， rem， 媒体查询 适配各种尺寸的屏幕）

6.盒子模型
(1)包裹 content padding border margin
(2)Boxsizing content-box border-box 两种盒子

7.Html 新标签
Header video audio footer nav canvas artical aside

8.bfc块级上下文
(1)是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
(2)浮动元素， 绝对定位元素， flex盒子， 表格，行内块，块元素，多列容器
(3)浮动元素（即 float 值不为 none 的元素）。
(4)绝对定位元素（position 值为 absolute 或 fixed 的元素）。
(5)行内块元素（display 值为 inline-block 的元素）。
(6)表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
(7)表格标题（display 值为 table-caption，HTML 表格标题默认值）。
(8)匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
(9)overflow 值不为 visible 或 clip 的块级元素。
(10)display 值为 flow-root 的元素。
(11)contain 值为 layout、content 或 paint 的元素。
(12)弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
(13)网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
(14)多列容器（column-count 或 column-width (en-US) 值不为 auto，且含有 column-count: 1 的元素）。
(15)column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）
9.浏览器运行的机制
10.rem， em， vh ，px的区别

(1)rem 是相对根元素的 em是相对父元素 的 vh 是屏幕高度
(2)px是绝对单位
11.有哪些方式可以隐藏元素

(1)display：none 引起重新布局
(2)Visible：hidden
(3)Opacity：0
12.什么是响应设计
(1)一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法
(2)适配 pc + 移动端（平板，手机）等各种尺寸的设备的方法实现方式

(3)媒体查询
(4)百分比布局 flex布局
(5)通过rem
(6)postcss-plugin-px2rem 将px转出rem
(7)设计稿子为 750 字体为100 （ihone 375 50px字体）
(8)100/750* screenWidth === relFontSize(根源素字体)
(9)Css： {
(10)loaderOptions
(11)Postcss：{
(12)postcssOptions
(13)： {
(14)Reuire（postcss-plugin-px2em）({
(15)})
(16)}}}

13.css选择器有哪些？ 优先级 ？
！Important>
!important > 行内样式 > id选择器> class>标签> 通配符>自身样式>继承
Id class 标签选择器（p，div） 后代选择器（#box div） 子选择器（#div>div） 相邻同胞选择器(.one+two)
群组选择器(div,p)
伪类选择器 link :visited :active :hover :foucs
(子元素+):first-child :last-child 最后一个元素 (相对所有子元素)
:only-child :nth-child(n) 相对所有子元素

子元素 +(相对选中的集合)
:first-of-type :last-of-type
:nth-of-type(n) :nth-last-of-type(n) 倒数 第n个子元素
:root（html） :empty :enabled :disabled :checked :not(slector)
伪元素选择器
:first-letter :first-line
:before :after
属性选择器
[attribute] 选择带有attribute属性的元素

Important > 行内样式> id >class >标签
14.清楚浮动的方法
(1)1.给父元素设置overflow：hidden
(2)2.给父元素设置高度
(3)3.添加伪元素 :after 设置clear：both
15.常见的行内元素 块元素
(1)行内元素：span a ,img , input
(2)块元素： div p h1-h6 table
(3)行内块： img , input
16.position 的属性
Static Relative absolute fixed sticky
17. 谈谈做好seo 需要考虑什么
(1) meta 标签优化
(2) Title,description keywords author
(3)主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如 Author（作者），
(4)使用语义化的标签 header footer nav

************js
18.Promise.all() Promise.race() 三种状态 pending reject, resolve
19.Var let const
(1)var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined
let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错
(2)暂时性死区
var不存在暂时性死区
let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量
(3)var允许重复声明变量
let和const在同一作用域不允许重复声明变量
(4)块级作用域
var不存在块级作用域
let和const存在块级作用域
(5)修改声明的变量
var和let可以
const声明一个只读的常量。一旦声明，常量的值就不能改变
20.== 和 === 区别
(1) == 会做类型转换 === 不做类型转换
21.数组常用方法
(1)push unshift concat
(2)Splice pop shift slice
(3)indexOf includes find findIndex
(4)Reverse sort
(5)Some every forEach
(6)Filter map
22.bind call apply 的区别
(1)都可以改变this指向
(2) Bind只会返回一个方法
(3)Call ，apply 会执行 call的传参是依次传参
(4)Apply传参为数组
23.本地存储有哪些
(1) LocalStorage ,sessionStorage cookie indexedDb

24.说说你对闭包的理解
函数包含的一个函数，函数中变量 被这个内部函数调用导致函数无法销毁，始终保留
可以隐藏我们变量而不被复写
25.深拷贝 与浅拷贝的区别
(1)基数据类型只拷贝值，对象数组等引用类型则拷贝的是引用地址，不复制对象
(2)Object.assign
(3)Array.prototype.slice()
(4)Array.prototype.concat()
(5)使用拓展运算符实现的复制
(6) 深拷贝 拷贝所有层级 无论是基本型数据的 还是引用类型的都要重新生成
(7)_.cloneDeep()
(8)jQuery.extend()
(9)JSON.stringify()
(10)手写循环递归
26.js中的数据类型
(1)String number null undifined boolean object symbol
27.什么是防抖和节流
(1)防抖：n秒后执行该事件，若n秒内重复触发，则重新计时
(2)节流：n秒内只运行一次，若n秒重复触发，只生效一次
28.如何解决数字精度丢失的问题
parseFloat(num.toPresion(12))
29.javaSript中内存泄露额几种情况
(1) 闭包
(2)循环引用
(3)全局变量

30.原型和原型链

31.说说你对作用域链的理解
(1)作用域就是变量与函数的可访问范围
(2)一般情况下，变量取值到创建这个变量的函数的作用域中取值。 但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链
32.16.typeof 与instanceof
(1)Typeof主要用来判读基本数据类型 ，引用类型一般返回object
(2)Instanceof 主要判断数据的继承关系判断某个实例 是某个构造函数的实例
33.谈谈jSonp的理解
(1)jsonp是一种可以解决跨域问题的方式，就是通过动态创建script标签用src引入外部文件实现跨域，script加载实际上就是一个get请求，并不能实现post请求。
34.ajax的请求过程
(1)创建xmlHttpRequest实例
(2)创建连接open
(3)发送ajax
(4)处理响应
// ajax 提交 post 请求的数据// 1. 创建核心对象
var xhr = new XMLHttpRequest();//

2.准备建立连接
xhr.open(“POST”, “register.php”, true);
// 3. 发送请求// 如果要POST提交数据，则需要设置请求头// 有的面试官会问为什么要设置请求头？ 知道请求正文是以什么格式// Content-Type: application/x-www-form-urlencoded，请求正文是类似 get 请求 url 的请求参数// Content-Type: application/json，请求正文是一个 json 格式的字符串
xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
// 发送数据
xhr.send(querystring);

// 4. 处理响应xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // 请求处理完毕，响应就绪 if (xhr.status === 200) { // 请求成功 var data = xhr.responseText;
console.log(data);
}
}}
35.get请求与post请求有什么不同
(1)get请求不安全，post安全
(2)get请求数据有大小限制， post无限制
(3)get请求参数在url中，post 在body中。
36.什么是事件委托 及其优缺点
(1)利用事件冒泡，将子元素的事件绑定到父元素上，从而减少大量事件绑定，减少dom交互，节约大量内存

---------------------------vue---------------------------------
37.为什么使用虚拟dom
(1)创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
(2)触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
(3)1.创建 真实dom代价高，vnode开销比较低
(4)2.当需要更新dom vnode会diff 不同之处，然后一次性修改 减少dom操作带来的开销
38.你都做过哪些 Vue 的性能优化？
(1)对象层级不要过深，否则性能就会差。
(2)不需要响应式的数据不要放在 data 中（可以使用 Object.freeze() 冻结数据）
(3)v-if 和 v-show 区分使用场景
(4)computed 和 watch 区分场景使用
(5)v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
(6)大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
(7)防止内部泄露，组件销毁后把全局变量和时间销毁
(8)图片懒加载
(9)路由懒加载
(10)异步路由
(11)第三方插件的按需加载
(12)适当采用 keep-alive 缓存组件
(13)防抖、节流的运用
(14)服务端渲染 SSR or 预渲染
39.组件间的通信
(1)emit发射事件
(2)Prop 传参
(3)Vuex共享数
40.key的作用
(1)key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
(2)有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
(3)没有key会最大限度减少动态元素生成，复用相同类型的元素的算法
(4)加了会直接替换元素，而不是重新生成
41.vue 的生命周期
BeforeCreat created beforeMount mounted beforeUpdate updated beforeDestory Destoryed actived deactived
42.v-show v-if 的区别
43.双向数据绑定
用户操作界面可以修改数据， 数据改变了页面随之更改， v-model
44.导航守卫
(1)BeforeEach AfterEach
(2)beforeEnter
(3)BeforeRouteEnter
(4)beforeRouteUpdate
(5)beforeRouteLeave
45.vue路由传参方式
Params query传参
46.vuex是什么？
状态管理机 用来实现组件的数据的共享
47.mvc和mvvm的区别
(1)V：视图层。展示出来的用户界面。
M：模型层，就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
(2)c控制层，处理用户操作，将数据显示到view 上
(3) VM： 视图模型层，连接view 和 model 的桥梁。ViewModel层的核心是View中的双向数据绑定，即Model变化时View可以实时更新，View变化也能让Model发生变化。
(4)因为 model层中的数据往往是不能直接跟 view 中的控件一一对应上的，所以需要在定义一个数据对象专门对应 view 上的控件，而 viewModel 就是把 model 对象封装成可以显示和接受输入的界面数据对象。
48…stop .prevent .once.self .passive .capture(使用事件捕获模式).passive

49.vuex有哪几种属性
(1)State， mutation， getter， action modules

-------------------------------------http--------------------------------------------------
50.说一下http和https
(1)http：超文本传输协议，是一个客户端和服务器端请求和应答的标准（TCP）
(2)https：是以安全为目标的HTTP通道，即HPPT下加入SSL层，比http更安全
(3)http传输的数据都是未加密的（明文），https协议是由https和SSL协议构建的可进行加密传输和身份认证的网络协议，需要装证书，费用较高
51.HTTP状态码
(1)接受的请求正在处理
(2)请求成功
(3)重定向
(4)客服端错误
(5)服务段错误

(6)1xx Informational（信息性状态码） 接受的请求正在处理
(7)2xx Success（成功状态码） 请求正常处理完毕
(8)（1）、200 OK：表示从客户端发送给服务器的请求被正常处理并返回；
(9)（2）、204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
(10)（3）、206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。
3xx Redirection（重定向） 需要进行附加操作以完成请求
(11)301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
(12)302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
(13)301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
(14)303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
(15)302与303的区别：后者明确表示客户端应当采用GET方式获取资源
(16)304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
(17)307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；
4xx Client error（客户端错误） 客户端请求出错，服务器无法处理请求
(18)400 Bad Request：表示请求报文中存在语法错误；
(19)401 Unauthorized：未经许可，需要通过HTTP认证；
(20)403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
(21)404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
5xx Server Error（服务器错误） 服务器处理请求出错
(22)500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
(23)(23)503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；
52.前端如何有优化页面加载速度
(1)降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩 按需
(2)加快请求速度：预解析DNS，减少域名数，并行加载
(3)缓存：HTTP协议缓存请求，离线缓存manifest，离线数据缓存localStorage
(4)渲染：JS/CSS优化，加载顺序，服务端渲染

(5)减少http请求次数：CSS Sprites, 合并css
(6)减少体积： JsCSS源码压缩、图片大小控制合适；网页Gzip
(7)缓存：强制缓存，协商缓存
(8)CDN托管，data缓存 ，图片服务器。
(9)1.减少http请求次数，2.按需加载文件，3.cdn托管，4.gzip压缩
53.写出三组去重的方法 数组常见排序的方法
54.什么是递归？ 优点缺点？
(1)优点：结构清晰，可读性强，而且容易用数学归纳法来证明算法的正确性
(2)缺点：运行效率，容易造成栈溢出
55.盒子垂直居中的方法？
(1)Flex align-content center
(2)通过calc 设定margin
(3)或 利用absolute定位 与calc配合
56.Vue双向绑定的原理
(1)vue.js采用的是数据劫持,结合发布和-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调
57.什么是原型链？
58.v-for 为什么一定要加key
(1)标识组件的唯一性，防止dom被复用，高效的更新虚拟dom

59.v-for 的key 为什么不建议用下标
(1)用下标删除元素的时候，会删除最后一个DOM
60.Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
(1)Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。

(2)严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
(3)混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

61.fetch 发送 2 次请求的原因
(1)fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？
(2)原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求
62.fetch 和axios 有什么区别
–fetch
(1)fetch只对网络请求报错，对400，500都当作成功的请求，服务器返回400，500错误时并不会reject，只有网络错误这些导致请求不能完成时，fetch才会被reject。
(2)fetch默认不会带cookie，需要添加配置项：fetch（url,{credentials:‘include’}）
(3)fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。
(4)fetch没有办法原生监测请求的进度，而XHR可以
axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，本质上也是对原生XHR的封装，只不过它是Promise实现版本，符合最新的ES规范。
–axios
1:从浏览器中创建XMLHttpRequest

2:支持PromiseApi

3:客户端支持防止CSRF

4:提供了一些并发请求的接口（重要，方便了很多操作）axios.all=>Promise.all

5:支持浏览器和node.js发请求，前后端发请求

6:拦截请求和响应 (拦截器 )

7:转换请求和响应数据

8:取消请求

9:自动转换JSON数据
63.Cookie 如何防范 XSS 攻击
(1)XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，为了解决XSS（跨站脚本攻击）的问题，从IE6开始支持cookie的HttpOnly属性，这个属性目前已被大多数浏览器（IE、FF、Chrome、Safari）所支持。
(2)当cookie中的HttpOnly属性被设置为true时，前端脚本JavaScript就无法访问或操作cookie了（只能通过后台访问），这样XSS就失效了。即便是这样，也不要将重要信息存入cookie。

64.你了解的浏览器的重绘和回流导致的性能问题
(1)重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。
(2)重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘
(3)回流是布局或者几何属性需要改变就称为回流。
(4)回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。
65.为什么虚拟 dom 会提高性能？
(1)虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

66.link 与 @import 的区别

(1)link是 HTML 方式， @import是 CSS 方式
(2)link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
(3)link可以通过rel="alternate stylesheet"指定候选样式
(4)浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
(5)@import必须在样式规则之前，可以在 css 文件中引用其他文件
(6)总体来说：link 优于@import

67.Vue 与 react的区别？

一、核心思想不同
Vue是一个灵活易用的渐进式双向绑定的MVVM框架。
React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构。
注：React的单向数据流指的是数据主要从父节点通过props传递到子节点，
如果顶层某个props改变了，React会重新渲染所有的子节点，但是单向数据流并非单向绑定，
React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的
祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。单向数据流的好处是能够保证
状态改变的可追溯性，假如，父组件维护了一个状态，子组件如果能够随意更改父组件的状态，那
么各组件的状态改变就会变得难以追溯
二、组件写法上不同
Vue的组件写法是通过template的单文件组件格式。
React的组件写法是JSX+inline style，也就是吧HTML和CSS全部写进JavaScript中。
三、Diff算法不同
Diff算法是一种对比算法，主要是对比旧的虚拟DOM和新的虚拟DOM，找出发生更改的节点，并只
更新这些接地那，而不更新未发生变化的节点，从而准确的更新DOM，减少操作真实DOM的次数，
提高性能。
vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删
除重建，但是react则会认为是同类型的节点，只会修改节点属性。
vue的列表比对采用的是首尾指针法，而react采用的是从左到右依次比对的方式，当一个集合只
是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点
移动到最后一个，从这点上来说vue的对比方式更加高效。
四、响应式原理不同
React的响应式原理
React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。

Vue的响应式原理
vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和
setter，每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候会记录组件用到
了那些数据，当数据发生改变的时候，会触发setter方法，并通知所有依赖这个数据的watcher实
例调用update方法去触发组件的compile渲染方法，进行渲染数据
68.vue 中的 keep-alive
(1)keep-alive 是 vue 中的内置组件，能够在组件切换过程中将状态保留在内存中，防止重复的渲染 DOM；
(2)keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；
(3)设置了 keep-alive 缓存的组件，会多出两个生命周期钩子（activated 和 deactivated ）

69.什么是webpack的loader？
(1)Loader 是在模块加载过程中用于对模块的源代码进行转换的一种机制。它们允许你在引入模块时预处理文件。Loader 可以将除 JavaScript 之外的任何类型的文件（如 CSS、Markdown、JSON 等）转换为可导入到你的应用程序中的有效模块，并且可以将这些模块视为普通模块一样处理

70.什么是webpack的tree shaking？
(1)Tree shaking 是一种通过清除 JavaScript 中未引用代码（dead-code）的术语，它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。webpack 可以通过 UglifyJSPlugin 进行 tree shaking。
Xss攻击Csrf攻击Ddos攻击Xxe漏洞JSON劫持