2015年终前端试题

365 年终 前端试题

1. Doctype作用?严格模式和混杂模式如何区分?他们有何意义?

• DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
• 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法
• 混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
• 触发严格模式很简单，就是正常的建立网页，声明正确的DTD，便是严格模式。而混杂模式的触发可以通过在HTML文档开始不声明DTD，或者在DOCTYPE前加入XML声明<?xml version=”1.0〃 encoding=”utf-8〃?>来实现。

2. html5有哪些新特性,移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?简述HTML5的离线存储

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。新特性包括:
  
  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素，比如 article、footer、header、nav、section
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术 webworker, websockt, Geolocation
• 移除的元素:
  
  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  • 对可用性产生负面影响的元素：frame，frameset，noframes；
• IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式,当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架:
  

   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 

3. 如何实现浏览器内多个标签之间的通信?

• 调用localstorge、cookies等本地存储方式

4. 介绍一下css的盒子模型

• 有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
• 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

5. css3有哪些新特性

• CSS3实现圆角border-radius:8px，阴影box-shadow:10px，对文字加特效text-shadow，线性渐变gradient，旋转transform

  transform:rotate(9deg) scale(0.85,0.90) >translate(0px,-30px)skew(-9deg,0deg);//旋转,缩放,定位,倾斜

• 增加了更多的CSS选择器,多背景,rgba

6. 如果需要手写动画,你认为最小时间间隔是多久,为什么?

• 多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

7. 谈谈This对象的理解

• this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。
• this一般情况下：是全局对象Global(在浏览器中为window对象)。作为方法调用，那么this就是指这个对象.
• 可以通过call和apply方法改变函数执行时的this指向

8. 什么是闭包,为什么要用它?

• 执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.
  

  function say667() {
     // Local variable that ends up within closure
     var num = 666;
     var sayAlert = function() { alert(num); }
     num++;
     return sayAlert;
  }
  var sayAlert = say667();
  sayAlert()//执行结果应该弹出的667
  function say667() {
     // Local variable that ends up within closure
     var num = 666;
     var sayAlert = function() { alert(num); }
     num++;
     return sayAlert;
  }
  var sayAlert = say667();
  sayAlert()//执行结果应该弹出的667

9. 异步加载的方式有哪些?

• defer(只支持IE)
• async
• 创建script，插入到DOM中，加载完毕后callBack