一、面试题问：开发的时候有用到过 Math 吗？答：很多啊。比如生成 GUID 的时候，就会用到 Math.random() 来生成随机数。问：别的呢？比如向下取整、向上取整？答：向下取整是 floor()，向上取整是 ceil()。另外还可以用 round() 方法进行四舍五入的取整。问：如果我需要四舍五入并保留两位小数，应该怎么处理呢？答：可以直接用 toFixed() 方法，然后在方法中传入 2，以保留两位小数。问：那数字 1.335 通过 toFixed(2) 计算后，结果是什么呢？答：1.34 啊。问：哦？那 0.1 + 0.2 等于多少呢？答：阿咧？难道不是 0.3 么...问：emmmmmm...答：......问：js 在处理十进制计算的时候，会先转为二进制，计算之后再转回十进制。如果这个数是浮点数，就很容易出现误差。   答：原来如此！问：在了解了这个情况之后，你能写一个精确计算的方法么？ 二、优化 toFixed()由于二进制的原因，如果只是简单的放大缩小倍率，得到的结果都是不完美的比如很多人推荐的：Math.formatFloat = function (f, digit) {var m = Math.pow(10, digit);return Math.round(f * m, 10) / m;}在处理 8716.425 这个数的时候就会出错 经过多次尝试和查阅资料，我强烈推荐 Scott 大神的 toFixed() 方法，原链接：http://www.chengfeilong.com/toFixed可以先手动找到舍入位，如果该位置大于5，则手动进位，并去掉舍入位及其后面的所有字符Number.prototype.toFixed = function(length) {var carry = 0; //存放进位标志var num,multiple; //num为原浮点数放大multiple倍后的数，multiple为10的length次方var str = this + ''; //将调用该方法的数字转为字符串var dot = str.indexOf("."); //找到小数点的位置if(str.substr(dot+length+1,1)>=5) carry=1; //找到要进行舍入的数的位置，手动判断是否大于等于5，满足条件进位标志置为1multiple = Math.pow(10,length); //设置浮点数要扩大的倍数num = Math.floor(this * multiple) + carry; //去掉舍入位后的所有数，然后加上我们的手动进位数var result = num/multiple + ''; //将进位后的整数再缩小为原浮点数/** 处理进位后无小数*/dot = result.indexOf(".");if(dot < 0){result += '.';dot = result.indexOf(".");}/** 处理多次进位*/var len = result.length - (dot+1);if(len < length){for(var i = 0; i < length - len; i++){result += 0;}}return result;}这个方法我暂时没有发现有错误处理的数字。如果有小伙伴发现了，一定留言告诉我在进行浮点数运算的时候，即使计算结果不精确，也可以用这个方法对结果进行四舍五入操作，得到最终结果 三、大数相加在 js 中，对于超大整数的运算，还存在格式问题当数字超出某个范围的时候，数字会自动转为科学计数法这个时候如果还需要输出常规格式，就需要将数字转为字符串，然后实现一个字符串加法function sumNumber(a, b) {var res = '', temp = 0;a = a.split('');b = b.split('');while (a.length || b.length || temp) {temp += ~~a.pop() + ~~b.pop();res = (temp % 10) + res;temp = temp > 9;}return res.replace(/^0+/, '');}来源：https://www.cnblogs.com/kindofblue/p/4672129.html这个方法的入参必须为整型的字符串，然后从个位开始，逐位相加，最后返回字符串 相关：http://0.30000000000000004.com/ 

1、页面布局2、CSS 盒模型3、DOM事件4、HTTP协议（运用占90%）（ws（WebSocket）适用于直播，实时性要求比较强的）5、面向对象6、原型链7、通信（两种，跨域通信，普通的前后端通信）8、安全（CSRF，XSS（需要听一下Web安全XSS））9、算法 

1. input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。 错误层级显示优先级： frameset > 表单元素 > 非表单元素在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；非表单元素包括：链接（a），div,table,span等。所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元 素总是显示在无窗口元素的前面。有窗口元素包括：select元素，object元素，以及frames元素等等。无窗口元素：大部分html元素都是无窗口元素。2.栅格系统的标准用法（使用规则）1) 数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内边距。2) 在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。3) 具体内容应当放置在列容器之内，而且只有列才可以作为行容器(.row)的直接子元素4) 通过设置内边距从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距来抵消内距的影响3. html5标签<audio> 标签定义声音，比如音乐或其他音频流<video> 标签定义视频，比如电影片段或其他视频流。<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。<article> 元素的潜在来源：l 论坛帖子l 报纸文章l 博客条目l 用户评论command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个 元素，但是可以用它规定键盘快捷键。<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。4. CSS3新增属性用法整理box-shadow（阴影效果）border-color（为边框设置多种颜色）border-image（图片边框）text-shadow（文本阴影）text-overflow（文本截断）word-wrap（自动换行）border-radius（圆角边框）opacity（透明度）box-sizing（控制盒模型的组成模式）resize（元素缩放）outline（外边框）background-size（指定背景图片尺寸）background-origin（指定背景图片从哪里开始显示）background-clip（指定背景图片从什么位置开始裁剪）background（为一个元素指定多个背景）hsl（通过色调、饱和度、亮度来指定颜色颜色值）hsla（在hsl的基础上增加透明度设置）rgba（基于rgb设置颜色，a设置透明度）5. 关于http协议简介 HTTP协议（Hyper Text Transfer Protocol，超文本传输协议）,是用于从 万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协 议。HTTP基于TCP/IP通信协议来传递数据。HTTP基于客户端/服务端（C/S）架构模型，通过一个可靠的链接来交换信息， 是一个无状态的请求/响应协议。特点 （1）HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务 器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可 以节省传输时间。（2）HTTP是媒体独立的：只要客户端和服务器知道如何处理的数据内容， 任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的 MIME-type内容类型。（3）HTTP是无状态：无状态是指协议对于事务处理没有记忆能力。缺少状 态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次 连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就 较快。通信流程 消息结构 HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和 建立连接。一旦建立连接后，数据消息就通过类似Internet邮件所使用的格 式[RFC5322]和多用途Internet邮件扩展（MIME）[RFC2045]来传送。客户端请求消息：请求行、请求头部、空行和请求数据。GET /hello.txt HTTP/1.1 User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3 Host: www.example.com Accept-Language: en, mi 服务端响应消息：状态行、消息报头、空行和响应正文。HTTP/1.1 200 OKDate: Mon, 27 Jul 2009 12:28:53 GMTServer: ApacheLast-Modified: Wed, 22 Jul 2009 19:15:56 GMTETag: "34aa387-d-1568eb00"Accept-Ranges: bytesContent-Length: 51Vary: Accept-EncodingContent-Type: text/plain请求方法 GET 请求指定的页面信息，并返回实体主体。HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取 报头POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。 数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资 源的修改。PUT 从客户端向服务器传送的数据取代指定的文档的内容。DELETE 请求服务器删除指定的页面。CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。OPTIONS允许客户端查看服务器的性能。TRACE  回显服务器收到的请求，主要用于测试或诊断。状态码 HTTP状态码分类 1** 信息，服务器收到请求，需要请求者继续执行操作2** 成功，操作被成功接收并处理3** 重定向，需要进一步的操作以完成请求4** 客户端错误，请求包含语法错误或无法完成请求5** 服务器错误，服务器在处理请求的过程中发生了错HTTP状态码列表 100 Continue    继续。客户端应继续其请求101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。 只能切换到更高级的协议，例如，切换到HTTP的新版本协议200 OK  请求成功。一般用于GET与POST请求 201 Created 已创建。成功请求并创建了新的资源202 Accepted    已接受。已经接受请求，但未处理完成203 Non-Authoritative Information   非授权信息。请求成功。但返回 的meta信息不在原始的服务器，而是一个副本204 No Content  无内容。服务器成功处理，但未返回内容。在未更新网 页的情况下，可确保浏览器继续显示当前文档205 Reset Content   重置内容。服务器处理成功，用户终端（例如：浏 览器）应重置文档视图。可通过此返回码清除浏览器的表单域206 Partial Content 部分内容。服务器成功处理了部分GET请求300 Multiple Choices    多种选择。请求的资源可包括多个位置，相应 可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择301 Moved Permanently   永久移动。请求的资源已被永久的移动到新URI， 返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求 都应使用新的URI代替 302 Found   临时移动。与301类似。但资源只是临时被移动。客户端应 继续使用原有URI303 See Other   查看其它地址。与301类似。使用GET和POST请求查看304 Not Modified    未修改。所请求的资源未修改，服务器返回此状态 码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个 头信息指出客户端希望只返回在指定日期之后修改的资源 305 Use Proxy   使用代理。所请求的资源必须通过代理访问306 Unused  已经被废弃的HTTP状态码307 Temporary Redirect  临时重定向。与302类似。使用GET请求重定 向 400 Bad Request 客户端请求的语法错误，服务器无法理解401 Unauthorized    请求要求用户的身份认证402 Payment Required    保留，将来使用403 Forbidden   服务器理解请求客户端的请求，但是拒绝执行此请求404 Not Found   服务器无法根据客户端的请求找到资源（网页）。通过 此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面 405 Method Not Allowed  客户端请求中的方法被禁止406 Not Acceptable  服务器无法根据客户端请求的内容特性完成请求407 Proxy Authentication Required   请求要求代理的身份认证，与401 类似，但请求者应当使用代理进行授权408 Request Time-out    服务器等待客户端发送的请求时间过长，超时409 Conflict    服务器完成客户端的PUT请求是可能返回此代码，服务 器处理请求时发生了冲突410 Gone    客户端请求的资源已经不存在。410不同于404，如果资源 以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指 定资源的新位置411 Length Required 服务器无法处理客户端发送的不带Content-Length 的请求信息412 Precondition Failed 客户端请求信息的先决条件错误413 Request Entity Too Large    由于请求的实体过大，服务器无法处 理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如 果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息414 Request-URI Too Large   请求的URI过长（URI通常为网址），服务 器无法处理415 Unsupported Media Type  服务器无法处理请求附带的媒体格式416 Requested range not satisfiable 客户端请求的范围无效417 Expectation Failed  服务器无法满足Expect的请求头信息500 Internal Server Error   服务器内部错误，无法完成请求 501 Not Implemented 服务器不支持请求的功能，无法完成请求502 Bad Gateway 充当网关或代理的服务器，从远端服务器接收到了一个无 效的请求503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客 户端的请求。延时的长度可包含在服务器的Retry-After头信息中504 Gateway Time-out    充当网关或代理的服务器，未及时从远端服务 器获取请求505 HTTP Version not supported  服务器不支持请求的HTTP协议的版本， 无法完成处理6.关于盒子模型 盒模型从里向外由content,padding,border,margin组成。盒模型是有两种标准的，一个是标准盒模型，一个是IE盒模型。标准模型的宽高是内容（content）的宽高，IE模型的宽高是内容（content）+内边距（padding）+边框（border）的总宽高。7. Bootstrap情景文

1、什么是盒子模型？CSS 盒模型(Box Model)，又称框模型。它包括：content、padding、border、margin，所有HTML元素都可以看作盒子。注: 当通过CSS指定一个元素的宽度和高度属性时，只是设置了实际内容区域的宽度和高度。一旦为页面设置了恰当的 DTD，浏览器会使用标准盒模型（标准模式），而DTD缺失则在ie6，ie7，ie8下将会使用IE盒模型（怪异模式）。标准盒模型 元素总宽度 = width + （padding + border + margin）* 2IE盒模型   元素总宽度 = width + margin * 2 2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、textarea块级元素：div、form、ul、li、dl、dt、dd、p、h1-h6、blockquote空元素：即系没有内容的HTML元素，例如： meta、link 、br、hr、input、img 3、CSS实现垂直水平居中方法一：给元素设置一个显示宽度，并设置左右margin为auto方法二：父元素设置相对定位position: relative;子元素设置绝对定位，并设置top、left、margin-top、margin-left等属性       position:absolute;       top:50%;       left:50%       margin-top:-（高度 / 2）       margin-left:-（宽度 / 2）方法三：父元素设置相对定位position: relative;子元素设置绝对定位，并设置top、left、margin-top、margin-left等属性       position:absolute;       top:50%;       left:50%       transform:translate(-50%, -50%);      // translate的参数会以自身的长宽做参考方法四：内联元素水平居中利用 text-align:center; 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。 4、简述一下src与href的区别href (Hypertext Reference) 超文本引用，用在link和a等元素上，指向网络资源所在位置，建立与当前元素或当前文档之间的超链接。src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。  补充：link和@import的区别两者都是外部引用CSS的方式，但是存在一定的区别。区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。 5、什么是CSS Hack?一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：    // 1、条件Hack   <!--[if IE]>      <style>            .test{color:red;}      </style>   <![endif]-->   // 2、属性Hack    .test{    color:#0909; /* For IE8+ */    *color:#f00;  /* For IE7 and earlier */    _color:#ff0;  /* For IE6 and earlier */    }   // 3、选择符Hack    * html .test{color:#090;}       /* For IE6 and earlier */    * + html .test{color:#ff0;}     /* For IE7 */6、简述同步和异步的区别同步是阻塞模式，异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。7、px和em的区别px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em8、什么叫优雅降级和渐进增强？渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带 9、浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari：webkit内核Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发) 10、怎样添加、移除、移动、复制、创建和查找节点？1）创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点2）添加、移除、替换、插入parentnode.appendChild(newnode) //添加parentnode.removeChild(oldnode) //移除parentnode.replaceChild(newnode, oldnode) //替换parentnode.insertBefore(newnode, oldnode) //插入3）查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的Name属性的值getElementById() //通过元素Id，唯一性 11、如何消除一个数组里面重复的元素？方法一：var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];    for (var i = 0, len = arr1.length; i < len; i++ ) {       if (arr2.indexOf(arr1[i]) < 0) {           arr2.push(arr1[i]);       }}console.log(arr2);     var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];   arr1.forEach(function (item, index) {       if (arr2.indexOf(item) < 0) {           arr2.push(item);       }})console.log(arr2);方法二：var arr1 =[1,2,2,2,3,3,3,4,5,6], arr2 = [];   arr1.sort(function (a, b) {       return a - b;   })    for (var i = 0, len = arr1.length; i < len; i++) {       if (arr1[i] != arr1[i + 1]) {           arr2.push(arr1[i]);       }   }   console.log(arr2); 12、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。typeof能返回六种数据类型，undefined、number、string、boolean、object、function    function clone(obj) {       var o;       switch(typeof obj) {           case "undefined":                break;           case "string":                o = obj;                break;           case "number":                o = obj;                break;           case "boolean":                o = obj;                break;           case "object":                if (obj === null) {                    o = null;                } else if(obj.constructor === Array) {                    o = [];                    obj.forEach(function (item, index) {                        o[index] = clone(item);                    })                } else {                    o = {};                    for (var key in obj) {                        o[key] =clone(obj[key]);                    }                }                break;           default:                o = obj;                break;       }       return o;   } 13、javascript中的call、apply、bind参考：https://www.cnblogs.com/coco1s/p/4833199.htmlapply 、 call 、bind 三者都是用来改变函数的this对象的指向；apply 、 call 、bi

