前端基础面试题

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

选用标签的标准

如果要支持比较老的浏览器则不使用新标签。
手机平板等网页可以使用新标签
不管什么情况下，都应该优先根据语义来选用标签
根据搜索引擎优化的要求和建议选用标签

行内元素有哪些？块级元素有哪些？

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

link 和@import 的区别是？

link属于XHTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
link方式的样式的权重高于@import的权重.

浏览器的内核分别是什么?

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

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

对语义化如何理解？

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

iframe有那些缺点？

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

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie在浏览器和服务器间来回传递。 -
sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；- sessionStorage和localStorage各自独立的存储空间；
localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）

可继承的样式： font-size font-family color, UL LI DL DD DT;

不可继承的样式：border padding margin width height ;

优先级就近原则，同权重情况下样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:
!important > id > class > tag important 比内联优先级高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 控制表单控件的禁用态。
:checked单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:0 auto属性
div{ width:200px; margin:0 auto; }
居中一个浮动元素
确定容器的宽高宽500 高 300 的层设置层的外边距

.div {   
    Width:500px ; 
    height:300px;//高度可以不设  
    Margin: -150px 0 0 -250px;  
    position:relative;相对定位  background-color:pink;//方便看效果  
    left:50%;  
    top:50%;
}

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

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

为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是：
* {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }

css定义的权重

以下是权重的规则：
标签的权重为1
class的权重为10
id的权重为100
以下例子是演示各种定义的权重值：

权重为1: div{}
权重为10: .class1{}
权重为100: #id1{}
权重为100+1=101: #id1 div{}
权重为10+1=11: .class1 div{}
权重为10+10+1=21 .class1 .class2 div{}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

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

介绍一下CSS的盒子模型？

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).

对WEB标准以及W3C的理解与认识？

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

JS中事件传播过程是什么？怎么阻止事件传播？

事件传播过程中是事件的整个响应过程，分为捕获和冒泡两个阶段。
阻止事件传播可以用ev.stopPropagation()以及ev.preventDefault()

插件机制的定制

第一种方法: 用来扩充 jQuery 对象。
jQuery 代码:


jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

结果:

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

第二种方法：在jQuery命名空间上增加两个函数。

// jQuery 代码:
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

结果:

jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

XHTML和HTML有什么区别？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。标签名必须用小写字母。
XHTML 文档必须拥有根元素。

jquery 支持哪些动画效果

fadeIn/fadeOut/fadeToggle(渐进渐出)
hide/show/toggle(隐藏显示)
SlideUp/SlideDown/SlideToggle(上下滑动)
animate()自定义

call和apply区别？call和bind区别？

apply只有两个参数，第二个参数是一个参数数组
call可以有n个参数，第二个参数至之后是该调用函数的参数

bind会创建一个新函数，成为绑定函数，第二个及之后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
bind不会立即调用，其他两个会立即调用

怎么判断一个变量是否是数组

instanceof操作符或者constructor属性

如何清除浮动

clear:both
父元素 overflow:auto; zoom:1
伪类after content: "";

原型和原型链

如果在构造函数中为直接为对象添加属性和方法，会导致每个对象都包含一份自己的属性和方法，当大量创建对象时则会浪费很多的存储空间，而将属性和方法添加到构造函数的原型中就可以使通过该构造函数创建出来对象公用这些属性和方法，即原型实现了属性和方法的共享。

//为构造函数指定原型
ObjFunc.prototype = object.create(baseFunc);
ObjFunc.prototype.constructor = baseFunc

当访问对象的属性和方法时，JS运行时会首先在该对象自身中查找要使用的属性和方法，找到就调用；如果找不到，则会去原型中查找。因此原型的属性和方法虽然是共享的，但他们的优先级要低一点。

JS运行时在查找可调用的属性和方法时并不只查找一层原型，因为原型本身也是对象，因此JS运行时还会查找原型对象的原型，一直查找到Object的原型为止，这样就形成了一个链式结构，成为原型链。通过原型链可以形成类似继承的效果。

