成都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做一个代理接口，后端调后端 绕过安全协议