浏览器进程，线程，api请求，dom阻塞，js单线程和事件循环

本文链接：https://blog.youkuaiyun.com/qq_38301396/article/details/124836470

浏览器

浏览器每个tab页是一个进程，同样的tab页进程可能合并，浏览器是多线程的

api请求

浏览器并发请求，相同的GET最多只能发一个，不同的GET/POST最多可以发6个，不同的浏览器有差异

dom阻塞问题

head中css不会阻塞dom的解析，但会阻塞渲染，
body中css会阻塞dom解析
js会阻塞dom的解析
css阻塞js的执行（所以将<script>放在<link>标签前）

浏览器解析DOM时，虽然会一行一行向下解析，但是它会预先加载具有引
用标记的外部资源（例如带有src标记的<script>标签），而在解析到此标签>时，则无需再去加载，直接运行，以此提高运行效率
CSS会阻塞JS的执行的真正原因，浏览器无法预先知道脚本的具体内容
因此在碰到<script>标签时，只好先渲染一次页面，确保<script>脚本>内能获取到DOM的最新的样式。倘若在决定渲染页面时，还有尚未加载完>成的CSS样式，只能等待其加载完成再去渲染页面。

引入式，放在head里的script可以用defer等dom解析完再执行，或者async和dom解析异步并行执行

总结

CSS不会阻塞DOM解析，但是会阻塞DOM渲染，严谨一点则是CSS会阻塞render tree的生成，进而会阻塞DOM的渲染
JS会阻塞DOM解析
CSS会阻塞JS的执行
浏览器遇到

书写规范

把内联式<script>放在<body>闭合标签之前
<link>标签放在<head>内部
而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面

<html lang="zh-CN">
<head>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <link rel="stylesheet" href="./static/style.css?sleep=3000">           
</head>
<body>
    <p>hello world</p>
    <h1>h1标签</h1>
    <script src='static/index.js'></script> 
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            var p = document.querySelector('p')
            console.log(p)
        })
    </script>
</body>
</html>

js单线程和事件循环

主线程（同步任务）执行，按顺序执行形成执行栈，遇到异步任务，执行，存储在事件表格中，当指定事件完成，将回调函数放到任务队列中，执行栈执行完，为空，js去执行事件循环，从任务队列中取第一个任务放到执行栈中去执行，只要执行栈不为空，就不能执行下一个任务
任务队列分成微任务（task）和宏任务(jobs)，先查找微任务，微任务有值就先执行微任务，微任务为空则执行宏任务
微任务：process.nextTick，Promise，Async/Await(实际就是promise)，MutationObserver(html5新特性)
宏任务：script(整体代码)，setTimeout，setInterval，setImmediate，I/O (比如Ajax操作从网络读取数据)，UI render