Html（超文本编辑语言）、Css（层叠样式表）、JavaScript 脚本语言这三样内容在浏览器端相互配合、相辅相成，形成了比较成熟的前端页面。
<html>
<head>
<!--
头部中包含的标记是页面的标题、序言、说明等内容，
它本身不作为内容来显示，但影响网页显示的效果
-->
</head>
<body>
<!--
显示实际内容
-->
</body>
</html>
HTML 加载顺序
- window.onload：等待页面中的所有内容加载完毕之后才会执行。
(document).ready() / $(function(){})相当于下载 body 内最靠后的<script>代码段`
- 下载的顺序是从上向下，渲染的顺序也是从上到下，下载和渲染是同步执行。HTML 需要等<head>中所有的 JS 文件 和 CSS 文件 加载完成后才会开始绘制。
- 用户输入网址，浏览器向服务器发出请求，服务器返回 Html 文件。
==》<html> - 浏览器开始载入 HTML 代码，进入
==》<head>，发现标签内有一个 <link> 标签引用外部的 CSS 文件；浏览器又发出 CSS 文件请求，服务器返回这个 CSS 文件。页面获取 CSS 文件后开始渲染页面。
引入外联样式表，属于并行加载。CSS 在加载时 DOM 还在继续加载构建。
- 外联样式表：<head> 标签中，使用 <link> 标签的 href 属性来引用的层叠样式表(css文件)
- 内联样式表：<head> 标签中，使用 <style> 标签 通过 选择器 + 样式文件 编写的。
- 内部样式表：在标签 中的 <style> 属性中添加的 css 样式声明。
上述三种样式表，页面显示的效果的影响程度越来越高。
其中，还包含了许多选择器。
【 ID 选择器指定的样式 】 > 【类选择器指定的样式】 > 【元素类型选择器指定的样式】
- 浏览器继续载入 HTML 中 <body> 部分的代码。
- 浏览器解析到<img>或者<video>标签引用了一张图片或者一个视频时，会向服务器
并行请求图片或者视频。继续渲染后面的代码。
- 当服务器返回图片文件或者视频文件的时候，浏览器会重新渲染这部分代码。
- 浏览器发现 <script> 标签，便会暂停解析，将控制权交给 JavaScript 引擎（JavaScript 解释器）。
当引用了 JavaScript 的时候，浏览器发送 一 个JavaScript request ，就会一直等待该request 的返回。因为浏览器需要一个稳定的 DOM 树结构，而 JavaScript 中的代码可能直接改变了 DOM 树的结构，甚至 直接使用 location.href 进行跳转，所以浏览器为了防止出现 JavaScript 改变 DOM 树的情况，会阻塞其他的下载和渲染。
- 如果 <script> 标签引用了外部脚本，就下载该脚本（下载执行该脚本），否则就直接执行，执行完毕后将控制权交给 浏览器渲染 引擎。
- 如果JavaScript 中执行了<div>(style.display=“nonde”)，执行结束后浏览器渲染会先渲染这部分内容。
- 直到解析到 </html>，解析完成。
- 当 <body> 中的代码全部执行完毕，并且整个页面的 css 样式加载完毕后， css 会重新渲染整个页面的 html 元素。
各个步骤的加载渲染时间，可以通过浏览器的插件进行追踪。例如：Chrome还提供一种很棒的事件跟踪工具，叫做 speed tracer。
总结：加载 html 文档，从上向下解析，<head> 中的 link 是并行加载的，加载完成后开始 <body> 中的渲染，避免闪屏情况的出现，<script> 同步进行加载和解析，出现阻塞加载的情况。
浏览器加载 一个 html 页面，并行进行解析（生成 DOM 树）和渲染。
defer、async 并行加载 JavaScript
JavaScript 阻塞其他资源的加载的原因是：浏览器为了防止 JavaScript 修改 DOM 树，需要重新构建DOM树的情况出现。
-
外联的JavaScript 如果含有 defer=“defer” 属性，将会并行加载js，到页面全部加载完成后才会执行，会按顺序执行。
-
对于内置而不是连接外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。
-
外联的JavaScript 如果含有 async=“true” 属性，将不会依赖于任何 js 和 css 的执行，此 js下载完成后立刻执行，不保证按照书写的顺序执行。
-
async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不应该使用document.write方法。
-
一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
网友评论