URL到渲染流程和JS执行详情
2022-03-03 16:53:19 5 举报URL到渲染流程
作者其他创作
大纲/内容
定时触发器线程(setTimeout)
本地没有解析
异步http请求线程(ajax)
本地客户端(浏览器)
var scope = \"global scope\";function checkscope(){ var scope2 = 'local scope'; return scope2;}checkscope();
宏任务
计算后绘制(渲染)
输入url
其他资源(如图片)
html文件
Dom Tree(html解析为Dom树)
onload:执行时机: html和所有资源解析下载渲染完毕
界面渲染线程
事件触发线程(Dom事件)
返回html文档文件
CSS(样式表)默认情况下，CSS 被视为阻塞渲染的资源(不阻塞解析)，这意味着浏览器将不会渲染任何已处理的内容，直至CSSOM 构建完毕JS 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性，因此 CSS 解析与 script 的执行互斥。存在阻塞的 CSS 资源时，浏览器会延迟 JS 的执行和 DOM 构建
浏览器渲染进程(多线程)
执行完毕
html解析:现代浏览器总是并行加载资源。例如，当 HTML 解析器被脚本阻塞时，解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载
微任务队列(js任务队列)(JS引擎维护)
服务器资源文件
JavaScript引擎线程(单线程)
css规则树 + Dom树
js执行栈(起始)
本地浏览器缓存
JS执行详情(Event Loop机制)
CSSOM(css规则树)
初始化
本地有解析
进行三次握手建立连接
互斥
dns服务器解析
渲染
function foo(a) { var b = 2; function c() {} var d = function() {}; b = 3;}foo(1);
函数上下文变量对象
收藏
收藏
0 条评论
下一页
