浏览器的主要功能是呈现用户选择的网页资源。它需要向服务器请求资源并显示在浏览器窗口中。资源的格式通常为HTML，包括PDF、图片等格式。浏览器线程浏览器是多线程的，它们在内核的控制下相互协作，保持同步。浏览器至少实现了三个常驻线程：JavaScript引擎线程、GUI渲染线程和浏览器事件触发线程。GUI渲染线程：负责渲染浏览器界面的HTML元素。当界面需要重绘（Repaint）或由于某种操作导致回流（reflow）时，该线程就会执行。当Javascript引擎运行脚本时，GUI渲染线程被挂起，也就是“冻结”。JavaScript引擎线程：主要负责处理Javascript脚本程序定时器触发线程：浏览器计时计数器不被JavaScript引擎统计，JavaScript引擎是单线程的，如果处于阻塞线程状态，会影响计时的准确性，所以浏览器的定时和计时是由一个单独的线程触发的。事件触发线程：当事件触发时，线程会将事件添加到待处理队列的末尾，等待JS引擎处理。这些事件包括当前正在执行的代码块如定时任务、浏览器内核的其他线程如鼠标点击、AJAX异步请求等。由于JS的单线程关系，这些事件都需要排队等待处理JS引擎。对于定时块、ajax请求等任何异步任务，事件触发线程只有在定时时间到达或ajax请求成功后，才会将回调函数放入事件队列。异步HTTP请求线程：连接XMLHttpRequest后，通过浏览器开启一个新的线程请求。当检测到状态变化时，如果设置了回调函数，异步线程会产生一个状态变化事件，放入JavaScript引擎的处理队列中进行处理。当发起异步请求时，http请求线程负责向服务器请求。收到响应后，事件触发线程将返回函数放入事件队列。浏览器渲染流程1.解析html并构建dom树；解析CSS会生成一个CSS规则树。浏览器解析HTML文档的源代码，然后构造DOM树。所有子节点构造完成后，将构造当前节点的下一个兄弟节点。浏览器解析CSS文件的内容。一般来说，浏览器会先寻找内联样式，然后是CSS文件中定义的样式，最后是浏览器的默认样式，构建CSSRuleTree。2.构造渲染树根据DOM树和CSSOM树构造RenderingTree。注意：RenderingTree并不等同于DOM树，因为像Header或者display:none这样的东西不一定放在渲染树中。3.Layout（布局）rendertree通过RenderTree，浏览器已经可以知道网页中有哪些节点，每个节点的CSS定义以及它们的从属关系，从而计算出每个节点在屏幕上的位置。4.绘制（painting）渲染树根据计算出的规则，通过显卡将屏幕上的内容绘制出来。5.Reflow（回流）当浏览器发现某个部分发生了变化，影响了布局，就需要返回去重新渲染。专家称此回退过程为回流。reflow会递归地从根框架开始，依次计算所有节点的几何尺寸和位置。6.重绘（repaint）当改变一个元素的背景颜色、文字颜色、边框颜色等不影响其周围或内部布局属性时，需要重绘屏幕的一部分，但该元素的几何尺寸元素没有改变。浏览器对CSS和JS的解析规则CSS：放在head的CSS会阻塞页面的渲染（页面的渲染会等到css加载完成）CSS会阻塞JS的执行（因为GUI线程和JSthread是互斥的，因为有MaybeJS会操作CSS)CSSdoesnotblockloadingofexternalscripts（它不阻塞JS的加载，而是阻塞JS的执行，因为浏览器会有预扫描器）JS：直接导入JS会阻塞页面渲染（GUI线程和JS线程互斥）异步加载JS（给script标签加defer属性）不阻塞页面渲染异步加载JS（加async属性到script标签），下载过程不阻塞页面渲染，下载完成后立即执行，阻塞页面渲染JS不阻塞资源加载JS顺序执行，阻塞执行后续JS逻辑HTML页面加载解析过程用户输入URL（假设是html页面，并且是第一次访问），浏览器向服务器发送请求，服务器返回html文件；浏览器开始加载html代码，发现
标签中有一个标签引用了外部CSS文件；浏览器发送CSS文件请求，服务器返回CSS文件；（在GUI渲染线程继续执行的同时，浏览器继续加载html中部分的代码，CSS文件已经获取，开始渲染页面；浏览器发现一个