前端面试题-基础理论汇总

HTML/CSS部分
1、什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。border, content padding background-image/color margin.

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a、b,i ,em 、span、strong、select、label、、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link

3、CSS实现垂直水平居中
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;

4、简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

5、什么是CSS Hack?
针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack

6、简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

7、px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

9、浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

JavaScript部分
怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createElement() //创建一个具体的元素
createAttribute() //创建一个属性节点
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。

function clone(obj) {
    var o;
    switch (typeof obj) {
        case "undefined":
            break;
        case "string":
            o = obj + "";
            break;
        case "number":
            o = obj - 0;
            break;
        case "boolean":
            o = obj;
            break;
        case "object": // object 分为两种情况 对象（Object）或数组（Array）
            if (obj === null) {
                o = null;
            } else {
                if (Object.prototype.toString.call(obj).slice(8, -1) 
                === "Array") {
                    o = [];
                    for (var i = 0; i < obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {};
                    for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            }
            break;
        default:
            o = obj;
            break;
    }
    return o;
}

如何消除一个数组里面重复的元素？

var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}

document.write(arr2); // 1,2,3,4,5,6

Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

请描述一下cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用，
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
共同点：都是保存在浏览器端，且同源的。
区别：
1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5. Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6. Web Storage 的 api 接口使用更方便。

如何理解原型？
每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途就是包含可以由特定类型的所有实例共享的属性和方法。prototype就是通过调用构造函数而创建的那个对象实例的原型对象。让原型对象等于另一个引用类型的实例。 subtype.prototype=new SuperType();

作用域链
当代码在一个环境中执行时，会创建变量对象的一个作用域链，保证对执行环境有权访问的所有变量和函数的有序访问。其本质是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。

如何理解闭包？
闭包就是能够读取其他函数内部变量的函数，定义在一个函数内部的函数”。
在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

跨域请求资源的方法有哪些？
JSONP，动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行
Proxy代理，CORS，在Response的HTTP头中加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin。
图像Ping，comet

垃圾回收机制与内存管理
垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。标记清除，引用计数
、Javascript引擎基础GC方案是（simple GC）：mark and sweep（标记清除），即：
● （1）遍历所有可访问的对象。
● （2）回收已不可访问的对象。
分代回收（Generation GC），通过区分“临时”与“持久”对象；多回收“临时对象”区（young generation），少回收“持久对象”区（tenured generation），减少每次需遍历的对象，从而减少每次GC的耗时；增量GC这个方案的思想很简单，就是“每次处理一点，下次再处理一点，如此类推”。

js内存泄露的几种情况
内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。
1、意外的全局变量
js中如果不用 var 声明变量,该变量将被视为 window 对象(全局对象)的属性,也就是全局变量.所以,你调用完了函数以后,变量仍然存在,导致泄漏.，加上 ‘use strict’ 启用严格模式
2、被遗忘的定时器或者回调
3、没有清理的DOM元素引用、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。btn.onclick = null;或者采用事件委托
4、闭包可以维持函数内局部变量，使其得不到释放。
定义事件回调时，由于是函数内定义函数，并且内部函数–事件回调的引用外暴了，形成了闭包。解决之道，将事件处理函数定义在外部，解除闭包

一次完整的HTTP事务是怎样的一个过程
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源

HTTP的状态码有哪些？
status属性表示从服务器返回的响应状态码。例如：200表示成功，404表示未找到。
1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。
2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头：客户端错误。这类状态码代表了客户端看起来可能发生错误，妨碍了服务器的处理。
5字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生。
200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误

HTTPS是如何实现加密？
1、对通信的加密：
HTTP中没有加密功能，但是可以通过和SSL(Secure Socket Layer，安全套接层)组合使用，加密通信内容。使用SSL建立安全通信线路后，就可以在这条线路上进行HTTP通信了。与SSL组合使用的HTTP被称为HTTPS（HTTP Secure，超文本传输安全协议）。
Web攻击技术
（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

如何优化图像、图像格式的区别
一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈 的则需要采用PNG。用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小

正则表达式
写一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str) {
if (str && typeof str === “string”) {
return str.replace(/(^\s*)|(\s*)$/g,”“); //去除前后空白符 } } 使用正则表达式验证邮箱格式 var reg = /^(\w)+(.\w+)*@(\w)+((.\w{2,3}){1,3})$/;
var email = “example@qq.com”;
console.log(reg.test(email)); // true

//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/

//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/

//验证手机号
/^1[3|5|8|7]\d{9}$/

//验证URL
/^http:\/\/.+./

//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/

//匹配中文字符的正则表达式
/[\u4e00-\u9fa5]/

//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/

对前端工程师这个职位你是怎么样理解的？
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。

平时会遇到哪些浏览器兼容性问题？
（延伸的问题：你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些?怎么会出现?解决方法是什么?）
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

经常遇到的浏览器兼容问题：
（1）.在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用
（2）.a标签对里不能嵌套a标签对
（3）.若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。
（4）.ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
（5）.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
（6）.关于手形光标. cursor: pointer. 而hand 只适用于 IE.

9、js的理解
js是一种基于对象和事件驱动，并具有安全性的脚本语言。
quickSort函数

var quickSort=function(arr){
    if(arr.length<=1){
        return arr;
    }
    var pivotIndex=Math.floor(arr.length/2);
    var pivot=arr.splice(pivotIndex,1)[0];
    var left=[];
    var right=[];
    for (var i=0;i<arr.length;i++){
        if(arr[i]<pivot){
            left.push(arr[i]);
        }else{
            right.push(arr[i]);
        }
    }
    return quickSort(left).concat([pivot],quickSort(right));
};

var arr=[85,24,63,45,17,31,96,50];
console.log(quickSort(arr));

数组去重

function unique(arr){
    var ret = [];
    for(var i = 0, len = arr.length; i < len; i++){
        var item = arr[i];
        if(ret.indexOf(item) === -1){
            ret.push(item);
        }
    }
    return ret;
}

var arr = [1,3,5,"1",5,9];
var r = unique(arr);
console.log("排序后：" + r);

XHTML 与 HTML 之间的差异
● XHTML 元素必须被正确地嵌套。
● XHTML 元素必须被关闭。
● 标签名必须用小写字母。
● XHTML 文档必须拥有根元素。

HTML5 中的一些有趣的新特性：
● 用于绘画的 canvas元素
● 用于媒介回放的 video 和 audio 元素
● 对本地离线存储的更好的支持
● 新的特殊内容元素，比如 article、footer、header、nav、section
● 新的表单控件，比如 calendar、date、time、email、url、search
删除：
● 纯表现的元素,对可用性产生负面影响的元素

Javascript下IE与Firefox下的差异兼容写法总结
一、脚本差异：
1、事件绑定：addEventListener 与 attachEvent 事件处理函数中this指向不同， IE中指向window
2、获取事件对象 ：事件处理函数 window.event
3、获取触发事件的DOM元素： target srcElement
4、阻止默认行为： e.preventDefault（） e.returnValue= false
5、阻止冒泡：e.stopPropagation() e.cancelBubble = true;
6、获取样式信息：getComputedStyle（obj,null）.width currentStyle.width
7、实例化XHR对象 new XMLHttpRequest（） newActiveXObject（）
8、获取DOM节点的父节点、子节点的方式：
其他：parentNode parentNode.childNodes IE：parentElement parentElement.children
9、获取鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。

1.不加样式控制的情况下，各自的margin 和padding差异较大。解决方案：CSS里 *{margin:0;padding:0;}
4、cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大。
解决方法：使用指定的字体大小如14px。
CSS HACK的方法
首先需要知道的是：
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

ES6主要都有哪些语法特性？stage-0/1/2/3又是什么？

以下是ES6排名前十的最佳特性列表（排名不分先后）：
Default Parameters（默认参数） in ES6
Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6
Destructuring Assignment （解构赋值）in ES6
Enhanced Object Literals （增强的对象文本）in ES6
Arrow Functions （箭头函数）in ES6
Promises in ES6
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
Classes（类） in ES6
Modules（模块） in ES6

link和@import的区别
● link属于html标签，除了加载css还可以定义RSS，定义rel连接属性，引入图标，而@import是css范畴,只能加载css。
● 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
● link是html标签，因此没有兼容性，@import是在CSS2.1提出的，低版本的浏览器不支持。
● link方式样式的权重高于@import的。
● ink支持使用Javascript控制DOM去改变样式；而@import不支持。

浏览器内多个标签页之间的通信
使用localStorage.setItem(key,value)
使用cookie+setInterval

position:absolute和float会隐式的改变display类型
position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display:none除外），只要设置了position:absolute或float，都会让元素以display:inline-block的方式显示，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，仍然无效。

HTML与XML的区别
　　XML是被设计用来描述数据的，重点是:什么是数据，如何存放数据。
　　HTML是被设计用来显示数据的，重点是:显示数据以及如何显示数据更好上面。
　　
html常见兼容性问题
1.IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。加入_display：inline
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.IE z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; /* for IE 8*/
}
10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片