H5面试题

DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。

标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。
head
head标签用于定义文档的头部。文档的头部描述了文档的各种属性
和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系
等。绝大多数文档头部包含的数据都不会真正作为内容显示给读
者。
body
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和
列表等等。）
它会直接在页面中显示出来，也就是用户可以直观看到的内容.
title
可定义文档的标题，它显示在浏览器窗口的标题栏或状态栏上。

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜 索引擎的排名需求

伪类和伪元素

伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为 已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中。

语义化的优点

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

内联元素和块元素

id和class

如何实现浏览器内多个标签页之间的通信？

调用 localstorge、 cookies等数据存储，可以实现标签页之间的通信

请描述一下 sessionStorage和 localStorage的区别。

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

localStorage和 cookie的区别是什么？

cookie的大小是受限的，并且每次请求一个新页面时， cookie都会被发送过去，这样无形中浪费了带宽。另外， cookie还需要指定作用域，不可以跨域调用。
localStorage的概念和cookie相似，区别是 localStorage是为了更大容量的存储设计的。

除此之外， localStorage拥有 setlten, getItem、 removeltem、 clear等方法， cookie则需要前端开发者自己封装 setCookie和 get Cookie。但 cookie也是不可或缺的，因为 cookie的作用是与服务器进行交互，并且还是HTP规范的一部分，而 localStorage仅因为是为了在本地“存储”数据而已，无法跨浏览器使用。

Cookies，sessionStorage 和 localStorage 的区别?

存储位置不同:
cookies 是为了标识用户身份而存储在用户本地终端上的数据，始终在 同源 http 请求中携带，即 cookies 在浏览器和服务器间来回传递，
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小的限制不同:
cookie 保存的数据很小，不能超过 4k，
sessionStorage 和 localStorage 保存的数据大，可达到 5M
数据的有效期不同:
cookie 在设置的 cookie 过期时间之前一直有效，即使窗口或者 浏览器关闭。
sessionStorage 仅在浏览器窗口关闭之前有效。
localStorage 始终有效， 窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同:
cookie 在所有的同源窗口都是共享;
sessionStorage 不在不同的浏览器 共享，即使同一页面;
localStorage 在所有同源窗口都是共享。
**共同点：**都是保存在浏览器端，且是同源的。

什么是跨域，如何解决

跨域是指浏览器的同源策略是不允许执行其他网站上的脚本，只要协议，主机地址，端口其中之一不同就算跨域。
跨域一般的解决方法时Jsonp，script标签不受同源策略影响；前台还可以设置代理proxy;后端也可以设置CROS,Access-Control-Allow-Origin；此外还有nginx的反向代理。

HTML5如何实现跨域

在服务器端设置允许在其他域名下访问，例如允许所有域名访问以下内容。

response.setHeader（"Access-Control-Allow-Origin"，"*"）；
response.setHeader （"Access-Control-Allow-Methods"，"POST"）；
response.setHeader（"Access-Control-Allow-Headers"，"x-requested-with, content-type"）；

浏览器的渲染原理

1、HTML被HTML解析器解析成DOM树。
2、CSS被CSS解析器解析成CSS规则树。
3、浏览器会将CSS规则树附着在DOM树上，并结合两者生成渲染树Render Tree。
4、生成布局（flow），浏览器通过解析计算出每一个渲染树节点的位置和大小，在屏幕上画出渲染树的所有节点。
5、将布局绘制（paint）在屏幕上，显示出整个页面

前端性能优化

合并图片
减少http请求
css写在头部，js写在底部
使用CDN