【前端进阶】01 重识HTML，掌握页面基本结构和加载过程

HTML

思考：

HTML与网页有什么关系

HTML与DOM有什么不同

浏览器是怎样处理HTML内容的

进行怎样的处理来提升网页的性能

浏览器页面加载过程

页面组成

页面是用HTML、CSS、JavaScript来编写的，其中

HTML：定义页面的基本结构和内容
CSS：描述页面的样式
JavaScript：提供页面的交互

HTML由一系列的元素组成，通常成为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 上进行事件委托，可能会带来额外的问题

参考课程：前端进阶课程