前端面试题总结

前端面试题总结
前端面试题总结

基本信息
1. 为何选择前端这个方向？
- 第一的话对互联网开发方面的东西很感兴趣，之前也接触过其他语言，但是直到接触到前端才发现很有兴趣做下去，兴趣是一个人最好的老师。
- 第二的话前端的发展前景也很广阔，像现在的nodejs，微信小程序这类工具和框架可以让前端进行后端和移动开发，所以我觉得从事前端工作未来也会有很好的发展。
1. 对前端的理解？
- 首先前端的核心技能还是:HTML,CSS,JS。前端负责的是用户可以看到的部分，所以也是最接近用户的工程师。同时在产品研发流程中前端要同时与产品、设计、后端等很多人合作。
1. 平时是怎么学新技术的？
- 伯乐在线、infoq、掘金、简书、慕课网
1. 对自己未来的规划是怎样的
- 对于刚毕业的人来说，前两年是很重要的，先打好基础，多提升js能力。三至四年在提升JS能力的同时，开始要往多方面发展，前端工程师远远不仅是JS而已。制作一个性能高、交互好、视觉美的页面，需要从前端框架选型、架构设计、构建工具，到后端通信机制、设计与交互、网络和浏览器优化等各方面的知识。一专多长才是前端工程师的终极目标。
1. 你觉得前端工程的价值体现在哪
  - 为简化用户使用提供技术支持（交互部分）
  - 为多个浏览器兼容性提供支持
  - 为提高用户浏览速度（浏览器性能）提供支持
  - 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  - 为展示数据提供支持（数据接口）
前端基本语言

HTML/HTML5
1. 知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？
  - 像html5的新的标签header，footer,section等就是语义化
  - 一方面，语义化就是让计算机能够快速的读懂内容，高效的处理信息，可以对搜索引擎更友好。
  - 另一方面，便于与他人的协作，他人通过读代码就可以理解你网页标签的意义。
  - 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  - 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  - 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  - 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
2. 介绍一下HTML5的新特性
  - 新的DOCTYPE声明
  - 完全支持css3
  - video和audio
  - 本地存储
  - 语义化标签
  - canvas
  - 新事件如ondrag onresize
3. 如何解决ajax无法后退的问题？
  - HTML5里引入了新的API，即：history.pushState, history.replaceState
  - 可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
  - onpopstate监听后退
4. websocket和ajax轮询
  - Websocket是HTML5中提出的新的协议，注意，这里是协议，可以实现客户端与服务器端的通信，实现服务器的推送功能。
  - 其优点就是，只要建立一次连接，就可以连续不断的得到服务器推送的消息，节省带宽和服务器端的压力。
  - ajax轮询模拟长连接就是每个一段时间（0.5s）就向服务器发起ajax请求，查询服务器端是否有数据更新
  - 其缺点显而易见，每次都要建立HTTP连接，即使需要传输的数据非常少，所以这样很浪费带宽
5. Web Worker 和webSocket
worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
WebSocket
- 是Web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个Html5协议，WebSocket的连接是持久的，他通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定时间间隔去轮询。
1. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
  - 声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。
  - 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
  - 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  - DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2. 你知道多少种Doctype文档类型？
  - 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
  - HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
  - XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
  - Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
  - （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
3. HTML与XHTML——二者有什么区别
  1. 所有的标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须使用小写
  3. 所有的XML标记都必须合理嵌套
  4. 所有的属性必须用引号""括起来
  5. 把所有<和&特殊符号用编码表示
  6. 给所有属性赋一个值
  7. 不要在注释内容中使“--”
  8. 图片必须有说明文字
CSS
1. 说说content-box和border-box，为什么看起来content-box更合理，但是还是经常使用border-box？
- content-box 是W3C的标准盒模型元素宽度=内容宽度+padding+border
- border-box 是ie的怪异盒模型他的元素宽度等于内容宽度内容宽度包含了padding和border
- 比如有时候在元素基础上添加内距padding或border会将布局撑破但是使用border-box就可以轻松完成
1. 实现三个DIV等分排布在一行（考察border-box）
  1.设置border-box width33.3%
  2.flexbox flex：1
2. 实现两栏布局有哪些方法
- 方法一：
```
*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
     300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    margin-left: 300px;
    background-color: #eee;
```
- 方法二：
```
*{margin:0; padding: 0;}
html,body{
        height: 100%;/*高度百分百显示*/
}
#left{
     300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right{
    height: 100%;
    overflow:hidden;
    background-color: #eee;
}
```
- 第二种方法，我利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：
  - float 的值不为 none
  - position 的值不为 static 或者 relative
  - display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个
  - overflow 的值不为 visible
