本文旨在介绍浏览器的事件循环机制，并结合 HTML Standard 分析它在HTML文档解析任务(HTML Parsing)中的具体体现，以及脚本的加载和执行对解析任务和页面渲染造成的具体影响。

当我们去探索浏览器运行原理的时候，我们倾向于执行多个例子去推断其内在的设计；在很长一段时间内，我也是这么去探索浏览器这个黑盒的，但这么做始终只是验证例子本身而不能断言浏览器实际的行为。为了追求真理（误），决定写这个系列的文章，从源头探索浏览器的行为准则。 HTML Standa…

今天文章来聊聊浏览器到底是如何对待下载资源的，比如说 JS、CSS、字体、图片等文件。 HTML 在解析的过程中遇到同步的 script 会卡住 DOM 解析这个知识点我相信读者们应该都知道。 上述代码中，HTML 遇到 <script>console.log(1)&…

之前面试今日头条的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。 假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我…

hello~各位亲爱的看官老爷们大家好。估计大家都听过，尽量将CSS放头部，JS放底部，这样可以提高页面的性能。然而，为什么呢？大家有考虑过么？很长一段时间，我都是知其然而不知其所以然，强行背下来应付考核当然可以，但实际应用中必然一塌糊涂。因此洗（wang）心（yang）革（b…

从 HTML5 规范到浏览器内部的数据结构再到渲染实际流程，完全阐述浏览器渲染机制 -- 渲染并不只是重绘重排和 composite 那么简单。

大家都知道万维网的应用层使用了HTTP协议，并且用浏览器作为入口访问网络上的资源。用户在使用浏览器访问一个网站时需要先通过HTTP协议向服务器发送请求，之后服务器返回HTML文件与响应信息。这时，浏览器会根据HTML文件来进行解析与渲染（该阶段还包括向服务器请求非内联的CSS文…

本文不是关于浏览器渲染的底层原理或前端优化具体细节的讲解，而是关于浏览器对页面的渲染——这一过程的描述及其背后原理的解释。这是因为前端优化是一个非常庞大且零散的知识集合，一篇文章如果要写优化的具体方法恐怕只能做一些有限的列举。 然而，如果了解清楚浏览器的渲染过程、渲染原理，其实…

使用 Chrome Devtool 进行性能分析时，在 Performance 面板上，可以看到用绿线标出来的 First-Contentful-Paint。浏览器何时进行首次渲染？网上只能查到一些模棱两可的资料，今天我们来探究这个问题。 1. 引子 在掘金上用『首次渲染』进行…