浏览器底层渲染机制

发布时间:2024年01月03日

@1 进程:一个软件应用,一个浏览器界面打开运行后都会产生一个进程。
? ? 2 线程:一个进程包含一个或多个线程。每一个线程同时只能做一件事情,处理完这件事才能处
? ? ? 理下一件事情。
? ? 3 异步编程:多线程可以同时处理多件事情。

@2 浏览器具备的线程:
? ? ? ? GUI线程:主要用来界面的渲染 html css img等
? ? ? ? js引擎线程:渲染解析js代码
? ? ? ? http网络请求线程:从服务器获取内容同时可以开通5-7个
? ? ? ? 定时器监听线程:监听定时器是否到达时间
? ? ? ? 事件监听线程: 监听事件是否触发

@3 关于GUI渲染遇到样式的问题:
? ? ? ? GUI渲染过程中,如果遇见style【内嵌式】无需去服务器拉取,但是需要等DOM加载完,再
????????加载。 如果遇到<link>标签引入外联样式,这时候会去服务器拉取,但是不会影响DOM的加
????????载,CSS的渲染会在DOM渲染之后再进行渲染。如果是遇到@import加载样式的话,会阻碍
? ? ? ? DOM结构的渲染,所以尽量不要用@import引入样式标签。
? ? ? ? 建议: 如果css样式较少的情况下 尽量写在内嵌式中,? 样式代码较多的时候link标签尽可能的
????????少,减少服务器的加载,同时link标签放在header头中,可以与DOM渲染异步加载,非必要
????????不使用@import加载样式。


@4 关于GUI渲染遇到js的问题;
? ? ? ? 遇到script标签会开辟新的线程 js线程与GUI线程排斥,JS会阻塞GUI线程的运行。
? ? ? ? 建议:把script标签尽可能写在body底部。在header中使用script标签的时候可以添加async
????????defer关键字,让script加载的同时不影响DOM的渲染。 saync与defer不同之处在于,async加
????????载完js代码会立即执行这时候会阻塞DOM,而defer不会再js加载完后立马就进行渲染运行阻
????????塞DOM运行。

@5 js代码是单线程的,其中大部分都是同步运行的,但是也存在部分异步操作的代码。
? ? ? ? 异步微任务:requestAnimationFrame,promise.then/catch/finaly, async/await,
????????intersectionObserver,mutationObserver, queueMicrotask
? ? ? ? 异步宏任务:setTimeout/setInterval? xmlhttprequest/fetch? messageChannel
????????
????????

文章来源:https://blog.csdn.net/h960822/article/details/135348295
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。