但JS的继承与其他编程语言中的继承还是有区别的，在其他编程语言中，任何类的对象都是由一个实例构成的，属性值也只有一个值，不管继承多少层。而JS通过原型链形成的继承是由多个实例构成的链，属性值也可以有多个值，继承的层次越多，涉及的实例越多，值也越多！

JS的原型链在Angular中还被用于构造作用域链。

闭包以及闭包的性质

闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量。
性质：允许定义匿名函数，可以捕获引用环境、并把引用环境和函数代码组成一个可调用的实体

内存泄漏

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

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

函数节流以及使用场景

函数节流就是使用定时器。当我触发一个时间时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行。

使用场景

onresize事件
鼠标拖拽事件
点透的处理

gulp和webpack

gulp是基于流的自动化构建工具，但不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能。

JSONP是什么？如何支持的

跨域请求
浏览器通过没有限制跨域的script标签，指定其src属性为特殊的URL，对方的服务器针对这个URL请求会进行特殊处理
$.getJson()

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

结构层 HTML 表示层 CSS 行为层 js

写出几种IE6 BUG的解决方法

1.双边距BUG float引起的使用display
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.ie 6 不支持!important

img标签上title与alt属性的区别是什么?

Alt 当图片不显示是用文字代表。
Title 为该属性提供信息

解释css sprites，如何使用。

Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，增加无意义的标签)
2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
3.是用afert伪元素清除浮动(用于非IE浏览器)

javascript的typeof返回哪些数据类型

Object number function boolean underfind

例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number）
隐式（== – ===）

数组操作

split()切割成数组 join()将数组转换成字符串
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

38.事件绑定和普通事件有什么区别

IE和DOM事件流的区别

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

IE和标准下有哪些兼容性的写法

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

ajax请求的时候get 和post方式的区别

一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑使用parse更靠谱

闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。并且让这些变量始终保存在内存中

注意点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页性能的问题，在IE中可能导致内存泄漏。解决方法就是在退出函数之前，把不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部函数当作它的私有属性，这时一定要小心，不要随便改变函数内部变量的值。

HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信? (阿里)

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

webSocket如何兼容低浏览器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR

网页验证码是干嘛的，是为了解决什么安全问题。

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。

i内容展示为斜体，em表示强调的文本；

Physical Style Elements -- 自然样式标签
b, i, u, s, pre
Semantic Style Elements -- 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

如何阻止事件冒泡和默认事件

canceBubble return false

添加删除替换插入到某个接点的方法

obj.appendChild()
obj.innersetBefore
obj.replaceChild
obj.removeChild

（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

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

动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？

两等号判等，会在比较时进行类型转换；
三等号判等(判断严格)，比较时不进行隐式类型转换,（类型不同则会返回false）；

Object.is 在三等号判等的基础上特别处理了 NaN 、-0 和 +0 ，保证 -0 和 +0 不再相同，
但 Object.is(NaN, NaN) 会返回 true.

Object.is 应被认为有其特殊的用途，而不能用它认为它比其它的相等对比更宽松或严格。

javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

编写一个数组去重的方法

ES5:

var array = [1, '1', 1, 2, 3, 2, 4]; var tmpObj = {}; var result = []; array.forEach(function(a) { var key = (typeof a) + a; if (!tmpObj[key]) { tmpObj[key] = true; result.push(a); } }); console.log(result); // => [1, "1", 2, 3, 4]

或

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]); } } console.log(arr2); // 1,2,3,4,5,6

ES6:

let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4])); console.log(array); // => [1, 2, 3, 4]

jQuery:去重排序

$.uniqueSort(document.getElementsByTagName("div"))

实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

创建XMLHttpRequest对象,也就是创建一个异步调用对象.

创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

设置响应HTTP请求状态变化的函数.

发送HTTP请求.

获取异步调用返回的数据.

使用JavaScript和DOM实现局部刷新.

用纯CSS创建一个三角形的原理是什么？

#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }

display:inline-block 什么时候会显示间隙？(携程)

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，
这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，
提高了webserver的http请求的解析速度。

对BFC规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

介绍js的基本数据类型。

