HTML知识点整理

DOCTYPE 的作用是什么

<!DOCTYPE> 声明一般位于文档的第一行，作用是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。

  • 标准模式：浏览器的解析规则都是按照最新的标准进行解析的。
  • 兼容模式：浏览器会以向后兼容的方式来模拟老式浏览器的行为

html5

<!DOCTYPE html>

html4（需要指定dtd）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DTD 文档类型定义

DTD（Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义XML或HTML的特定版本中所有允许元素及它们的属性和层次关系的定义。换言之他会告诉浏览器这份文档是html，而不是其他文本标记语言。

为什么HTML5 DOCTYPE不用引入DTD

HTML4.01基于SGML，HTML4.01的DOCTYPE需要对DTD进行引用。而HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE 来规范浏览器的行为。

其中SGML是标准通用标记语言，简单的说，就是比HTML，XML更老的标准，这两者都是由SGML发展而来的。

##SGML、HTML、XML和XHTML的区别

SGML是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

HTML是超文本标记语言，主要是用于规定怎么显示网页。

XML是可扩展标记语言是未来网页语言的发展方向，XML和HTML的最大区别就在于XML的标签是可以自己创建的，数量无限多，而HTML的标签都是固定的而且数量有限。

XHTML也是现在基本上所有网页都在用的标记语言，他其实和HTML没什么本质的区别，标签都一样，用法也都一样，就是比HTML更严格，比如标签必须都用小写，标签都必须有闭合标签等。

link标签

  • link定义文档与外部资源的关系
  • link是空元素，在开始标签中关闭，没有结束标签
  • link一般存在于head中，可以出现任意次数，通常用来加载外部样式表

渲染过程中遇到JS文件怎么处理

JavaScript的加载、解析与执行会阻塞文档的解析，也就是说，在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停文档的解析，将控制权移交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复继续解析文档。

也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS文件，这也是都建议将script标签放在body标签底部的原因。当然在当下，并不是说script标签必须放在底部，因为你可以给script标签添加defer或者async属性。

async 和 defer 的作用是什么？有什么区别？

  1. 脚本没有defer或async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
  2. defer属性表示延迟执行引入的JavaScript，即这段JavaScript加载时HTML并未停止解析，这两个过程是并行的。当整个document解析完毕后再执行脚本文件，defer脚本在DOMContentLoaded事件触发之前完成，多个脚本按顺序执行。
  3. async属性表示异步执行引入的JavaScript，与defer的区别在于，如果已经加载好，就会开始执行。也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞，多个脚本的执行顺序无法保证。

文档的预解析

Webkit和Firefox都做了这个优化，当执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

重绘和重排

重绘：当渲染树中的一些元素只更新影响元素外观、风格的属性，而不影响布局操作，比如 background-color，这样的操作称为重绘。

重排：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作称为重排。

  • 何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发重排
  • 重排必定会发生重绘，重绘不一定会引发重排，重排会触发整个渲染流水线

DOMContentLoaded事件和Load事件

当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的加载完成。

Load事件是当所有资源加载完成后触发的。

浏览器从输入URL到展示页面，经历了哪些过程

节选自 掘金VioletJack的评论

从浏览器不同进程的角度来看这个问题

浏览器进程

  • 用户输入内容，进行URL 解析（编码）
  • 如果是文本，则拼接成默认搜索引擎加关键字的 URL 进行搜索
  • 如果是 URL 就进行页面访问请求，并加上协议头（http、https 的区别）

网络进程

  • 查询缓存（缓存相关知识）
  • 如果有浏览器本地缓存可用则使用本地缓存
  • DNS 解析（DNS 相关）
  • 通过 DNS 来查询 IP 地址
  • DNS 先查本地、后查运营商、逐级网上查。（域名解析是从后往前查的）
  • 拿到 IP 地址发起 HTTP 请求（这块可以问网络相关各种基础知识，TCP、IP、UDP、HTTPS、HTTP2）
  • 建立 TCP 三次握手连接
  • 如果是 HTTPS 建立 TLS 安全通道连接（HTTPS 加密方式）
  • 发送 HTTP 请求，这个请求可能回到代理服务器或者源服务器。（服务器代理）
  • 拿到 HTTP 响应（HTTP 响应码）
  • 根据 Content-Type 来判断响应文件类型（常用 HTTP 响应头的作用）
  • stream 类，浏览器启动下载界面下载文件。
  • text、图片类，浏览器直接展示在页面上
  • html 类型，浏览器会进行页面解析。

渲染进程

  • 页面解析
  • 网络进程向渲染进程传输 HTML 数据
  • 对 HTML 进行词法分析，通过堆栈算法构建 DOM 树。（AST语法树）
  • 如果遇到外部资源，浏览器会交给网络进程去下载。
  • 构建完 DOM 树的同时，将 CSS 代码转为浏览器可以理解的 StyleSheets
  • 标准化样式属性值（单位、大小）
  • 计算出 DOM 树每个节点的具体样式
  • 计算每个 DOM 节点的父节点们的样式（样式继承）
  • DOM 树构建完成后， 合并 StyleSheets 构建出 CSSOM 渲染树。
  • 排版：遍历渲染树，计算元素的坐标位置。
  • 分层：为节点生成图层
  • 绘制：用浏览器指令逐条绘制页面元素。（如何避免重绘重排）
  • 栅格化
  • 合成

渲染流程

  1. 构建 DOM 树
  2. 样式计算 (Recalculate Style)
  3. 布局 (Layout)
  4. 绘制 (Paint)
  5. 合成 (Raster)
  6. 显示 (Display)

iframe有哪些缺点

它能够将另一个HTML页面嵌入到当前页面中。

缺点

  1. iframe会阻塞主页面的onload事件。window的onload事件需要在所有iframe加载完毕后（包含里面的元素）才会触发。在Safari和Chrome里，通过JavaScript动态设置iframe的src可以避免这种阻塞情况。
  2. 搜索引擎的检索程序无法解读这种页面，不利于网页的SEO。
  3. iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
  4. 浏览器的后退按钮失效。
  5. 小型的移动设备无法完全显示框架。

> cd ..