前端面试基础题

  1）css hack有哪些;

　　适用范围：IE:6.0,IE7.0,IE8.0之间的兼容

　　`.background-color:#00deff\9; /*IE6、7、8识别*/
　　+background-color:#a200ff;/*IE6、7识别*/
　　_background-color:#1e0bd1;/*IE6识别*/

　　@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */ 
　　* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */

　　@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */

　　@media all and (min-width: 0px){ .bb{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/  }background-color:#4cac70\0;/* 仅 Opera 有效 */ }{} 

  2）你所知道的ie兼容至少说出五个；

　　1.默认元素的margin padding 不同    margin:0 padding:0

　　2.浮动产生margin双边距    display:inline

　　3.浮动产生的父元素不能包裹浮动元素  父元素overflow:hidden

　　4.IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)  opacity=0.5

　　5.png 透明    js

　　6.input 默认边框 border:none

　　7、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。

　　8、min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值

　　9、父子标签间用margin的问题，表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。

　　10、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。

  3）怎么清楚浮动

　　产生原因：

　　一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了

　　影响：

　　1、背景不能显示
　　由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

　　2、边框不能撑开
　　如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

　　3、margin padding设置值不能正确显示
　　由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

　　解决方法：

　　1、对父级设置适合CSS高度

　　2.  clear:both清除浮动

　　3. 父级div定义 overflow:hidden

　　4.伪类元素清除浮动after before

  4）左边固定一个200px的div 右边自适应

　　<div class= "container">

　　　　<div class="left"></div>

　　　　<div class="rigth"></div>

　　</div>

　　<style>

　　/*方法一： BFC(块级格式化上下文)*/

　　.container{ width:1000px;height:400px;border: 1px solid red; }

　　.left{ width:200px;height:100%;background: gray; float: left; }

　　.rigth{ overflow:hidden; /* 触发bfc */ background: green; }

　　/*方法二： flex布局 */

　　.container{ width:1000px;height:400px;border:1px solid red; display:flex; /*flex布局*/ }

　　.left{ width:200px; height:100%;background:gray; flex:none; }

　　.right{ height:100%;background:green; flex:1; /*flex布局*/ }

　　/* 方法三： table布局 */

　　.container{ width:1000px;height:400px;border:1px solid red; display:table; /*table布局*/ }

　　.left{ width:200px; height:100%;background:gray; display:table-cell; }

　　.right{ height:100%;background:green; display: table-cell; }

　　/*方法四： css计算宽度calc*/

　　.container{ width:1000px;height:400px;border:1px solid red; }

　　.left{ width:200px;height:100%;background:gray; float:left; }

　　.right{ height:100%;background:green; float:right; width:calc(100% - 200px); } </style>

  5）介绍CSS盒模型

　　CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

　　元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

　　提示：背景应用于由内容和内边距、边框组成的区域。

　　提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

　　提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距

  6）link与@impurt的区别？

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

  7）display:none和visibility:hidden的区别？

　　·1、visibility:hidden--为隐藏的对象保留其物理空间

　　HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

 

　　2、display: none--不为被隐藏的对象保留其物理空间

　　HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

2 html:
  1) html的三层结构

　　网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。

　　网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

　　网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

  2）块元素，行内元素
  3）双边距bug怎么解决
  4）怎么重构一个网站
  5）一个盒子，如何在浏览器居中位置？

3 js:
  1) DOM 添加、移除、替换、插入

　　var ele = document.getElementById("my_div");  

　　var oldEle = document.createElement("p");  

　　var newEle=document.createElement("div");  

　　添加　ele.appendChild(oldEle)

　　移除  ele.removeChild(oldEle)

　　替换  ele.replaceChild(newEle,oldEle);  

　　插入  ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点  

　　复制  var cEle = oldEle.cloneNode(true);//深度复制，复制节点下面所有的子节点  

　　　　　　 cEle = oldEle.cloneNode(false);//只复制当前节点，不复制子节点  

  2）js的类型都有哪些？

　　基本类型

　　Undefined、Null、Boolean、Number 和 String

　　引用类型

　　对象、数组、函数
  3）JS是什么？有哪些组成的？
  4）cookie与localStorage、sessionStorage的区别？

　　共同点：都保存在浏览器端，同源

区别	储存大小限制	保存方式	有效期	作用域
cookie	保存小数据一般不超过4k	浏览器和服务器之间有路径的概念	设置的cookie过期时间之前一直有效	所有同源窗口中都是共享的
sessionStorage	5m以上 有限制	本地	仅在当前浏览器窗口关闭前有效，	不在不同的浏览器窗口中共享，即使是同一个页面
localStorage	5m以上 有限制	本地	始终有效	所有同源窗口中都是共享的

 

  5) ajax原理

• 　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
• 　   XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

  6）绑定事件/兼容

　　function myAddEvent(elem,event,fn) {  

　　　　if(elem.addEventListener){  //火狐和谷歌(非ie)

        　　　　elem.addEventListener(event,fn,false);  

    　　}else if (elem.attachEvent){  //ie支持

       　　　　 elem.attachEvent('on'+event,fn);  

   　　 }else{  

        　　　　elem['on'+event]=fn;  //其它

   　　 }  

　　} 

　　这是普通的事件

　　document.getElementById("btn").onclick = method1;
   document.getElementById("btn").onclick = method2;
   document.getElementById("btn").onclick = method3;

　　如果这样写,那么将会只有medhot3被执行

　　写成这样：

　　var btn1Obj = document.getElementById("btn1"); 

　　btn1Obj.attachEvent("onclick",method1);
　　btn1Obj.attachEvent("onclick",method2);
　　btn1Obj.attachEvent("onclick",method3);

　　执行顺序为method3->method2->method1 事件冒泡

　　如果是Mozilla系列，并不支持该方法，需要用到addEventListener

　　var btn1Obj = document.getElementById("btn1");

　　btn1Obj.addEventListener("click",method1,false);
　　btn1Obj.addEventListener("click",method2,false);
　　btn1Obj.addEventListener("click",method3,false);

　　执行顺序为method1->method2->method3 阻止冒泡 true设置冒泡

  7）Http的状态码？

　　消息（1字头）100

　　成功（2字头）200

　　重定向（3字头）300

　　请求错误（4字头）404常见

　　服务器错误（5、6字头）500这个问题都会在服务器端的源代码出现错误时出现

  8）JS中setTimeout与setInterval的区别？

　　setTimeout是在设置的时间后执行，只执行一次，而setInterval是每隔一段时间就执行一次

  9）叙述一个赖加载和轮播的实现原理

　　当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

　　不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）

　　原理：一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。

　　一个实例 http://www.cnblogs.com/LIUYANZUO/p/5679753.html

  10）document.onload 和 $(document).ready()的区别

　　window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
　　$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 

  11）json是什么？有什么作用

　　JSON是用来传输数据的字符串，涉及到怎么转成数据

　　把js转化成JSON字符串： stringify() 

　　把JSON的字符串转化成js:  parse() 和 eval_r()的区别

　　parse和eval的区别:

　　eval: 可以解析任何字符串变成js   （会把植入的木马也给解析了）

　　parse:只能解析JSON形式的字符串变成js 并且字符串中的属性要严格的加上引号 (安全性要高一些)

  12）闭包是啥/例子，原型链

　　闭包就是能够读取其他函数内部变量的函数。ction fn(){

　　function f1(){

　　　　var n=999;

　　　　function f2(){
                var m=100;
　　　　　　console.log(m); // 100
　　　　}
　　　　return f2

　　}

　　f1()()

　　在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。
　　“[[Prototype]]”作为对象的内部属性，是不能被直接访问的。

　　每个函数都有一个属性叫做prototype。（原型是函数的prototype属性的集合）

　　这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。

　　访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链。

　　

　　

  13）前端优化有哪些

　　一）内容层面

　　  1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

　　  2、避免重定向（/还是需要的）

 　　 3、切分到多个域名

　　  4、杜绝404

 

　　二）网络传输阶段

　　1、减少传输过程中实体的大小

  　　  1）缓存

  　　  2）cookie优化

 　　   3）文件压缩（Accept-Encoding：g-zip）

 

　　2、减少请求的次数

    　　1）文件适当的合并

    　　2）雪碧图

 

　　3、异步加载（并发,requirejs）

　　4、预加载、延后加载、按需加载

 

　　三）渲染阶段

　　 1、js放底部，css放顶部

　　 2、减少重绘和回流

       3、合理使用Viewport 等meta头部

       4、减少dom节点

       5、BigPipe

 

　　四）脚本执行阶段

　　1、缓存节点，尽量减少节点的查找

　　2、减少节点的操作（innerHTML）

　　3、避免无谓的循环，break、continue、return的适当使用

　　4、事件委托

  14）前端用过什么框架

　　web前端框架

　　主流vuejs angularjs reactjs

　　移动应用框架 

　　Ionic

　　The-M-Project [推荐]

　　Boilerplate [推荐]

　　mobl [推荐]

　　jQuery Mobile [推荐]

　　Sencha Touch [推荐]

 

　　前端js库　

　　Zepto.js

　　Node.Js

　　jqurey.js

　　前端模板引擎

　　jade.js

　　underscore.js

　　ejs

　　前端UI框架

　　1.Pure

　　2.bootstrap

　　3.EasyUI

　　开发工具

　　sublime  webstrom 等等

　　各种插件

  15）团队怎么协作

　　我直接说说我现在公司的情况，我这里的后端只提供接口，然后把接口的使用说明写在一个内部的网站上面，接口的使用说明包含这个接口对应哪个业务，接口接收前端需要提供的参数，接口返回给前端的数据，哪些参数是必须要填的，哪些是可以选填的。

　　如果前端在开发中对于接口有什么不懂的时候，随时和后端沟通，例如后端的接口提供的数据不方便渲染，或者接口的逻辑不够严谨，或者前端对于需要提供给后端的参数不知道或者不方便获取等问题。

　　当然在后端开发接口的时候，前端的工作就是先把静态页面完成，等接口好了，调用一下就好了。

　　整个开发流程最花时间的地方在于接口的调试，因为接口返回的数据会根据前端的提供的参数不同而会有不同的值，前端需要对于不同的值做出不同的页面反馈。一个简单的例子就是如果做一个瀑布流的加载，当加载完成的时候，你需要提醒用户，这个页面已经加载完了，这就需要前端在页面的底部加上一些提示。

　　而且这些调试的情况很多，等你调试玩了，你把代码提交上去给测试测试的时候，测试还会继续反馈一些bug，然后你再继续优化体验。

　　总结，前端和后端最多的沟通发生在前端需要非常清楚的了解后端提供的这个接口用于哪一块业务，用这个接口需要实现怎么的目的。

4 html5:离线储存

　　在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
      原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

  　 HTML5新标签

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio> 标签定义声音，比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<embed> 标签定义嵌入的内容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>

<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

5 css3:圆角、阴影、文字加特效、旋转、倾斜、缩放

　　.ele{border-radius:10px}

　　外阴影：box-shadow:X Y Npx #color;

　　内阴影：box-shadow:inset X Y Npx #color;

　　http://www.cnblogs.com/k1two2/p/4992985.html 旋转动画 

　　.ele{transform: scale(1.2) translateY(-40px);}倾斜

　　.ele{scale(x,y)} 对元素进行缩放
　　.ele{scaleX(1)}

　　.ele{scakeY(1)}

6 扩展：nodejs你了解么 应用场景

  　　Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
  　　Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 
  　　Node.js 的包管理器 npm，是全球最大的开源库生态系统。

NodeJS是近年来比较火的服务端JS平台，这一方面得益于其在后端处理高并发的卓越性能，另一方面在nodeJS平台上的npm、grunt、express等强大的代码与项目管理应用崛起，几乎重新定义了前端的工作方式和流程。

NodeJS的成功标志着它的强大，但是不是所有情况都适合应用NodeJS作为服务器端平台呢？

答案当然是否定的，而网上也是众说纷纭。那我们从原理出发了解一下NodeJS的适用情况。

在讲NodeJS之前我们不仿先看一下传统（以Apache为代表）的服务器端处理平台处理并发的方式。

 

1. Apache的多线程高并发模式

Apache是当前世界排名第一的Web服务端软件，它由于支持多线程并发而受到广大服务器技术选型者的欢迎。但发展到后来，Apache在一些WEB的大型应用中也渐渐暴露出它的缺点：阻塞。

那有的同学会奇怪，Apache不是多线程处理并发吗，为什么还会出现阻塞呢？

要明白这一点我们首先需要了解线程这个概念

1.1 什么是线程？

我们引用官方的解释：线程可以独立运行的最小的CPU单位，可以在同一个进程里并发运行，共享该进程下的内存地址空间（注意这个特点）。

我们可以看到同一个进程下的线程是会共享相同的文件和内存的（内存地址空间），所以大家可以想象，当不同的线程需要占用同一个变量时，根据先到先得的原则，先到的线程在运作时，后来的线程只能在旁边等待，也就是加入到了阻塞排队序列。所以这就是造成线程阻塞的原因。

因此，虽说进程可以支持多个线程，它们看似同时执行，但互相之间并不同步。一个进程中的多个线程共享相同的内存地址空间，这就意味着它们可以访问相同的变量和对象，而且它们从同一堆中分配对象。尽管这让线程之间共享信息变得更容易，因为程序设计者必须小心，确保它们不会妨碍同一进程里的其它线程。

了解了多线程并行的缺陷后，我们就可以更好地理解NodeJS的强大所在了。因为NodeJS是异步单线程的！

 

2. NodeJS的异步I/O原理

我们先来看一段Apache请求数据库的代码：

代码执行到第一行的时候线程会阻塞，等待query返回结果，然后继续处理。由于数据库查询、磁盘读写、网络通信等原因（所谓的I/O）阻塞时间会非常大（相对于CPU始终频率）。对于高并发的访问，一方面线程长期阻塞等待，另一方面为了应付新情求而不断添加新线程，会浪费大量系统资源，同时线程的增加也会也会占用大量的CPU时间来处理内存上下文切换。看看node.js怎么处理。

看到没，就四个字：异步回调。query的第二个参数是一个回调函数，进程执行到db.query的时候不会等待结果返回，而是直接继续执行下面的语句，直到进入事件循环。当数据库执行结果返回的时候会将事件发送到事件队列，等到线程进入事件循环后才会调用之前的回调函数。更专业的说法是异步I/O。只要单线程就可以。

 

那为什么NodeJS做到单线程，却可以实现异步呢？在这里我们先上一幅图，直戳图中的Event queue

看到没，NodeJS的工作原理其实就是事件循环。可以说每一条NodeJS的逻辑都是写在回调函数里面的，而回调函数都是有返回之后才异步执行的！

 

看到这里，你不禁会惊叹，NodeJS如果所有处理都异步，岂不是晓得飞了？错错错！当然不是，不要忘记，NodeJS实现这些的基础是单线程。没错，单线程！一条线程扛起所有操作！

你可以想象一下，NodeJS在寒风中面对着10万并发大军，OK，没问题，上来敌人一个扔到城里，上来一个又扔到城里。城里全民皆兵，可以很好地消化这些敌人。但如果上来一个类似于张飞赵云这样的人物，老Node心里一惨，和张飞大战300回合，把他打残了，再扔到城里。那后面的10万大军就得等这300回合。。。

所以这说明什么？说明NodeJS不是没有阻塞，而是阻塞不发生在后续回调的流程，而会发生在NodeJS本身对逻辑的计算和处理。我们已经知道，NodeJS的分发能力无比强大，可以循环事件进行异步回调。但如果在循环事件时遇到复杂的逻辑运算，那么单薄的单线程怎么支撑得起上百万的逻辑+并发呢？NodeJS它的所有I/O、网络通信等比较耗时的操作，都可以交给worker threads执行再回调，所以很快。但CPU的正常操作，它就只能自己抗了。 

说到这里，各位对NodeJS的特性估计也大概有个谱了。所以说适用的场景基本是呼之欲出了~！

 

3. NodeJS的应用场景

既然NodeJS处理并发的能力强，但处理计算和逻辑的能力反而很弱，因此，如果我们把复杂的逻辑运算都搬到前端（客户端）完成，而NodeJS只需要提供异步I/O，这样就可以实现对高并发的高性能处理。情况就很多啦，比如：RESTFUL API、实时聊天、客户端逻辑强大的单页APP，具体的例子比如说：本地化的在线音乐应用，本地化的在线搜索应用，本地化的在线APP等。

顺便提一下Apache，打压了这么多，给颗甜枣。Apache由于其多线程高并发共享内存地址空间的特性，那就意味着如果服务器足够强大，处理器足够高核，Apache的运作将会非常良好，所以适用于（并发）异步处理相对较少，后台计算量大，后台业务逻辑复杂的应用程序。

  你读过什么书

　　javascript 高级程序设计

  用过什么框架

　　vue
  你对前端怎么看

　　前端不在是过去的会切图 html div css js 所谓的切图仔了。随着技术的发展各种前端框架层出不穷，各种开发工具包 库的升级，使得前端开发者的路越来越难走，要掌握的知识越来越多，迭代更新技术是在是太快了，让我们前端跟不上。在有ajax, mvc的时代，前端不仅要做好页面 处理数据交互 一些业务逻辑的东西也交给了前端，也是对前端的一次革命，此时才对前端新的认识。前端的路很长，没有尽头。我们只有踏踏实实的工作学习，才会有更好的发展。所以在学习的过程中我们应该把基础知识扎实，理解透切，才能在实际应用中发挥作用。前端的未来还是很看好的，菜鸟们加油！