很多同学想学习WEB前端开发，虽然互联网有很多的教程、网站、书籍，可是却又不知从何开始如何选取。看完网友高等游民白乌鸦无私分享的原标题为《写给同事的前端学习路线》这篇文章，相信你会有所收获。前端开发入门学习有：HTML、CSS、JavaScript（简称JS）这三个部分。所以在学习之前我们需要先明确三个概念： HTML——内容层，它的作用是表示一个HTML标签在页面里是个什么角色。 CSS——样式层，它的作用是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。 JS——行为层，它的作用是当用户触发某些行为时，会给内容和样式带来什么样的改变。一、HTML，CSS部分HTML/CSS初学，就照着http://www.w3cschool.cn/的实验做，把http://www.w3cschool.cn/index-6.html和http://www.w3cschool.cn/index-7.html两套做完了就入门了， 入门之后，学习CSS的精华，即布局，推荐李炎恢的教学视频，布局这一章：http://edu.51cto.com/lesson/id-14895.html第27章，如果觉得不够，需要实战，则再学习接下来的28，29章。注意，这时候一定要老师讲一块代码，自己就要照着实现一次，切勿只看不做。 CSS还有一个精华部分就是命名规范，找几个著名网站（比如豆瓣、网易新闻）这类，研究它们的命名规范，我这里，有一个现成的命名规范可供学习（需要登录evernote查看）：https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg?resizeSmall&width=832 学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候如果想继续深入学习相关类库和框架，推荐Sass和Compass，推荐两篇阮一峰的博客：http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://www.ruanyifeng.com/blog/2012/11/compass.html  和这本书：《Sass and Compass in Action》http://book.douban.com/subject/6732187/   二、JavaScript部分初学者推荐看视频：http://edu.51cto.com/course/course_id-166-page-1.html，特别注意JavaScript的OOP写法（重点，可多看几遍），以及闭包、原型链，异步编程部分（次重点），前者写项目都在用，后者涉及JS这个语言本质特点。 然后需要学习JS和HTML/CSS在浏览器下的调试方法，推荐用Google Chrome下的chrome developer tools调试，可以看这个视频学习：http://happycasts.net/episodes/40看完视频并经过实践后，可以看《Javascript good parts》（http://book.douban.com/subject/2994925/）这本书，不必细看，看它的思想即可。用于巩固，提升JS方面的编程思想。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）三、web前端学习路线思维导图web前端学习路线思维导图图太大不好展示，看不清楚可以进入以下链接查看——web前端学习路线思维导图在线版：https://www.processon.com/view/link/57d28d0ee4b0942d7a89c9dd

记一次网易前端实习面试很幸运地能收到网易的面试通知，就毫不犹豫翘了课去面试了hhhh~三点的面试，因为从来没去过那个中关村西北旺区，吃完饭早早就去了,想象中那里应该是繁华的地方hhhh，到了发现都在建设中，很多还在建设中，看到了网易旁边的百度和搜狐，都是长长的大楼或者是高高的建筑，满满大企业的既视感~一进网易楼就没网= =，在里面也没事干，就呆在外面看看前端的东西准备下，到2点40的时候跟前台说了下，一个网易年轻姐姐就带我上去了~步入正题-笔试 本来我以为只有面试的，发现那个姐姐并不是带我去面试的，带我去了个房间，留了两张题目给我，说半小时来说，毫无防备hhh接下来步入正题吧~1.alert(1&&2),alert(1||0) 具体我不记得了反正就这两个，我以为考的是纯粹的与运算和或运算，后来发现太天真了1 alert(1&&2)的结果是22 只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;3 只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;45 alert(0||1)的结果是16 只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。7 只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。2.mouseenter和mouseover的区别 这个之前看了下，大概是答出来了，但可能不够详细吧1 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout2 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave3.用正则表达式匹配字符串，以字母开头，后面是数字、字符串或者下划线，长度为9-20 看到这题我是崩溃的，因为正则学的不多，但是稍微写了下也差不多只是忘了些1 var re=new RegExp("^[a-zA-Z][a-zA-Z0-9_]{9,20}$");4.js字符串两边截取空白的trim的原型方法的实现1 //我的笨方法，当时还想错了一些，回来后实现了一下，思路是这样2 String.prototype.trim = function () {3 var arr=this.split("");4 while(1) {5 if(arr[0]==" ") {6 arr.shift();7 continue;8 }9 break;10 }11 while(1){12 if(arr[arr.length-1]==" ") {13 arr.pop();14 continue;15 }16 break;17 }18 return arr.join("");19 }20 //后来面试官跟我说一句话就解决了，然而我正则都忘了，平时没怎么用21 String.prototype.trim = function () {22 return this.replace(/(^s*)|(s*$)/g,'');23 };5.三道判断输出的题都是经典的题1 //5.12 var a=4;3 function b() {4 a=3;5 console.log(a);6 function a(){};7 }8 b();9 //明显输出是3，因为里面修改了a这个全局变量，那个function a(){}是用来干扰的，虽然函数声明会提升，就被a给覆盖掉了，这是我的理解10 //5.212 //不记得具体的就类似如下13 var baz=3;14 var bazz={15 baz: 2,16 getbaz: function() {17 return this.baz18 }19 }20 console.log(bazz.getbaz())21 var g=bazz.getbaz;22 console.log(g()) ;23 //第一个输出是2，第二个输出是3，这题考察的就是this的指向，函数作为对象本身属性调用的时候this指向对象，作为普通函数调用的时候就指向全局了24 //5.3var arr=[1,2,3,4,5];25 for(var i=0;i<arr.length;i++)26 {27 arr[i]=function(){28 alert(i)29 }30 }31 arr[3]();32 //典型的闭包啊，看都不用看，肯定弹出5啊6.写出position不同值和区别 突然想到还有inherit，当时忘记了，后来面试的时候又重新问了我一下absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(不占位)relative: 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。（占位）static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）inherit：规定应该从父元素继承 position 属性的值。fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 7.写一个div+css布局，左边图片右边文字，文字环绕图片，外面容器固定宽度，文字不固定（这是后来根据面试官描述的，笔试题上只有图我就不放上来了) 这道题我没答好，刚开始我不清楚那个文字是要自适应的面试官说用p标签包裹文字，我当时就紧张了下，把p标签错当成内联了，然后我再修正，然后加左浮动,然后不行，我就跟面试官说，我以前都直接就一个img它float：left，加文字不加p标签就好了然后我回来试一试才发现= =，直接加p标签就可以了啊= =，omg我的错误！！！8.讲述你对reflow和repaint的理解 这个真不会了没接触，第一个我猜是重新布局，第二个倒是见过就是重绘，就想到document.write(),这个后来也没再问我了查查查repaint就是重绘，reflow就是回流。repaint主要是针对某一个DOM元素进行的重绘，reflow则是回流，针对整个页面的重排 严重性： 在性能优先的前提下，性能消耗 reflow大于repaint。体现： repaint是某个DOM元素进行重绘；reflow是整个页面进行重排，也就是页面所有DOM元素渲染。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）如何触发： style变动造成repaint和reflow。不涉及任何DOM元素的排版问题的变动为repaint，例如元素的color/text-align/text-decoration等等属性的变动。除上面所提到的DOM元素style的修改基本为reflow。例如元素的任何涉及长、宽、行高、边框、display等style的修改。常见触发场景： 触发repaint：1 color的修改，如color=#ddd；2 text-align的修改，如text-align=center；3 a:hover也会造成重绘。4 :hover引起的颜色等不导致页面回流的style变动。触发reflow：1 width/height/border/margin/padding的修改，如width=778px；2 动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；3 appendChild等DOM元素操作；4 font类style的修改；5 background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；6 scroll页面，这个不可避免；7 resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。8 读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；如何避免： 尽可能在DOM末梢通过改变class来修改元素的style属性：尽可能的减少受影响的DOM元素。避免设置多项内联样式：使用常用的class的方式进行设置样式，以避免设置样式时访问DOM的低效率。设置动画元素position属性为fixed或者absolute：由于当前元素从DOM流中独立出来，因此受影响的只有当前元素，元素repaint。牺牲平滑度满足性能：动画精度太强，会造成更多次的repaint/reflow，牺牲精度，能满足性能的损耗，获取性能和平滑度的平衡。避免使用table进行布局：table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算，造成大幅度的repaint或者reflow。改用div则可以进行针对性的repaint和避免不必要的reflow。避免在CSS中使用运算式：学习CSS的时候就知道，这个应该避免，不应该加深到这一层再去了解，因为这个的后果确实非常严重，一旦存在动画性的repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。面试部分 半小时写完笔试后，等待面试，hh中途遇到了北邮的师兄聊了一些nodejs的东西步入正题面试什么时候开始学前端如何学前端看过谁的博客开始看我的简历问了，问项目，问webpack/gulp区别，问项目如何实现什么的，再问了笔试题（上面讲过了）等等等都问的项目 基本也就这些，面试官人挺好的，感觉没什么压力~最后也让我过了吧，就后面暑假放假再去联系~说我还得多去看看基础的东西~确实基础还不够扎实哈，不过总的来说，这人生第一次面试还挺顺利的说，也是运气好吧~希望学校早放假能去实习一番~