- 第三种flex布局
1. 设置width的flex元素，flex属性值是多少？
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写
- flex-grow属性定义项目的放大比例，默认为0
- flex-shrink属性定义了项目的缩小比例，默认为1
- flex-basis属性定义了项目的固定空间
1. 怎么实现从一个DIV左上角到右下角的移动，有哪些方法，都怎么实现？
- 改变left值为window宽度-div宽度 top值为window高度-div高度
- jquery的animate方法
- css3的transition
1. 圣杯布局和双飞翼布局
- 【圣杯布局】
  html代码中 middle部分首先要放在container的最前部分。然后是left,right
  1. 将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）
  2. middle部分 100%占满
  3. 此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%
  4. 这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 220px 0 200px
  5. middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px
  6. 到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px
- 【双飞翼布局】
  1. 前几步都一样后边把外围padding和相对定位做法换成内层margin
  2. 给middle增加一个内层div-middle-inner, 然后margin:0 220px 0 200px
  3. 47:offsetHeight, scrollHeight, clientHeight分别代表什么
  4. clientHeight：包括内容可见部分的高度，可见的padding；不包括border，水平方向的scrollbar，margin。
  5. offsetHeight：包括内容可见部分的高度，border，可见的padding，水平方向的scrollbar（如果存在）；不包括margin。
  6. scrollHeight：包括内容的高度（可见与不可见），padding（可见与不可见）；不包括border，margin。
1. 垂直居中
- 单行行内元素
  1. 可以设置padding-top,padding-bottom
  2. 将height和line-height设为相等
- 多行行内元素
  1. 可以将元素转为table样式，再设置vertical-align：middle;
  2. 使用flex布局
- 块级元素
  - 已知高度绝对定位负边距
  - 未知高度transform: translateY(-50%);
  - flex布局
```
display: flex;
justify-content: center;
align-items: center;
```
1. rem和em的区别？
- em相对于父元素，rem相对于根元素
1. 清除浮动
- 谈谈浮动和清除浮动：浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
- 两种原理
  1. 利用clear属性进行清理
  - 具体的实现原理是通过引入清除区域，这个相当于加了一块看不见的框把定义clear属性的元素向下挤
  - 父容器结尾插入空标签<div style="clear: both;"></div>
  - 利用CSS伪元素：
```
.clearfix:after {
    content: ".";
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}
```
  1. 将父容器形成BFC
  - BFC能清理浮动主要运用的是它的布局规则：
    
    内部的Box会在垂直方向，一个接一个地放置。
    
    Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    
    每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    
    BFC的区域不会与float box重叠。
    
    BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    
    计算BFC的高度时，浮动元素也参与计算
  - 浮动清理利用的主要是第六条规则，只要将父容器触发为BFC，就可以实现包含的效果。那么触发BFC有哪几种方法？
    
    根元素
    
    float属性不为none
    
    position为absolute或fixed
    
    display为inline-block, table-cell, table-caption, flex, inline-flex
    
    overflow不为visible
1. position的值， relative和absolute分别是相对于谁进行定位的？
  1. relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
  2. absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。
  3. fixed: （老版本IE不支持）生成绝对定位，相对于浏览器窗口或者frame进行定位。
  4. static:默认值，没有定位，元素出现在正常的文档流中。
  5. sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。
2. position:absolute和float属性的异同？
  - 共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
  - 不同点：float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。absolute会覆盖文档流中的其他元素。
3. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
  - 选择符：
    
    id选择器（#myId）;
    
    类选择器（.myClassName）;
    
    标签选择器（div,p,h1）;
    
    相邻选择器（h1 + p）;
    
    子选择器（ul > li）;
    
    后代选择器（li a）;
    
    通配符选择器（*）;
    
    属性选择器（button[disabled="true"]）;
    
    伪类选择器（a:hover,li:nth-child）;表示一种状态
    
    伪元素选择器（li:before、:after,:first-letter,:first-line,:selecton）;表示文档某个部分的表现
  - 优先级：
    !important > 行内样式（比重1000） > id（比重100） > class/属性（比重10） > tag / 伪类（比重1）;
  - 伪类和伪元素区别：
    
    伪类：a:hover,li:nth-child；
    
    伪元素：li:before、:after,:first-letter,:first-line,:selecton;
4. 介绍sass
  - &定义变量 css嵌套允许在代码中使用算式支持if判断for循环
5. tansition和margin的百分比根据什么计算？
  - transition是相对于自身,margin相对于参照物
6. 实现一个秒针绕一点转动的效果
```
animation: move 60s infinite steps(60); 
/*设置旋转的中心点为中间底部*/ 
transform-origin: center bottom; 
/*旋转从0度到360度*/ 
@keyframes move { 
    from { 
        transform: rotate(0deg); 
    } 
    to { 
        transform: rotate(360deg); 
    } 
} 
```
1. display:none和visibility:hidden的区别？
  - display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
  - visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
