模拟题十
1.介绍下盒子模型
考察点：盒子模型
盒子模型由 margin、border、padding、content 组成 分两种 标准盒子模型 width= content 宽度 height= content 高度 IE 模型 width=border+content+padding height=border+content+padding 标准盒子模型：box-sizing:content-box IE 盒子模型：box-sizing:border-box
2. 手写 instanceof
考察点：instanceof 原理
3.history 和 hash 两种路由最大的区别是什么
考察点：history 和 hash 两种路由最大的区别是什么
4.ES6：展开运算符的作用
还能展开哪些数据类型
5. React 合成事件是什么
考察点：合成事件
为什么需要合成事件？和原生事件相比有什么不同
目的：封装事件，实现跨平台，把差异封装在底层 将事件全部统一冒泡到 document 再进行触发 可以统一命名，这样子命名符合 react 编程习惯
抹平不同浏览器的差异、与内部优先级机制绑定、需要考虑所有浏览器事件
在 react 中，我们绑定的事件并不是原生事件，而是由原生事件合成的 react 事件，比如 click 事件合成为 onClick 事件；比如 blur、change、input 等，合成为 onChange 事件，它统一绑定在 document 上统一管理（react 17 之后就绑定在 root 根节点上，这样做的好处是利于微前端）
衍生：事件冒泡
6.React的作用
React 这个库的革命性在于，之前的网页应用都直接构建在 DOM 之上，开发者必须自己处理 DOM 的状态，自己保证各个节点之间的同步。
React 改变了一切，使得应用程序脱离了 DOM。你不必再管 DOM 的状态，只需要管理自己应用的状态。这消除了复杂 Web 应用中繁琐且容易出错的许多工作量。
https://news.ycombinator.com/item?id=39310142
7. 0.1 + 0.2 为什么不等于 0.3
考察点：浮点数
因为 JS 采用的是 IEEE754 标准的双精准度（64 位），一个浮点数既要包含整数部分又要包含小数部分， 0.1 和 0.2 先转成二进制，在转换为同一维度计算，得到二进制后，再转换为十进制后
8.浏览器：Web 安全
这个问题正好是复习过了，所以答得很全面，主要从
浏览器同源策略、CSP、XSS、CSRF以及SQL注入等方面分别做了介绍。
浏览器同源策略：
- 现代浏览器以及
HTTPS会对非同源的请求进行拦截以保证安全- 若请求链接中的协议、主机名、端口、方法等任何一个不一样，都是不同源请求
CSP：
- 内容安全策略，可以在HTML中的
meta标签或者服务端返回的Content-Secrity-Policy头中进行设置- 可以指定资源的请求域、资源的加载方式等
XSS：
跨站脚本攻击，分为了持久型XSS、反射型XSS和DOM型XSS- 持久型XSS是最常见的XSS攻击，主要通过输入框、富文本等组件输入一些恶意的脚本代码，存储到服务端之后，当其他用户打开页面加载该脚本时便出现攻击行为
- 反射型XSS是需要用户点击黑客提供的恶意链接，该恶意链接会在跳转到正常页面的同时执行黑客脚本
- DOM型XSS存在于一些第三方插件中，如浏览器插件去恶意修改页面DOM等方式
- 对于XSS的防范主要是防范持久型XSS，在页面的输入框和富文本提交时对字符串做过滤处理，同时在页面中只对可信的HTML文本做解析
CSRF：
跨站请求伪造，当用户在正常的网站登录之后，由于同源请求会默认携带Cookie，因此黑客可以在自己的网站中向正常网站发送伪造请求来冒充用户自己的操作- 攻击方式主要包含通过标签的src属性、href属性以及form的action属性等，通常是伪造
GET请求- 防范方式包含使用
POST请求处理资源、服务端验证请求的Referer、禁止第三方网站请求携带Cookie以及最后在请求时增加csrftoken字段做校验
9.当用户反馈页面加载慢，你是前端怎么排查这个问题
10.算法题：合并两个有序数组
考察点：合并两个有序数组