Undefined、Null、Boolean、Number、String

console.log(typeof undefined); //undefined console.log(typeof ""); //string console.log(typeof 123); //number console.log(typeof true); //boolean console.log(typeof null); //object 引用类型 console.log(typeof {}); //object 引用类型 console.log(typeof []); //object 引用类型 console.log(typeof new Number(5)); //object 引用类型 console.log(typeof function(){}); //function 函数引用类型 console.log(typeof console.log); // function 函数引用类型

函数的几种定义方法？

function a(){},
var a = function(){}

说几条写JavaScript的基本规范？

1.不要在同一行声明多个变量。
2.请使用 ===/!==来比较true/false或者数值
3.使用对象字面量替代new Array这种形式
4.不要使用全局函数。
5.Switch语句必须带有default分支
6.函数不应该有时候有返回值，有时候没有返回值。
7.For循环必须使用大括号
8.If语句必须使用大括号
9.for-in循环中的变量应该使用var关键字明确限定作用域，从而避免作用域污染。

对象的定义方法？

a = new Object(),
a = {}

类的定义方法（prototype）（继承）

Var a = function(){}
a.prototype = {}
new a();

this 关键字的指向

obj.foo() == obj //方法调用模式,this指向obj
foo() == window; //函数调用模式,this指向window
new obj.foo() == obj //构造器调用模式, this指向新建立对象
foo.call(obj) == obj;//APPLY调用模式,this指向obj

异步ajax的优缺点都有什么？

优点：
相对于同步ajax：不会造成UI卡死，用户体验好。
相对于刷新页面，省流量
缺点：
后退按钮无效；
多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。
搜索引擎不友好
数据安全

Javascript如何实现继承？

通过原型和构造器

如何创建一个对象?

function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }

谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

事件是什么？IE与火狐的事件机制有什么区别？如何阻止冒泡？

（1）我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
（2）事件处理机制：IE是事件冒泡、火狐是事件捕获；
（3） ev.stopPropagation();

如何判断一个对象是否属于某个类？

使用instanceof （待完善）

if(a instanceof Person){ alert('yes'); }

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

对JSON 的了解？

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

简述一下src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

简述同步和异步的区别

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

px和em的区别

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

什么叫优雅降级和渐进增强？

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

在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

function log(){ var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法，将argument转化为真正的数组 args.unshift('(app)'); console.log.apply(console, args); };

Javascript中callee和caller的作用？

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

请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

数组快速排序

关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为”基准”（pivot）。
（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。

function quickSort(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)); }

ES6:

let arr1 = arr.sort((a, b) =>a - b) // 从小到大

统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。

var str = "aaaabbbccccddfgh"; var obj = {}; for(var i=0;istr.length;i++){ var v = str.charAt(i); if(obj[v] & obj[v].value == v){ obj[v].count = ++ obj[v].count; }else{ obj[v] = {}; obj[v].count = 1; obj[v].value = v; } } for(key in obj){ document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1 }

一次完整的HTTP事务是怎样的一个过程？

基本流程：

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

浏览器兼容性和web App页面

浏览器的兼容性主要通过测试来解决

直接使用框架也可以有效的避免兼容性的问题

重置样式表也可以抹平各个浏览器之间的差异

模块化

JS作用域隔离机制较弱，因此使用不当会产生命名冲突的问题，尤其是在单页应用日益复杂、使用的第三方框架越来越多的情况下产生冲突，而且JS本身没有直接提供使用代码加载其他脚本文件的机制。

高并发网页

减少文件字节数

使用浏览器端及网络缓存技术

将CSS/JS/图片等资源与HTML分离到不同的服务器上（分散请求）

使用CDN

服务器缓存

减少HTTP的请求次数，如将图片整合成大图片，将JS、CSS打包成一个文件

文件压缩后传输

集群（负载均衡网路硬件解决方案/反向代理软件解决方案，增强服务端处理能力，属于服务端技术）

不规律高并发（云计算弹性资源池，按需分配资源以解决平时资源利用不充分的问题，属于服务端技术）

