【前端进阶】01 重识HTML，掌握页面基本结构和加载过程
HTML
- 浏览器页面加载过程
- 页面组成
- 页面加载
- HTML与DOM
- HTML与DOM的关系
- 虚拟DOM
- 事件委托
思考：
- HTML与网页有什么关系
- HTML与DOM有什么不同
- 浏览器是怎样处理HTML内容的
- 进行怎样的处理来提升网页的性能
浏览器页面加载过程
页面组成
页面是用HTML、CSS、JavaScript来编写的，其中
- HTML：定义页面的基本结构和内容
- CSS：描述页面的样式
- JavaScript：提供页面的交互
HTML由一系列的元素组成，通常成为HTML元素
HTML元素通常用来定义网页结构
<html>
<head></head>
<body></body>
</html>
- html 元素是页面的根元素，它描述完整的网页
- head 元素包含了想包含在HTML页面中，但并不希望显示在页面里的内容
- body 元素包含了访问页面时所有显示在页面上的内容，是用户最终能看到的内容
HTML中的元素特别多，其中还包括可用于 Web Components 的自定义元素
页面加载
通常页面加载时间长或者响应慢，除了网络不稳定、网速过慢等原因，大多数是由于页面设计不合理导致的，很多时候体现在 script、style元素的设计上，它们会影响在加载页面过程中对avaScript和CSS代码的处理，因此，想要提升页面的加载速度，就需要了解浏览器页面的加载过程，从根本上解决问题。
浏览器在加载页面的时候会用到GUI渲染线程和JavaScript引擎线程
- GUI渲染线程负责渲染浏览器界面HTML元素
- JavaScript引擎线程负责处理JavaScript脚本程序
由于JavaScript在执行过程中可能会改变页面结构和样式，因此它们之间被设计为互斥的关系
加载流程：
- 打开网页的时候，浏览器会从服务器中获取到HTMl内容
- 浏览器获取到HTML内容后，开始从上到下解析HTML元素
- head元素首先会被解析，此时浏览器还没开始渲染页面，head元素里涉及外部资源，浏览器会获取外部资源
- 浏览器解析到script外部资源时，会暂停解析，并下载JavaScript脚本
- 当JavaScript脚本下载完成后，浏览器的控制权转交给JavaScript引擎，当脚本执行完成后，控制权会交给渲染引擎，渲染引擎会继续解析HTML页面
- 此时，body元素会被解析，浏览器开始渲染页面
注：如果外部脚本时间过长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器会呈现“假死”状态
因此，对于性能较高，需要快速将内容呈现给用户的页面：
- 可以将JavaScript脚本放入body的最后面，这样可以避免资源阻塞，页面可以迅速展示
- 可以使用 defer/async/preload 等属性来标记script标签
浏览器在渲染页面的时候需要解析HTML、CSS以得到DOM树和CSS规则树，它们结合后才能形成最终的渲染树渲染，因此，通常将CSS放到head里，可以避免浏览器渲染的重复计算
HTML与DOM
HTML与DOM的关系
DOM（文档对象模型）是HTML和XML文档的编程接口
DOM 是用来操作和描述HTML文档的接口，如果说浏览器用HTML来描述网页的结构并渲染，那么使用DOM则可以获取网页结构并操作
虚拟DOM
频繁的DOM操作会导致页面频繁的计算和渲染，于是，虚拟DOM由然而生，虚拟DOM的设计思路：
- 用JavaScript对象模拟DOM树，得到一颗虚拟DOM树
- 当页面数据发生变更时，生成新的虚拟DOM树，比较新旧虚拟DOM树的差异
- 把差异应用到真正的DOM树上
事件委托
- 绑定子元素会绑定很多次事件，绑定父元素只需要绑定一次
- 将事件委托给父节点，对子元素的增加、删除、移动等，都不需要重新进行事件绑定
- 使用事件委托的方式，可以大量的减少浏览器对元素的监听**
注：如果直接在 document.body 上进行事件委托，可能会带来额外的问题
参考课程：前端进阶课程