前端面试题及答案！！！！！！！

h5 cs3 部分

1. 常用那几种浏览器测试？有哪些内核(Layout Engine)?
   答：
   浏览器：IE，Chrome，FireFox，Safari，Opera。
   　　 内核：Trident，Gecko，Presto，Webkit。

2. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
   答：
   行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
   块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
   兼容性：display:inline-block;*display:inline;*zoom:1;

3. 清除浮动有哪些方式？比较好的方式是哪一种？
   答：
   （1）父级div定义height。
   （2）结尾处加空div标签clear:both。
   （3）父级div定义伪类:after和zoom。
   （4）父级div定义overflow:hidden。
   （5）父级div定义overflow:auto。
   （6）父级div也浮动，需要定义宽度。
   （7）父级div定义display:table。
   （8）结尾处加br标签clear:both。

4. box-sizing常用的属性有哪些？分别有什么作用？
   答：
   box-sizing: content-box|border-box|inherit;
   content-box:宽度和高度分别应用到元素的内容框。
   border-box:通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5. HTML5 为什么只需要写 ？
   答：
   　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6. 页面导入样式时，使用link和@import有什么区别？
   答：
   　　（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
   　　（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
   　　（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

7. html5有哪些新特性？
   答：
   HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
   　　(1)绘画 canvas;
   　　(2)用于媒介回放的 video 和 audio 元素;
   　　(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
   　　(4)sessionStorage 的数据在浏览器关闭后自动删除;
   　　(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
   　　(6)表单控件，calendar、date、time、email、url、search;
   　　(7)新的技术webworker, websocket, Geolocation;

8. 简述一下你对HTML语义化的理解？
   答：
   　　用正确的标签做正确的事情。
   　　html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
   　　即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
   　　搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
   　　使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

9. 请写出一些前端性能优化的方式，越多越好
   答:
   1.减少dom操作
   2.部署前，图片压缩，代码压缩
   3.优化js代码结构，减少冗余代码
   4.减少http请求，合理设置 HTTP缓存
   5.使用内容分发cdn加速
   6.静态资源缓存
   7.图片延迟加载

10. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
    答：
    输入地址
    1.浏览器查找域名的 IP 地址
    2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
    3.浏览器向 web 服务器发送一个 HTTP 请求
    4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
    5.浏览器跟踪重定向地址
    6.服务器处理请求
    7.服务器返回一个 HTTP 响应
    8.浏览器显示 HTML
    9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
    10.浏览器发送异步请求

11. iframe有那些缺点？
    答：
    iframe会阻塞主页面的Onload事件；
    搜索引擎的检索程序无法解读这种页面，不利于SEO;
    iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
    使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

12. 什么情况会触发重排和重绘？
    答：
    添加、删除、更新 DOM 节点
    通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
    通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
    移动或者给页面中的 DOM 节点添加动画
    添加一个样式表，调整样式属性
    用户行为，例如调整窗口大小，改变字号，或者滚动

---

js部分
13. 介绍js的基本数据类型
　　答： Undefined、Null、Boolean、Number、String
　　
14. js设计模式
答：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

15. DOM怎样添加、移除、移动、复制、创建和查找节点。
    答：
    创建新节点
    　　createDocumentFragment()创建一个DOM片段
    　　createElement() 创建一个具体的元素
    　　createTextNode() 创建一个文本节点
    　　添加、移除、替换、插入
    　　appendChild()
    　　removeChild()
    　　replaceChild()
    　　insertBefore() 在已有的子节点前插入一个新的子节点
    　　 查找
    　　getElementsByTagName() 通过标签名称
    　　getElementsByName() 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
    　　getElementById() 通过元素Id，唯一性
16. null和undefined的区别？
    答：
    null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
    undefined：
    　　（1）变量被声明了，但没有赋值时，就等于undefined。
    　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
    　　（3）对象没有赋值的属性，该属性的值为undefined。
    　　（4）函数没有返回值时，默认返回undefined。
    null：
    　　（1） 作为函数的参数，表示该函数的参数不是对象。
    　　（2） 作为对象原型链的终点。
17. call() 和 apply() 的区别和作用？
    答：
    apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。
    call()的第一个参数是上下文，后续是实例传入的参数序列。
18. js跨域请求的方式，能写几种是几种
    答：
    1、通过jsonp跨域
    2、通过修改document.domain来跨子域
    3、使用window.name来进行跨域
    4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）
    5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。
    6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求
19. this对象的理解
    答：this总是指向函数的直接调用者（而非间接调用者）；
    　　如果有new关键字，this指向new出来的那个对象；
    　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。
20. 请描述一下 cookies sessionStorage和localstorage区别
    答：
    相同点：都存储在客户端
    不同点：
    1、存储大小
    cookie数据大小不能超过4k。
    sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
    2、有效时间
    localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
    sessionStorage 数据在当前浏览器窗口关闭后自动删除。
    cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
    3、 数据与服务器之间的交互方式
    cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
    sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
21. JS数组去重的几种常见方法

1、

function uniq(array){
    var temp = []; 
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}
------------------------------------------------------------------------------
2、
function uniq(array){
    var temp = [];
    var index = [];
    var l = array.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    return temp;
}
3、
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}
4、
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

21. JS哪些操作会造成内存泄露
    1、意外的全局变量引起的内存泄露
    2、闭包引起的内存泄露
    3、没有清理的DOM元素引用
    4、被遗忘的定时器或者回调
    5、子元素存在引起的内存泄露
22. 什么是闭包，如何使用它，为什么要使用它？
    闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
    所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
    使用闭包的注意点：
    由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
    闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。