撩课-Web大前端天天5道面试题-Day39

1.谈谈你对webpack的见解?

WebPack 是一个模块打包工具，
你可使用WebPack管理你的模块依赖，
并编绎输出模块们所需的静态文件。
它可以很好地管理、
打包Web开发中所用到的`HTML、javaScript、CSS 
以及各类静态文件（图片、字体等），
让开发过程更加高效。
对于不一样类型的资源，webpack 有对应的模块加载器。
webpack 模块打包器会分析模块间的依赖关系，
最后 生成了优化且合并后的静态资源。

webpack的两大特点：
1.code splitting（能够自动完成）
 
2.loader 能够处理各类类型的静态文件，而且支持串联操做

webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

webpack具备requireJs和browserify的功能，但仍有不少本身的新特性：
1. 对 CommonJS 、 AMD 、ES6的语法作了兼容
 
2. 对js、css、图片等资源文件都支持打包
 
3. 串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
 
4. 有独立的配置文件webpack.config.js
 
5. 能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间
 
6. 支持 SourceUrls 和 SourceMaps，易于调试
 
7. 具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活
 
8.webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快


复制代码

2.什么是Etag？

当发送一个服务器请求时，
浏览器首先会进行缓存过时判断。
浏览器根据缓存过时时间判断缓存文件是否过时。

情景一：
若没有过时，则不向服务器发送请求，
直接使用缓存中的结果，
此时咱们在浏览器控制台中能够看到 `200 OK`(from cache) ，
此时的状况就是彻底使用缓存，
浏览器和服务器没有任何交互的。

情景二：
若已过时，
则向服务器发送请求，
此时请求中会带上①中设置的文件修改时间，和`Etag`

而后，进行资源更新判断。
服务器根据浏览器传过来的文件修改时间，
判断自浏览器上一次请求以后，
文件是否是没有被修改过；
根据`Etag`，
判断文件内容自上一次请求以后，
有没有发生变化

情形一：
若两种判断的结论都是文件没有被修改过，
则服务器就不给浏览器发`index.html`的内容了，
直接告诉它，文件没有被修改过，
你用你那边的缓存吧—— `304 Not Modified`，
此时浏览器就会从本地缓存中获取`index.html`的内容。
此时的状况叫协议缓存，
浏览器和服务器之间有一次请求交互。

情形二：
若修改时间和文件内容判断有任意一个没有经过，
则服务器会受理这次请求，以后的操做同①

① 只有get请求会被缓存，post请求不会

Expires和Cache-Control

`Expires`要求客户端和服务端的时钟严格同步。
`HTTP1.1`引入`Cache-Control`来克服Expires头的限制。
若是max-age和Expires同时出现，
则max-age有更高的优先级。

    Cache-Control: no-cache, private, max-age=0
 
    ETag: abcde
 
    Expires: Thu, 15 Apr 2018 20:00:00 GMT
 
    Pragma: private
 
    Last-Modified: $now // RFC1123 format

复制代码

3.ETag应用?

Etag由服务器端生成，
客户端经过If-Match或者说If-None-Match这个条件判断请求来验证资源是否修改。
常见的是使用If-None-Match。
请求一个文件的流程可能以下：

====第一次请求===
1.客户端发起 HTTP GET 请求一个文件；
 
2.服务器处理请求，
返回文件内容和一堆Header，
固然包括Etag(例如"2e681a-6-5d044840")(假设服务器支持Etag生成和已经开启了Etag).状态码200

====第二次请求===
客户端发起 HTTP GET 请求一个文件，
注意这个时候客户端同时发送一个If-None-Match头，
这个头的内容就是第一次请求时服务器返回的
Etag：2e681a-6-5d0448402.服务器判断发送过来的Etag和计算出来的Etag匹配，
所以If-None-Match为False，
不返回200，返回304，客户端继续使用本地缓存；
流程很简单，问题是，
若是服务器又设置了Cache-Control:max-age和Expires呢，怎么办?
答案是同时使用，
也就是说在彻底匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag以后，

服务器才能返回304.(不要陷入到底使用谁的问题怪圈)

为何使用Etag请求头?

Etag 主要为了解决 Last-Modified 没法解决的一些问题。

复制代码

4.关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，
它容许服务端在客户端须要数据以前就主动地将数据发送到客户端缓存中，
从而提升性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技术，
容许多个消息在一个链接上同时交差。

它增长了头压缩（header compression），
所以即便很是小的请求，
其请求和响应的header都只会占用很小比例的带宽。

复制代码

5.说说你对AMD和Commonjs的理解?

`CommonJS`是服务器端模块的规范，nodejs采用了这个规范。
`CommonJS`规范加载模块是同步的，也就是说，
只有加载完成，才能执行后面的操做。
AMD规范则是非同步加载模块，容许指定回调函数。

`AMD`推荐的风格经过返回一个对象作为模块对象，
`CommonJS`的风格经过对`module.exports`或`exports`的
属性赋值来达到暴露模块对象的目的。

复制代码