面试题综合

---

1.HTML5的页面结构同HTML4或者更前的HTML有什么区别？

 答：一个典型的WEB页面包含头部，脚部，导航，中心区域，侧边栏。现在如果我们想在在HTML4的HTML区域中呈现这些内容，我们可能要使用DIV标签。
但是在HTML5中通过为这些区域创建元素名称使他们更加清晰，也使得你的HTML更加可读
以下是形成页面结构的HTML5元素的更多细节：（注意主要考的是标签语意化）
    <header>：代表HTML的头部数据
    <footer>：页面的脚部区域
    <nav>：页面导航元素
    <article>：自包含的内容
    <section>：使用内部article去定义区域或者把分组内容放到区域里
    <aside>：代表页面的侧边栏内容

2.HTML静态页面出现中文乱码如何解决？

 答：<meta charset="UTF-8" />

---

3块属性标签与行属性标签的区别？哪些标签是块属性的，哪些是行的?

 答：在标准文档流里面，块级元素具有以下特点：
      ①总是在新行上开始，占据一整行；  
      ②高度，行高以及外边距和内边距都可控制；
      ③宽如果不设置,默认是父级的宽度，与内容无关；
      ④它可以容纳内联元素和其他块元素。

      行内元素的特点：
      ①和其他元素都在一行上； 
      ②高，行高及外边距和内边距部分可改变；
      ③宽度只与内容有关；
      ④行内元素只能容纳文本或者其他行内元素。
      不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，
      也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

---

4清除浮动的方法

 答： 1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。
      2. 使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。
      3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。使用中需注意以下几点。
      一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
      二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。
      4.给浮动元素的父元素设置固定的高度
      5.使用befor和after双伪元素清除浮动（扩展内容）

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

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

---

6浅谈一下闭包

 答：闭包：有权访问函数的局部变量的函数

一个函数有权访问另外一个函数作用域的变量

      闭包优点：避免全局污染
      闭包缺点：造成内存泄漏 (内存泄漏：本应该释放内存，而不能释放)
      创建闭包：外层函数创建一个受保护的局部变量
                      内层函数操作外层函数的局部变量
	      外层函数将内层函数返回到外部
	      内层函数在外部反复调用

      闭包的外层函数调用几次，就创建几个受保护的局部变量副本
      闭包的形成：由于内层函数在外部被调用，而内层函数内部引用外层函数的局部变量，导致外层函数的局部变量无法释放，从而形成了闭包

7一个CSS文件如果过大的话，加载会很慢，占用过大带宽，如果解决？

 答：1、将CSS文件拆分多个CSS文件
       2、压缩css
       3、去取冗余(多余)的样式
       4、减少css选择器层级

---

8事件委托是什么

 答：符合 W3C 标准的事件绑定 addEventLisntener /attachEvent 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
事件委托的优点:
a.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
b.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

9列出 display 的值，说明他们的作用。position 的值， relative 和 absolute 定位原点是？

 答：block 块类型元素一样显示。 
      none 缺省值。向行内元素类型一样显示。 
      inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
      list-item 象块类型元素一样显示，并添加样式列表标记。
      position 的值 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
      fixed （老 IE 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。 
      relative 生成相对定位的元素，相对于其正常位置进行定位。 
      static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）。
      inherit 规定从父元素继承 position 属性的值。

---

10面向对象以及原型

 答：面向对象：将需求抽象成一个对象，然后对其成员进行分析
      面向对象三大特征：封装、继承、多态
      面向对象的第一步是创建构造函数，第二步通过构造函数创建对象实例
      原型：对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象，由于原型本身也是对象，又有自己的原型，所以形成了一条原型链。
                函数的原型是 prototype
                对象的原型是 __proto__
                对象的顶级原型为null， 即Object.prototype.__proto__ == null

11浏览器的渲染页面机制

 答：浏览器解析HTML文档和CSS样式表构建DOM树和和CSSOM树(没有设置节点外观样式)
      浏览器结合DOM树和CSSOM树构建渲染树(重绘元素)
      浏览器在渲染树内对每个渲染元素进行布局处理，计算出每一个元素的大小和位置(回流元素)
      遍历渲染树将实际的像素显示到屏幕(确认最终的回流元素样式)

