39-撩课大前端-面试宝典-第三十九篇

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`的
属性赋值来达到暴露模块对象的目的。

猜你喜欢

转载自blog.csdn.net/lkitlike/article/details/86487537