2. CSS中link 和@import的区别是？
  1. link属于HTML标签，而@import是CSS提供的;
  2. 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
  3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
  4. link方式的样式的权重高于@import的权重.
3. position:absolute和float属性的异同
  - 共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
  - 不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。
4. 介绍一下box-sizing属性？
  - box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
  - content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
  - border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
  - 标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
5. CSS3新增伪类举例
  - p:first-of-type 选择属于其父元素的首个
    元素的每个
    元素。
  - p:last-of-type 选择属于其父元素的最后
    元素的每个
    元素。
  - p:only-of-type 选择属于其父元素唯一的
    元素的每个
    元素。
  - p:only-child 选择属于其父元素的唯一子元素的每个
    元素。
  - p:nth-child(2) 选择属于其父元素的第二个子元素的每个
    元素。
  - :enabled :disabled 控制表单控件的禁用状态。
  - :checked 单选框或复选框被选中。
6. CSS3有哪些新特性？
  - CSS3实现圆角（border-radius），阴影（box-shadow），
  - 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
  - transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
  - 增加了更多的CSS选择器多背景 rgba
  - 在CSS3中唯一引入的伪元素是::selection.
  - 媒体查询，多栏布局
  - border-image
  - CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
    
    content-box（默认）
    
    布局所占宽度Width：Width = width + padding-left + padding-right + border-left + border-right
    
    布局所占高度Height:Height = height + padding-top + padding-bottom + border-top + border-bottom
    
    padding-box
    
    布局所占宽度Width：Width = width(包含padding-left + padding-right) + border-top + border-bottom
    
    布局所占高度Height:Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
    
    border-box
    
    布局所占宽度Width：Width = width(包含padding-left + padding-right + border-left + border-right)
    
    布局所占高度Height:Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
7. 对BFC规范的理解？
  - BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
  - （W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
JS
1. 介绍一下闭包和闭包常用场景？
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
- 闭包有三个特性：
  1. 函数嵌套函数
  2. 函数内部可以引用外部的参数和变量
  3. 参数和变量不会被垃圾回收机制回收
- 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
  - 应用场景设置私有变量和方法
  - 不适合场景：返回闭包的函数是个非常大的函数
  - 闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
1. 为什么会出现闭包这种东西，解决了什么问题？
- 受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念
1. 介绍一下你所了解的作用域链,作用域链的尽头是什么，为什么？
- 每一个函数都有一个作用域，比如我们创建了一个函数，函数里面又包含了一个函数，那么现在就有三个作用域，这样就形成了一个作用域链。
- 作用域的特点就是，先在自己的变量范围中查找，如果找不到，就会沿着作用域链往上找。
1. 一个Ajax建立的过程是怎样的，主要用到哪些状态码？
  - ajax：在不切换页面的情况下完成异步的HTTP请求
    
    创建XMLHttpRequest对象,也就是创建一个异步调用对象.
    
    创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    
    设置响应HTTP请求状态变化的函数.
    
    发送HTTP请求.
    
    获取异步调用返回的数据.
    
    使用JavaScript和DOM实现局部刷新.
```
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
	
	}
}
```
- 使用promise封装
```
function getJSON(url) { 
    return new Promise(function(resolve, reject) { 
        var XHR = new XMLHttpRequest(); 
        XHR.open('GET', url, true); 
        XHR.send(); 
   
        XHR.onreadystatechange = function() { 
            if (XHR.readyState == 4) { 
                if (XHR.status == 200) { 
                    try { 
                        var response = JSON.parse(XHR.responseText); 
                        resolve(response); 
                    } catch (e) { 
                        reject(e); 
                    } 
                } else { 
                    reject(new Error(XHR.statusText)); 
                } 
            } 
        } 
    }) 
} 
getJSON(url).then(res => console.log(res)); 
```
  - 当前状态readystate
    
    0 代表未初始化。还没有调用 open 方法
    
    1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
    
    2 代表已加载完毕。send 已被调用。请求已经开始
    
    3 代表交互中。服务器正在发送响应
    
    4 代表完成。响应发送完毕
  - 常用状态码status
    
    404 没找到页面(not found)
    
    403 禁止访问(forbidden)
    
    500 内部服务器出错(internal service error)
    
    200 一切正常(ok)
    
    304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改）
1. 说说你还知道的其他状态码，状态码的存在解决了什么问题？
- 302/307　　临时重定向
- 301　永久重定向
- 借助状态码,用户可以知道服务器端是正常处理了请求,还是出现了什么错误
1. 事件委托
- 利用冒泡的原理，把事件加到父级上，触发执行效果。
  1.可以大量节省内存占用，减少事件注册。
  2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