由于前端开发的火热和一些IT巨头公司 对 web前端开发人员的需求旺盛，让越来越多的人转入前端。前端开发领域 是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域，今天就来聊聊前端到底该怎么学~话不多说，让我们直接进入今天的主题。web前端到底怎么学？那么在讲 Web前端怎么学这个大命题之前呢，依据我本人的尿性，还是得先把你拉入坑，让你在坑里好好学~ 想说爱你不容易！但是我会想方设法让你爱上她（Web前端开发）。 一般据我经验，在喜欢并且决定和她恋爱之前，我都会做一下充分准备和调查，有必要了解和研究清楚 ‘她’ 的几个特性和习惯。web前端的基本工作职责 和基础技能（要清楚）web前端的分类和门派（简要概述，武林 实在是太大啦）。前端开发 必看的书籍资料（干货重点）。如果你已经了解清楚以上前2点并思路清晰，那就跳到后面的 “前端开发 : 必看的书籍资料 ” 。web前端的基本工作职责“ 入一行，要先知一行 ”；我们来看看Web前端开发职位 无论什么门派都要做到的一些基本工作职责。首先，你必须是一个合格的“页面仔”，这个叫法不好听，但很生动。 我们都知道，所有呈现的内容都是基于HTML 网页的。如果你的HTML、CSS（包括现在的HTML5+CSS3）基础不会，或者不够扎实，都很难在有大的进步，或者你的JS 很好，但布局基础不行，还是不能算合格的web前端。其次，前端主要负责实现视觉和交互功能，以及与后端服务器通信，完成业务逻辑。现在前端的核心价值在于对用户体验的极致追求。 那么我们靠什么来提升用户体验和人性化操作，让用户觉得体验牛x、舒服呢？（当然细分厉害的公司，会有专门的 用户体验攻城狮） 当然是我们自始自终的主角 JavaScript了，毕竟它最初就是为浏览器而生的脚本语言。然而，JS这门语言并不是一种强类型语言，更像是一种解释型语言，所以很多属性，在不同的浏览器环境解释有很大不同导致，效果和性能千差万别，而且很多属性之长，之多，之巨都很有工作量。之后，就出现了jQuery 这种的框架神器，由于其好用，简单，效果多样，兼容完美，高效率等特性，迅速席卷全世界，所以如果想入门，jQuery 这个东西你是逃不掉的，而且利用它简单的语法，你会很快将一些效果实现出来，迅速提升兴趣。再后，既然涉及到视觉 和用户体验，那么UI 设计知识，你肯定要涉及或者懂一些设计方面的技能和基本素养，比如PS的一些基本操作，切图，和颜色值（比如会改个字，隐藏个图层，改个尺寸，变个颜色什么滴），屏幕适配方案等，讲道理说：平时并不需要我们做，但技能包里绝对要有。最后，服务器知识+后端语言基础，这个职责和话题就比较hight了，到后面我们会一一解释。总之，web前端同样是程序员，由于前端是位于后端程序和界面设计师之间的岗位，相当于中间桥梁，要完成三者的对接，涉及到广泛 的知识，规模大到工程级，也就有了前端工程师的说法（某人总结，很是到位）。Web前端工程师，是一个要精通本职HTML、CSS、JavaScript，也要了解后端编程，了解界面设计，了解软件工程的综合人才。 看到这一大篇的职责和技能，你也别害怕，因为这些就像小孩子，会走路，会说话。只要你有兴趣，只要有人领路，有教程自然而然就能掌握的技能，至于一些设计素养，反正你不是UI，有最好，没有又有什么所谓呢？web前端的分类和门派根据Web前端的细分工种 和 业务不同，我无耻的把她比拟出来几个门派，供大家参考，也让无比庞大的前端划分变得有趣一些，不然下面我放一张图， 你看了会晕菜。 这里我先简单说几种，我们常常熟知的几个门派，比如： 少林派：七十二般武艺样样精通 - Web网站开发武当派：以柔克刚 - 移动APP开发峨嵋派：倾国倾城 - canvas 数据可视化华山派：剑法精湛 -  nodejs开发逍遥派：潇洒飘逸 -  HTML5游戏让你晕菜的技能树 ，客观您感受一下先~Web前端知识体系实在是太庞大，先不感慨了，我们赶紧去看干货！前端开发 : 必看的书籍资料HTML + CSS这部分建议在在线教程上学习，边学边练，每个属性后还有在线测试。 然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练、多练、多练 ，最重要的事儿 还得我说三遍？ JavaScript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先通过在线教程学习一些基本语法和定义。然后你必须要看书，然后实践（好多人问 有没有快速捷径，我只能告诉你：如果有捷径，码农们就不用天天如此苦逼了吧）。记住：忍得住寂寞枯燥，才能拿得到高薪！对于习惯看视频学习的同学，以上内容也可以在在线学习网站上去搜，现在大部分基础课程讲解都还不错。跟着敲一起学，确实可以避免看书查资料的枯燥。 以下内容都是结合我自己的学习路线与经验，再整理汇总了网络各路大神的资料，希望能帮助源源不断入坑的新人更好的学习。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）前端书籍必读、必买★ 越多，推荐等级越高，和难度无关。最好按照我给的顺序入门，这样不会让你枯燥，想放弃，如果先推荐经典的厚的，满篇定义，我估计是害你们放弃。 1 . JavaScript先说 JavaScript，因为前面说了，CSS 最好跟着视频练习，毕竟都是可视化的，像做艺术。《JavaScript DOM编程艺术》★★★★★ 最好的JS入门书籍，最让人有兴趣读完的那种书。 它通过一个 幻灯片 案例，从头到尾教你实现出来，最后效果实现的同时，基本的JS常用属性，你也就滚瓜烂熟了，很有成就感。（个人很偏向这种风格书籍，此书让我彻底爱上前端js） 一目了然地告诉你如何用JS操作DOM（这是浏览器端编程的基本功），还灌输了最符合标准的编程理念。可惜有点老，最新一版是2010年的。不过不影响阅读和实现，全部按照最新ES5属性就行了。《JavaScript高级程序设计》★★★★ 又称红宝书，雅虎首席前端架构师，YUI的作者Zakas出品。虽然书名带了“高级”二字，但是讲得都很基础的属性内容，事无巨细。关键一点是翻译的也很到位，并不是如嚼蜡一般，这很重要。看此书，我建议配着下面的犀牛书一起 看效果更佳。《JavaScript权威指南》★★★★★ 著名的淘宝前端团队翻译的，看译者列表都是一堆前期大神。 这本书又叫犀牛书，被国人誉为：JavaScript开发者的圣经。网上对此书评价很多很好，大概意思是说这本书是一本JavaScript文档手册，更适合当作字典和备忘录查询来使用。 我也是对这本书有很厚的感情和依赖（忘了属性就拿来翻翻，总有收获），个人感觉这本书还是写得枯燥了些，毕竟是工具性质，不适合当作第一本入门来看，不过内容绝对是五颗星，无可挑剔！神书《JavaScript语言精粹》★★★★★ 作者是大名鼎鼎的 【老道】，我的JS 偶像，我github第一个关注的就是这个大胡子叔叔。他是 JSON格式的发明和维护者，也有很多著作和对JS 这门语言的超多贡献，可见此人功力绝对顶级！ 这本书，属于稍微入门以后看的，了解了一些中高级概念 比如：闭包、原型链、作用域链、继承封装等以后，看此书有如神助，看一页相当于犀牛书几十页的讲解（不吹牛逼，当时我是这感觉的）2 . CSSCSS类， 如果视频看完了，练习的熟练了，你还需要一些书的推荐和查询，也是有必要的，我再来给你罗列几本经典的收藏书，买不买均可的。。《Head first HTML&CSS》★★★ 好的入门书。看两遍就对HTML & CSS 有个大概印象了。 此时把w3cschool作为备查手册收藏起来，结合此书，事半功倍，成就感爆棚。《CSS权威指南(第三版)》★★★★ 最权威的CSS书籍，除了阅读W3C的文档外的不二选择（就是翻译太操蛋，可能有的词你以为是火星语，不过不影响阅读）。有时间可以反复看，有css3内容，并当做字典随时查。类似犀牛书。《图解CSS3：核心技术与案例实践》★★★ 这本书讲解的是最新的CSS3（前几本书停留在CSS2.1时代，2.1是基础），CSS3也是必学的，不然真的跟不上时代了。《CSS禅意花园》★★★★ 这本书很值得期待，我看过PDF版本的，那时候还没翻译出来，翻译的也一般，不过作者是巨牛逼的，听说对css理解的就像自己的左右手，光靠写CSS 他年薪就轻松百万了。。汗颜！思路清晰，图文并茂，还解决一些疑难杂症和高级技巧，类似于JS的语言精粹了，大神级别。 好了，差不多就推荐到这里，CSS这基本是基于情怀，罗列一下，买不买都没必要，想当年我学CSS 是靠着几个仅有的视频，一个属性一个属性的练习，还有IE6 各种兼容问题，虐到爆，那酸爽（现在你们是幸运的，基本不用兼容IE6 这个老东西了）。 真正起到决定作用的，还是JS语言的掌握和实践，JS能力越强 基础越稳固，你的前端能力就会越好， 自然薪资越高，所以现实点说大家，大家一起努力吧，让money 都到碗里来! 有些童鞋认为：从来不需要买纸质书，我全程PDF就行了嘛，不过我建议有些书还是要纸质的，这样有感觉，也可以做笔记，甚至随时当工具书字典来查询，由于前端的特殊性和js语言的属性之繁多庞杂，我建议你还是要买纸质的书，帮助很大。其他 再为大家奉上我手里整理出来的一些资料~★越多，难度越高。 CSS CSS权威指南 （第3版）★★精通CSS ★★★HTML & CSS设计与构建网站 ★ JavaScript JavaScript & jQuery交互式Web前端开发 ★JavaScript DOM编程艺术 （第2版）★JavaScript高级程序设计（第3版）★★锋利的jQuery ★★高性能JavaScript ★★★JavaScript语言精粹 ★★★JavaScript权威指南 ★★★编写可维护的JavaScript ★★★JAVASCRIPT语言精髓与编程实践 ★★★Effective Javascript ★★★Secrets of the JavaScript Ninja ★★★JavaScript模式 ★★★JavaScript设计模式 ★★★★基于MVC的JavaScript Web富应用开发 ★★★这个文章花费了我不少时间整理收集，然而还是不到冰山一角，至少入门够用了，所以请看到的同学，尽心收藏并帮助传播，可以帮到更多的新人和疑惑中的转型的从业者，我将会非常高兴和欣慰，也将有更大的动力和精神来继续更新和贡献微薄之力。后记有人问我：又没人给你钱，你何必这么辛苦，还得工作，还得写文章。然而我说我不在乎钱那是不可能的，我还告诉你们，这真的是我的兴趣和责任，因为我经历了前端洪荒的年代和苦楚，所以我很愿意分享和帮助新来者，少走弯路和浪费时间。 到最后：兴趣都会变成钱！坚持下来就好。也希望大家支持！ 能在江湖混迹多年的，肯定不是靠工具和潮流，绝对是靠的不断提升的内功。 希望大家明白，趁年轻 一定要忍住枯燥，打好基础!

前言晚上逛论坛看到一篇对从事HTML5前端开发的文章写的非常不错,和目前的市场形势差不多,然后我在其基础上给大家进行加工总结一下分享给大家.今天我们谈论的话题是<<为什么从事HTML5前端开发越来越火,工资高,并且还涨的快>>,针对这个问题进行分析分析.  俗话说的好:”没有调查,就没有发言权”,同样在市场浪潮中,同样如果没有实际调查,不要轻易发表言论,误导他人.  现在主要从下面几个方面给大家进行总结和分析呢? 目录HTML5前端开发的薪资市场的供求关系HTML5语言优势HTML5前端开发的薪资首先我们来看看2016年上半年前端端开发的薪资情况(参考了拉勾网,智联招聘,51job,前程无忧,Boss直聘上的数据)。 1.我们来看看北京的薪资情况 说明：北京前端开发平均工资：¥10576元/月2.我们来看看广州的薪资情况 说明：广州前端开发平均工资：¥8124元/月3.我们来看看上海的薪资情况 说明：上海前端开发平均工资：¥9270元/月4.我们来看看深圳的薪资情况 说明：深圳前端开发平均工资：¥11464元/月因此综上的统计供大家参考.在技术类里，HTML5技术能力的值钱程度很突出，名列前茅。这正代表了前端技术的当前行情。现在HTML5 有过1-2年工作经验的,跳槽工资的涨幅只高不低。 那么问题来了,导致这一现象的原因是什么呢?看下面分析。 （web前端学习交流群：328058344 禁止闲聊，非喜勿进！）市场的供求关系薪资不但高，还增长快，凭什么？我认为起决定因素还是市场的供求关系,大家都知道技术非常重要,但是在市场供给关系上就显得次要了,这就上人们常讲的水涨船高.现在是互联网公司的春天，很多公司如雨后春笋般发展，对H5前端开发的需求很旺盛，都是处在供小于求的情况。H5前端各种需求迭代非常频繁、工作强度大,而且直面用户很重要，这是H5前端人才需求旺盛的基础前提. 而最近国家政策倡导互联网+,大力发展互联网行业,在这样的大环境下公司都发展很快,公司发展快的结果之一就是产品迭代特别快 。H5前端开发流程是越快越好。再加上现在混合app的流行，网站页面更新速度快，也为前端代码频繁更新提供了另一个“客观条件”。人的天性更倾向于纠结那些眼下看得见的东西，所以H5前端开发者还承担了外自客户，内自产品经理、设计师甚至市场部门施加的压力。而这种压力传递到服务端很可能就是一条sql语句，一张表的事情。如果能力较强的前端工程师可能还承担了代码压缩管理等其它附加任务。 前端的代码都是直面用户的，用户即是公司的上帝，重要程度不言自明，要求很高、不容闪失。团队再精简也不能精简了前端开发力量。 需要H5前端人才的单位太多、而且呈现越来越多的势头 现在公司个个都要做网站或 App，都需一堆H5前端。前端人才的价格围绕价值上下波动，波动范围取决于供需失衡情况。1、创业团队太多，且有钱 2010~13年，创业团队对市场的影响是有限的。原因：1、穷;2、团队少。现在的情况是：A、薪水合理当年创新工场招人多是降薪，Android开发，一般给8K、10K，能给20K的是大拿。而现在，很多创业团队都可以按照市场价格招人，比如说BAT过来的，一般可以涨个10~30%，然后+期权。对于候选人呢?没有太多风险。某创业团队CTO这样讲，“他们为什么不来我这?薪水涨了，还有股票。公司烧两年没问题，就算公司最后失败了，他们跳槽找下一家好了。他在我这技术又不会落后”。B、团队太多、招聘总量太大每个月20家拿了1kw美元以上的投资，如果整个市场维持这个速度(风投13年在美国软件业投了110亿刀，14年Q2投了61亿刀)一年就是240家团队。每家一年只新增2、30个开发，就是5、6k人/年，且大半的创业团队都在北京。实际很多创业团队，招聘计划都超过了2、30人/年。还有个问题：大部分团队的钱，烧一两年没问题，这意味着，两年内，创业团队都不会大量释放出库存员工，只会屯人。2、重复建设这两年新兴的重复建设带来了很多需求：BAT移动端的血拼百度现在上线的有60款移动端产品?or 50款?这背后从市场卷走了多少个Android、iOS 开发?市场一共才多少优质Android、IOS供给。。。。阿里的all in到移动端是大家都知道的。腾讯北京的移动团队在不断地整合，我们就不说了。感谢腾讯依靠自己的培养梯队，把很多Java、C培养成了众多Android、IOS人才，而不是光靠挖。BAT这4年的移动端血拼，奠定了现在移动端的薪水基线。移动开发及H5前端开发人才的市场整体新增供给还是太少 以全国移动互联网人才最集中的北京市场为例：H5前端库存严重不足，也没有这么多新增供给。HTML5语言优势H5前端开发其实一点都不简单了，要成为一个优秀的前端工程师并不那么容易.学的知识点非常的多,那么HTML5有哪些优势呢?跨平台 在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5 能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实 DOS 的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。快速迭代 移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。减低成本 创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。导流入口多 HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。分发效率高 前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。HTML5 对用户的好处是：和流量入口多、分发效率高相对应的。大幅降低使用门槛。用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠覆。不管是App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。这就是所谓“天下武功，唯快不败”。分析至此，我们可以明显的看出，不管是站在最终用户角度、还是站在开发者角度，HTML5必将取代原生应用当前的位置。并由此引发一系列颠覆。总结我个人认为前端开发不仅有前途，更有钱途。前端开发入门容易，但随着学习的深入，后面每前进一步都要付出很大的努力.  总体上来说，H5前端要掌握的技能、知识点很多，而且还很零散。越学习越发现，要成长为一个优秀的前端开发人员确实比较难。  记住，快速掌握主流技术，才会成为这波前端稀缺的最终赢家。

