https://cloud.tencent.com/developer/article/1174830
https://blog.csdn.net/u012347650/article/details/137418721
css阻塞优化：
还可以用媒体类型（media type）和媒体查询（media query）来解除对渲染的阻塞。
media=“print",会加载，但不会阻塞；media="(min-width:320px)",会在符合查询条件下阻塞（适配css会执行）
大css文件拆分成多个小css文件，并发加载
因为渲染线程和js线程与资源进行加载的线程并不互斥，不会互斥意味着：资源的加载可以和UI渲染、重排，事件响应，或者JavaScript代码的执行的并发进行。
所以资源加载器线程会一直进行并发加载。
这里还有一个知识点：下载的最大并行数指的是从一个主机上下载的最大并行数，如果从多个主机下载资源，这个数量会翻倍，但是由于对DNS的解析也是一个性能优化的点，故而一般策略是：不应设置超过4个主机，最好只设置2个主机。
但是操蛋的就是，如果浏览器解析DOM时需要下载脚本资源，那么下载这个资源的线程就是阻塞其他下载线程以及渲染线程，导致渲染速度变慢。
但是假设该脚本下载的速度较慢，而且多个脚本非并发下载，并且假如多个<script>内脚本执行时间较长的话，DOM解析工作还是会一直完不成。
故而我们需要无阻塞加载脚本的技术。
js阻塞优化
因为：脚本执行和渲染DOM的并发可能会引发严重的冲突（脚本可以修改DOM）
所以：JavaScript引擎和渲染引擎所在的两个线程被设计为互斥的！
这就意味着：在执行<script>中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。这时候如果脚本执行时间太长的话，不仅后面的元素会一直看不到，对DOM的解析工作也会一直完不成。用户会陷入焦急的等待中。
为了防止javascript阻塞，我们会
1、把<script>放到紧跟</body>之前的位置
这样就不会影响需要放到页面上的UI元素的解析了。这样的好处就是，用户能即使看到页面上的UI元素，而防止出现了浏览器白屏等现象。
2、动态脚本元素-不重要的js动态插入。
因为document.createElement("script")的async属性默认为true，而document.head.appendChild代码之后，由于没有触发渲染树的重绘，切换回的渲染线程会将剩下的DOM解析并渲染完毕。同时新插入的<script>中的资源也会并发的下载。
代码语言：javascript代码运行次数：0
运行
AI代码解释
var script=document.createElement("script");
console.log(script.async);//true
同理：用XHR对象下载代码，并注入到页面也可以达到同样的效果
如果需要同步执行，需要将async属性设置为fasle
3、h5时代，script添加defer或asyn两个属性(html4.0中定义了defer；html5.0中定义了async)
如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到 HTML 解析完成后才会执行。而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。即：整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。defer不会改变script中代码执行顺序
如果 script 标签中包含 async，则 HTML 文档构建不受影响，不需要等待 async-script 执行。但是，async-script 加载完成后，就会立即执行！如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。而且：多个 async-script 的执行顺序是不确定的。