前言
我们知道一个页面一般由三部分组成：html、css、js。 通常我们会在头部后面加载css文件，在页面顶部加载js文件。 如果你想知道为什么，你就会同意要按照这个标准重构页面，首先要了解页面的加载过程。 （其实以今天的技术，不必遵循这个标准，也会出现下面提到的js的异步加载）
我之前写过一篇文章，这里更详细地介绍一下从输入URL到解释页面的详细过程。 明天我们主要看一下创建页面的流程以及html、css、js之间的关系。
“如果本文对您有帮助，❤️关注+点赞❤️鼓励作者，文章公众号首发，关注后台南九第一时间获取最新文章~”
❝
这是我的Github：，欢迎star
❞页面创建过程
这里我们主要考虑三种情况的建立过程
页面中仅丰富外部CSS文件
从图中我们可以看出，在构建布局树之前，我们需要获取DOM树和CSSOM树。 当请求返回 HTML 文件时，HTML 解析器开始创建 DOM 以响应 HTML 数据。 不过，由于此时页面包含外部CSS文件，所以他需要先请求CSS访问，然后CSS解析器获取到CSS数据后才能开始创建CSSOM。 “所以在这些情况下 CSS 不会阻止 DOM 的创建，但它会阻止页面的渲染”
该页面同时包含内联 JS 和外部 CSS
从这张图我们可以看到，如果HTML解析器在构建DOM的过程中遇到JS，它会停止构建DOM，并首先解析并执行JS（因为JS可能会改变DOM）。 并且在执行 JS 脚本之前，如果页面包含外部 CSS 或内联 CSS，则会先将 CSS 构建到 CSSOM 中，然后再执行 JS。 这就是前面提到的 JS 文件通常放在页面顶部的原因。
“所以从这些情况来看，CSS和JS会阻塞DOM的建立，CSS会阻塞JS的执行，但不会阻塞HTML的解析”
页面包含外部JS和外部CSS
从这张图中我们可以看到，如果HTML解析器在解析过程中遇到外部CSS和外部JS文件，它会同时发起下载文件的请求。 在此过程中，DOM创建过程将停止html加载顺序，需要等待CSS文件下载完毕。 CSSOM建立之后，下载并执行JS文件，就可以构建DOM了。 我们知道“CSS会阻塞JS的执行，所以JS必须等到CSSOM创建完成之后才能执行”
那么我们前面说的是CSS放在腹部加载，JS文件放在页面顶部加载，这样就可以解释了。
CSS 和 DOM 的关系❝
CSS不会阻塞DOM的解析，但会阻塞DOM的渲染
❞CSSOM的作用
从前面提到的浏览器渲染流程我们可以看到：
CSS 和 JS 的关系❝
CSS会阻止JS执行，但不会阻止JS文件的下载
❞
因为 JavaScript 可以操作 DOM 和 CSS，如果在渲染界面的同时（即 JavaScript 线程和 UI 线程同时进行）改变这些元素的属性，渲染线程前后获取到的元素可能会不一致。因此，在为了避免出现意外的渲染结果，浏览器设置了“GUI渲染线程和JavaScript线程互斥”的关系。
如果JS脚本的内容是获取元素的样式，那么就必须依赖CSS。 由于浏览器很难感知到 JS 内部想要做什么，为了防止样式被获取到，必须等待上述所有样式都下载完毕之后才能执行 JS。 但是JS文件和CSS文件是并行下载的，CSS文件会在前一个JS文件执行之前加载并执行，所以CSS会阻塞前一个JS文件的执行。
JS 和 DOM 的关系❝
“JS会阻塞DOM的解析”，所以也会阻塞页面的加载
❞
“这就是为什么我们常说JS文件应该放在最底层”
因为 JavaScript 可以操作 DOM，所以如果在渲染界面的同时改变那些元素属性（即 JavaScript 线程和 UI 线程同时运行），渲染线程前后获取的元素数据可能会不一致。
因此，为了避免渲染结果不可预知，浏览器设置了“GUI渲染线程与JavaScript引擎互斥”的关系。
当JavaScript引擎执行时，GUI线程将被挂起，GUI更新将被存储在队列中，并在引擎线程空闲时立即执行。
当浏览器执行JavaScript程序时，GUI渲染线程会被保存在队列中，直到JS程序执行完成，然后才会继续执行。
因此，如果JS的执行时间过长，就会导致页面的渲染不连贯，造成页面渲染、加载阻塞的感觉。
推理
因为CSS和JS会阻塞DOM的渲染，所以我们应该尽可能提高CSS的加载速率html加载顺序，延迟加载JS。
优化 CSS 加载
发表评论