浏览器工作原理

浏览器工作原理

一、浏览器

下面是Chrome 浏览器的进程架构图：

• 浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能
• 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，JavaScript 引擎 V8 都是运行在该进程中
• GPU 进程。3D CSS 的效果，UI界面绘制
• 网络进程。主要负责页面的网络资源加载
• 插件进程。主要是负责插件的运行

二、从URL输入到页面展示的过程：

事件循环

每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理html，又要处理css、js 以及各种事件，如何做到有条不紊地执行任务呢，需要事件循环来帮助统筹调度。

事件循环的两个基本原则：

• 一次处理一个任务
• 一个任务开始后直到运行完成，不能被其他任务中断

渲染进程会有个队列专门存放待执行的任务 ，队列中会有输入事件（鼠标滚动、点击、移动）、dom解析、样式计算，微任务、计时器等等类型，队列有着先进先出的特点，主线程会从队列中那个循环取出任务执行

微任务是需要尽可能快的执行，微任务使得我们在渲染ui之前执行指定的行为，避免不必要的ui重绘，如promise既是典型的微任务。

在一次循环中，事件循环首先检查宏任务队列，如有任务在等待则立即开始执行任务，直到执行完成，事件循环将检查微任务队列，如有任务在等待，则事件循环会一次开始执行微任务，直到微任务队列被清空。单次循环中，最多处理一个宏任务，而队列中的微任务都会被处理。当处理完成后，事件循环会检查是否需要更新ui渲染，如果是则会重新渲染ui视图。

计时器

• setTimeout 延时计时器，延迟一定的时间后执行回调函数
• setInterval 间隔计时器 ，按照指定的延迟间隔不断执行回调函数，直至取消
  

Q1：以下代码什么时候打印 “2022年” 呢？2147483648=大约 24.8 天

function showName(){ console.log("2022年")};
var timerID = setTimeout(showName,2147483648);
1
2

• 一个例子

        setTimeout(()=>{
            //to do something  runs for 6ms
        },10)
        setInterval(()=>{
            //to do something  runs for 8ms
        },10)
        const myButton=document.getElementById("myButton")
        myButton.addEventListener('click',function(){
            //to do something  runs for 10ms
        })
        // to do something  runs for 18ms
1
2
3
4
5
6
7
8
9
10
11

示例中发生顺序如下
1、0ms时，setTimeout 延迟10ms 执行，setInterval 延迟10ms 执行
2、6ms 时点击了按钮
3、10ms时，setTimeout到期，setInterval 第一个时间间隔触发
间隔计时器每10ms 触发一次 ，则间隔时间是
10、20、30、40、50、60、70

时间轴如下：

1. 18s后主线程执行结束，开始处理队列中的点击事件，点击事件需要处理10ms，则下个时间节点是28ms，在此过程，第20s时间隔计时器再次触发，由于间隔计时器已经在队列中等待执行，该触发会终止。
2. 28ms后点击事件处理完毕，下一个循环按照先后顺序轮到延迟计时器，他需要6ms时间，下个时间节点是34ms，在此过程，第30ms时间隔计时器再次触发，由于间隔计时器已经在队列中等待执行，触发仍然会被中止。
3. 34ms后终于可以执行第一个间隔计时器了，他需要8ms时间，下个时间节点是42ms，在此过程，第40ms时间隔计时器再次触发，此时由于间隔计时器正在执行而不是等待状态，一个新的间隔计时器任务被加入到任务中
4. 从第50ms开始 间隔计时器能稳定在每10ms执行一次。

例子中的间隔计时器尽管我们的预期是 10、20、30、40、50、60、70时触发，事时上回调函数却在34、42、50、60、70ms时执行，少执行了两次，

由此可见，我们只能控制计时器何时被加入队列而无法控制何时执行，计时器上的延迟时间只代表最少延时时间，真正的延迟时间视任务队列情况而定。

回到刚才的问题：

function showName(){ console.log("2022年")};
var timerID = setTimeout(showName,2147483648);
1
2

1、解：
Chrome、Safari、Firefox 都是以 32 个 bit 来存储延时值的，32bit 最大只能存放的数字是 2^31-1 = 2147483647 毫秒，这就意味着，如果 setTimeout 设置的延迟值大于 2147483647 毫秒（大约 24.8 天）时就会溢出，那么相当于延时值被设置为 0 了，这导致定时器会被立即执行