前端开发面试精选

AngularJS。

优点：

模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；
是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；
自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；
ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动。
补充：Angular支持单元测试和e2e-testing。

弊端：

验证功能错误信息显示比较薄弱，需要写很多模板标签，没有jQuery Validate方便，所以可以自己封装了验证的错误信息提示；
ngView只能有一个，不能嵌套多个视图，虽然有 angular-ui/ui-router · GitHub 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的；
对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快；
这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档 AngularJS ，对应的中文版本：Angular 1.0到1.2 迁移指南
ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery File Upload Demo
Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择。

什么是AJAX，简述异步请求与同步请求的不同？

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新填写！

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验。

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入
（缺少对象:XMLhttpRequest）
这时候如果有错误，只能再次发送请求，再次等待

异步请求：

比如当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服
务器做处理和响应，得到你的邮箱地址填写重复了，把响应结果发给页面，在这个过程中你仍然可以填写其
他内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整
个文本框标红，并没有重新刷你的页面，所有的填写错误会实时的显示出来，你也会实时的更正。

这个过程中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的
总结：页面上的操作和服务器端的操作互相之间不会造成阻塞

=====建立异步请求过程的4个步骤：============
a:new一个XHR对象
b:调用open方法
c:send一些数据
d:对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情

什么是闭包？为什么要使用闭包？

闭包就是能够读取其他函数内部变量的函数
作用 :一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

什么是冒泡？

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件
就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父
级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最
顶层，即document对象（有些浏览器是window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续
往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

HTML5CSS3有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

HTML5现在已经不是SGML的子集，主要是关于图像、位置、存储、地理定位等功能的增加。
新特性有：

?绘画canvas元素
?用于媒介回放的 video 和 audio 元素
?本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
?sessionStorage 的数据在浏览器关闭后自动删除
?语意化更好的内容元素，比如 article、footer、header、nav、section
?表单控件，calendar、date、time、email、url、search
CSS3实现圆角、，阴影、对文字加特效，增加了更多的CSS选择器，多背景rgba，新的技术有webworker、websockt、Geolocation。
移除的元素包括：
?纯表现的元素  basefont、big、center、font、 s、strike、tt、u；
?对可用性产生负面影响的元素  frame、frameset、noframes。

浏览器兼容H5问题解决方案：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式，当然最好的方式是直接使用成熟的框架：
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]-->

页面重构怎么操作？

把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构
网站为什么要进行重构（网站重构的好处）
a、使页面加载得更快速；
b、降低带宽带来的费用，节约成本；
c、让你在修改设计时更有效率而代价更低；
d、帮助你的整个站点保持视觉的一致性；
e、更利于搜索引擎的检索（符合SEO的规范）；
f、令站点更容易被各种浏览器和用户
编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

什么是ajax，为什么要使用Ajax?

答案：AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术：
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
为什么要用ajax：Ajax应用程序的优势在于：
通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

前端开发 面试 精选