```
var ul = document.querySelector('ul'); 
var list = document.querySelectorAll('ul li'); 
   
ul.addEventListener('click', function(ev){ 
    var ev = ev || window.event; 
    var target = ev.target || ev.srcElemnt; 
   
    for(var i = 0, len = list.length; i < len; i++){ 
        if(list[i] == target){ 
            alert(i + "----" + target.innerHTML); 
        } 
    } 
}); 
```
1. 说说你知道JavaScript的内存回收机制？
- 垃圾回收器会每隔一段时间找出那些不再使用的内存，然后为其释放内存。
- 一般使用标记清除方法当变量进入环境标记为进入环境，离开环境标记为离开环境
- 还有引用计数方法
- 堆栈
- stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小不定也不会自动释放。
- 基本数据类型存放在栈中
- 引用类型存放在堆内存中，首先从栈中获得该对象的地址指针，然后再从堆内存中取得所需的数据
1. 函数防抖和函数节流？
- 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次
- 函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
- 如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
- 如果计时完毕，没有方法进来访问触发，则执行代码。
```
//函数防抖
var timer = false
document.getElementById("debounce").onScroll = function() {
	clearTimeout(timer);  
  timer = setTimeout(function(){
    console.log('函数防抖'); 
  }, 300);
}
```
1. javaScript中的this是什么，有什么用，它的指向是什么？
- 全局代码中的this 是指向全局对象
- 作为对象的方法调用时指向调用这个函数的对象。
- 作为构造函数指向新创建的对象
- 使用apply和call设置this
1. 判断数组有哪些方法？
- a instanceof Array
- a.constructor == Array
- Object.prototype.toString.call(a) == [Object Array]
1. 严格模式的特性？
  - 严格模式对Javascript的语法和行为，都做了一些改变。
  - 全局变量必须显式声明。
  - 对象不能有重名的属性
  - 函数必须声明在顶层
    
    消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
    
    消除代码运行的一些不安全之处，保证代码运行的安全；
    
    提高编译器效率，增加运行速度；
    
    为未来新版本的Javascript做好铺垫。
2. js的原型链，如何实现继承？
```
function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
```
1. 图片懒加载:当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。
2. 事件模型和事件代理
  - 事件三个阶段：事件捕获，目标，事件冒泡（低版本ie不支持捕获阶段）
  - w3c绑定事件target.addEventListener(event,handler,false)
  - 解绑target.removeEventListener(eventType, handler, false)
  - ie绑定 target.attachEvent(on+event, handler)
  - 解绑target.detachEvent("on"+eventType, handler)
  - 事件代理优点：
    
    可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒
    
    可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
  - bind和trigger实现：
  - 创建一个类或是匿名函数，在bind和trigger函数外层作用域创建一个字典对象，用于存储注册的事件及响应函数列表，bind时，如果字典没有则创建一个，key是事件名称，value是数组，里面放着当前注册的响应函数，如果字段中有，那么就直接push到数组即可。trigger时调出来依次触发事件响应函数即可。
```
function Emitter() {
    this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2]
}
  
//注册事件
Emitter.prototype.bind = function(eventName, callback) {
    var listener = this._listener[eventName] || [];//this._listener[eventName]没有值则将listener定义为[](数组)。
    listener.push(callback);
    this._listener[eventName] = listener;
}
  
 //触发事件
Emitter.prototype.trigger = function(eventName) {
    var args = Array.prototype.slice.apply(arguments).slice(1);//atgs为获得除了eventName后面的参数(注册事件的参数)
    var listener = this._listener[eventName];
  
    if(!Array.isArray(listener)) return;//自定义事件名不存在
    listener.forEach(function(callback) {
        try {
            callback.apply(this, args);
        }catch(e) {
            console.error(e);
        }
    })
}
```
3. setTimeout,setInterval,requestAnimationFrame之间的区别
  - setInterval如果函数执行的时间很长的话，第二次的函数会放到队列中，等函数执行完再执行第二次，导致时间间隔发生错误。
  - 而settimeout一定是在这个时间定时结束之后,它才会执行
  - requestAnimationFrame是为了做动画专用的一个方法，这种方法对于dom节点的操作会比较频繁。
4. webpack常用到哪些功能
  - 设置入口
  - 设置输出目
  - 设置loader
  - extract-text-webpack-plugin将css从js代码中抽出并合并
  - 处理图片文字等功能
  - 解析jsx解析bable
5. 函数组合继承
  原型继承、构造函数继承、call aplly继承
```
var Super = function(name){
	this.name = name;
}
Super.prototype.func1 = function() { console.log('func1'); }
var Sub = function(name,age) {
	Super.call(this, name);
	this.age = age;
}
Sub.prototype = new Super();
```
1. 事件绑定
```
var addEvent = function(e, type, handler, capture ) {
	if (e.addEventListener) {
    	e.addEventListener(type, handler, capture);
	} else if (e.attachEvent) {
    	e.attachEvent('on'+type, handler);
	} else {
    	e['on'+type] = handler;
	}
}
```
1. 说说你对作用域链的理解
  - 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。
