前端应届生面试

1.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性

1. canvas 绘画
2. loacalStorage 本地离线存储
3. sessionStrorage
4. video和audio 媒体元素
5. 语义化标签如article,footer,header,nav,section
6. 表单控件 calendar,date,time,email,url,search
7. 新技术 webworker线程
8. websocket 通信
9. Geolocation 地理位置信息

移除

1. <basefont>默认字体

2. <font>字体标签

3. <center>水平居中

4. <u>下划线

5. <big>大字体

6. <strike>中横线

7. <tt>文本等宽

8. <frameset> <noframes> <frame> 可能对页面产生影响的标签

兼容

1. 方法1：实现标签被识别

   通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。

2. 方法2：JavaScript框架

   ie9

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

   必须在head标签中加载

   ie6

   <!--if lte IE 6]>
   	<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
   <![endif]-->
   

2.请描述一下cookies，localStorage，sessionStrorage的区别

sessionStorage用于本地储存一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也会随之销毁。

sessionStorage不是持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不回删除的

cookie保存在本浏览器中，大小不超过4K，而Storage一般不超过5M，一个域名cookie限制为50个，Opera为30个

3.现在在HTML页面中写一个旋转的立方体，请写出要用到的css属性

transition、transform、rotate、translate

父元素 transform-style: preserve-3d;

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

闭包是指有权访问另一个函数作用域中的变量的函数

通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

function a(){
    var i=999;
    function b(){ //b是一个闭包
    	alert(i);
    }
	return b;
}

var c = a();
c();

闭包的特性

1. 封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口
2. 持久性：一般的函数，调用完毕后，系统自动注销函数，而对于闭包来说，在外部函数调用之后，闭包结构依旧存在，从而对实现对数据的持久使用

优点

1. 减少全局变量
2. 减少传递函数的参数量
3. 封装

缺点

使用闭包会占用内存资源,过多的闭包会导致内存溢出

5.事件委托是什么

• 本来加在子元素身上的事件，加在了其父级身上

• event对象里记录的有“事件源”，它就是发生事件的子元素

• 在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target

好处

第一个好处是效率高，比如，不用for循环为子元素添加事件了

第二个好处是，js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

6.请用JavaScript编写一个b继承a的方法

1. 原型链继承

function a(){
	...
}

function b(){
	b.prototype = new a()
}

b.prototype.constructor = b

2. 构造继承

function a(){
	...
}

function b(){
	a.call(this)
}

3. 实例继承

function a(){
	...
}

function b(){
	var case = new a()
	return case
}

4.组合继承

function a(){
	...
}

function b(){
	a.call(this)
}

b.prototype = new a()
b.prototype.constructor = b

5. 寄生组合继承

function a(){
	...
}

function b(){
	a.call(this)
}
;(function(){ //立即执行函数前加;避免与上面相连报错
	var c = function(){}
	c.prototype = a.prototype
	b.prototype = new c()
})();

b.prototype.constructor = b

7.请用JavaScript实现阻止事件冒泡和默认事件

使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。

使用event.preventDefault()可以取消默认事件

8.一个页面从输入url到加载完成,这个过程都发生了什么?

1. 浏览器构建HTTP Request请求
2. 网络传输
3. 服务器构建HTTP Response响应
4. 网络传输
5. 构建DOM树和CSSDOM树
6. 渲染页面

9.使用Vue如何让css在当前页面生效

在<style>标签中加上 scoped

10.请写出Vue路由跳转的实现方式

• 简单写法

<router-link to="demo2">demo2</router-link>

• 传参写法

<router-link :to="{ name: 'demo2', params: { userId: 123 }}">demo2</router-link>

这里需要在router.js中对demo2的路径进行配置,在path中demo2后添加通配符

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
},

跳转结果为/demo2/123

• JavaScript实现

<button @click="toURL">跳转页面</button>

methods:{
  toURL(){
    this.$router.push({ path: '/demo2' })
  }
}