页面布局的基本原则?
- 浏览器在加载页面的时候会用到 GUI 渲染线程(渲染浏览器界面的HTML元素)和 JavaScript 引擎线程（负责处理JavaScript脚本程序）;
由于JavaScript 引擎线程在处理过程中会改变界面结构和样式，所以在JavaScript 引擎线程执行时，GUI 渲染线程会被挂起。
举个🌰：
1）当我们打开一个网页的时候，浏览器会从服务器中获取HTML内容。
2）当浏览器获取到HTML内容，会从上到下解析HTML的元素。
3）<head>中元素首先会被解析，此时浏览器还没有渲染页面。<head>中有用于描述页面数据的元素，也有用于引用外部资源的<link>元素（图片、css等）以及指向外部资源的<script>元素
4）浏览器解析到<head>元素，会暂停解析并下载JavaScript脚本。
5）当JavaScript脚本下载完成之后，浏览器的控制权会交给JavaScript 引擎线程,当脚本执行完成之后，控制权会交给GUI 渲染引擎,渲染引擎会向下解析HTML页面。
6）浏览器会解析<body>元素，页面开始渲染
造成的问题： 如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。
解决问题： 可以将JavaScript脚本放在 <body>最后面。这样可以避免资源阻塞，页面得以迅速展示。也可以使用defer/async/preload等属性来标记<script>,从而控制JavaScript的加载顺序。
结束语
总结：大功告成✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️✌️