【梳理系列】前端面试之HTML篇1. Doctype作用？有何意义? 2. 行内元素有哪些？块级元素有哪些？空(voi

1. Doctype作用？有何意义?

DOCTYPE声明位于HTML文档中的第一行，处于标签之前，用于告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

2. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a, span, img, textarea, select, label...

块级元素： div, p, h1, ul, li, dl, dt, dd, table, form

空元素： br hr

3. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 ?

新增了以下的几大类元素 内容元素，article、footer、header、nav、section。表单控件，calendar、date、time、email、url、search。控件元素，webworker, websockt, Geolocation。 *** 移出的元素有下列这些 *** 显现层元素：basefont，big，center，font, s，strike，tt，u。性能较差元素：frame，frameset，noframes。 HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。内容元素，article、footer、header、nav、section。表单控件，calendar、date、time、email、url、search。控件元素，webworker, websockt, Geolocation。 移出的元素有下列这些 显现层元素：basefont，big，center，font, s，strike，tt，u。性能较差元素：frame，frameset，noframes。 新的技术 canvas,svg,webworker, websocket, Geolocation......

4. 简述一下你对HTML语义化的理解

结构清晰，便于理解，便于浏览器解析，源码容易阅读，有利于SEO

5. Label的作用是什么？如何使用？

label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name" />
<label>Date:<input type="text" name="B" /></label>

6. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

特性	Cookie	localStorage	sessionStorage
生命周期	可设置失效时间，没有设置的话，默认是关闭浏览器后失效	除非被手动清除，否则将会永久保存	仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
存放数据大小	4KB左右	可以保存5MB的信息	可以保存5MB的信息
http请求	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信

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

第一种：调用localStorage

在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值，实现不同标签页之间的通信。

第二种：调用cookie+setInterval()

将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。

8. 从输入URL到页面加载发生了什么？

在浏览器地址栏输入 URL
浏览器查看

缓存

，如果请求资源在缓存中并且新鲜，跳转到转码步骤
如果资源未缓存，发起新请求

如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
检验新鲜通常有两个 HTTP 头进行控制
Expires
和
Cache-Control
：

HTTP1.0 提供 Expires，值为一个绝对时间表示缓存新鲜日期

HTTP1.1 增加了 Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
浏览器解析 URL获取协议，主机，端口，path

浏览器组装一个 HTTP（GET）请求报文

浏览器

获取主机 ip 地址

，过程如下：

浏览器缓存

本机缓存

hosts 文件

路由器缓存

ISP DNS 缓存

DNS 递归查询（可能存在负载均衡导致每次 IP 不一样）

打开一个 socket 与目标 IP 地址，端口建立 TCP 链接

，三次握手如下：

客户端发送一个 TCP 的SYN=1，Seq=X的包到服务器端口

服务器发回SYN=1， ACK=X+1， Seq=Y的响应包

客户端发送ACK=Y+1， Seq=Z

TCP 链接建立后发送 HTTP 请求

服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用 HTTP Host 头部判断请求的服务程序

服务器检查HTTP 请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码

处理程序读取完整请求并准备 HTTP 响应，可能需要查询数据库等操作

服务器将响应报文通过 TCP 连接发送回浏览器

浏览器接收 HTTP 响应，然后根据情况选择

关闭 TCP 连接或者保留重用，关闭 TCP 连接的四次握手如下

：

主动方发送Fin=1， Ack=Z， Seq= X报文

被动方发送ACK=X+1， Seq=Z报文

被动方发送Fin=1， ACK=X， Seq=Y报文

主动方发送ACK=Y， Seq=X报文

浏览器检查响应状态吗：是否为 1XX，3XX， 4XX， 5XX，这些情况处理与 2XX 不同

如果资源可缓存，进行缓存

对响应进行解码（例如 gzip 压缩）

根据资源类型决定如何处理（假设资源为 HTML 文档）

解析 HTML 文档，构件 DOM 树，下载资源，构造 CSSOM 树，执行 js 脚本，这些操作没有严格的先后顺序，以下分别解释

构建 DOM 树

：

Tokenizing：根据 HTML 规范将字符流解析为标记

Lexing：词法分析将标记转换为对象并定义属性和规则

DOM construction：根据 HTML 标记关系将对象组成 DOM 树

解析过程中遇到图片、样式表、js 文件，启动下载

构建

CSSOM 树

：

Tokenizing：字符流转换为标记流

Node：根据标记创建节点

CSSOM：节点创建 CSSOM 树

根据 DOM 树和 CSSOM 树构建渲染树

:

从 DOM 树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被 css 隐藏的节点，如display: none

对每一个可见节点，找到恰当的 CSSOM 规则并应用

发布可视节点的内容和计算样式

js 解析如下

：

浏览器创建 Document 对象并解析 HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate 为 loading

HTML 解析器遇到没有 async 和 defer 的 script 时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用 document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作 script 和他们之前的文档内容

当解析器遇到设置了async属性的 script 时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用 document.write()，它们可以访问自己 script 和之前的文档元素

当文档完成解析，document.readState 变成 interactive

所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用 document.write()

浏览器在 Document 对象上触发 DOMContentLoaded 事件

此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState 变为 complete,window 触发 load 事件

显示页面（HTML 解析过程中会逐步显示页面）

9. 页面导入样式时，使用 link 和@import 有什么区别？

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;

页面被加载的时，link 会同时被加载，而**@import 引用的 CSS 会等到页面被加载完再加载**;

import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;

link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;

10. html 中 title 属性和 alt 属性的区别?

鼠标停留在图片上时显示title，当图片加载不出时，会变成alt

11. HTML5离线存储原理及实现

HTML5的离线存储是基于一个新建的manifest文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

12. 前端需要注意哪些 SEO

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可

语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页

重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取

重要内容不要用 js 输出：爬虫不会执行 js 获取内容

少用 iframe：搜索引擎不会抓取 iframe 中的内容

非装饰性图片必须加 alt

提高网站速度：网站速度是搜索引擎排序的一个重要指标

13. 如何进行网站性能优化

content 方面

减少 HTTP 请求：合并文件、CSS 精灵、inline Image

减少 DNS 查询：DNS 查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS 缓存、将资源分布到恰当数量的主机名，平衡并行下载和 DNS 查询

避免重定向：多余的中间访问

使 Ajax 可缓存

非必须组件延迟加载

未来所需组件预加载

减少 DOM 元素数量

将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量

减少 iframe 数量

不要 404

Server 方面

使用 CDN

添加 Expires 或者 Cache-Control 响应头

对组件使用 Gzip 压缩

配置 ETag

Flush Buffer Early

Ajax 使用 GET 进行请求

避免空 src 的 img 标签

Cookie 方面

减小 cookie 大小

引入资源的域名不要包含 cookie

css 方面

将样式表放到页面顶部

不使用 CSS 表达式

使用不使用@import

不使用 IE 的 Filter

Javascript 方面

将脚本放到页面底部

将 javascript 和 css 从外部引入

压缩 javascript 和 css

删除不需要的脚本

减少 DOM 访问

合理设计事件监听器

图片方面

优化图片：根据实际颜色需要选择色深、压缩

优化 css 精灵

不要在 HTML 中拉伸图片

保证 favicon.ico 小并且可缓存

移动方面

保证组件小于 25k

Pack Components into a Multipart Document

参考链接：github.com/qiu-deqing/…

【梳理系列】前端面试之HTML篇

1. Doctype作用？有何意义?

2. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

3. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 ?

4. 简述一下你对HTML语义化的理解

5. Label的作用是什么？如何使用？

6. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

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

8. 从输入URL到页面加载发生了什么？

9. 页面导入样式时，使用 link 和@import 有什么区别？

10. html 中 title 属性和 alt 属性的区别?

11. HTML5离线存储原理及实现

12. 前端需要注意哪些 SEO

13. 如何进行网站性能优化

2. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？