2. Javascript垃圾回收方法
标记清除（mark and sweep）
- 这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
- 垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引用计数(reference counting)
- 在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
- 在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。
1. js继承方式及其优缺点
- 原型链继承的缺点
  - 一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
- 借用构造函数（类式继承）
  - 借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。所以我们需要原型链+借用构造函数的模式，这种模式称为组合继承
- 组合式继承
  - 组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
ES6
1. let和const的区别？
- let声明的变量可以改变，值和类型都可以改变，没有限制。
- const声明的变量不得改变值
1. 平时用了ES6的哪些特性，体验如何，和ES5有什么不同？
- let、const关键字，箭头函数，字符串模板，class类，模块化，promise
- ES5 require，react.createclass
1. 简单介绍一下promise，他解决了什么问题？
- Promise，就是一个对象，用来传递异步操作的消息。有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。
- 有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
1. ES6的了解
  - 新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念
前端框架

模块化
1. 使用模块化加载时，模块加载的顺序是怎样的，如果不知道，根据已有的知识，你觉得顺序应该是怎么样的
- commonjs 同步顺序执行
- AMD 提前加载，不管是否调用模块，先解析所有模块 requirejs 速度快有可能浪费资源
- CMD 提前加载，在真正需要使用(依赖)模块时才解析该模块 seajs 按需解析性能比AMD差
1. UMD规范和ES6模块化，Commonjs的对比？
- CommonJS是一个更偏向于服务器端的规范。用于NodeJS 是同步的
- AMD是依赖前置的
- CMD推崇依赖就近，延迟执行。可以把你的依赖写进代码的任意一行
- AMD和CMD都是用difine和require，但是CMD标准倾向于在使用过程中提出依赖，就是不管代码写到哪突然发现需要依赖另一个模块，那就在当前代码用require引入就可以了，规范会帮你搞定预加载，你随便写就可以了。但是AMD标准让你必须提前在头部依赖参数部分写好（没有写好？倒回去写好咯）。这就是最明显的区别。
- UMD写一个文件需要兼容不同的加载规范
- ES6通过import、export实现模块的输入输出。其中import命令用于输入其他模块提供的功能，export命令用于规定模块的对外接口。
1. 对前端模块化的认识
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
- AMD 是提前执行，CMD 是延迟执行。
- AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。
CMD模块方式
```
define(function(require, exports, module) {
	// 模块代码
});
```
框架问题
1. 什么是 MVVM , 和 MVC 是什么区别, 原理是什么?
- mvc的界面和逻辑关联紧密，数据直接从数据库读取，必须通过Controller来承上启下，通信都是单向的。mvvm的View 和 ViewModel可以互相通信，界面数据从viewmodel中获取。
1. 父子组件怎么通信的?
- vue：父组件是通过props属性给子组件通信在子组件里面emit,在父组件监听
  　- react：props传递父给子传一个回调函数将数据传给父亲处理
1. 兄弟组件怎么通信的?
  　- vuex 建立一个vue实例 emit触发事件 on监听事件
  　- redux 子A -> 父 -> 子B
2. 生命周期有哪些, 怎么用?
  　- beforecreated：el 和 data 并未初始化
  　- created:完成了 data 数据的初始化，el没有
  　- beforeMount：完成了 el 和 data 初始化
  　- mounted ：完成挂载；updated；destroyed
- react：初始化阶段、运行中阶段、销毁阶段
  - 初始化：getDefaultProps()和getInitialState()初始化
    
    componentWillMount() 在组件即将被渲染到页面
    
    render() 组件渲染
    
    componentDidMount() 组件被渲染到页面上，
  - 运行中：shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate()
    　　 - 销毁：componentWillUnmount()
jQuery & zepto
1. zepto和jquery区别？
  - zepto比jquery体积小很多，移动端的兼容性不需要要考虑很多，jquery中的很多功能都没有。
  - width()和height()不一样解决用.css('width')
2. css3动画和jquery动画的差别？
  1.css3中的过渡和animation动画都是基于css实现机制的，属于css范畴之内，并没有涉及到任何语言操作。效率略高与jQuery中的animate()函数，但兼容性很差。
  2.jQuery中的animate()函数可以简单的理解为css样式的“逐帧动画”，是css样式不同状态的快速切换的结果。效率略低于css3动画执行效率，但是兼容性好。‍
3. 你觉得jQuery或zepto源码有哪些写的好的地方
  - jQuery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链。
```
(function( window, undefined ) {

     //用一个函数域包起来，就是所谓的沙箱

     //在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

     //把当前沙箱需要的外部变量通过函数参数引入进来

     //只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

    window.jQuery = window.$ = jQuery;

})( window );
```
  - jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法。
  - 有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度。
  - jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率。
