该面试题只是为了记录我自己的面试笔记，大多数摘自行内有关大佬总结，本人只是搬运工，有关链接已放置相关笔记的下面
白屏优化
- 路由懒加载
- 组件懒加载
- 骨架屏
- 列表
- 图片(剪裁，压缩，懒加载，file-loader小于10k或者小于500个字节时进行转化base64)
- 动画优化（setTimeout/setInterval——>requestAnimationFrame ）
- Js 的加载方式优化（defer/async/module/preload/prefetch）
- tree-shaking
- web-worker优化常任务
前端性能优化——首页资源压缩63%、白屏时间缩短86% - 掘金
Option 请求
跨域预检
简单请求（get/post/head）—— 无需预检
复杂请求（PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH）—— 需预检
简单请求与复杂请求的区别
简单请求: 请求方法是以下三种: HEAD,GET,POST HTTP 的头信息不超出以下几种字段:认为设置规范集合之内的首部字段,如Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width; Content-Type 的值仅限于下列三者之一,即application/x-www-form-urlencoded、multip..., 凡事不同时满足上面两个条件，就是属于复杂请求
Access control allow origin 简单请求和复杂请求_wangjun5159的博客-CSDN博客
web常见攻击
- XSS (Cross Site Scripting) 跨站脚本攻击
- CSRF（Cross-site request forgery）跨站请求伪造
- SQL注入攻击
面试官:web常见的攻击方式有哪些?如何防御? | web前端面试 - 面试官系列
http2 特性
- 二进制协议：HTTP/2 是一个二进制协议。在 HTTP/1.1 版中，报文的头信息必须是文本（ASCII 编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"，可以分为头信息帧和数据帧。 帧的概念是它实现多路复用的基础。
- 多路复用：HTTP/2 实现了多路复用，HTTP/2 仍然复用 TCP 连接，但是在一个连接里，客户端和服务器都可以同时发送多个请求或回应，而且不用按照顺序一一发送，这样就避免了"队头堵塞"的问题。
- 数据流：HTTP/2 使用了数据流的概念，因为 HTTP/2 的数据包是不按顺序发送的，同一个连接里面连续的数据包，可能属于不同的请求。因此，必须要对数据包做标记，指出它属于哪个请求。HTTP/2 将每个请求或回应的所有数据包，称为一个数据流。每个数据流都有一个独一无二的编号。数据包发送时，都必须标记数据流 ID ，用来区分它属于哪个数据流。
- 头信息压缩：HTTP/2 实现了头信息压缩，由于 HTTP 1.1 协议不带状态，每次请求都必须附上所有信息。所以，请求的很多字段都是重复的，比如 Cookie 和 User Agent ，一模一样的内容，每次请求都必须附带，这会浪费很多带宽，也影响速度。HTTP/2 对这一点做了优化，引入了头信息压缩机制。一方面，头信息使用 gzip 或 compress 压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就能提高速度了。
- 服务器推送：HTTP/2 允许服务器未经请求，主动向客户端发送资源，这叫做服务器推送。使用服务器推送提前给客户端推送必要的资源，这样就可以相对减少一些延迟时间。这里需要注意的是 http2 下服务器主动推送的是静态资源，和 WebSocket 以及使用 SSE 等方式向客户端发送即时数据的推送是不同的。
跨域问题
- 何为跨域？
- 由于浏览器同源策略，凡是发送请求 url 的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
- 同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式。同源指的是协议、域名、端口相同，同源策略是一种安全协议。
- 跨域请求数据有几种方式？
（1）JSONP 动态创建 script 标签
但缺点是只支持 get 请求，并且很难判断请求是否失败（一般通过判断请求是否超时）。
（2）Proxy 代理（nginx 服务内部配置 Access-Control-Allow-Origin *）
这种方式首先将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。
（3）CORS 跨域（Access-Control-Allow-Origin 等头部信息）
是现代浏览器提供的一种跨域请求资源的方法，需要客户端和服务器端的同时支持。整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。
