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.js5. 可以将代码切割成不同的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=0ETag: abcdeExpires: Thu, 15 Apr 2018 20:00:00 GMTPragma: privateLast-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`的
属性赋值来达到暴露模块对象的目的。复制代码

撩课-Web大前端每天5道面试题-Day39相关推荐

  1. 撩课-Web大前端每天5道面试题-Day7

    1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复渐进增强(progressiv ...

  2. 撩课-Web大前端每天5道面试题-Day12

    1. 请写出至少5个html5新增的标签,并说明其语义和应用场景? section:定义文档中的一个章节;nav:定义只包含导航链接的章节; header:定义页面或章节的头部; 它经常包含 logo ...

  3. 撩课-Web大前端每天5道面试题-Day38

    1.JavaScript实现二分法查找? 二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法. 查找过程可以分为以下步骤: (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是 ...

  4. 撩课-Web大前端每天5道面试题-Day24

    1.下面的代码将输出什么? for (var i = 0; i < 5; i++) {setTimeout(function() { console.log(i); }, i * 1000 ); ...

  5. 撩课-Web大前端每天5道面试题-Day40

    1.git fetch和git pull的区别? git pull:相当于是从远程获取最新版本并merge到本地git fetch:相当于是从远程获取最新版本到本地,不会自动merge 复制代码 2. ...

  6. 撩课-Web大前端每天5道面试题-Day35

    1.React 中 refs 的作用是什么? Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM ...

  7. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  8. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  9. 前端—每天5道面试题(十二)

    前端-每天5道面试题(十二) 每天进步1% 不多 就1% 一.CSS3 新特性有哪些 1.颜色:新增 RGBA,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(borde ...

最新文章

  1. 不要千言万语,一组漫画让你秒懂最终一致性
  2. release,debug库互调用,32位,64位程序与库互调用
  3. Failed to load or instantiate TagLibraryValidator class: org.apache.taglibs.standard.tlv.JstlFmtTLV
  4. 打开储存在服务器的文件,云服务器储存文件
  5. 测试markdown的发布
  6. Global.asax.cs中的方法(包括自定义方法)的含义
  7. MySQL5.5+winXP,字符集设置utf8,好像不能支持中文
  8. 计算机员工工资管理系统源代码,C员工工资管理系统源代码.doc
  9. 【万里征程——Windows App开发】如何使用粘贴板
  10. np.array()函数
  11. 人心就像内存_-Chaz-_新浪博客
  12. 《数据结构》实验三:单链表
  13. 强化学习(1)-什么是强化学习
  14. kafka集群如何内外网均可访问
  15. “听鉴红古轩——赵鹏郭宴HIFI金曲音乐会”圆满落幕
  16. less中的变量 单位问题
  17. java 利用飞信,Java利用飞信API给自己或者好友发信息
  18. 本科去向选择之一——工作
  19. FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me
  20. npm下载什么都报错ERRO -4048

热门文章

  1. 计算机网络和机器视觉,一文读懂计算机视觉和机器人视觉
  2. small2java_java类
  3. steam怎么看邮箱绑定的账号_怎么为QQ邮箱设置英文邮箱账号
  4. 从sqlserver中数据写入mysql_[SQL Server]SQL Server数据库中如何返回INSERT INTO语句插入/写入数据后的记录值(比如ID等)?...
  5. php 发送表格,PHP邮件表格,带有使用AJAX发送的单选按钮
  6. php表格自动添加滚动条,jsp中为表格添加水平滚动条的方法
  7. ARC-060C - Tak and Cards - 动态规划
  8. 信息系统项目管理师:第6章:项目进度管理(3)-章节重点汇总
  9. 软件项目管理0724:见供应商的体会
  10. 笔记-项目采购管理-规划采购管理