AngularJS
1. 如何评价AngularJS和BackboneJS
  - backbone具有依赖性，依赖underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一个AngularJS 多出了2 次HTTP请求.
  - Backbone的Model没有与UI视图数据绑定，而是需要在View中自行操作DOM来更新或读取UI数据。AngularJS与此相反，Model直接与UI视图绑定，Model与UI视图的关系，通过directive封装，AngularJS内置的通用directive，就能实现大部分操作了，也就是说，基本不必关心Model与UI视图的关系，直接操作Model就行了，UI视图自动更新。
  - AngularJS的directive，你输入特定数据，他就能输出相应UI视图。是一个比较完善的前端MVW框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能，模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。
React

Vue
1. Vue双向数据绑定的实现
- vue.js采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者（文本节点则是作为订阅者），在收到消息后执行相应的更新操作。
- compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
- MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化-->视图更新；视图交互变化（input）-->数据model变更的双向数据绑定效果。
- AngularJS采用“脏值检测”的方法，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变。
bootstrap
1. bootstrap的栅格系统如何实现的？
  - box-sizing: border-box;
  - container row column设置百分比
框架对比
1. react和vue有哪些不同，说说你对这两个框架的看法？
2. 都用了virtual DOM的方式，性能都很好
3. UI上都是组件化的写法，开发效率很高
4. vue是双向数据绑定，react是单项数据绑定，当工程规模比较大时，双向数据绑定会很难维护
5. vue适合不会持续的，小型的web应用，使用vue.js能带来短期内较高的开发效率，否则采用react。
用过哪些设计模式？

工厂模式：

》主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。
- 工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法搞清楚他们到底是哪个对象的实例。
```
function createObject(name,age,profession){//集中实例化的函数var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例
```
构造函数模式

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：
1.构造函数方法没有显示的创建对象 (new Object());
2.直接将属性和方法赋值给 this 对象;
3.没有 renturn 语句。

浏览器
1. 浏览器原生支持module吗，如果支持，会带来哪些便利？
- 不支持
1. 浏览器缓存有哪些，通常缓存有哪几种方式？
- 强缓存：强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。
- 协商缓存：当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回（304），若未命中请求，则将资源返回客户端，并更新本地缓存数据（200）。
- HTTP头信息控制缓存
- Expires（强缓存）+过期时间 Expires是HTTP1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间
- Cache-control（强缓存）描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断管理更有效，安全一些 Cache-Control: max-age=3600
- Last-Modified/If-Modified-Since（协商缓存）标示这个响应资源的最后修改时间。Last-Modified是服务器相应给客户端的，If-Modified-Sinces是客户端发给服务器，服务器判断这个缓存时间是否是最新的，是的话拿缓存。
- Etag/If-None-Match（协商缓存） etag和last-modified类似，他是发送一个字符串来标识版本。
1. 跨域通信有哪些方案，各有什么不同？
  - JSONP：
    
    由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，script标签没有同源限制，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
    
    通过动态<script>元素使用，使用时为src指定一个跨域url。回调函数处理JSON数据。
    
    优点：兼容性好，简单易用，支持浏览器与服务器双向通信。
    
    缺点：只支持GET请求。
    
    简述原理与过程：首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成一个function , function 名字就是传递上来的参数。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里
    
    var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction"; var script = document.createElement('script'); script.setAttribute('src', url); //load javascript document.getElementsByTagName('head')[0].appendChild(script); //回调函数 function callbackfunction(data){ var html=JSON.stringify(data.RESULTSET); alert(html); }
  - CORS：
    
    服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
    
    通过设置Access-Control-Allow-Origin来允许跨域，cors可用ajax发请求获取数据，但是兼容性没有jsonp好。
  - 通过修改document.domain来跨子域
    
    将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域
    
    主域相同的使用document.domain
  - 使用window.name来进行跨域
    
    window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的
  - 使用HTML5中新引进的window.postMessage方法来跨域传送数据
    
    还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。
2. 移动端兼容问题
  - IOS移动端click事件300ms的延迟响应
  - 一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发，css增加cursor:pointer就搞定了
3. XML和JSON的区别？
  1. 数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。
  2. 数据交互方面：JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
  3. 数据描述方面：JSON对数据的描述性比XML较差。
  4. 传输速度方面：JSON的速度要远远快于XML。
4. 渐进增强和优雅降级
  - 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  - 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
构建工具
1. 介绍一下你对webpack的理解，和gulp有什么不同？
- Webpack是模块打包工具，他会分析模块间的依赖关系，然后使用loaders处理它们，最后生成一个优化并且合并后的静态资源。
- gulp是前端自动化工具 能够优化前端工作流程，比如文件合并压缩
1. webpack打包速度慢，你觉得可能的原因是什么，该如何解决
- 模块太多。
- Webpack 可以配置 externals 来将依赖的库指向全局变量，从而不再打包这个库
1. 谈谈你对webpack的看法
  - WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。
  - webpack的两大特色：
    1.code splitting（可以自动完成）
    2.loader 可以处理各种类型的静态文件，并且支持串联操作
    webpack 是以commonJS的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
  - webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
    
    对 CommonJS 、 AMD 、ES6的语法做了兼容
    
    对js、css、图片等资源文件都支持打包
    
    串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
    
    有独立的配置文件webpack.config.js
    
    可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
    
    支持 SourceUrls 和 SourceMaps，易于调试
    
    具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
    8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
