题目第五波

1. cdn（Content Distribution Network）：内容分发网络，能够让用户更快的访问到数据。方式1：使用LDNS（local dns）服务器提供最近的cdn站点，就近提供服务。方法2：使用http调度，服务器返回一个302重定向，这种方式更加精确，因增加一次http请求，比较耗时，适用于大文件。cdn缓存的两种方式：1：服务器主动给，cdn被动接受。2：用户访问cdn资源不存在时，cdn主动向服务器发起请求，并缓存资源。一般采用第二种方式。
2. 事件循环，用于解决同步js中的异步问题，即js为单线程，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列（宏任务队列：多个，微任务队列：一个）。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行，清空所有微任务才会执行其他宏任务。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

//异步任务：
宏任务（Macro Task）：script(整体代码)、setTimeout、setInterval、setImmediate、I/O、UI rendering
微任务（Micro Task）：promise、Object observe、MutationObserver
任务优先级：process.nextTick > promise.then > setTimeout > setImmedia

//直观解释:微任务为跟屁虫，一直跟着当前宏任务后面，代码执行到一个微任务就跟上，一个接着一个
主线程上的任务是第一个宏任务；一个宏任务有一个微任务队列，执行时，遇到一个微任务就加入当前宏任务的微任务队列中，当执行完同步任务，立即执行微任务，再执行其他宏任务
一个事件循环为执行一个宏任务+宏任务中包含的所有微任务。执行完一个宏任务中所有微任务再去执行下一个宏任务。
微任务的最大从属宏任务为全局。

3. 复杂请求：浏览器必须首先使用OPTIONS方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。
4. QPS（Query Per Second）：每秒请求数，就是说服务器在一秒的时间内处理了多少个请求。
   QPS = req/sec = 请求数/秒
   原理:每天80%的访问集中在20%的时间里，这20%时间叫做峰值时间
   公式:( 总PV数 * 80% ) / ( 每天秒数 * 20% ) = 峰值时间每秒请求数>(QPS)
   机器:峰值时间每秒QPS / 单台机器的QPS = 需要的机器
   tps ：每秒的响应事务数量，大部分情况下tps=qps
5. node垃圾回收机制：切尼（Scavenge：有两个堆，一个堆为使用状态另一个为闲置状态，一个堆为from、另一个为to，将活着的对象从from转移到to，死亡的对象进行清除，from、to角色对换，以空间换时间）MARK-sweep：标记死亡的对象，将其进行清除，会造成的问题为产生内存碎片，当需要大的内存空间的时候启动垃圾回收，无用的回收。matrk-compact：在清除死亡对象之后，将活着的对象向一端移动。
6. script标签阻塞渲染：async（异步）、defer（延迟）都是异步
   async：立即下载脚本，阻塞dom渲染。
   defer：渲染完成之后再执行脚本。
7. 将css放在头部的原因
   这样会先加载css的样式，在渲染dom的时候已经知道了自己的样式，所以渲染一次即可成功。这种方式可以防止闪跳、白屏或者布局混乱的现象发生。
8. DNS原理
9. webpack打包优化click
10. 引起跨域的原因，除了ajax请求（协议域名端口号不同引起跨域）外还有

SSE	Websocket
SSE 使用 HTTP 协议，现有的服务器软件都支持。	WebSocket 是一个独立协议。
SSE 属于轻量级，使用简单；	WebSocket 协议相对复杂。
SSE 默认支持断线重连，	WebSocket 需要自己实现。
SSE 一般只用来传送文本，二进制数据需要编码后传送，	WebSocket 默认支持传送二进制数据。
SSE 支持自定义发送的消息类型。

12. content-type常见值
    text/html ： HTML格式
    text/plain ：纯文本格式
    text/xml ： XML格式

    image/gif ：gif图片格式
    image/jpeg ：jpg图片格式
    image/png：png图片格式

    application/xhtml+xml ：XHTML格式
    application/xml： XML数据格式
    application/atom+xml ：Atom XML聚合格式
    application/json： JSON数据格式
    application/pdf：pdf格式
    application/msword ： Word文档格式
    application/octet-stream ： 二进制流数据（如常见的文件下载）
    application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
    multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

application/x-www-form-urlencoded：表单发送数据时默认编码方式，会将表单中发送的数据以键值对的方式进行发送。get请求会将键值对放在url中，post请求会将键值对放到请求体中。post请求需要设置content-type，get不需要
multipart/form-data：传输特殊类型数据，如mp3、图片。浏览器将整个表单按控件进行分割，每一部分信息都加上content-Disposition、content-type、name、分隔符

13. 异步执行的方法click
14. js实现继承的方法click
15. promise 同步的写法执行异步代码click
16. vue-router传参的方法click,使用路由的时候，1、this.$router.push(name:routername,params:)；2、this.$router.push(name:routername,query:{})；3、使用router-link标签的时候:to="{path:’/routername’,query:{}}"
17. 什么叫优雅降级和渐进增强？
    渐进增强 progressive enhancement：
    针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

18. document load和document ready的区别？
    共同点：这两种事件都代表的是页面文档 加载时触发。
    异同点：
    ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。在前
    onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。在后
19. web前端开发，如何提高页面性能优化？

内容方面：
1.减少 HTTP 请求 (Make Fewer HTTP Requests)
2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对CSS：
1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.避免 CSS 表达式 (Avoid CSS Expressions)

针对JavaScript ：
1.脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4.移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：
1.优化图片
2 不要在 HTML 中使用缩放图片
3 使用恰当的图片格式
4 使用 CSS Sprites 技巧对图片优化