征服前端面试（下）

ES6

ES6的了解

es6是一个新的标准，它包含了许多新的语言特性和库，是JS最实质性的一次升级。好比’箭头函数’、’字符串模板’、’generators(生成器)’、’async/await’、’解构赋值’、’class’等等，还有就是引入module模块的概念。

箭头函数可让this指向固定化，这种特性颇有利于封装回调函数
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
（3）不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用Rest参数代替。
（4）不可使用yield命令，所以箭头函数不能用做Generator函数。

async/await是写异步代码的新方式，之前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回调函数。
async/await与Promise同样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在。

说说你对Promise的理解

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。

所谓Promise，简单说就是一个容器，里面保存着某个将来才会结束的事件（一般是一个异步操做）的结果。从语法上说，Promise 是一个对象，从它能够获取异步操做的消息。Promise 提供统一的 API，各类异步操做均可以用一样的方法进行处理。

Promise对象有如下两个特色:

对象的状态不受外界影响，Promise对象表明一个异步操做，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）

一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。

说说你对AMD和Commonjs的理解

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

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

Gulp、Webpack比较

• Gulp

一、Gulp就是为了规范前端开发流程，实现先后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。
二、Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上咱们能够对产品进行管理。
三、Gulp是经过task对整个开发过程进行构建。

• Webpack

一、当下最热门的前端资源模块化管理和打包工具
二、能够很好的管理模块以及各个模块之间的依赖
三、对js、css、图片等资源文件都支持打包
四、有独立的配置文件webpack.config.js
五、能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间
六、能够生成优化且合并后的静态资源

两大特点：一、代码能够自动完成编译。二、loader 能够处理各类类型的静态文件，而且支持串联操做

CSS

display:none和visibility:hidden的区别？

display:none 隐藏对应的元素，在文档布局中再也不给它分配空间，它各边的元素会合拢，就当他历来不存在。

visibility:hidden 隐藏对应的元素，可是在文档布局中仍保留原来的空间。

position:absolute和float属性的异同

A：共同点：
对内联元素设置float和absolute属性，可让元素脱离文档流，而且能够设置其宽高。

B：不一样点：
float仍会占据位置，position会覆盖文档流中的其余元素。

box-sizing属性

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不从新计算元素的盒子尺寸，从而影响整个页面的布局。

border-box：让元素维持IE传统盒模型（IE6如下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

position的值

static 默认值。没有定位，元素出如今正常的流中

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

absolute 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。

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

CSS sprites

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position能够用数字能精确的定位出背景图片的位置。这样能够减小不少图片请求的开销，由于请求耗时比较长；请求虽然能够并发，可是也有限制，通常浏览器都是6个。对于将来而言，就不须要这样作了，由于有了http2。

解释下浮动和它的工做原理？清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在全部浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增长了无心义标签。
2.使用overflow。
设置overflow为hidden或者auto，给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。该方法中必须为须要清除浮动元素的伪对象中设置 height:0，不然该元素会比实际高出若干像素；

 

浮动元素引发的问题

一、父元素的高度没法被撑开，影响与父元素同级的元素
二、与浮动元素同级的非浮动元素（内联元素）会跟随其后
三、若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构

HTML

说说你对语义化的理解

一、去掉或者丢失样式的时候可以让页面呈现出清晰的结构
二、有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；
三、方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
四、便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化。

Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?

一、<!DOCTYPE> 告知浏览器的解析器用什么文档标准解析这个文档。
二、严格模式的排版和 JS 运做模式是以该浏览器支持的最高标准运行。
三、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。
四、<!DOCTYPE> 不存在或格式不正确会致使文档以混杂模式呈现。

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML与XHTML——两者有什么区别

一、全部的标记都必需要有一个相应的结束标记
二、全部标签的元素和属性的名字都必须使用小写
三、全部的XML标记都必须合理嵌套
四、全部的属性必须用引号””括起来
五、把全部<和&特殊符号用编码表示
六、给全部属性赋一个值
七、不要在注释内容中使“–”
八、图片必须有说明文字

html5有哪些新特性

语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
拖拽释放(Drag and drop) API
本地离线存储
表单控件，calendar、date、time、email、url、search

计算机网络

HTTP请求四部分

一、HTTP请求的方法或动做，好比是get仍是post请求；
二、正在请求的URL（请求的地址）；
三、请求头，包含一些客户端环境信息、身份验证信息等；
四、请求体（请求正文），能够包含客户提交的查询字符串信息、表单信息等。

请求头字段：