一般阿里社招都是招3-5年的P6+高级工程师，当初自己一年经验也没有想过有这个面试机会。虽然没想着换工作，但是经常关注一些招聘网站的信息，某一天，在某boss上有个人找我，叫我发一下简历，我一看是阿里的某技术专家，虽然之前也有阿里的在某boss上给我要简历，但是我深知自己经验不足，然后给boss说我是16届的，只有一年经验，然后就没有然后了。这次我依然这么回复，但是这boss说，没关系，他喜欢基础好的，让我可以试一试，于是我也抱着试一试的心态发了简历。简历发过去之后，boss就给我打了电话，让我简单的介绍一下自己，我就噼里啪啦说了一些，还说了一些题外话。然后boss就开始问我问题。由于面了四轮，所以最开始的面试记忆有点模糊了，细细回想，又感觉记忆犹新。电话初探说一下你了解CSS盒模型。 我就说了一下IE的怪异盒模型和标注浏览器的盒模型，然后可以通过box-sizing属性控制两种盒模型的变换。说一下box-sizing的应用场景。 这个也不难，简单说了一两个应用场景，具体就不一一细说了。说一下你了解的弹性FLEX布局. 这个我也比较了解，各种概念和属性能想到的说了一大堆，也扯到了Grid布局，基本这个也没啥问题。说一下一个未知宽高元素怎么上下左右垂直居中。 说了一下flex弹性布局的实现，说了一下兼容性，扯到了postcss的一些东西，然后说了一下常规的兼容性比较好的实现。说一下原型链，对象，构造函数之间的一些联系。 这个我之前写过相关的文章，自己也有比较深入的理解，所以这个也不在话下，噼里啪啦说了一大堆，也不知道面试官听得咋样。DOM事件的绑定的几种方式 说了三种，然后说了一些冒泡，默认事件，以及DOM2，DOM3级的一些标准。说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。 这个因人而异，开放性问题，主要考察平时项目的一些积累吧，这个我回答感觉也比较ok。有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。 这个我看过一些文章，但是没有什么印象，扯了一些概念，但是回答的不是很深。第一轮电话初探，大约面了50分钟，就记起来这么多，还有一些细节问题可能淡忘了，总体来说，面的都是以基础为主，然后boss说把我简历推荐给内部，进行正式的社招流程。一轮技术面然后当天晚上一个女的面试官就给我打电话了，说八点半进行下一轮技术面试，没想到效率这么快，我都没怎么准备。这次就直接省略自我介绍了。webpack的入口文件怎么配置，多个入口怎么分割啥的，我也没太听清楚。 这个自己就说了一下自己的理解，以及自己用node写的多入口怎么配置，然后面试官说不是多入口配置，然后我又说了一下自己的理解，然后这题就过了。我看到你的项目用到了Babel的一个插件：transform-runtime以及stage-2，你说一下他们的作用。 这个我也还算比较了解，就说了一下ES的一些API，比如generator啥的默认不转换，只转换语法，需要这个来转换，然后说profill啥的，扯了一下stage-1，stage-2，stage-3，这个问题回答还算清楚。我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin这个插件，有没有觉得压缩速度很慢，有什么办法提升速度。 这个我主要回答了一下，我之前也没怎么了解，一个想到是缓存原理，压缩只重新压缩改变的，还有就是减少冗余的代码，压缩只用于生产阶段，然后面试官问还有呢？我就说，还可以从硬件上提升，可以得到质的飞跃，比如换台I9处理器的电脑。。。。简历上看见你了解http协议。说一下200和304的理解和区别 这个噼里啪啦说了一堆，协商缓存和强制缓存的区别，流程，还有一些细节，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征，这一块之前有过比较详细的了解，所以还是应答如流。DOM事件中target和currentTarget的区别 这个没答上来。。。说一下你平时怎么解决跨域的。以及后续JSONP的原理和实现以及cors怎么设置。 我就说了一下Jason和cors,然后问我JSONP的原理以及cors怎么设置，这一块自己也实践过，所以还是对答如流的。说一下深拷贝的实现原理。 这个也还好，就是考虑的细节不是很周全，先是说了一种JSON.stringify和JSON.parse的实现，以及这种实现的缺点，主要就是非标准JSOn格式无法拷贝以及兼容性问题，然后问了我有么有用过IE8的一个什么JSON框架，我也不记得是什么了，因为我压根没听过，然后说了一下尾递归实现深拷贝的原理，还问了我typeof null是啥，这个当然是Object。。。说一下项目中觉得可以改进的地方以及做的很优秀的地方？ 这个也是因人而异，开放性问题，大致扯了一下自己的经历，也还OK。最后问了有什么需要问的地方，面试到这里基本就结束了，大约面了一个多钟头，还是蛮累的。总体来说，回答的广度和深度以及细节都还算OK，觉得这轮面试基本没什么悬念。二轮技术面过了几天，接到阿里另一个面试官的电话，上一轮面试通过了，这次是二轮技术面，说估计一个钟头。这次依然跳过自我介绍之类的，直奔主题。有没有自己写过webpack的loader,他的原理以及啥的，记得也不太清楚。 这个我就说了一下，然后loader配置啥的，也还ok。有没有去研究webpack的一些原理和机制，怎么实现的。 这个我简单说了一下我自己了解的，因为这一块我也没深入去研究，所以说的应该比较浅。babel把ES6转成ES5或者ES3之类的原理是什么，有没有去研究。 这一块我说了一下自己的思路，大致也还OK，我也没去深入研究怎么转换的，之前好像看过类似的文章，自己也只观察过转换之后的代码是啥样的，至于怎么转换的规则，真的没去深入观察。git大型项目的团队合作，以及持续集成啥的。 这里我就说了一下自己了解的git flow方面的东西，因为没有实战经验，所以我就选择性说明了这一块的不熟练，然后面试官也没细问。什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？ 这个我就说了一下函数柯里化一些了解，以及在函数式编程的应用，最后说了一下JS中bind函数和数组的reduce方法用到了函数柯里化。ES6的箭头函数this问题，以及拓展运算符。 这一块主要是API和概念的问题，扯了一些规范以及严格模式下其他情况this只想问题。JS模块化Commonjs,UMD,CMD规范的了解，以及ES6的模块化跟其他几种的区别，以及出现的意义。 这个也是说了一下自己的理解和认知，自己对模块化历史以及一些规范都有所涉猎，这一块也还凑合。说一下Vue实现双向数据绑定的原理，以及vue.js和react.js异同点，如果让你选框架，你怎么怎么权衡这两个框架，分析一下。 主要是发布订阅的设计模式，还有就是ES5的Object.defineProperty的getter和setter机制，然后顺便扯了一下Angular的脏检测，以及alvon.js最先用到这种方式。然后扯了一下vue.js和react.js异同点，权衡框架选择，调研分析之类，噼里啪啦说了一大堆。我看你也写博客，说一下草稿的交互细节以及实现原理。 这一款就按照自己用过简书或者掘金，SG这类草稿的体验，详细说了一下，这个开放性问题，说到点基本就OK。我们每天晚上八点在腾讯课堂都有前端的免费课程， 你要来听课学习一下吗？有没有兴趣呢？最后面试官问我有什么想问的吗，面试到这里基本就结束了，差不多面了一个小时，说过几天就会给答复，如果过了就会去阿里园区进行下一轮的技术面。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）三轮技术面上一轮发挥感觉没前两轮发挥好，所以还是有点不自信的，没想到第三天后，就来电话了，通知我去阿里园区面试。 因为阿里西溪园区距离我不到十公里，我就踩着共享单车一点钟就出发了，天气比较热，飘在路上，百感交集，身边一辆法拉利轰鸣而过，又一辆兰博基尼呼啸而过，我心里一万头草泥马奔腾，MLGB，心里暗想，为神马开这车的人不是此刻看文章的你？ 走到半路了，面试官给我打电话了，说我怎么还没到，说约定的是两点钟，我一下子就懵逼了，短信只有一个游客访问ID，并没有通知我具体时间，反正不管谁的疏忽，我肯定是要迟到了，于是我快马加鞭，踩着贼难骑的共享单车，背着微风，一路狂奔，到阿里园区已是汗流浃背，油光满面，气喘乎乎。。。 面试迟到了，印象肯定不好，加上满头大汗的形象也不太好，加上自己饥渴难耐，这面是估计要GG了，一进来就直奔主题，这次是两个大Boss面试我。第一个面试官先自我介绍一下，说一下项目的技术栈，以及项目中遇到的一些问题啥的。 这个问题就是个开场白，简要说明一下，问题都不大，这个面试官就是第一次打电话给我面试的那个boss，所以技术那块boss心里也有个底细，所以没再问技术问题。一个业务场景，面对产品不断迭代，以及需求的变动该怎么应对，具体技术方案实现。 具体业务场景，我就不一一描述，Boss在白板上画了一个大致的模块图，然后做了一些需求描述。然后需求一层一层的改变，然后往下挖，主要是考察应对产品能力，以及对代码的可维护性和可拓展性这些考察，开放性问题，我觉得还考察一些沟通交流方面的能力，因为有些地方面试官故意说得很含糊，反正就是一个综合能力，以及对产品的理解，中间谈到怎么实现，也问到了一些具体的点，记得问到的有一下几个。① 怎么获取一个元素到视图顶部的距离。 ② getBoundingClientRect获取的top和offsetTop获取的top区别 ③事件委托第二个面试官业务场景：比如说百度的一个服务不想让阿里使用，如果识别到是阿里的请求，然后跳转到404或者拒绝服务之类的？ 主要是考察http协议头Referer，然后怎么判断是阿里的ip或者啥的，我也不太清楚。二分查找的时间复杂度怎么求，是多少 。。。排序的还算清楚一点，查找真的不知所措，没回答上来，也没猜，意义不大，不会就是不会。XSS是什么，攻击原理，怎么预防。 这个很简单，跨站脚本攻击XSS(cross site scripting)，攻击类型主要有两种：反射型和存储型，简单说了一下如何防御：①转义 ②DOM解析白名单 ③第三方库 ④CSP 自己对web安全这块系统学习过，前前后后大约了解了很多，对于XSS,CSRF,点击劫持，Cookie安全，HTTP窃听篡改，密码安全，SQL注入，社会工程学都有一定了解，所以这个自然也不在话下。线性顺序存储结构和链式存储结构有什么区别？以及优缺点。 我是类比JS数组和对象来回答的，反正还算凑合吧，自己都数据结构这块多少还是有些印象，所以入了前端，对数据结构和算法确实一直淡忘了。分析一下移动端日历，PC端日历以及桌面日历的一些不同和需要注意的地方。 这个我能想到的大致都说了一遍，不同的场景交互和细节以及功能都有所偏差，以及功能的侧重都可能不同。白板写代码，用最简洁的代码实现数组去重。 我写了两种实现方式：ES6实现： [...new Set([1,2,3,1,'a',1,'a'])] ES5实现： [1,2,3,1,'a',1,'a'].filter(function(ele,index,array){ return index===array.indexOf(ele)})怎么实现草稿，多终端同步，以及冲突问题？ 这个回答的不算好，本来也想到类比git的处理方式，但是说的时候往另外一个方面说了，导致与面试官想要的结果不一样。最后说目前的工作经验达不到P6水平，业务类稍弱，阿里现在社招只要P6的高级工程师，但是可以以第二梯队进去，就是以第三方签署就业协议，一年后可以转正，就是俗称的外包。多少还是有点遗憾，面了四轮面了个外包，最后放弃这份工作了。最后，感谢boss一直以来的关照和器重。

