css、js等静态文件在HTML中的加载顺序辨析_是css先加载还是ready先加载-CSDN博客

本文链接：https://blog.csdn.net/Monster_WangXiaotu/article/details/107358032

在开发中遇到问题，在开发结束时回顾思考问题！！

页面响应加载的顺序是，域名解析->加载html->加载js和css->加载图片等其他信息；

主要知识点：

jQuery的ready事件和DOM的onload事件的区别：
1. onload是所有DOM元素创建完毕，图片、css等都加在完毕后才触发
2. ready则是DOM元素创建完毕后就被触发
相对来说jquery的ready可以提高网页的响应速度.

加载html中的资源顺序

3.总体上是按照html文档的顺序加载

4.最好将无论内部或是外部JS文件放到所有html内容之后，这样会令用户感觉页面加载速度变快了，

否则如果将所有外部文件（包括css和JS）引用都放到<head>中，意味着必须等到全部的JS代码都被下载解析和执行完毕后，才能开始呈现页面的内容（当浏览器遇到<body>）,这样会导致呈现页面时出现明显的延迟，且延迟期间的浏览器窗口将是一片空白。

HTML页面加载和解析流程

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件

2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件。

3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。

4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。

5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。

7. 浏览器发现了一个包含一行Javascript代码的<script>标签，加载并执行。