HTML5常见面试题及答案（一）

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

//单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
//多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

2、div垂直居中

  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_(原型链)，指向父级函数的原型。

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

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

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

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

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

11、跨域

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

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

HTML5常见面试题及答案（一）相关推荐

html5常见面试题,HTML5常见面试题及答案
一.HTML5的新特性 (1) 绘画canvasjavascript (2) 用于媒介回放的video和audio元素html (3) 本地离线存储localStorage长期存储数据,浏览器关闭后数 ...
html5游戏面试题及答案,HTML5常见面试题及答案（二）
1.HTML5的新特性 (1) 绘画canvas (2) 用于媒介回放的video和audio元素 (3) 本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失 (4) sessi ...
html5 将id的值用于top_web前端分享HTML5常见面试题集锦四
web前端分享HTML5常见面试题集锦四 1.为什么要初始化CSS样式? 答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 当 ...
js怎么在一个div中嵌入另一网站_好程序员web前端学习路线分享HTML5常见面试题集锦一...
好程序员web前端学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题. 1.布局左边20% 中间自适应右边200px 不能用定位答案:圣杯布局/双飞翼布局或者 ...
前端面试常见面试题及答案
前端面试常见面试题及答案 h5新特性 ES6新特性 vuex的理解,组成以及原理介绍前端常用框架 h5新特性 html5总的来说比html4多了十个新特性,但其不支持ie8及ie8以下版本的浏览器 ...
Spring常见面试题及答案汇总1000道（春招+秋招+社招）
Spring面试题以及答案整理[最新版]Spring高级面试题大全(2021版),发现网上很多Spring面试题都没有答案,所以花了很长时间搜集,本套Spring面试题大全,汇总了大量经典的Sprin ...
Java多线程常见面试题及答案汇总1000道（春招+秋招+社招）
Java多线程面试题以及答案整理[最新版]Java多线程高级面试题大全(2021版),发现网上很多Java多线程面试题都没有答案,所以花了很长时间搜集,本套Java多线程面试题大全,汇总了大量经典的J ...
MySQL常见面试题及答案汇总1000道（春招+秋招+社招）
MySQL面试题以及答案整理[最新版]MySQL高级面试题大全(2021版),发现网上很多MySQL面试题都没有答案,所以花了很长时间搜集,本套MySQL面试题大全,汇总了大量经典的MySQL程序员面 ...
Jvm常见面试题及答案汇总1000道（春招+秋招+社招）
Jvm面试题以及答案整理[最新版]Jvm高级面试题大全(2021版),发现网上很多Jvm面试题都没有答案,所以花了很长时间搜集,本套Jvm面试题大全,汇总了大量经典的Jvm程序员面试题以及答案,包含J ...

HTML5常见面试题及答案（一）

HTML5常见面试题及答案（一）相关推荐

最新文章

热门文章