网络&存储
1. http响应中content-type包含哪些内容？
- 请求中的消息主体是用何种方式编码
- application/x-www-form-urlencoded
- 这是最常见的 POST 提交数据的方式按照 key1=val1&key2=val2 的方式进行编码
- application/json
- 告诉服务端消息主体是序列化后的 JSON 字符串
1. get和post有什么不同？
- get是从服务器上获取数据，post是向服务器传送数据
- get请求可以将查询字符串参数追加到url的末尾; post请求应该把数据作为请求的主体提交.
- get请求数据有大小限制；post没有
- post比get安全性更高
1. cookie和session有什么联系和区别？
- cookie数据存放在客户的浏览器上，session数据放在服务器上。
- session比cookie更安全
- 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
- 一般用cookie来存储sessionid
1. 多页面通信有哪些方案，各有什么不同？
- localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。
- settimeout+cookie
1. 输入网址后到页面展现的过程？
2. 通过dns解析获取ip
3. tcp链接
4. 客户端发送http请求
5. tcp传输报文
6. 服务器处理请求返回http报文
7. 客户端解析渲染页面（构建DOM树 –> 构建渲染树 –> 布局渲染树：计算盒模型位置和大小 –> 绘制渲染树）
8. 前端性能优化
  - 【说法一】
  1. 减少http请求使用sprite图、合并js和css文件
  2. 使用cdn 将用户安排在近的服务器上
  3. 使用缓存缓存ajax 使用外部的css和js以便缓存使用expire cach-control etag
  4. 压缩资源使用gzip压缩js和css文件
  5. 代码层面避免使用样式表达式、通配符选择器、样式放在顶部、脚本放在底部
  - 【说法二】
  1. 代码层面：避免使用css表达式，避免使用高级选择器，通配选择器。
  2. 缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等
  3. 请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。
  4. 请求带宽：压缩文件，开启GZIP，
  5. 代码层面的优化
    
    用hash-table来优化查找
    
    少用全局变量
    
    用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
    
    用setTimeout来避免页面失去响应
    
    缓存DOM节点查找的结果
    
    避免使用CSS Expression
    
    避免全局查询
    
    避免使用with(with会创建自己的作用域，会增加作用域链长度)
    
    多个变量声明合并
    
    避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率
    
    尽量避免写在HTML标签中写Style属性
9. 移动端性能优化
  - 尽量使用css3动画，开启硬件加速。
  - 适当使用touch事件代替click事件。
  - 避免使用css3渐变阴影效果。
  - 可以用transform: translateZ(0)来开启硬件加速。
  - 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
  - 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
  - 合理使用requestAnimationFrame动画代替setTimeout
  - CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
  - PC端的在移动端同样适用
10. 分域名请求图片的原因和好处？
  - 浏览器的并发请求数目限制是针对同一域名的，超过限制数目的请求会被阻塞
  - 浏览器并发请求有个数限制，分域名可以同时并发请求大量图片
11. 页面的加载顺序
  - html顺序加载，其中js会阻塞后续dom和资源的加载，css不会阻塞dom和资源的加载但是会阻塞js的加载。
  - 浏览器会使用prefetch对引用的资源提前下载
    
    没有 defer 或 async，浏览器会立即加载并执行指定的脚本
    
    有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(下载异步，执行同步，加载完就执行)。
    
    有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
12. 计算机网络的分层概述
  - tcp/ip模型：从下往上分别是链路层，网络层，传输层，应用层
  - osi模型：从下往上分别是物理层，链路层，网络层，传输层，会话层，表示层，应用层。
13. jscss缓存问题
  - 浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致修改了js、css，客户端不能更新
  - 都加上了一个时间戳作为版本号
  - <script type=”text/javascript” src=”{JS文件连接地址}?version=XXXXXXXX”></script>
14. 说说TCP传输的三次握手四次挥手策略
- 三次握手
  - 为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。
  - 发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
  - 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
  - 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。
- 断开一个TCP连接则需要“四次握手”：
  - 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可以接受数据。
  - 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
  - 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
  - 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。
1. TCP和UDP的区别？
  - TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
  - UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！
  - UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。
2. HTTP和HTTPS
  - HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
  - 默认HTTP的端口号为80，HTTPS的端口号为443。
3. 为什么HTTPS安全
  - 因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
4. 关于Http 2.0 你知道多少？
  - HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
  - HTTP/2提供更多的加密支持
  - HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
  - 它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽。
