HTML5面试题及答案干货请戳这里_华清远见教育科技集团

当前位置: IT培训 > HTML5培训 > 前端开发 > HTML5面试题 > HTML5面试题及答案干货请戳这里

HTML5面试题及答案干货请戳这里时间：2017-11-30 来源：HTML5面试题汇总

今天小编为大家带来了一份意向不到的干货大礼，那就是HTML5面试题及相关题目的答案，是不是很惊喜，是不是很意外，还等什么，一起学起来吧。

HTML5面试题

1、文字超出显示为省略号

[css] view plain copy print?

//单行：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

2、div垂直居中

[html] view plain copy print?

position: absolute;

top: 50%;

left: 50%;

background-color: #000;

-webkit-transform: translateX(-50%) translateY(-50%);

3、浏览器加载过程

浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据html代码自上而下构建dom树，当遇到script文件加载/执行会阻塞后面dom树的构建(javascript可能会改变dom树)，而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建(除非遇到script标签并且css文件依旧未加载完成)，但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css/js/图片文件。至于javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。

4、http请求过程

a. 域名解析

b. 发起TCP的3次握手

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

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

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

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

5、sessionStorage和localStorage的区别，以及cookes和web storage的区别

sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

6、web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

7、Ajax请求的原理?

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

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

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

(4)发送HTTP请求.

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

8、原型、原型链

每个函数都有一个prototype(原型)属性;对象是没有原型的，但是有_proto_(原型链)，指向父级函数的原型。

9、事件委托、事件冒泡、事件捕获

一个div里面有个span元素，当鼠标单击span时，这个事件算是谁的?div还是span?

事件冒泡： IE认为，这个事件首先触发span,然后依次往父节点传递，终传递到document，(这个过程称为冒泡)