前端工程师是做什么的？ 前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！） 2005年的时候大多数网页长这样： 现在的网页一般是这样的： 前端工程师的发展之路和前景是怎么样的？ 前端是一个相对比较新的行业，互联网发展早期（1995年~2005年）是没有专业的前端工程师的。随着互联网的发展，大约从2005年开始，正式的前端工程师角色被行业认可，到了2010年，互联网开始全面进入移动时代，前端工程师的地位越来越重要，前端领域的技术发展也越来越快，各种新的思想、设计模式、工具和平台都快速发展，对前端工程师的技能要求也越来越高。 有一些数据可以说明前端行业的发展迅速。 在2010年之后最流行的新编程语言中有相当部分和前端有关，比如 Dart、Clojure、CoffeeScript 和 TypeScript。 作为前端最重要的编程语言 JavaScript，在最近几年里不论是代码量还是关注数都稳居 Github 平台热门编程语言榜。 行业对前端需求量持续增加，前端程序员薪水在行业里面处于较领先的位置。近年来最流行的编程语言很多都是JavaScript替代语言JavaScript在最热编程语言 TOP10近几年互联网公司前端团队每年扩张一倍JavaScript工程师平均薪水排名在程序语言工程师收入前10前端工程师需要什么样的知识和技能？ 有人说前端工程师的技术栈是这样的： 还有人说是这样的： 实际上前端工程师最核心的技能还是： 在一个典型的互联网公司的产品研发流程中，前端工程师和其他角色的关系大致上是这样的： 前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。 在多终端的时代，如果一个产品同时支持PC、移动端，前端工程师还需要和更多的角色打交道： JavaScript 对于前端是最重要的技能，所以优秀的前端工程师要有扎实的JavaScript基本功。而JavaScript这门编程语言也是目前程序设计领域炙手可热的宠儿，如今的它不仅仅只是用来开发Web，还可以用在各个方面。 JavaScript 可以用在“树莓派”这类智能硬件芯片开发前端工程师也是软件工程师，所以软件工程师的基础知识也是非常重要的，这些基础知识包括： 数学 计算机体系 操作系统 数据结构和算法 编译原理HTML和CSS也是前端工程师非常重要的基本功，很多同学，尤其是喜欢写代码的同学容易忽视 Markup Language，实际上 ML 也是 UI 相关的领域里面很重要的内容，不应该被忽视。 HTML: The Living Standard HTML & CSS有同学问说：“前端工作需求很多，老是改来改去，实际的技术点并没有多少，产品决定业务逻辑，从事底层基础服务会不会更有挑战和职业未来？” 的确，越贴近业务和产品层面上的工作，需求差异性越大，可能改动越频繁。不仅仅是前端改来改去，PHP服务端做业务的同学也面临这样的问题，业务逻辑改来改去。越底层通用性越强，改动相对较少。 不过事情都是有两面性的，首先可以这么想想，是底层基础服务的市场大还是互联网业务和产品的市场大。其次，基础服务的通用性很容易达成，而产品层面上如何通用化，如何在业务驱动的产品研发中利用工程化和工具化提升开发效率，这其实是一个很难的问题。丰富的互联网产品已改变和正在改变着我们的生活，然而作为产品的创造者，工程师们怎样让自己过得更好，这个领域值得研究。 另外，不要觉得实际的技术点没有多少，举几个例子：实现曲线和曲面动画，计算地图的最短路径，让png静态图片类似于gif图一样做局部的运动，抽奖游戏，物理效果的HTML5游戏，3D图表，增强现实的WebGL视频流处理等等，这些都是在前端领域中遇到的实际问题。 就 JavaScript 来说，在实际项目中设计最合适的模型高效率解决现实问题本身就很有挑战。作为一种典型的新生代编程语言，JavaScript 特性丰富，使用灵活，性能优良。面向对象、函数式编程、各种设计模式、MVC 和 MVVM，这些本身就有足够的吸引力。 前端要解决界面和交互问题，实际上UI层面上的问题一直是软件工程方面的一个难题，因为UI不停地在变化。浏览器各个版本的兼容性、Web 标准、移动设备、多终端适配，给了前端工程师很大的挑战，对前端工程师的能力也有很高的要求。许多UI问题有不只一种解决方法，许多问题有非常巧妙的思路和精彩的解决办法，前端在工程师群体里是属于非常有创造力的一个群体，因为这个行业需要丰富的创造力和想象力。 前端工程师还是Web标准的制定者、实践者和推动者，而现在的W3C标准不仅仅局限于浏览器，还包括各种手持智能设备，车载设备、智能家居等等。在未来万物互联的时代，前端将不仅仅是网页上的工程师，而是所有人机交互领域的工程师。 前端工程师的学习和成长 前端领域发展很快，各种新技术新思想不断涌现，这是一个好现象。但是前端发展太快也带来一些问题，比如有同学就问到我究竟应该学些什么，Angular.js、React、Node.js、ES6、ES7、CoffeeScript、TypeScript……似乎永远有太多东西需要学习，有些东西好像还没学明白就被另一些新的技术取代而“过时了”。 其实还是那句话，前端工程师首先是软件工程师，基础是最重要的，如果基础不扎实，一切应用技能就都是“浮云”。前端的基础是什么？HTML、CSS、JavaScript基本功，数学、算法、数据结构、操作系统、编译原理基本功。 一个优秀的前端工程师必须要有自己擅长的领域，并且钻研得足够深入，同时要有眼界，能“跨界”。可以以前端作为职业，但千万不要把自己的技能限制在前端领域，因为有很多东西，只有站在前端之外，才能看得更清晰，更透彻。 学东西千万别盲目跟风，大家都在谈AngularJS就立即跑去学习，过几天大家都谈React了，就又放下AngularJS去学习React。前端领域知识点很多，值得学的东西也很多，聪明的同学懂得花时间学习成体系的知识并且研究得足够深入，因为只有这样才能从中总结出规律，形成方法论，这样才能最大化学习的价值。 知识的正确用法 —— 一个领域里面的大师永远不会是另一个类似领域的菜鸟这次前端星计划布置的一个实现带有农历和节气的万年历，有些同学卡在农历计算上，大约70%的同学懂得去网上找代码，但只有不到1%的同学真正弄明白农历计算的原理。 在面试的时候，面试官问到如何做前端性能优化，有的同学能够拿雅虎的性能优化军规回答得头头是道，反复强调使用工具压缩静态资源，但是自己搭建的博客的nginx服务却没有开启gzip。都知道说要合并静态资源，要减少HTTP请求，然而为什么要减少HTTP请求，减少请求之后预计能改善多少性能，获得多少收益呢？需要弄明白这些问题，也需要深入了解HTTP协议本身。 还有一个更有趣的问题，大家都说写HTML的关键是语义化，那么到底什么是语义化呢？这个问题难住了不少同学。标签要符合语义，这个答案看似简单标准，但什么样的标签才是符合语义？强调用 strong 不用 b？那如果有个外星文明，它们的语言里 strong 相当于地球的 bold，bold 相当于地球的 strong，那么它们究竟该用 strong 还是用 b？我们说 i 标签是斜体的意思，那为什么 fontawesome.io 拿它做 icon font 的标签，这是不是“反语义”的？ 过去很多地方农村有一种民间的染坊，制作染布的染料。这种染房里面有一口很大的铁缸，通常都要有一个身体非常强壮的工人拿一根很长的铁棒在染缸里面用力地敲击，敲得越响，制作出来的染料颜色越鲜艳。 为什么越用力敲打铁缸染料就越好？染坊的人说这是祖祖辈辈传下来的经验，而事实上也是如此，真的染料的颜色和敲打用力有很大关系。直到有一天，一位从村里走出去学化学的大学生，弄明白了原来只需要在染料中加适当比例的铁屑，就能让染料和含铁元素氧化物产生化学反应而变得更鲜艳。原来祖祖辈辈传下来的“仪式”实际上在真实原理面前只是一种信仰和宗教。同样，如果我们不去了解技术的本质而止步于应用，那么我们就只是技术宗教的信徒。所以在周爱民老师的《JavaScript 语言精髓与编程实践》中说，计算机语言如同祭司手中的神杖，神杖换了，祭司还是祭司，世人还是会把头叩得山响。祭司掌握了与神交流的方法，而世人只看见了神杖。 由兴趣选择前端 在我学程序设计的最初，我学习的是C语言，然而整整一本书除了教我如何在黑洞洞的控制台上输出 Hello World 和各种其他字符或者用键盘输入一些什么然后依然是字符输出外，就没有什么其他的内容了。学习了一段时间之后，我的内心一度是崩溃的，因为我觉得这和我想得不一样，学了那么多知识，我都不知道自己究竟算不算是“学会”了C语言，因为在我看来，那些丰富多彩的操作系统和各种应用软件和黑洞洞的控制台之间明显还有着非常巨大的鸿沟。 事后回想起来，当时的想法当然是幼稚可笑的，那时候的我并不知道程序语言和运行环境之间的区别，对操作系统、用户API、硬件接口、网络服务等等都完全不了解。然而这并不能怪我，因为C语言的教程并没有任何一言半语来告诉我这一点，我也不知道学习了C语言的语法之后接下来还应该学习些什么。 相对来说，Web开发更吸引我，因为不需要安装任何环境，只需要在文本编辑器里面输入一些字符，保存后打开浏览器，马上就能看到丰富的视觉效果，这就是前端的优势，你所做的努力立即就能看得见。 相对于死板的输入输出，Web开发在界面可见的一层要丰富多彩得多，这一点吸引了我，如果这一点也能吸引你，让你着迷，那么你就适合学习前端。 在选择前端作为职业之前，要明确判断自己对前端开发的确感兴趣，选择做前端，应该是确认自己喜欢和适合做前端，而不是为了一份看起来体面而且薪水不菲的工作。如果你对构建丰富多彩的界面、处理各种交互逻辑不感兴趣，甚至厌烦，那么最明智的选择是放弃成为前端工程师的想法 —— 因为选择一个自己不喜欢的职业，为之忍受数十年直到退休，实在是一件很悲催的事情。 对在校学生，我们看重哪方面能力？ 有同学问，360前端是否一定要求实际经验的学生，在这里我可以回答：否。 对于学生，我们比较关心的是： 基础：包括数学、算法、数据结构、计算机相关基础的掌握。 学习能力和学习方法：如何学的前端，学了多久，学到什么程度，遇到过什么问题，是如何尝试解决这些问题。 兴趣：对前端的兴趣如何，这一点可以体现在很多细节上。有一个反面的例子比较常见，一般来说我会问学生最近在关注什么前端新知识，有的学生会说我关注某某某，但当我再问他究竟关注到什么程度，会发现他实际上根本没有在这项新知识上花费多少时间。如果你对感兴趣的问题都不花费时间，如何证明你自己对前端的“兴趣”呢。 解决问题的能力：遇到难题如何解决的，遇到没接触过的问题是如何思考和最终解决的。从这里可以判断出同学有没有前端思维，这些问题没有标准答案，我们不追求某些“官方思路”，看重过程而不是结果。关于简历，有同学提到说现在似乎很多公司都希望学生会点 Node.js，会点 React，我自己不会该怎么办。 我想说的是，我们并不要求学生必须会这些。相反，我个人更鼓励学生利用时间打好基础。简历上写自己真正擅长的内容即可，我们不会因为在你的简历上看不到 Node.js 或者 React 就忽略你。只要你真心热爱前端并用心学了，你应该明白如何用前端基础来打动我。有的学生喜欢在简历上堆砌词汇，实际上这一点不见得好，因为如果你写了一个你自己一知半解的东西，最后在面试中被面到了，一定会得负分的。 技术本身是有深度的，A 同学说“我知道React但没用它做过东西”， B 同学说“我用AngularJS写过一些个人的小项目”， C 同学说“我上个月使用弹性布局的思路来写我的博客，结果在Android系统4.1版本的Webkit浏览器下出现了一个显示bug，最后我是这样这样解决的”。你们说 A、B、C 三个