5. defer和async
  - defer并行加载js文件，会按照页面上script标签的顺序执行
  - async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行
6. 请你谈谈Cookie的弊端
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
- 第一：每个特定的域名下最多生成20个cookie
  1.IE6或更低版本最多20个cookie
  2.IE7和之后的版本最后可以有50个cookie。
  3.Firefox最多50个cookie
  4.chrome和Safari没有做硬性限制
- 第二：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
  - cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
  - IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。
- 优点：极高的扩展性和可用性
  1.通过良好的编程，控制保存在cookie中的session对象的大小。
  2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
  3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
  4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
- 缺点：
  1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
  2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
  3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
1. 浏览器本地存储
  - 在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
  - html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
  - sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
  - 而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2. web storage和cookie的区别
  - Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
  - 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
  - 但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生
  - 浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
  - localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
3. cookie 和session 的区别：
  - cookie数据存放在客户的浏览器上，session数据放在服务器上。
  - cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
    
    考虑到安全应当使用session。
  - session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
    
    考虑到减轻服务器性能方面，应当使用COOKIE。
  - 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
  - 所以个人建议：
    
    将登陆信息等重要信息存放为SESSION
    
    其他信息如果需要保留，可以放在COOKIE中
4. 常见兼容性问题？
  - png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
  - 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
  - IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
  - 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
  - box{ float:left; 10px; margin:0 0 0 100px;}
  - 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入
  - _display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
  - 渐进识别的方式，从总体中逐渐排除局部。
  - 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
  - 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
```
.bb{
	background-color:#f1ee18;/*所有识别*/
	.background-color:#00deff\9; /*IE6、7、8识别*/
	+background-color:#a200ff;/*IE6、7识别*/
	_background-color:#1e0bd1;/*IE6识别*/
}
```
  - 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用html5推荐的写法：<doctype html>
数据结构与算法
1. 判断链表是否有环？
- 使用追赶的方法，设定两个指针slow、fast，从头指针开始，每次分别前进1步、2步。如存在环，则两者相遇；如不存在环，fast遇到NULL退出。
1. 输出二叉树的最小深度？
- 判断左子树或右子树是否为空，若左子树为空，则返回右子树的深度，反之返回左子树的深度，如果都不为空，则返回左子树和右子树深度的最小值。
1. 栈和堆的区别？
  - 栈区（stack）— 由编译器自动分配释放，存放函数的参数值，局部变量的值等。
  - 堆区（heap） — 一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。
  - 堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
  - 栈（数据结构）：一种先进后出的数据结构。
安全
1. XSS和CSRF攻击
- xss：比如在一个论坛发帖中发布一段恶意的JavaScript代码就是脚本注入，如果这个代码内容有请求外部服务器，那么就叫做XSS
- 写一个脚本将cookie发送到外部服务器这就是xss攻击但是没有发生csrf
- 防范：对输入内容做格式检查输出的内容进行过滤或者转译
- CSRF：又称XSRF，冒充用户发起请求（在用户不知情的情况下）,完成一些违背用户意愿的请求如恶意发帖，删帖
- 比如在论坛发了一个删帖的api链接用户点击链接后把自己文章给删了这里就是csrf攻击没有发生xss
- 防范：验证码 token 来源检测
1. 常见web安全及防护原理
- sql注入原理：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
  - 总的来说有以下几点：
    1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
    2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
    3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
    4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
- XSS原理及防范
  - Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个
  - 看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，
  - 当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
- XSS防范方法
  - 首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
  - 首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。
  - 其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。
  - 如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
  - 尽量采用POST 而非GET 提交表单
- XSS与CSRF有什么区别吗？
  - XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
  - 要完成一次CSRF攻击，受害者必须依次完成两个步骤：
    
    登录受信任网站A，并在本地生成Cookie。
    
    在不登出A的情况下，访问危险网站B。
- CSRF的防御
  - 服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。
  - 通过验证码的方法
其他语言

java

php

nodejs
相关阅读:
C++中迭代器失效的问题
 怎么转载别人的博客
 Linux下模拟实现shell
Linux下的文件描述符与文件指针及其区别
 智能指针
 C++模板（下）
C++中的模板（上）
僵尸进程和孤儿进程
 Linux下的atexit函数
 多线程练习
原文地址：https://www.cnblogs.com/luoyu113/p/8680696.html

前端面试题总结

前端面试题总结

基本信息

前端基本语言

HTML/HTML5

CSS

JS

ES6

前端框架

模块化

框架问题

jQuery & zepto

AngularJS

React

Vue

bootstrap

框架对比

用过哪些设计模式？

工厂模式：

构造函数模式

浏览器

构建工具

网络&存储

box{ float:left; 10px; margin:0 0 0 100px;}

数据结构与算法

安全

其他语言

java

php

nodejs