浏览器渲染页面时css和js的加载过程

在浏览器渲染页面时：

遇到link开辟一个新的http请求线程去加载资源，但是GUI渲染线程会继续进行，所有CSS资源做顺序标识  并不是谁先请求回来  就渲染谁  而是等到都请求回来后  按照顺序标识在逐一渲染

如果遇到的是JS不管是内嵌的代码还是需要外链请求的代码，都是需要立即加载执行的（主线程去加载执行） =>它会阻碍GUI线程的继续渲染
[同步的处理]，所以真实项目中，我们一般都会把JS放到末尾，就是等待DOM结构都加载完成后，我们再去执行的

不放在末尾，还想在DOM结构加载完成后执行

1. 把SCRIPT改成异步的即可

async VS defer

           async 从服务器获取资源是异步的（此时GUI继续渲染），但是一旦资源请求回来，会立即把请求回来的JS执行（此时会阻断GUI的继续渲染） => 多个asyncJS请求，谁先回来就先执行谁，没有顺序

           defer 从服务器获取资源是异步的，只不过请求回来资源后没有立即执行，需要等到GUI绘制完成，再去按照顺序把所有请求回来的JS逐一执行

<script src="js/1.js" async></script> 
<script src="js/1.js" defer></script>

绿线代表GUI渲染线程，蓝线代表异步加载线程，红线代表异步阻断GUI渲染线程的渲染线程

 

2. 或者监听事件，在DOM结构加载完成在执行这个代码 

               =>DOMContentLoaded DOM结构加载完

               =>load 所有资源都加载完 （晚于DOMContentLoaded触发的）

window.addEventListener('DOMContentLoaded', function () {
			//执行内容
		});
window.onload = function () {
			//执行内容
		};
setTimeout(function () {
			// 定时器是异步的，它能够触发执行的条件：不仅是到达时间了，而且是主线程已经加载完成了（所以可以用它代替window.onload）

		}, 1000);