---

12$(function() {}) 和 window.onload区别

 答：$(function() {})：页面html,css,js等资源加载完成后触发
      window.onload：页面html,css,js,图片等资源加载完成后触发

13重绘和回流

 答：重绘
	当页面的元素需要更新属性，新的属性对元素的外观，风格的产生影响，这个更新的过程称为重绘
	比如设置元素的background，color等等，都会重绘元素
      回流
	当页面的元素因为尺寸，位置、布局，隐藏等改变而需要浏览器重新构建的过程，这个重构的过程称为回流
	比如设置元素的width，height，float，position等等，都会回流元素

---

14typeof与instanceof的区别？

 答：typeof 返回值是一个字符串，用来说明变量的数据类型
      typeof 一般只能返回 number,boolean,string,function,object,undefined,symbol
      typeof 不能用于判断 null, {}, []

      instanceof 用于判断一个变量是否属于某个对象的实例

15js继承常用有哪些继承方式？

 答：类式继承：子构造函数的原型对象继承父构造函数以及父构造函数的原型
      构造函数式继承：子构造函数继承父构造函数，不能继承父构造函数的原型
      组合式继承：类式继承 + 构造函数式继承
      多继承：子构造函数继承多个父构造函数

---

16创建ajax的四个步骤、ajax的状态码、ajax的优点

 答：创建ajax的四个步骤
		创建ajax对象
		监听ajax对象请求的状态变化
		建立服务连接
		发起请求
      ajax的状态码
	               0: 请求未初始化
                               1: 已发送请求
                               2: 已接收请求
                               3: 请求处理中
                               4: 请求完成并且已响应
      ajax的优点：在不刷新整个页面情况下，可以局部更新数据

17函数节流和函数防抖

 答：函数节流：限制一个函数在一定时间内只能执行一次
      函数防抖：触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行的等待时间
      函数防抖使用场景: 
		实时搜索 比如 oninput事件
		改变窗口大小: 比如 onresize事件
		滚动：比如 onscroll

---

18内部插入节点和外部插入节点

 答：内部插入节点，节点关系为父子关系
		在父节点尾部添加一个子节点
		父节点.append(子节点)
		子节点.appendTo(父节点)

		在父节点顶部添加一个子节点
		父节点.prepend(子节点)
		子节点.prependTo(父节点)
      外部插入节点，节点关系为同胞节点
		在节点前面添加节点
		节点## before(节点2);
		节点## insertBefore(节点1);

		在节点后面添加节点
		节点## after(节点2);
		节点## insertAfter(节点1);

19$(this)和this关键字在jQuery中有何不同？

 答：$(this)返回一个jQuery对象，可以调用jQuery方法，比如用text()获取文本
      而this代表当前元素，是JavaScript关键词中的一个，表示上下文中的当前DOM元素，不能调用jQuery 方法，直到被$()函数包裹，例如$(this)

---

20Flash、Ajax各自的优缺点，在使用中如何取舍？

 答：Flash ajax对比
      (1)Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
      (2)ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
      共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM

21解释jsonp的原理，以及为什么不是真正的ajax？

 答：①. jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。
      ②.为什么不是真正的 ajax?    
          ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
          jsonp的核心 ： 动态添加<script>标签来调用服务器提供的js脚本。
      ③ajax和jsonp的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，
      因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
      还是有不同点的：
      ④. 实质不同
　        ajax的核心是通过xmlHttpRequest获取非本页内容
　        jsonp的核心是动态添加script标签调用服务器提供的js脚本
      ⑤. ajax通过服务端代理一样跨域
        　jsonp也并不排斥同域的数据的获取
      ⑥ .jsonp是一种方式或者说非强制性的协议
　       ajax也不一定非要用json格式来传递数据　
      ⑦ .jsonp只支持get请求，ajax支持get和post请求

---

22get与post两种方式的优缺点。

 答：get:
            get是从服务器上获取数据，post是向服务器传送数据；
            get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB；
            get安全性非常低，post安全性较高。但是执行效率却比Post方法好；