网站建设明薇通网络,网站开发 一眼,论文关键词,东莞专业网络营销公司文章目录浏览器渲染进程有哪些#xff1f;浏览器的渲染过程浏览器渲染进程有哪些#xff1f;
GUI线程#xff1a;负责渲染浏览器页面#xff0c;解析html#xff0c;css#xff0c;构建DOM树#xff0c;CSS规则树#xff0c;渲染树和绘制页面#xff0c;当界面需要重…
文章目录浏览器渲染进程有哪些浏览器的渲染过程浏览器渲染进程有哪些
GUI线程负责渲染浏览器页面解析htmlcss构建DOM树CSS规则树渲染树和绘制页面当界面需要重绘或某种操作引发回流该线程就会执行JS引擎线程负责处理javaScript脚本解析javaScript脚本执行代码事件触发线程用开控制事件循环当JS引擎执行代码块如setTimeOut时会将对应任务添加到事件触发线程中去当对应的事件符合触发条件被触发时该线程会把事件添加到待处理队列的队尾等待JS引擎的处理定时器触发进程即setTimeOut和setInterval所在的进程异步http请求线程XMLHttpRequest连接后通过浏览器新开一个线程请求检测到状态变更时如果设置有回调函数异步线程就产生状态变更事件将回调函数放入事件队列中等待JS引擎空闲后执行
浏览器的渲染过程
步骤
首先解析收到的文档html代码会被解析成DOM树css代码会被解析成css规则树DOM树和css规则树需要结合形成渲染树此时的渲染树并没有位置和大小所以会根据渲染树进行布局也叫做回流最后在浏览器绘制显示
在这一过程中 我们有可能会遇到js去操作DOM的情况所以 问题一当浏览器渲染过程中遇到js文件该如何处理
首先我们要知道javaScript的加载解析与执行是会阻碍文档的解析的当在渲染过程中遇到了js文件浏览器是会暂停文档的解析把控制权交给javaScript引擎等到javaScript引擎运行完毕才会继续解析文档也就是说我们要是想首屏渲染的越快就越不应该把js代码放在首屏加载这也是为什么建议把script标签放在body底部的原因当然是不是就不能把script标签放在前面也不是我们可以通过async或者defer属性去改变
说完js文件那css文件的时候又会不会影响文档的解析呢 同样是会的 我们有时候会通过js代码区操作元素的样式在css规则树还没有完全构建的时候又想在此时去运行脚本显然这会导致很多问题所以浏览器将延迟javaScript脚本执行和文档的解析直至其完成css规则树的下载和构建也就是说运行脚本的过程中遇到css样式还没构建完全的情况会先暂停js的执行和文档的解析浏览器会先去下载和构建css规则树然后再执行js最后再继续文档解析
扩展 1针对javaScriptasync和defer属性的作用 可以异步加载js文件 两者区别
async是 下载完成之后立即异步加载加载好后立即执行多个带async属性的标签不能保证加载的顺序defer是在下载完成之后立即异步加载。加载好后如果DOM树还没构建好则先等DOM树解析好再执行如果DOM树已经准备好就立即执行。多个带defer属性的标签会按照顺序执行2针对csslink,import,内联样式 link和import都是外部导入样式
link:浏览器会派发一个新的线程HTTP线程去加载资源文件与此同时GUI渲染线程会继续向下渲染代码importGUI渲染线程会暂停渲染代码去服务器加载资源文件资源文件没有返回之前不会继续渲染style:GUI直接渲染
