浏览器整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

前端开发工作者几乎天天与浏览器打交道，熟悉浏览器，能让我们的技术提升，有着质的飞越，对于浏览器运行机制，性能优化等方面，都有所帮助。

Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。 配合无痕模式，可以避免chrome插件的影响。 1. 录制查看 下面部分是网页快照，浏览器按照一定时间间隔截取。 2. 实时查看 Paint Flashing 高亮显示网页中需要被…

浏览器渲染 DOM树 CSSOM树 CSS不会阻塞HTML解析 JS会阻塞HTML解析 reflow repaint

介绍了浏览器发展史以及页面加载时浏览器各个进程之间的协作，重点分析了渲染进程的工作原理，最后还拓展了一下定时器与AJAX的实现原理。

什么是渲染(render)? 浏览器中的“渲染”指的是将HTML字符串转化为屏幕上的像素信息的过程。本文将教会你什么是浏览器渲染原理。

简介 本文介绍 Chrome DevTools Performance 面板的所有功能，以便使用其分析页面加载时/运行时性能，找出性能瓶颈。 功能面板概览 控制面板（红色区域）：控制性能分析相关功能的

一、写在前面 我发现即便工作很久了，我还是不会用performance性能分析工具，可能很多小伙伴跟我有一样的问题！ 于是我怒学了一通performance性能工具的使用，想写一篇如何使用perfor

网页加载后，浏览器会解析 html、执行 js、渲染 css，这些工作都是在 Event Loop 里完成的，理解了 Event Loop 就能理解网页的运行流程。 但很多人对 Event Loop