大规模数据存储和计算（需用大数据技术、属于服务端技术）
大规模实时数据处理（流式大数据技术，属于服务端技术）

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

webscoket、sharedworker也可以调用localstorage、cookies等本地存储

websocket如何兼容低浏览器

Adobe Flash Socket、ActiveX HTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR

HTTP状态码

100 continue继续，一般在发送post请求时，已发送http header之后服务器将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
302 found 临时性重定向
400 Bad Request服务器无法理解请求格式，客户端不应当尝试再次使用相同的内容发起请求
401 请求未授权
403 禁止访问
404 未找到
500 Internal Server Error最常见的服务器错误

SEO

合理的title、description、keywords

语义化的HTML标签，符合W3C标准

重要内容HTML代码放在前面

少用iframe

非装饰性的图片必须加上alt

提高网站速度

重要内容不要用js输出

如果需要手动写动画，你认为最小时间间隔是多少？为什么？

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

闭包用途

可以读取函数内部的变量

让这些变量的值始终保持在内存中

同源策略和跨域访问

因为在同一个浏览器窗口中能够同时打开多个网站的页面，而且它们都处于同一个会话中，如果不禁止跨域访问则会造成用户隐私数据泄露和登录身份冒用的问题，所以浏览器会使用同源策略限制跨域访问。

在浏览器中，通过JS代码访问不同域名下的URL或者iframe时，会被禁止访问。而不是通过JS代码进行的跨域访问不存在跨域问题！比如跨域加载图片，引用JS文件，下载各种文件，使用iframe跨域嵌入其他网站的页面都是可以的。

跨域访问被禁止有时会给应用开发带来阻碍，但在符合特定条件时也有相应的方法在保证安全的情况下能够解决跨域访问问题：

在对方服务器的响应头中添加Access-Control-Allow-Origin允许哪些域进行跨域访问，它的指可以是域名或者*。（这种方案只有在对方信任、不在乎、安全的情况下才能使用。）

如果域名都是同一个根域名的子域名，则可以使用document.domain="根域名"来统一JS执行环境的域名。（这种方案只能在同一个公司和组织的内部使用）

使用JSONP（JSON Padding）。浏览器不限制通过script标签引入其他网站的脚本，所以可以通过JS向页面动态添加一个script标签并指定其src为一个特殊的url,对方的服务器针对这个url的请求，会进行特殊的处理。

将要请求的URL发送给自己的服务端，让服务端发起请求（服务端没有跨域限制），服务端请求成功后，将数据再传给浏览中的JS(这种方式叫做服务端代理请求，这种方式只要自己的服务端支持一下就ok了，是比较常用的方案，没有任何限制)。

使用任何可以利用的浏览器端中间机制实现跨域交换数据。

路由

成熟的路由解决方案是利用URL中的hash fragment来的变化来触发“页面切换”，这种将URL与页面映射起来的机制被成为路由，路由中最关键的技术是监听URL的变化，支持hashchange事件大的浏览器很容易做到这一点，不支持hashchange事件的浏览器通常使用setInterval大概以100ms/次的频率轮询检查URL的变化。

模块化

JS的作用域隔离机制较弱，因此使用不当时会产生命名冲突的问题，尤其是在单页应用日益复杂、使用的第三方框架越来越多的情况下更容易产生冲突的问题。而且JS本身没有直接提供使用代码加载其他脚本文件的机制。因此产生了JS模块化的概念。

JS模块化通常要提供两个方案：

定义JS模块的方案。

按需加载模块及其依赖模块的方案

常用的JS模块化方案有以下几种：
Node.js的模块化方案
浏览器中使用RequireJs和SeaJs
ES6中的模块化方案

目前在浏览器端使用最广泛的是RequireJs，RequireJs通过AMD规范描述了定义和使用模块的方法，本身支持JS文件的按需加载，另外RequireJs还有很多官方和第三方插件可以实现各种文件（如HTML、CSS、其他文本文件）的动态加载。

Git/SVN

