文章目录
浏览器
事件机制
事件触发机制？事件代理？
事件触发三阶段
- 事件从
window往事件目标传播，遇到注册的捕获事件会触发 - 传播到目标，触发注册事件
- 从目标向
window传播，遇到注册的冒泡事件会触发
通常我们使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值 ，决定了注册的事件是捕获事件还是冒泡事件，该参数默认值为 false
可以使用 stopPropagation 来阻止事件的进一步传播
事件代理
如果触发事件的节点是动态的，可以在其父元素上注册事件，利用事件冒泡的特性来代理其事件，相较于直接为动态节点注册事件，可以节省内存
跨域
跨域？为什么？如何处理？
浏览器的安全机制，限制只能访问同源的数据，没有同源策略就可以任意访问其他网站的资源
同源策略：相同协议，相同域名，相同端口
访问非同源的资源就是跨域
解决
JSONP
JSONP 的原理就是利用 <script> 标签没有跨域限制的漏洞。通过 <script> 标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时
JSONP 只适用于get请求
CORS
浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。
服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。
虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。
简单请求：
使用下列方法之一：
- GET
- HEAD
- POST
Content-Type 的值仅限于下列三者之一：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
复杂请求：
非简单请求就是复杂请求，复杂请求会发起一个预请求，该请求是option方法，通过该请求获取服务器是否允许跨域请求
document.domain
该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。
只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域
存储
存储的种类？区别？
存贮有cookie、sessionStorage和localStorage
cookie：容量小，请求会携带
sessionStorage：容量大，会话结束后被销毁
localStorage：容量大，不会自动销毁，需要手动销毁
渲染原理
执行 JS 有一个 JS 引擎，执行渲染也有一个渲染引擎
浏览器接收到 HTML 文件并转换为 DOM 树
字节数据=>字符串=>Token=>Node=>DOM
将 CSS 文件转换为 CSSOM 树
字节数据=>字符串=>Token=>Node=>CSSDOM
生成渲染树
生成 DOM 树和 CSSOM 树以后，就需要将这两棵树组合为渲染树
当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流），然后调用 GPU 绘制，合成图层，显示在屏幕上
操作 DOM 消耗性能
因为 DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信
操作 DOM 可能还会带来重绘回流的情况
插入万级 DOM
一次性插入肯定会造成卡顿，必须分批进行插入
使用requestAnimationFrame循环插入 DOM，每次插入一部分
虚拟滚动，只渲染可视部分，非可见部分不渲染，滚动时进行实时替换渲染内容
重绘&回流
重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。
重绘：当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流：布局或者几何属性需要改变就称为回流。
减少重绘和回流
- 使用
transform代替top - 使用
visibility替换display:none - 避免在循环里查找 DOM
- 减少使用 table
- 动画使用
requestAnimationFrame
渲染优化
在不考虑缓存和优化网络协议的前提下，考虑可以通过哪些方式来最快的渲染页面
- html 和 css 的书写，减少查找和层级
- 减少文件大小，进行压缩
- script 文件放置在文档最后，避免阻塞渲染
- 对非首屏元素进行懒加载
安全防护
XSS
XSS？防范？
XSS 就是跨站脚本攻击，将可执行的代码注入到网页中
持久性：攻击代码被写入数据库中，访问页面的用户受影响
非持久性：修改 URL 参数，诱导用户访问链接
防范 XSS
不信任用户输入的数据
- 对输入输出的内容进行转义
- CSP：建立白名单，明确告诉浏览器那些外部资源可以加载和执行，通过设置
HTTP Header Content-Security-Policy或<meta http-equiv="Content-Security-Policy">来配置规则
CSRF
CSRF？防范？
CSRF 是跨站请求伪造
原理就是攻击者构造出一个后端请求地址，诱导用户点击或者通过某些途径自动发起请求。如果用户是在登录状态下的话，后端就以为是用户在操作，从而进行相应的逻辑
防范 CSRF
- Get 请求不对数据进行修改
- 不让第三方网站访问到用户 Cookie
- 阻止第三方网站请求接口
- 请求时附带验证信息，比如验证码或者 Token
点击劫持
点击劫持？防范？
点击劫持是一种视觉欺骗的攻击手段。攻击者将需要攻击的网站通过 iframe 嵌套的方式嵌入自己的网页中，并将 iframe 设置为透明，在页面中透出一个按钮诱导用户点击。
防范点击劫持
X-FRAME-OPTIONS：X-FRAME-OPTIONS是一个 HTTP 响应头，这个 HTTP 响应头 就是为了防御用 iframe 嵌套的点击劫持攻击。
- DENY，表示页面不允许通过 iframe 的方式展示
- SAMEORIGIN，表示页面可以在相同域名下通过 iframe 的方式展示
- ALLOW-FROM，表示页面可以在指定来源的 iframe 中展示
JS防御
在页面脚本中添加检查代码，当页面不是顶级层级即时作为iframe框架载入时，控制iframe
中间人攻击
中间人攻击？防范？
中间人攻击是攻击方同时与服务端和客户端建立起了连接，并让对方认为连接是安全的，但是实际上整个通信过程都被攻击者控制了。攻击者不仅能获得双方的通信信息，还能修改通信信息
例如公共wifi就很可能发生中间人攻击的情况
建立安全通道例如HTTPS传输信息可以防范中间人攻击