• Accept:text/html,image/*(告诉服务器，浏览器能够接受文本，网页图片)

• Accept-Charaset:ISO-8859-1 [接受字符编码：iso-8859-1]

• Accept-Encoding:gzip,compress[能够接受 gzip,compress压缩后数据]

• Accept-Language:zh-cn[浏览器支持的语言]

• Host:localhost:8080[浏览器要找的主机]

• If-Modified-Since:Tue, 09 May 2017 01:34:02 GMT[告诉服务器我这缓存中有这个文件,该文件的时间是…]

• User-Agent:Nozilla/4.0(Com…)[告诉服务器个人浏览器内核，客户端环境信]

• Cookie：[身份验证信息]

• Connection:close/Keep-Alive [保持连接，发完数据后，我不关闭连接]

HTTP响应三部分

一、一个数字和文字组成的状态码，用来显示请求是成功仍是失败；
二、响应头，响应头也和请求头同样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等；
三、响应体（响应正文）。

响应头字段：

• Cache-Control:[告诉浏览器如何缓存页面(由于浏览器的兼容性最好设置两个)]

• Connection:close/Keep-Alive [保持连接，发完数据后，我不关闭连接]

• Content-Type:text/html;charset=gb2312[内容格式和编码]

• Last-Modified:Tue,11 Juj,2017 18 18:29:20[告诉浏览器该资源上次更新时间是多少]

• ETag:”540-54f0d59b8b680”

• Expires:Fri, 26 May 2017 13:28:33 GMT [失效日期]

• server:apache tomcat nginx [哪一种服务器]

说说TCP传输的三次握手

第一次握手，客户端给服务器发送数据包（带SYN标志的数据包）。此时服务器确认本身能够接收客户端的包，而客户端不确认服务器是否接收到了本身发的数据包。

第二次握手，服务器端回复（回传一个带有SYN/ACK标志的数据包以示传达确认信息）客户端。此时客户端确认本身发的包被服务器收到，也确认本身能够正常接收服务器包，客户端对这次通讯没有疑问了。服务器也能够确认本身能接收到客户端的包，但不能确认客户端可否接收本身发的包。

第三次握手，客户端回复（发送端再回传一个带ACK标志的数据包，表明“握手”结束）服务器。 客户端已经没有疑问了，服务器也确认刚刚客户端收到了本身的数据包。两边都没有问题，开始通讯。

为何要三次握手：
为了防止已失效的链接请求报文段忽然又传送到了服务端，于是产生错误。也防止了服务器端的一直等待而浪费资源
TCP做为一种可靠传输控制协议，其核心思想：既要保证数据可靠传输，又要提升传输的效率，而用三次偏偏能够知足以上两方面的需求！

四次挥手

一、主机向服务器发送一个断开链接的请求（ 不早了，我该走了 ）,发送一个FIN报文段；
二、服务器接到请求后发送确认收到请求的信号（ 知道了 ）回一个ACK报文段；
三、服务器向主机发送断开通知（ 我也该走了 ）发送FIN报文段，请求关闭链接；
四、主机接到断开通知后断开链接并反馈一个确认信号（ 嗯，好的 ），服务器收到确认信号后也断开链接；

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于链接的协议，也就是说，在正式收发数据前，必须和对方创建可靠的链接。一个TCP链接必需要通过三次“对话”才能创建起来

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非链接的协议，它不与对方创建链接，而是直接就把数据包发送过去！
UDP适用于一次只传送少许数据、对可靠性要求不高的应用环境。

HTTP和HTTPS

一、HTTP协议一般承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了咱们常说的HTTPS
二、默认HTTP的端口号为80，HTTPS的端口号为443

HTTPS 相对于 HTTP 性能上差点，由于多了 SSL/TLS 的几回握手和加密解密的运算处理，可是加密解密的运算处理已经能够经过特有的硬件来加速处理。

什么是Etag？

把Last-Modified和ETag请求的http报头一块儿使用，可利用客户端（例如浏览器）的缓存。ETag用于标识资源的状态，当资源发生变动时，若是其头信息中一个或者多个发生变化，或者消息实体发生变化，那么ETag也随之发生变化。浏览器下载组件的时候，会将它们存储到浏览器缓存中。若是须要再次获取相同的组件，浏览器将检查组件的缓存时间，
假如已通过期，那么浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器能够重用缓存组件。

Expires和Cache-Control

Expires 用来控制缓存的失效日期
Cache-Control 用来控制网页的缓存 常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它容许服务端在客户端须要数据以前就主动地将数据发送到客户端缓存中，从而提升性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，容许多个消息在一个链接上同时交差。
它增长了头压缩（header compression），所以即便很是小的请求，其请求和响应的header都只会占用很小比例的带宽。

一个页面从输入 URL 到页面加载显示完成，这个过程当中都发生了什么？

一、浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求（TCP三次握手）；
二、服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
三、浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
四、载入解析到的资源文件，渲染页面，完成。

浏览器的渲染过程

一、浏览器请求到HTML代码后，在生成DOM的最开始阶段，并行发起css、图片、js的请求，不管他们是否在HEAD里。浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的全部子节点都构建好后才会去构建当前节点的下一个兄弟节点。
二、CSS文件下载完成，开始构建CSSOM
三、全部CSS文件下载完成，CSSOM构建结束后，和 DOM 一块儿生成 Render Tree。
四、有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操做就是计算出每一个节点在屏幕中的位置。
五、最后一步，按照算出来的规则，把内容渲染到屏幕上。

以上五个步骤前3个步骤由于DOM、CSSOM、Render Tree均可能在第一次Painting后又被更新屡次，好比JS修改了DOM或者CSS属性。Layout 和 Painting 也会被重复执行，除了DOM、CSSOM更新的缘由外，图片下载完成后也须要调用Layout 和 Painting来更新网页。

display:none 的节点不会被加入 Render Tree，而 visibility: hidden 则会，因此，若是某个节点最开始是不显示的，设为 display:none 是更优的。

一个完整的URL包括如下几部分

http://www.hzzly.net:8080/news/index.php?boardID=5&ID=24618&page=1#name

一、协议部分
二、域名部分
三、端口部分
四、虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止
五、文件名部分：从域名后的最后一个“/”开始到“？”为止
六、参数部分：从“？”开始到“#”为止之间的部分
七、锚部分：从“#”开始到最后

GET和POST的区别

GET：通常用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，通常在1024字节，Get是经过地址栏来传值。

POST：通常用于修改服务器上的资源，对所发送的信息没有限制。（经常使用于发送表单数据，新建、修改等），Post是经过提交表单来传值。

常见HTTP状态码

1xx（临时响应）表示临时响应并须要请求者继续执行操做的状态码。
2xx（成功）表示成功处理了请求的状态码。
200（成功）：服务器已成功处理了请求。一般，这表示服务器提供了请求的网页。
3xx（重定向）要完成请求，须要进一步操做。
301（永久移动）：请求的网页已永久移动到新位置。
302（临时移动）：服务器目前从不一样位置的网页响应请求，但请求者应继续使用原有位置来响应之后的请求。
304（未修改）：自从上次请求后，请求的网页未修改过。
4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理。
400（错误请求）：服务器不理解请求的语法。
404（未找到）：服务器找不到请求的网页。
5xx（服务器错误）这些状态码表示服务器在处理请求时发生内部错误。
500（服务器内部错误）：服务器遇到错误，没法完成请求。
503（服务不可用）：服务器目前没法使用（因为超载或停机维护）。

说说网络分层里七层模型是哪七层

应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）

传输层（TCP和UDP）

网络层（IP）

物理和数据链路层（以太网）

讲讲304缓存的原理

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端经过将该记号传回服务器要求服务器验证其（客户端）缓存。

304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件

http keep-alive与tcp keep-alive

http keep-alive是为了让tcp活得更久一点，以便在同一个链接上传送多个http，提升socket的效率。而tcp keep-alive是TCP的一种检测TCP链接情况的保鲜机制。

常见web安全及防御原理

• sql注入原理
  就是经过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

• XSS
  指的是攻击者往Web页面里插入恶意html标签或者javascript代码。好比：攻击者在论坛中放一个看似安全的连接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户本来觉得的信任站点。

• CSRF
  CSRF是代替用户完成指定的动做，须要知道其余用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤：一、登陆受信任网站A，并在本地生成Cookie。二、在不登出A的状况下，访问危险网站B。

算法

数组去重

建一个空对象和空数组，循环遍历须要去重的数组，判断对象有没有此属性，没有的话就给对象添加此属性，并向空数组中push这个值。

冒泡排序

相邻两个对比，最后把最大的排到了最后，重复此过程。

 

选择排序

寻找最小的数，保存索引，而后与第一层循环其下标对于的值进行交换

 

快速排序

选取一个记录做为中间轴，而后将比‘这个记录值’小的移到‘记录值’以前，大的移到以后，而后递归

其它

对前端界面工程师这个职位是怎么样理解的

前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
一、实现界面交互
二、提高用户体验

谈谈你对重构的理解

在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的状况下，对网站进行优化，在扩展的同时保持一致的UI。

减小代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
加强用户体验
一般来讲对于速度的优化也包含在重构中

你遇到过比较难的技术问题是？你是如何解决的？

平时是如何学习前端开发的？

平时如何管理你的项目？

先期团队必须肯定好全局样式（globe.css），编码模式(utf-8) 等；

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；

JS 分文件夹存放 命名以该JS功能为准的英文翻译。

图片采用整合的 images.png png8 格式文件使用尽可能整合在一块儿使用方便未来的管理

说说最近最流行的一些东西吧？常去哪些网站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js、React、Vue、WebGL网站：掘金、segmentfault、Github、w3cplus、前端圈、知乎等