01 前面的话如今我们使用的互联网，客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页，浏览器就是客户端，将网页数据发过来的也就是服务器。其实服务器，并没有什么特别的，也就是一台昼夜不停运转的电脑罢了。每一台入网的机器，都会被分配一个ip，我们可以通过ipconfig / ifconfig这样的命令，知道我们电脑的ip地址。服务器本身，运行着服务器程序，他们监听着来源于网络的请求，并对请求进行响应。比较常见的服务器程序，比如apache / Nginx / IIS等等，我们可以通过以下这样的一个小的实验，来了解网络中的客户端与服务器，是如何进行交互的。实验：一个小的局域网第一步：运行你电脑上的服务器程序（以apache为例，建议使用xampp / wamp这样的软件包，win下一键安装，能省不少事。当然，喜欢折腾的同学和SA们肯定要一个一个装啦），在apache的www目录下放入一些网页文件，然后在浏览器的localhost下浏览网页。第二步：在电脑上打开wifi共享软件，通过ipconfig / ifconfig命令查看本机在内网的ip，让手机连接电脑共享的wifi（或者是两者同连一个路由器的wifi），在手机浏览器的地址栏输入电脑的ip，进入电脑的服务器并浏览网页。上面的小实验的第二步，就模拟了一个简单的浏览器+服务器系统（BS系统），也在一定程度上反映了网站基本的访问原理。同时，这也是Web前端开发中真机测试移动端页面的一个行之有效的方法；当然，你也可以通过这种方式，实现局域网络的文件共享。继续深入一步，我们在浏览网站的时候很少使用ip直接访问的，而是用www.baidu.com这样的域名，域名与提供对应服务的服务器的ip地址通过DNS服务器相互对应。我们可以通过ping命令，也可以通过一些在线的工具，如http://ping.chinaz.com来获取一个网站的ip地址，有时候ping出来的ip是不一样的，一般和你使用网络的地点有关，这主要是为了将对服务器的请求分流，减轻服务器的压力，保证网站的访问速度（比如可以了解一下CDN）。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）02 开发的过程与设计的艺术如何从0建立一个网站，这就涉及到软件产品的开发了。一般，会有以下几个职位。产品（PM）：负责对软件产品的功能，目标用户等许多部分，进行一个详细的归纳整理，包括前期的功能地位和后期的功能修缮；设计（UE）：对用户使用的产品界面、交互方式进行统筹和设计；前端（FE）：活跃于前端的程序员，负责使用代码实现设计师的设计，并与后端协调数据在客户端的渲染工作；后端（BE）：活跃于服务器端的程序员，为前端的渲染提供所需的数据；系统（SA）：保证开发过程中，对于服务器权限的管理与协调，以及服务器运行环境的提供，同时保证网站在生产环境中的平稳运行。限于个人能力，我在此仅从前端和后端这两个角度，探讨网站实现的技术细节，其中会涉及许多具体的解决方案，供大家参考。现在我们从这样的角度去看一个网站，我将他分为三层，视图层，数据层，以及控制数据在视图上的显示方式的控制器。举个例子，一个留言板，他的数据层会包括留言者的留言内容、留言时间、留言者的信息等内容。这些数据，就像一张excel表格一样，存储在我们的服务器。而我们的用户肯定不希望看到一个简陋的表格，他们希望看到的至少是一个界面，数据内容被清新美观的显示在我们的浏览器上，而这个界面，也会随着数据内容的增删修改而做出相应的调整。存储表格数据的，就是数据层；用户看到的，就是视图层；让界面随数据产生改变，则是控制器的使命。现在，从技术的角度我们去实现他。首先，前端工程师根据设计师的设计，做出视图层的模板，后端工程师也做好相应的数据存储工作，包括设计创建数据库、数据表等等。现在，基本的工作完成。继续下去，我们则有很多的选择。选择一：后端渲染数据到视图这种方法，就是前端将模板交给后端，告诉后端具体在哪个位置放什么样的数据，放的时候有什么具体的要求，剩下的渲染工作完全交给后端处理。这样的方法实现起来门槛低，而且由于服务器计算性能一般情况下强于客户机，后端来刷模板简单粗暴速度快，没有任何争议。缺点是后端工程师由于处理了数据填写的工作，相当于涉及了视图层（即前端）的工作内容，导致分工不够明确；同时，由于是后端更新数据，而后端代码是运行在服务器上的，每次要更新都要刷新页面重新请求一个完整的页面，某种意义上来说，用户体验相对较差。选择二：后端将数据生成为小的数据文件，前端获取数据并由前端更新视图。这种方法，涉及到前端的Ajax。说白了就是在后台异步加载另外一个页面，在加载过程中用户不会看到任何变化，而加载完成后，相当于在前端程序里获取了一个字符串，剩下的任务就是将这个字符串解析取出里面的数据并将对应内容渲染到相应的位置上。通过这种方式，首先可以保证视图层显示的内容都完全由前端工程师负责，分工明确，实现了一定程度上的前后端分离；同时，与服务器交互的文件大小，从一整个页面缩小到了一个仅仅包含要更新的数据的小文件，交互的量减小，带来性能上的提升；另外，由于交互文件一般使用json这种多数编程语言都可以解析的数据格式，不仅可以给网页前端使用，也可以给移动端app的前端开发使用，统一了接口，扩展时减小了工作量。选择三：单页应用（SPA）我先解释一下单页应用，和传统网站相比，他更接近于移动端应用程序，其核心就是将路由控制在前端工程师的手里。核心技术除了上面的Ajax，还有pushState，又有人将两者合称为PJAX。先说什么是路由，路由可以理解为你网站域名后面的内容，比如www.abc.com/p/123这样的网址，后面的/p/123就标明了一个路径。可以类比于我们电脑的磁盘，当我在路径的位置输入C:/p/123的时候，我希望看到C盘下p文件夹下123文件夹的内容，当123变成了456，显示的内容应该有些变化。如果456文件夹存在，显示该文件夹的内容；如果不存在，则会弹出错误信息提示不存在。对应我们的网站，如果当/p/123变成/p/456的时候，也应该给出对应的显示。路由由前端控制的含义，就是说，网站url的变化与对应的显示由前端处理。你的整个网站实际上只有一个页面，前端根据url的变化，通过Ajax异步加载需要的数据，然后通过pushState操作浏览器的历史记录，达到与浏览普通网站同样的效果。SPA最大的优点，大概就是响应速度了。当然，使用SPA对前端的技术提出了相对比较高的要求。使用SPA的一般情况，是你要做一个类似于安卓app的网站，如淘宝的手机站和Gmail，都是相当典型的SPA。不过，虽然现在SPA很多，并不是所有的场景都适合使用SPA的。淘宝收藏夹的架构：作为访问量如此高的网站，淘宝是怎么做的。（首先，php的后台肯定是担负不起这样的访问量的。）在淘宝UED，他们介绍了“中途岛”项目，基本架构是：前端工程师使用Node.js进行模板渲染，保证模板的渲染由服务器完成提高效率；Node.js访问由java后台封装的高级数据接口，而java在访问数据库的时候，则是使用C语言来实现最有效率的访问。技术细节可以参考淘宝UED的博客。03 项目开发中值得一提的点关于查阅资料和提问：遇到问题先问搜索引擎，这我想应该都没有什么意见。用不了谷歌，可以从laod.cn下个hosts，翻出去的话，方法太多，不废话了。当然了，找不到具体问题问人是不可避免的。但是当问题比较复杂的时候，比如前端这边处理浏览器兼容问题的时候，一定要有在线demo，一定要把问题描述的很清楚并且真的是自己解决不了了再问。关于提问的艺术，可以看看张鑫旭大神的博客（个人非常喜欢，强烈推荐前端同学关注），如何提问才能进阶成为前端大神？，这篇文章对提问需要注意的点说的非常明确，请大家，无论是不是做前端，最好都看看。任务进度管理：虽然在学校里做东西，很少会有严格的工期安排、进度计划这些，但是在公司里，这些问题肯定是会遇到的。推荐几个工具，大家可以了解一下：tower和微软的project。版本控制：几乎没有任何成功的软件项目，是一个敲代码敲出来的，况且，就算是一个人敲代码，也应该对自己所做的改动有所记录和备份。在这里，我将介绍两种使用git进行版本控制的方式，供大家参考。分支管理：整个项目是一个大的仓库，这个大的仓库由于不同的修改而有不同的分支。一般来说，有master（稳定发布版本） / dev（开发中的相对稳定版本） / 开发人员个人分支（集中个人的修改）这些。一般的工作过程为，个人会在个人的分支上修改，然后push到dev分支，稳定下来的dev分支作为新的版本再合并到master分支。那一部分出了问题，就在哪一部分进行修改。git在你每次更新分支的内容时都要求你输入一段描述修改的文字，这在将来的版本控制和回退上都会很有帮助。仓库管理：个人理解其实是扩大化的分支管理，项目负责人建立项目仓库，项目开发人员fork母仓库，做了自己的修改后，对母仓库发出pull request，申请合并到母仓库。这一方法最大的优点，就是方便负责人进行code review，保证代码质量；同时也可以方便对开发人员的贡献度进行考核。通常公司里会选取这种方式。项目的持续集成：持续集成大家在学校也很少会接触到，但是当你在公司里，遇到大项目的时候，就肯定会接触到持续集成这方面的需求和工具。个人认为持续集成更像是一种思想，在项目的开发过程中，前端和后端在开发过程中不断的对接，测试样例提前都做好，然后自动化构建项目，自动化测试等等。每当代码库更新（当然，本地构建失败的代码是不允许提交到仓库的）的时候，自动构建脚本、自动测试脚本都会跑出一个更新后的产品给大家看，方便团队中的每一个人掌握项目的情况和目前的进度。实现这种思想，就需要与之配合的工具，关于持续集成这方面现在在企业中目前还没有“最佳实践”，不过确实有很多前人的经验供咱们借鉴，如《持续集成最佳实践》里面对于持续集成实践进行了思考04 几点建议在学习开发技术的过程中，个人给大家一点建议：前期初学的时候，千万不要求多道理大家都明白，什么都想学肯定什么都学不好。如果一个人都能学过来，那么我们还搞这么多方向做什么。有些东西，当你需要的时候，自然就会接触到；而那个时候你再学，你肯定是在实际项目中遇到了什么问题。有问题导向的学习是非常有效率的，所以千万不要求多，稳住。千万不要刚刚入门就觉得自己什么都会了这是我经历过的阶段，当时被一位学长拉了回来，也是非常幸运。这个阶段你觉得自己清楚很多东西了，感觉只要查查资料自己什么都能解决。其实想一想，这么多人研究这个领域，你怎么可能马上就看透了他呢。每个领域，都有很多坑，每一个坑也都会有至少一个与之对应的解决方案，而处理项目和解决方案，是一条漫长的道路。知识是越学越细的，本来你以为前端只能写写页面，深入学习以后，你才会发现，js可以写机器人；可以调系统API做桌面应用；哪怕只是在写页面这部分也有着页面渲染时间、内存泄漏等各种各样的问题和与之对应的层出不穷的解决方案。所以，低调，前面的路还很长。学到一定程度，可以多去看看我们知道书本上的知识肯定不是最新的，技术在不断的发展。可能你现在用的书上的代码都已经过时到运行不了了。这个，其实很正常，毕竟做网络这方面，怎么可能光靠书来追踪技术呢。所以多去看吧，github，各种社区、论坛，线下的技术交流，这些可以给你带来最新鲜的养分。所以，世界这么大，出去多看看。05 结语写代码，按照自己的意愿去构建一个产品，一个项目，哪怕再小，依然是自由的。哪怕是在实现别人的需求，可以做好，做精，做出一套最佳的解决方案（没有最佳，只有最适合项目），给别人留下轮子去做好二次开发，依然是自由的，是有意义的。

1.前言从事web前端的人很多，每个人的学习方式，学习习惯基本不会一模一样！关于web前端（或者直接互联网），大家都知道，是做到老，学到老的一个行业。之前写文章的时候，我说过很多学习的方式和建议。今天换一下，说一下我个人不建议的学习方式，或者我个人觉得是妨碍进步的学习方式，希望大家引以为鉴！如果大家有什么补充和指点的，欢迎指出。大家一起交流意见，互相帮助！2.具体情况1.只看教程，不动手实战这个可以说是学习的最大的一忌，也是提醒过最多的一个注是事项！网上的教程有许多许多，各个语言，各个知识点，各方面的都有，javascript，html5，css3等的一些，随便一搜就一大把，毕竟互联网最大的优势之一就是资源共享！但是很多人看教程就只是看教程，不动手实操。即使博客的教程，视频教程再好，自己不动手实操，写代码，这样的学习方式，记忆根本不深刻，容易遗忘，到头来，可能什么都没学会！而且有些教程，如果没有跟着动手实操，可能会蒙圈。个人建议：要挑觉得适合自己的教程，也要动手实操，写代码。即使不是边看教程编写代码！在看完了教程之后，一定要自己动手实操！过程中，可能会遇到些问题，但是这样才会学习到更多，记忆也更加牢固！2.只学框架或者库这个情况，针对javascript（下称：js）现在没有以前严重了，在我大学和实习期间，那个时间还是jquery傲视群雄的时候。很多人会在聊天的时候会说：有了jquery，为什么还要学js？有了vue，为什么还要学js？面对这样的提问，我那时候没有回答，心里想：jquery或者vue就是用js实现的，不会js，学jquery或者vue第一学得吃力，第二学jquery或者vue肯定不会很深入。而且，万一有时候，项目不允许用jquery或者vue，那就基本不会写代码了。这时候，如果学习其它的框架或者库，基本又等于重新学一门语言了。个人建议：先把基础（html+css+js）打牢，再学其他框架或者库。虽然在会js的情况下，我不敢说学js的框架或者库就是查文档，查API。但至少学js框架或者库可以不会那么吃力！3.只顾着写代码这个就是我之前的一个习惯，只顾着写代码，不知道：耦合，实例化，继承等专业术语，和别人交流，无限蒙圈！根本不知道别人在说什么！互联网的技术更新的速度非常的快，隔三差五就发布一个框架，一个库，一个工具。虽然不是每一个更新的技术都需要学习。但是如果只顾着写代码，不了解新的技术。这样很容易使自己停止不前，失去竞争力。个人建议：在写代码之余，要确保自己是不是了解代码，对代码有没有一个认识。以及多点留意消息，看下有没有什么技术更新！如果觉得更新的技术很实用，或者自己有兴趣，可以多了解下！毕竟互联网是一个做到老，学到老的一个领域，技术更新的很快，如果跟不上流行的趋势，说不定自己会被淘汰呢！4.太早接触复杂项目这个情况，比较普遍，无论是在学校或者是现在的培训机构。很多学习前端的人，基础没打牢，就在那里扬言要做一个大项目，我听到的有的人想做知乎，有的人想做世纪佳缘等等一些伟大的目标！但是全部人都是连网站的业务流程和逻辑都没弄清，最后越搞越乱，就放弃了！之前的伟大目标都成了烂尾楼，作用最多就是一个代码练习的作用！花了大量的时间，做了一件没很大的实际意义的事情！个人建议：从简单到复杂，复杂的网站，都是有很多简单的模块。不妨先从简单的功能做起，做完了一个功能再往里面加功能！现在所处的公司就是这样，开发的后台管理系统，开发几个月了，从一个只有员工的登录注册的功能，然后再逐一加功能，到现在项目逐渐完善！（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）5.好高骛远，急于求成这个情况就是多见于培训机构出来的人。我不知道是不是所有城市都是这样，但是广州这边，给我的感觉就是这样。就是目标不切实际，对自己也不够认识！之前在群聊的时候，在金三银四那段时间，很多人找工作，聊天的时候也遇到过很多培训机构的人。简历上是各种精通，刚毕业在培训机构培训几个月，要么就是自带两三年工作经验，要么就是说自己培训了几个月，技术水平和市面上两三年的人差不多。总之就是把自己吹得无所不能！但是一出题，就十问九不知。问闭包是什么，不知道；问原型是什么，不知道。问继承是什么，还是不知道。这里就得说下，我印象深刻的一道题了。这道题我就是用来对付那些人的！看到哪个人各种精通，各种吹。我立马出这道题，结果没一个能回答正确，题目在下面！alert(a)a();var a=3;function a(){alert(10)}alert(a)a=6;a();上面所说的，只是一个表面的现象，更重要的就是，好高骛远这个情况，很有可能会导致自己难以找到工作！因为一些企业认为最高只能给你4000工资，但是你自己却认为自己有实力拿到9000以上的工资。这样情况，很难找到工作！给人的印象也不好！更重要的是，这可能会影响自己的职业选择！个人建议：从实际出发，评估自己。想下自己会什么，能给企业带来什么！也可以停下别人的建议，和对比下别人的技术水平和工资，或者是上网找一些面试题，看下自己能不能完成那些面试题！最后评估下自己，认为自己处于什么位置！6.看到难点就逃避这一点，相信很多人都有感触，就在开发上，遇到上一个或者几个自己觉得没办法实现的需求或功能。千方百计地想着逃避，比如：这个功能不是很重要，不做可以吗？这个功能我从来没弄过，搞不定的。这个功能外包给别人做吧，我们做不了！很多一些逃避话语。大家可以想下，如果每次都是逃避，那么时间一久，自己技术水平是不是还停留在基础那个阶段？以后要怎么提升自己的技术水平。个人建议：迎难而上。在web前端开发这块，如果遇上了难题是正常的，如果没遇到难题就是见了鬼！面对难题，我们应该是挑战难题，而不是逃避！大家都想提升自己的技术水平，挑战难题不就是一个很好的提升技术水平的实战机会吗？如果完成了之前认为不可能完成的难题，这样就是一个技术水平提升的见证！不是吗？我也觉得，每天就写简单的业务代码，不探索新知识，不挑战难题，这样做开发也没多少意思！7.能用就行，不想优化这个也是一个很常见的情况，很多人认为写的代码能用就行，能实现需求就行！根本不管日后的优化。在开发项目或者开发插件上，虽然我也是提倡:先实现，再优化这个方式！但是并不代表我开发完了就完了，不会再想优化！如果不试着去优化自己的代码，不探索写代码的更好方式，以后别说编写高质量，简洁的代码了，因为自己把学习编写高质量，简洁的代码的一个重要途径给封锁了。还有一个就是，项目上，有些问题可能是潜在的，就是现在看着项目没出现什么问题，但并不代表以后不会出现问题。反而在项目开发完了之后，试着去优化自己的代码，探索更好的实现方式，试着编写出高质量，简洁的代码。这样难道不是一个很好的学习过程吗？至于优化代码的方式，很多很多（比如常说的：代码过于重复，是否引入设计模式？网站性能一般，可否进行优化？），优化这一块，也不是说一步就优化到最好的，而是至少不会比以前差！关于优化，我之前也发过一些资源。很容易找到，网上的资源更是很多！大家挑着看便是！8.不懂不问和不懂立刻问不懂不问，这个大家都知道，就是遇到问题，从不问同事或者通过其他方式咨询别人。就是自己在那里苦思冥想，尝试各种解决方案。这样的方式，最坏的结果就是最终还是解决不了问题，让同事来询问开发情况。最好的结果问题解决了，但是解决问题所花的时间会肯定很多。不懂立刻问，这个就是词面的意思。遇到问题马上问别人。自己没怎么思考或者根本不思考。这样能解决问题，但是这样会导致自己可能会频繁的问同事，会搞得同事很不耐烦。如果把同事的耐心磨没了，可能回答的语气可能不会很好。这样不仅影响同事之间的关系，还会让自己之后不敢再请教同事，有让自己处于上面所说的不懂不问的风险。个人建议：适时请教。遇到不懂的问题，先自己结合上下文思考下，想下以前有没有遇到这个问题，解决不了去网上找解决方案，如果还没有解决问题，这个时候再问别人，问同事或者通过其它渠道问别人。这样自己有了思考，解决问题的时候记忆也很深刻，也不会频繁的打扰同事！9.不懂装懂这个次面上跟上面的差不多，但实际上不一样！不懂装懂就是去问别人的时候，实际上别人的讲解并没有完全听懂，可能是碍于面子或者是因为不好意思打扰别人那么久，或者担心打扰别人太久，所以装作很懂。但是这样可能忽悠得了一时，很快又会露出马脚。这样会搞得隔一会又要去问别人同样的问题，这样反而会搞得别人更加尴尬，更加为难！自己也会打扰别人更多的时间！个人建议：如果有问题去问别人，只要你问的人不是一个非常没有耐心的人。他都会耐心的解答你的问题！所以，当问别人问题的时候，一定要确保自己是已经弄懂了问题的缘由，同事一遍没解释清楚，自己直接回答不明白，相信很多人都会再详细的解释一遍。如果担心同事工作忙或者其它原因，可以挑一个合适的时间！我现在问同事就是，要么不问，要问就切底弄懂！当然了，我的同事都很有耐心，每次我有什么问题，他们都会耐心解答，甚至是扩展开来讲！10.没理清楚需求就写代码很多人在接到需求之后，第一反应就是写代码，即使是在自己没把需求理清楚之前也是照样写代码。另一种情况就是，很多人是边写代码，边想需求。这个开发方式，万一自己对需求理解有误！可能会导致自己写的代码，很大一部分都要修改，甚至是全部删除重写。没理清楚需求就写代码这个情况，发生的概率应该挺大的，但是一般来说很难发现这个情况，毕竟程序员对代码的增删改查是再正常不过了！我本身也不知道，就是在一次的技术分享中，老大提出来的，他的建议就是对于一些稍微复杂一点的需求，先理清楚需求，简单画个流程图，然后在代码里面，先写上一点注释，再开始动手写代码！对于这一点，我现在就是在执行当中！除非需求真的很简单，否则我都会在草稿本上简单画一下流程图。根据流程图，写好注释，再写代码，这样会比较有条理，代码也清晰，日后的返工也可能会有，但是不会像以前那么多！在开发时间上，效率上，都得到了一个提升！3.小结web前端现在的行情，我不知道其它城市，但是广州确实是不太好，竞争也很大，差不多是100人争一个职位，其中的原因就是培训机构林立以及前端入门简单。面对这样的情况，我们能做的，只有时刻学习，提升自己的技术水平。这样才能保证自己有很大的竞争力，能够从这么多人中脱颖而出。对于学习和提升自己，除了应该有适合自己的学习方式，也该对一些妨碍进步的学习方式引以为鉴！上面10点是我自己的一些想法。希望对大家有用！最后一个就是，如果打击有什么好的学习方式或者不好的学习方式，欢迎指点。让大家交流意见，相互学习！