源代码管理（SCM）工具，Git是分布式，任何人都可以拥有完整的代码库，几乎所有的源代码管理操作都可以不用连网，而在自己的电脑上完成，所以是开源项目的不二人选，在公司中使用也有很多优势。SVN是集中式的，代码库及历史版本都集中管理在中央服务器上，开发人员只有当前使用的版本，SVN简单、能够实现代码的严格控制，因此在要求较强控制和管理的场景下应用较多。

angular与vue之间的差异性

相同点：

都支持指令

都支持过滤器

都支持双向绑定

都不支持低端浏览器
不同点：

angularjs学习成本比较高，而vue本身提供的API都比较简单，直观

在性能上，angularjs依赖对数据做脏检查，所以watcher越多越慢。vue使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

vue与react的差异

相同点：

react采用的jsx语法，vue.js在组件开发中也推崇编写.vue特殊文件格式。

中心思想相同：一切都是组件，组件实例之间可以嵌套。

都提供了合理的钩子函数。

在组件开发中都支持mixins的特性

都不内置类似ajax,router等功能到核心包，而是以其它方式（插件）加载

不同点：

react依赖虚拟dom,而vue使用的是dom模板。

vue在模板中提供了指令、过滤器等，方便快捷的操作dom

你如何对网站的文件和资源进行优化?期待的解决方案包括：

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

对前端工程师这个职位你是怎么样理解的？

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 做好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

前端基础面试题

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

选用标签的标准

行内元素有哪些？块级元素有哪些？

link 和@import 的区别是？

浏览器的内核分别是什么?

HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

对语义化如何理解？

iframe有那些缺点？

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

CSS3新增伪类举例：

如何居中div？如何居中一个浮动元素？

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

为什么要初始化CSS样式？

css定义的权重

CSS3有哪些新特性？

介绍一下CSS的盒子模型？

对WEB标准以及W3C的理解与认识？

JS中事件传播过程是什么？怎么阻止事件传播？

插件机制的定制

XHTML和HTML有什么区别？

jquery 支持哪些动画效果

call和apply区别？call和bind区别？

怎么判断一个变量是否是数组

如何清除浮动

原型和原型链

闭包以及闭包的性质

内存泄漏

函数节流以及使用场景

gulp和webpack

JSONP是什么？如何支持的

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

写出几种IE6 BUG的解决方法

img标签上title与alt属性的区别是什么?

解释css sprites，如何使用。

清除浮动的几种方式，各自的优缺点

javascript的typeof返回哪些数据类型

例举3种强制类型转换和2种隐式类型转换?

数组操作

IE和DOM事件流的区别

IE和标准下有哪些兼容性的写法

ajax请求的时候get 和post方式的区别

call和apply的区别

ajax请求时，如何解释json数据

闭包是什么，有什么特性，对页面有什么影响

HTML5的form如何关闭自动完成功能？

如何实现浏览器内多个标签页之间的通信? (阿里)

webSocket如何兼容低浏览器？(阿里)

网页验证码是干嘛的，是为了解决什么安全问题。

title与h1的区别、b与strong的区别、i与em的区别？

如何阻止事件冒泡和默认事件

添加 删除 替换 插入到某个接点的方法

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

document load 和document ready的区别

Object.is() 与原来的比较操作符“ ===”、“ ==”的区别？

javascript的同源策略

编写一个数组去重的方法

实现AJAX的基本步骤

用纯CSS创建一个三角形的原理是什么？

display:inline-block 什么时候会显示间隙？(携程)

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

对BFC规范(块级格式化上下文：block formatting context)的理解？

介绍js的基本数据类型。

函数的几种定义方法？

说几条写JavaScript的基本规范？

对象的定义方法？

类的定义方法（prototype）（继承）

this 关键字的指向

异步ajax的优缺点都有什么？

Javascript如何实现继承？

如何创建一个对象?

谈谈This对象的理解。

事件是什么？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

如何判断一个对象是否属于某个类？

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

对JSON 的了解？

简述一下src与href的区别

简述同步和异步的区别

px和em的区别

添加删除替换插入到某个接点的方法

事件是什么？IE与火狐的事件机制有什么区别？如何阻止冒泡？