前端面试题3

1.不支持冒泡的事件
事件冒泡是指当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。
通过addEventListener方法给Dom添加事件监听，addEventListener形参中的第三个参数控制是捕获传递触发还是冒泡传递触发。
UI事件
load
unload
scroll
resize
焦点事件
blur
focus
鼠标事件
mouseleave
mouseenter
2.xss是啥
xss（cross-site-scripting）攻击指的是攻击者往 web 页面里插入恶意 html 标签或者 javascript 代码 ；
首先代码里对用户输入的地方和变量都需要仔细检查长度和对 “<> , ; . ”等字进行过滤；其次任何内容写到页面之前都必须加 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击 ；
攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器汇总，而不是用户原本以为的信任站点 ；
3.列请求头中哪种content-type一定会触发cors预检查
触发预检请求的三类条件：

默认情况下，跨域请求只支持GET,HEAD,POST方法，

如果不是这三个请求方法（比如：PUT、DELETE、CONNECT、OPTIONS、TRACE和PATCH），那么将触发预检请求

默认情况下，浏览器跨域请求时，会自动添加的请求头（HOST,Referer,Connection、Accept、User-Agent,Accept-Languange,Accept-Encoding,Accept-Charset和Content-Type）,

这些请求中还有其他请求头时，那么将触发预检请求。

如1、2所说的情况排除在外的条件下，跨域请求是，浏览器支持的Content-Type值为application/x-www-form-urlencoded，multipart/form-data和text/plain。

如果是其他数据类型(如application/json,text/xml…)，那么将触发预检请求。

4.什么是重排和重绘
回流/重排：当render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了。
重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就会产生重绘。例如你改变了元素的background-color，只影响自己，不影响他人

一、重绘不一定需要重排，重排必然会导致重绘

1、重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

1）添加、删除可见的dom
2）元素的位置改变
3）元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）
4）页面渲染初始化
5）浏览器窗口尺寸改变

2、重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

二、减少reflow、repaint

1、不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。
2、不要把DOM结点的属性值放在一个循环里当成循环里的变量。
3、为动画的HTML元件适用fixed或absolute的position，那么修改他们的css是不会reflow

5.for…of语句，for…in语句可以实现的对象
for…of语句在可迭代对象 上创建一个迭代循环，目前所有的内置可迭代对象如下：String、Array、TypedArray、Map 和 Set，它们的原型对象都实现了 @@iterator 方法。
for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

6.BIF作用
https://zhuanlan.zhihu.com/p/25321647
只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

1. 同一个 BFC 下外边距会发生折叠
2. BFC 可以包含浮动的元素（清除浮动）
3. BFC 可以阻止元素被浮动元素覆盖

7. == 与 === 的判断规则

=== 判断规则

等值检测运算符	说明
==  （相等）	比较两个操作数的值是否相等
!=（不想等）	比较两个操作数的值是否不相等
===（全等）	比较两个操作数的值是否相等，同时检测它们的类型是否相同
!==（不全等）	比较两个操作数的值是否不相等，同时检测它们的类型是否不相同

console.log("1" == 1);  //返回true。字符串被转换为数字
console.log(true == 1);  //返回true。true被转换为1
console.log(false == 0);  //返回true。false被转换为0
console.log(null == 0);  //返回false
console.log(undefined == 0);  //返回false
console.log(undefined == null);  //返回true
console.log(NaN == "NaN");  //返回false
console.log(NaN ==1);  //返回false
console.log(NaN == NaN);  //返回false
console.log(NaN != NaN);  //返回true