1、为什么用Nodejs,它有哪些缺点？事件驱动，通过闭包很容易实现客户端的生命活期。不用担心多线程，锁，并行计算的问题V8引擎速度非常快对于游戏来说，写一遍游戏逻辑代码，前端后端通用当然Nodejs也有一些缺点：nodejs更新很快，可能会出现版本兼容nodejs还不算成熟，还没有大制作nodejs不像其他的服务器，对于不同的链接，不支持进程和线程操作2、什么是错误优先的回调函数？错误优先(Error-first)的回调函数（Error-First Callback）用于同时返回错误和数据。第一个参数返回错误，并且验证它是否出错；其他参数返回数据。fs.readFile(filePath, function(err, data){if (err){// 处理错误return console.log(err);}console.log(data);});3、如何避免回调地狱？以下方式避免回调地狱模块化：将回调函数转换为独立的函数使用流程控制库，例如[aync]使用Promise使用aync/await4、什么是Promise?Promise可以帮助我们更好地处理异步操作。下面的实例中，100ms后会打印result字符串。catch用于错误处理。多个Promise可以链接起来。new Promise((resolve, reject) =>{setTimeout(() =>{resolve('result');}, 100)}).then(console.log).catch(console.error);5、用什么工具保证一致的代码风格？为什么要这样？团队协作时，保证一致的代码风格是非常重要的，这样团队成员才可以更快地修改代码，而不需要每次去适应新的风格。这些工具可以帮助我们：[ESLint] (http://eslint.org/)[Standard] (https://standardjs.com/)JSLintJSHintESLintJSCS推荐6、什么是stub？举例说明stub用于模块的行为。测试时，stub可以为函数调用返回模拟的结果。比如说，我们写文件时，实际上并不需要真正去写。var fs = require('fs');var writeFileStub = sinon.stub(fs, 'writeFile', function(path, data, cb){return cb(null);});expect(writeFileStub).to.be.called;writeFileStub.restore();7、什么是测试金字塔？举例说明测试金字塔反应了需要写的单元测试，集成测试以及端到端测试的比例：测试HTTP接口时应该是这样的：很多单元测试，分别测试各个模块(依赖需要stub)较少的集成测试，测试各个模块之间的交互(依赖不能stub)少量端到端测试，去调用真正地接口(依赖不能stub)8、如何用Node监听80端口这题有陷阱！在类Unix系统中你不应该去监听80端口，因为这需要超级用户权限。因此不推荐让你的应用直接监听这个端口。目前，如果你一定要让你的应用80端口的话，你可以有通过在Node应用的前方再添加一层反向代理（例如nginx）来实现，如下图。否则，建议你直接监听大于1024的端口方向代理指的是以代理服务器来接收Internet上的连接请求，然后将请求转发给内部网络上的服务器， 并且将服务器返回的结果发送给客户端。9、什么是事件循环Node采用的是单线程的处理机制(所有的I/O请求都采用非阻塞的工作方式)，至少从Node.js开发者的角度是这样的。而在底层，Node.js借助libuv来作为抽象封装层，从而屏蔽不同操作系统的差异，Node可以借助livuv来实现线程。下图表示Node和libuv的关系Libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给V8引擎。可以简单用下面这张图来表示每一个I/O都需要一个回调函数————一旦执行完便堆到事件循环上用于执行10、运算错误与程序员错误的区别运算错误并不是bug，这是和系统相关的问题，例如请求超时或者硬件故障。而程序员错误就是所谓的bug11、使用NPM有哪些好处？通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号。对于Node应用开发而言，你可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的具体版本12、什么是stub？举个使用场景stub是用于模拟一个组件或模块的函数或程序。在测试用例中，简单的说，你可以用stub去模拟一个方法，从而避免调用真实的方法，使用stub你还可以返回虚构的结果。你可以配合断言使用stub。举个例子，在一个读取文件的场景中，当你不想读取一个真正的文件时：var fs = require('fs'); var readFileStub = sinon.stub(fs, 'readFile', function (path, cb) { return cb(null, 'filecontent'); }); expect(readFileStub).to.be.called; readFileStub.restore();在单元测试中：Stub是完全模拟一个外部依赖，而Mock常用来判断测试通过还是失败

HTML&css相关问题1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言最主要的不同XHTML元素必须被正确地嵌套。XHTML元素必须被关闭标签名必须用小写字母XHTMl文档必须拥有根元素2.什么是语义化的HTML？直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；在没有样式css情况下也以一种文档格式显示，并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。在阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。2（1）、简述一下你对HTML语义化的理解？1、用正确的标签做正确的事情。2、html语义化让页面的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；4、搜索引擎的爬虫也依赖于HTML标记确定上下文和各个关键字的权重，利用SEO;5、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。3.常见的浏览器内核有哪些？Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]3(1).常见哪几种浏览器测试？有哪些内核（Layout Engine）？浏览器：IE、Chrome、FireFox、Safari、Opera内核：Trident、Gecko、Presto、Webkit4.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。绘画canvas用于媒介回放的video和audio元素本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除语意化更好的内容元素，比如article,footer,header,nav,section表单控件：calendar,date,time,email,url,search新的技术webworker,websocktGeolocation移除的元素纯表现的元素：basefont,big,center,font,s,strike,tt,u;对可用性产生负面影响的元素：frame,frameset,noframes;支持HTML5新标签：IE8/IE7/IE6支持通过document,createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。5.请描述一下cookies,sessionStorage（会话存储）和localStrorage（本地存储）的区别？cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；5、（1）请描述一下cookies、sessionStorage和localStorage区别？cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存存储大小：cookie数据大小不能超过4K。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage：数据在当前浏览器窗口关闭后自动删除cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭6.如何实现浏览器内多个标签页之间的通信？调用localstorage,cookies等本地存储方式WebSocket、SharedWorkerlocalstroge另一个浏览器上下文被添加、删除或修改时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。7.HTML5为什么只需要写！DOCTYPE HTML？HTMl5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；而HTMl4.01基于SGMA，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。8.Doctype作用？标准模式与兼容模式各种什么区别？！Doctype声明位于HTML文档的第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。doctype不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式来显示，模拟老式浏览器的行为以防止站点无法工作。9.Doctype？严格模式与混杂模式如何触发这两种模式，区分它们有何意义？用于声明文档使用哪种规范（html/Xhtml）一般为严格过渡基于框架的html文档。加入XML声明可触发，解析方式更改为IE5.5拥有IE5.5的Bug。9(1)、HTML5为什么只需要写<!DOCTYPE HTML>？HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来进行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。10、html document是干嘛的？HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document对象由于Document对象是window对象的一部分，所以可通过window.document属性对其进行访问。11、html5哪些操作可以SEO优化title标签；meta标签；header标签；footer标签元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）12、css盒模型有哪些及区别content-box border-box padding-boxQ1IE盒子模型box-sizing:border-box;（怪异模式）W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式Q2content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。padding-box:width和height属性包括padding的大小，不包括border和marginborder-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大13、行内元素和块状元素的区别？行内快元素的兼容性使用？（IE8以下）行内元素：会在水平方向排列，不能包含快级元素，设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行兼容性：display:inline-block;display:inline;zoom:1;14、页面导入样式时，使用link和@import有什么区别？1.link属于HTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供，只能加载CSS;2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题；14(1).css引入的方式有哪些？link和@import的区别是？内联，内嵌，外链，导入区别：同时加载，前者无兼容性，后者css2.1以下浏览器不支持link支持使用javascript改变样式，后者不可。15、介绍以下你对浏览器内核的理解？1、主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。2、渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式、然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同、所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核3、JS引擎则：解析和执行javascript来实现网页的动态效果。4、最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核九倾向于只指渲染引擎。16、box-sizing常用的属性有哪些？分别有什么作用？box-sizing：content-box|border-box|inheritcontent-box：宽度和高度分别应用到元素的内容框。17、清楚浮动有哪些方式？比较好的方式是哪一种1、父级div定义height。2、结尾处加空div标签clear：both。3、父级div定义伪类：after和zoom。4、父级div定义overflow：hidden。5、父级div定义overflow：auto。6、父级div也浮动，需要定义宽度。7、父级div定义display：table。8、结尾处加br标签clear:both。比较好的是第3种，好多网站都这样用18、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？Q1HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加；1、绘画canvas；2、用于媒介回放的video和auto元素；3、本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；4、sessionStorage的数据在浏览器关闭后自动删除；5、语意化更好的内容元素，比如article、footer、header、nav、section；6、表单控件：calendar、date、time、url、search；7、新的技术Q2IE8/IE7/IE6支持通过document.createElement方法产生的标签；<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->19、iframe的作用？用法1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免

JS相关问题数组去重function uniq(array){var temp = []; //一个新的临时数组for(var i = 0; i < array.length; i++){if(temp.indexOf(array[i]) == -1){temp.push(array[i]);}}return temp;}var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];console.log(aa)console.log(uniq(aa))1、谈一谈JavaScript作用域链当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建一个作用域又称为执行上下文（Execution Context）,在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this,arguments,命名参数和该函数中所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域上不存在x变量，并抛出引用错误（ReferenceError）的异常。2、如何理解JavaScript原型链JavaScript中每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object，它的prototype.__proto__，值为null。原型链的作用是用于对象继承，函数A的原型属性（prototype property）是一个对象，当这个函数被用作函数来创建实例时，该函数的原型属性被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。当访问对象的一个属性时，首先查找对象本身，找到则返回；未找到则继续查找原型对象的属性（如果还找不到实际上还会沿着原型链向上查找，直至到根）。只要没有被覆盖的话，对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined。2(1)、JavaScript原型，原形链？有什么特点？原型对象也是普通的对象，是对象一个自带隐式__proto__属性，原型也有可能有自己的原型，如果一个原型对象的原型为null的话，我们就称为原型链。原形链是由一些用来继承和共享属性的对象组成的（有限的）对象链。如何查找构造函数和原型中的属性？构造函数.prototype 查看构造函数的原型属性实例对象 .__proto__查看实例对象的构造函数的原型实例对象.__proto__.constructor查看实例对象的构造函数3、JavaScript如何实现继承？构造继承原型继承实例继承拷贝继承原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式function Parent(){this.name = 'wang';}function Child(){this.age = 28;}Child.prototype = new Parent();//继承了Parent，通过原型var demo = new Child();alert(demo.age);alert(demo.name);//得到被继承的属性3（1）JavaScript如何实现继承？1.借用构造函数。也叫伪造对象或经典继承。思路：在子类构造函数的内部调用超类型构造函数。可以通过使用apply()和call()方法在新创建的对象上执行构造函数。缺点：方法都在构造函数中定义，函数的复用就无从谈起。在超类型的原型中定义的方法，对子类而言也是不可见的，结果所有的类型都只能使用构造函数模式。function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//继承了SuperType}var instance1 = new SubType();instance1.colors.push("black");console.log(instance1.colors);//"red","blue","green","black"var instance2 = new SubType();console.log(instance2.colors);//"red","blue","green"2.原型链继承思路：借助原型可以基于已有的对象创建对象，同时还不必因此创建自定义类型在object()函数内部，先创建一个临时的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例==原型链继承的思想可用以下函数来说明function object(o) {function F(){}F.prototype = o;return new F();}例子var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push("Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"3.组合继承指的是将原型链和借用构造函数的技术组合在一起，从而发挥二者之长。思路：使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现实例属性的继承优点：即通过在原型上定义发法实现了函数复用，又能保证每一个实例都有它自己的数组。组合继承避免了原型链和借用构造函数的缺陷。融合了他们的优点。成为JavaScript中常用的继承模式例子function SuperType(name) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name);}function SubType(name, age) {SuperType.call(this,name);//继承属性this.age = age;}//继承方法SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype;Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1.colors);//"red","blue","green","black"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20);console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//204.寄生式继承思路：创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真的是它做了所有的工作一样返回对象例子function createAnother(original) {var clone = object(original); //通过调用函数创建一个新对象clone.sayHi = function () { //以某种方式来增强这个对象alert("hi");};return clone; //返回这个对象}var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"hi"5.寄生组合式继承。思路：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法本质上，就是寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型基本模型如下所示function inheritProperty(subType, superType) {var prototype = object(superType.prototype);//创建对象prototype.constructor = subType;//增强对象subType.prototype = prototype;//指定对象}例子function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);};function SubType(name,age){SuperType.call(this,name);this.age = age;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式function Parent(){this.name = 'wang';}function Child(){this.age = 28;}Child.prototype = new Parent();//继承了Parent，通过原型var demo = new Child();alert(demo.age);alert(demo.name);//得到被继承的属性4、JavaScript的基本数据类型Object number function boolean undefined4(1)、js有哪些内置对象数据封装类对象：Object、Array、Boolean、Number、String其他对象：FU

1、v-if（虚拟dom元素）和v-show有什么区别？1.手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换3.编译条件v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）；v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；4.性能消耗v-if有更高的切换消耗；v-show有更高的初始渲染消耗；5.使用场景v-if适合运营条件不大可能改变；v-show适合频繁切换；2、vue-router使用步骤<div class="container"><router-link to="/user?name=张三&age=22">用户中心</router-link><router-view></router-view></div>步骤1.定义不同的路由切换时需要显示的内容var User=Vue.component("User",{template:"<div>{{$route.query.name}}</div>"})2.配置路由规则var routes=[{path:"/user",component:User}]3.创建vue-router实例var router=new VueRouter({routes:routes})4.将vue-router的实例挂载到vue的实例new Vue({el:".container",router:router})2(1)、vue-router是什么？它有哪些组件？vue用来写路由一个插件。router-link,router-view3、vue-resource使用$http.get(url,[options])url String ajax请求的接口地址options Object 需要发送的参数new Vue({el:".container",data:{content:"",}})$http.get("addcomment",{params,{content:this.content}})$http.post(url,[options])url String ajax请求的接口地址options Object 需要发送的参数new Vue({el:".container",data:{content:"",}})$http.post("/addcomment",{content:this.content})4、vue的生命周期（vue的钩子函数）beforeCreate 组件还未被创建created 组件已被创建beforeMount 组件已被创建但还未挂载到DOM节点上mounted 组件已挂载到DOM节点上beforeDestory 组件即将被销毁destoryed 组件已经被销毁vm = new Vue({el:".box",data:{},beforeCreate(){},created(){},boforeMount(){},mounted(){},boforeDestroy(){},destroyed(){}})4、什么是vue是一个mvvm模型的js框架（m--->model v--->view）model本质上来说就是数据view就是试图（及最终展现给客户的页面）mv model--->view (由数据驱动视图)vm view --->model(由视图通过事件更新数据)特点是01.简单上手容易02.比较的轻量级（相对于AngularJs,RectJs...）03.组件齐全，文档便于阅读5、mvvm框架是什么？它和其他框架（jQuery）的区别是哪些？哪些场景适合？一个model+view+viewModel框架，数据模型model，viewModel连接两个区别：vue数据驱动，通过数据来显示视图层而不是节点操作。场景：数据操作比较多的场景，更加便捷6、自定义指令（v-check,v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另一个是函数。组件内定义指令：directives钩子函数：bind(绑定事件触发),inserted(节点插入的时候触发),update(组件内相关更新)钩子函数参数：el,binding7、说出至少4种vue当中的指令和它的用法？v-if：判断是否隐藏；v-for:数据循环出来；v-bind:class（简写 @class）：绑定一个属性；v-model：实现双向绑定;8、v-model是什么？怎么使用？vue中标签怎么绑定事件？可以实现双向绑定，指向（v-class,v-for,v-if,v-show,v-on）。vue的model层的data属性。绑定事件： <input @click=doLog() />8（1）、Vue的双向数据绑定原理是什么？vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter,在数据变动时发布消息给订阅者，触发相应的监听回调具体步骤第一步：需要observe的数据对象进行遍递归历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加数据的订阅者，一旦数据有变动，收到通知，更新视图第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是：1.在自身实例化时往属性订阅器（dep）里面添加自己2.自身必须有一个update()方法3.待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。第四步：MVVM作为数据绑定的入口，整合Observer,Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解释编译模板指令，最终利用Watcher搭起Observer和Compile之间通信桥梁，达到数据变化->视图更新；视图交互变化（input）->数据model变更的双向绑定效果9、导航钩子函数有哪些？它们有哪些参数？导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter.afterEnter.beforeRouterUpdate,beforeRouteLeave参数：有to(去的那个路由),form(离开的路由),next(一定要用这个函数才能去到下一个路由，如果不用就拦截)最常用就这几种10、请说下封装vue组件的过程？首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低，难维护，复用性等问题然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义，而子组件修改好数据后想把数据传递给父组件。可以采用emit方法。11、vue.cli项目中目录中src目录每个文件夹和文件的用法？assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用组件；main.js是入口文件；

基本知识1、DOM结构---两个节点之间可能存在哪些关系以及如何在节点之间任意移动document.documentElement 返回文档的根节点document.bodydocument.activeElement 返回当前文档中被激活的标签节点（ie）event.formElement 返回鼠标移出的源节点(ie)event.toElement 返回鼠标移入的源节点(ie)event.srcElement 返回激活事件的源节点(ie)event.target 返回激活事件的源节点(firefox)当前对象为node返回父节点：node.parentNode,node.parentElement返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children返回第一个子节点：node.firstChild返回最后一个子节点：node.lastChild返回同属上一个子节点：node.nextSibling返回同属下一个子节点:node.previousSiblingparentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3c标准的，可以说比较通用，而另外两个只是IE支持，不是标准，Firefox就不支持只要记得有parentElement何children就行了2、DOM操作---怎样添加，移除，移动，复制，创建和查找节点。(1)、创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点(2)、添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore()(3)、查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的name属性的值getElementById() //通过元素id，唯一性3、事件---怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。(1)、冒泡事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。IE5.5：div->body->documentIE6.0:div->body->html->documentMozilla 1.0:div->body->html->document->window(2)、捕获事件(event capturing):事件从最不精确的对象（document对象）开始触发，然后到最精确（也可以在窗口级别捕获事件，不过必须由开发人员特别指定）。（3）、DOM事件流：同时支持两种事件模型：捕获事件和冒泡事件，但是，捕获事件先发生。两种事件流会触发及DOM中的所有对象，从document对象开始，也在document对象结束。DOM事件模型最独特的性质是，文本节点也触发事件（在IE中不会）。4、XMLHttpRequest---这是什么，怎样完整地执行一次GET请求、怎样检测错误。XMLHttpRequest对象提供了在网页加载后与服务器进行通信的方法。<script type="text/javascript">varxmlhttp;functionloadXMLDoc(url){xmlhttp=null;if(window.XMLHttpRequest){ //code for all new browsersxmlhttp=newXMLHttpRequest();}elseif(window.ActiveXObject){ //code for IE5 and IE6xmlhttp=newActiveXObject("Microsoft.XMLHTTP");}if(xmlhttp!=null){xmlhttp.onreadystatechange=state_Change;xmlhttp.open("GET",url,true);xmlhttp.send(null);}else{alert("Your browser does not support XMLHTTP.");}}functionstate_Change(){if(xmlhttp.readyState==4){ //4 = "loaded"if(xmlhttp.status==200){ //200 = OK//...our code here...}else{alert("Problem retrieving XML data");}}}</script>5、严格模式与混杂模式---如何触发这两种模式，区分它们有何意义。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示；浏览器根据DOCYTPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCYTPE，那么它一般以标准模式呈现。* 对于HTML4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URL的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URL会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。6、盒模型---外边距，内边距和边框之间的关系，IE8以下版本的浏览器中的盒模型有什么不同。一个元素盒模型的层次从内到外分别是：内边距、边框和外边距IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框7、块级元素与行内元素---怎么用css控制它们，它们怎样影响周围的元素以及你觉得如何定义它们的样式。块级元素，用css中display：inline;属性则变为行内元素行内元素，用css中的display：block;属性则变为块级元素影响：周围元素显示在同一行或换行显示，根据具体情况调整样式8、浮动元素---怎么使用它们，它们有什么问题以及怎么解决这些问题需要浮动的元素可使用css中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动浮动元素引起的问题1.父元素的高度无法被撑开，影响与父元素同级的元素2.与浮动元素同级的非浮动元素会随其后3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解决方法使用css中的clear：both；属性来清除元素的浮动可解决2、3问题对于问题1，添加如下样式，给父元素添加clearfix样式.clearfix:after{content:".";display:block;height:0;clear:both;visiblity:hidden;}.clearfix{display:inlineblock;} /* for IE/Mac */9、HTML与XHTML----二者有什么区别，你觉得应该使用哪一个并说出理由。主要区别：XHTML元素必须被正确嵌套XHTML元素必须被关闭，空标签也必须被关闭，如<br>必须写成<br/>XHTML标签名必须用小写字母XHTML文档必须拥有根元素XHTML文档要求给所有属性赋一个值XHTML要求所有的属性必须用引号""括起来XHTML文档需要把所有<,>,&等特殊符号用编码表示XHTML文档不要在注释内容中使"--"XHTML图片必须有说明文字XHTML文档中用id属性代替name属性10、JSON---它是什么，为什么应该使用它，到底该怎么使用它，说出实现细节来。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON建构于两种结构"名称/值"对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪律（record），结构（struct），字典（dictionary），哈希表（hash table）,有键列表（keyed list）,或者关联数组（associative array）。值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。2015年面试题：https://wenku.baidu.com/view/b5baf920f121dd36a22d8238.html

1、页面布局题目：假设高度已知，请写出三栏布局，其中左栏右栏宽度为300px,中间自适应？1、浮动浮动布局优点:兼容性比较好缺点：浮动后，元素是脱离文档流的，需要处理清除浮动clear:both;处理好与周边元素关系div是left-right-center效果图css* {margin: 0;padding: 0;}.layout .content div{min-height: 100px;}.layout .content .left{float: left;width: 300px;background: pink;}.layout .content .right{float: right;width: 300px;background: yellow;}.layout .content .center {background: red;}html<section class="layout"><article class="content"><div class="left">左边内容</div><div class="right">右边内容</div><div class="center">浮动布局中间内容</div></article></section>2、绝对定位绝对定位布局优点：布局相对迅速缺点： 定位的元素脱离了文档流，意味着子元素也要脱离文档流，所以这种方式的可使用性比较差效果图css.layout-absolute .absolute-content {position: relative;}.layout-absolute .absolute-content div {min-height: 100px;}.layout-absolute .absolute-content .left {position: absolute;left: 0;width: 300px;background: pink;}.layout-absolute .absolute-content .right {position: absolute;right: 0;width: 300px;background: yellow;}.layout-absolute .absolute-content .center {position:absolute;left: 300px;right: 300px;background: red;}html<section class="layout-absolute"><article class="absolute-content"><div class="left">定位左边内容</div><div class="center">定位布局中间内容</div><div class="right">定位右边内容</div></article></section>3、固定定位（比较完善）flex优点： 非常有效的解决了浮动和绝对定位的问题缺点：兼容性比较差（css3的属性），不兼容IE8及以下效果图css.flexbox-content {display: flex;width: 100%;}.flexbox-content div {min-height: 100px;}.flexbox-content .left {width: 300px;background: pink;}.flexbox-content .right {width: 300px;background: yellow;}.flexbox-content .center {flex: 1;background: red;}html<section class="flexbox"><article class="flexbox-content"><div class="left">固定定位左边内容</div><div class="center">固定定位中间内容</div><div class="right">固定定位右边内容</div></article></section>4、表格布局（兼容性很好）表格布局优点：兼容性非常好，弥补了flex布局兼容的问题缺点：操作繁琐，当三栏中其中某一栏高度超出时，其他两栏的高度也会自动跟着调整（不符合某些场景）效果图css.table-content {display: table;width: 100%;}.table-content div{display: table-cell;height: 100px;}.table-content .left {width: 300px;background: pink;}.table-content .center {background: red;}.table-content .right {width: 300px;background: yellow;}html<section class="flexbox"><article class="flexbox-content"><div class="left">固定定位左边内容</div><div class="center">固定定位中间内容</div><div class="right">固定定位右边内容</div></article></section>5、网格布局效果图css.grid-content {display: grid;width: 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.grid-content .left {background: pink;}.grid-content .center {background: red;}.grid-content .right {background: yellow;}html<section class="grid"><article class="grid-content"><div class="left">网格布局左边内容</div><div class="center">网格布局中间内容</div><div class="right">网格布局右边内容</div></article></section>假如把高度已知去掉或者高度超出1.flex布局高度可以自适应2.表格布局高度可以自适应3.浮动，绝对定位，网格布局不能自适应高度