浏览器中的宏任务和微任务 在上一篇文章中我们讲了浏览器是如何实现 setTimeout 的，通过 setTimeout 的实现，我们大体上知道了浏览器中消息循环系统是如何工作的。不过随着新技术的涌现，消息队列中这种粗时间颗粒度的任务已经不能满足一些新技术的需求。所以为了满足实时性和效率之间的平衡，浏览器中又出现了一种新的技术——微任务。对应的，你们一定听说”宏任务“，那么微任务和宏任务的具体区别是什么，它们是如何相互取长补 2020-08-16 浏览器 浏览器
浏览器怎么实现setTimeout的？ 定时器的概念非常简单，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的ID，同时你还可以通过这个ID来取消这个定时器。 function showName(){ console.log("这是一个定时器") } const timerID = setTimeout(showName, 2 * 1000); 定时器虽然概念简单，但是它里 2020-08-16 浏览器 浏览器 JavaScript
浏览器中的消息队列和事件循环 前面我们讲到了每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条不紊地执行，这就需要一个系统来统筹调度这些任务，这个统筹调度系统就是我们今天要讲的消息队列和事件循环系统。 使用单线程处理安排好的任务我们先从最简单的场景讲起，比如有如下一系列的任务： 任务 2020-08-16 浏览器 浏览器
浏览器渲染流程 上一篇文章介绍了浏览器导航相关的流程，不过导航流程结束后，页面是白屏。因为此时渲染流程还没开始，页面内容还没有被渲染出来。这篇文章我们来仔细了解一下渲染流程。 渲染阶段非常重要，也是浏览器里最核心和最复杂的模块之一。了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用 2020-08-16 浏览器 浏览器
浏览器导航流程 从输入 URL 到页面展示，中间发生了什么？这个是一道很经典的面试题，它能比较全面的考察一个人的网络、操作系统、Web 等相关知识。同时还可以把网络、操作系统、HTML、CSS、JS 这些知识串联起来。那么今天我们就来探索一下这个流程。 上图就是从输入 URL 到页面展示完整流程示意图。我们先从大体上过一遍这个流程，然后在去看具体的细节。 首先，浏览器进程接收到用户输入的 URL 请求，浏览 2020-08-16 浏览器 浏览器
Chrome浏览器架构 这篇文章，我们来讨论一下 Chrome 浏览器的架构。在讲架构之前，我们先来巩固一下两个概念：线程和进程。 进程和线程先来看看进程。简单来讲一个进程就是一个程序的运行实例。具体来讲，就是启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。 一个进程里可以有多个线程。线程不能单独存在，它是依附于进程的，并由进程启动和管 2020-08-16 浏览器 浏览器
CSS的解析和计算 通过上一篇《DOM 的解析》，我们已经知道当浏览器接收到 HTML 文本后，会将它解析成 Token ，再构建成 DOM 树。下面我们继续分析浏览器渲染流程的样式计算，即 CSS的解析和计算。 一、收集CSS规则浏览器开始处理 CSS 的第一步就是收集 CSS 规则。CSS 的规则来源有三种： 内联规则 外联规则 行内规则 如果浏览器遇到了一个 <link> 标签，rel 属性是 2020-08-16 浏览器 CSS 浏览器
DOM树的构建 DOM 是 HTML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。那么浏览器是如何将 HTML 解析成 DOM 树的呢？我们今天来探索一下。 大体来说，从 HTML 文档到 DOM 树有两大步。第一步，将 HTML 文档解析成一个个 Token。第二步：根据 Token 构建 DOM 树。其具体的流程图如下： 首 2020-08-14 浏览器 浏览器 DOM