蘑菇街面经(待整理)

1 mate标签用来干什么？具体怎么写？

• <meta> 标签提供关于 HTML 文档的元数据( 任何文件系统中的数据分为数据和元数据。数据是指普通文件中的实际数据，而元数据指用来描述一个文件的特征的系统数据，诸如访问权限、文件拥有者以及文件数据块的分布信息等等)。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

• 具体写，例如：<meta http-equiv="conten-type" content="text/html,charset=utf-8"/>.这其中content属性是它的必需属性，http-equiv是常见的可选属性，是用来添加html头部名称的，当然还有name属性，name属性被浏览器解析后可用来解决浏览器之间的兼容问题，例如360的：<meta name="renderer" content="webkit">，意思是告诉浏览器，用webkit内核来进行解析，renderer是360浏览器规定封装的解析名称

2 说一下http协议无状态相关？

•  无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。通俗理解就是：IP转发是将一个IP包发送到指定的IP地址上去，不会考虑这个包和前面已经发送的包和其后面待发的包之间有什么联系

3 强缓存和协商缓存？具体是哪个字段定义的？

• Http协议头和html页面meta属性控制缓存，详细见http://caibaojian.com/browser-cache.html
• 浏览器在第一次请求发生后，再次请求时：1、浏览器会先获取该资源缓存的header信息，根据其中的expires和cache-control判断是否命中强缓存，若命中则直接从缓存中获取资源，本次请求不会与服务器之间进行通信。2、如果没有命中强缓存，浏览器会发送请求到服务器，由服务器来确定缓存资源是否可用，所以客户端与服务器端需要通过某种标识来进行通信，即：Last-Modified或Etag

4 http状态码

• 200 OK 请求成功
• 304  Not Modified  所请求的资源未被修改，服务器不会返回任何资源。
• 401  Access Denied   web服务器不允许匿名访问
• 403  访问受限
• 404  Not Found服务器无法根据客户端的请求找到资源(网页)
• 500 服务器错误

5 项目相关

6 边距重叠问题？怎么发生的？如何解决？

• 外边距重叠问题及解决办法：两个或多个块级盒子的垂直相邻边界会重合
  1. 外层元素padding代替(为父元素设置padding)
  2. 内层元素透明边框 border:1px solid transparent;
  3. 内层元素绝对定位 postion:absolute:
  4. 外层元素 overflow:hidden;
  5. 内层元素 加float:left;或display:inline-block;
  6. 内层元素padding:1px;
  7. BFC

7 用过webpack吗，具体怎么配置？

• 首先需安装node.js，然后使用npm安装webpack，将安装webpack时生成的bundle.js文件引入项目文件夹里，配置webpack.config.js文件
• 只是在搭项目的时候使用过

8 说一下闭包？实际可以用在哪里？举个例子？

• 闭包是指有权访问另一个函数作用域中的变量的函数。
• 创建闭包的方式，就是在一个函数内部创建另一个函数
• 应用场景：设置私有变量和方法(?写一个例子出来)

  function A(count){
         (function(){
                for(var i = 0;i < count; i++){
                     alert(i);
                }   
         })();
         alert(i);
  }

• 不适合场景：返回闭包的函数是个非常大的函数的时候
• 缺点：常驻内存，会增大内存使用量，使用不当很容易造成内存泄漏

9 单例模式简单实现一下

10 前端主要有哪些安全问题

　　主要有以下几种：

• 　　XSS(Cross Site Scripting,跨站脚本攻击)：通过某种方式(发表文章、评论或者是某个链接等)将一段代码隐秘地输入进去，然后别人再看这段文章或评论的时候，都会执行这段代码，JS           代码一旦执行，就会一发不可收拾，因为它和网页原有的JS代码有着一样的权限。例如可以获取server端数据，可以获取cookie等
  •    预防办法：对用户输入的内容进行验证和替换，还可对cookie进行较强的控制，如给其设置：http-only限制
•        CSRF(Cross site request forgery,跨站请求伪造)
•        网络劫持攻击：很多时候，我们的网站不是直接就访问到我们的服务器上的，中间或经过很多层代理，如果在某一环节上，数据被中间代理的劫持者劫持，那么就...
•        控制台注入代码
•        钓鱼

11 简单说一下promise原理

　　promise就是一个容器，里面保存着某些未来才结束的事件结果(通常是一个异步操作)

       promise是一个对象，从它可以获取异步操作的消息，即：一个promise对象代表着一个还未完成，但预期将来会完成的操作，这样表示了一旦用了promise对象，就不能退出，直到出现结果为止(resolved或rejected)

12 几个异步请求，用promise怎么并行实现

13 讲一下前端模块化

       为了方便代码维护，很多时候可能需要把不同功能的js抽取出来当作一个js文件，就相当于java里的package,需要引用某个函数或功能的时候，import下相关的包，这样可以很好的解决命名冲突等问题

14 前端模块化规范知道哪些？

　　commonJS主要针对于服务器端，根据commonJS规范定义，一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其它模块读取，除非定义为global对象或被输出(export)

　　AMD/CMD针对于浏览器端，AMD是异步模块定义,主要解决了1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器。2、js加载的时候，页面会停止渲染，加载时间越长，页面失去响应时间越长；CMD是通用模块定义，它和AMD要解决的问题相同，但是不同之处在于，CMD就近依赖。

15 讲一下common.js和es6模块系统

16 讲一下盒模型

• 每个html元素都是一个盒模型，一般我们可以通过设置box-sizing这个属性值来为网页设定统一的盒模型，这其中有：符合W3C标准的content-box模型、IE标准的border-box模型、inherit(继承父类元素)。content-box是指该盒模型的padding和border值是在元素内容之外进行设置的，而border-box是元素大小包括盒模型的padding和border值。