成都HTML5面试题（含答案）

成都HTML5面试题（含答案）

今天为大家带来了一份意向不到的干货大礼，那就是HTML5面试题及相关题目的答案，是不是很惊喜，是不是很意外，还等什么，一起学起来吧。H5/web前台开发学习交流群109559647

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，(这个过程称为冒泡)

事件捕获：网景浏览器认为，任何事件都首先触发document，而后依次往下传递到span元素，(这个过程称为捕获)

事件委托：根据事件冒泡机制，任何事件都会冒泡到document，事件委托就是把所有事件解决函数绑定到document，根据事件参数判断事件源对象，判断不同的对象给予不同的解决函数，

10、跨域

a: josnp (最常使用一种方式 ，耗时最短，最有效)是通过get请求

简单来说就是利使用jsonp动态增加一个script标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议了

b :服务器设置响应头

http://localhost:8080 发起ajax请求

接口所在服务器http://localhost:8090

“Access-Control-Allow Origin”，“http://localhost:8090”

c : 服务器重定向(代理商)

http://localhost:8080 发起ajax请求

本地服务器接口 http://localhost:8080做一个代理商接口，后台调后台 绕过安全协议