前端常见面试题总结---第二篇

1. HTML与XHTML——二者有什么区别

所有的标记都必须要有一个相应的结束标记

所有标签的元素和属性的名字都必须使用小写

所有的 XML 标记都必须合理嵌套

所有的属性必须用引号 “” 括起来

把所有 < 和 & 特殊符号用编码表示

给所有属性赋一个值

不要在注释内容中使用 “–”

图片必须有说明文字

2 html常见的兼容性问题

1.浏览器默认的margin和padding不同

解决办法：

*{margin:0;padding:0;}

2.IE的双边距：块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大

**出现条件：**block元素+浮动+margin。

解决办法：

在float标签样式控制中加入 display:inline，将其转化为行内属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示

解决方法：可通过加入 CSS 属性

-webkit-text-size-adjust: none;

解决

4 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了

解决方法：改变CSS属性的排列顺序 L-V-H-A

5 上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。

解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

3 浮动的原理和清除浮动的技巧

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动的元素引起的问题：

1. 父元素的高度无法被撑开，影响与父元素同级的元素

2. 与浮动元素同级的非浮动元素会跟随其后

3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动

1. 使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

父级div定义 伪类:after 和 zoom

<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

4 DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1.创建新的节点

createDocumentFragment()//创建一个DOM片段
createElement()//创建一个具体的元素
createTextNode()//创建一个文本节点

2 添加，移除，替换，插入

appendChild()
removeChild()
replaceChild()
insertBefore()

3查找

getElementsByTagName()
getElemntsByName()//通过元素的name属性
getElementById()//通过元素的id

5 html5的新属性和移除了那些属性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件，calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation

移除的元素：

1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

2. 对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架）：

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

6 iframe的优缺点？

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件

2. 即时内容为空，加载也需要时间

3. 没有语意

7 如何对网站的文件和资源进行优化？三种减少页面加载时间的方法？

优化：

1. 文件合并

2. 文件最小化/文件压缩

3. 使用 CDN 托管

4. 缓存的使用（多个域名来提供缓存）

减少页面的加载时间：

1. 优化图片

2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3. 优化CSS（压缩合并css，如 margin-top, margin-left…)

4. 网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）

5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了）

6. 减少http请求（合并文件，合并图片）

8 null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0

undefined是一个表示”无”的原始值，转为数值时为NaN

当声明的变量还未被初始化时，变量的默认值为undefined

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

undefined表示 “缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

1. 变量被声明了，但没有赋值时，就等于 undefined

2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined

3. 对象没有赋值的属性，该属性的值为 undefined

4. 函数没有返回值时，默认返回 undefined

null表示“没有对象”，即该处不应该有值。典型用法是：

1. 作为函数的参数，表示该函数的参数不是对象

2. 作为对象原型链的终点

9 new操作符具体干了什么呢?

创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

属性和方法被加入到 this 引用的对象中

新创建的对象由 this 所引用，并且最后隐式的返回 this

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

10 对JSON 的理解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

{"age":"12", "name":"back"}

11 js延迟加载的方式有哪些？

1. defer和async

没有defer或async，浏览器会立即加载并执行指定的脚本，立即是在渲染该script标签下的文档元素之前，不等待后续载入的文档元素，读到就加载并执行

有async，加载和渲染后续文档元素的过程和script.js加载和执行并行执行（异步）

有defer，并行，但是在所有元素解析完成后执行。

2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

3. 按需异步载入js

12 如何解决跨域问题?

1. jsonp（jsonp 的原理是动态插入 script 标签）

2. document.domain + iframe

3. window.name、window.postMessage

4. 服务器上设置代理页面

13 documen.write和 innerHTML 的区别

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

14 哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包

控制台日志

循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

15 有哪些性能优化的方法

减少http请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器

前端模板 JS + 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数

用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

当需要设置的样式很多时设置 className 而不是直接操作 style

少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作

避免使用 CSS Expression（css表达式)又称 Dynamic properties(动态属性)

图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