浏览器与性能优化

从输入网址到页面展示是一个复杂的过程，包括HTML数据加载，创建DOM和CSSOM，加载其他资源文件，最后绘制完成。其中有很多因素导致页面很慢或者很卡，通过本文的梳理可以对页面的整个流程有个清晰的把握

衡量web页面的性能有fp、fcp、DCL等指标，但是这些指标并不是很好理解，本文从实验的角度还原了这些事件出现的时机，为后面做性能优化提供了理论基础。

js和css都会影响页面的渲染，浏览器遇到脚本之前会去渲染好已经解析好的DOM，其实遇到请求css文件link标签也会渲染之前的内容。

本文详细介绍了构建DOM树，样式计算、布局计算及分层四个渲染阶段，每个阶段里面有很多细节对于指导实际开发非常有用。

本文介绍了缓存的分类，重点介绍了浏览器缓存，包括强制缓存和协商缓存。同时，介绍了利用webpack如何进行缓存优化。

通过 Main 指标完整地分析了一个页面从加载到显示的过程，了解这个流程，自然就会去分析页面的性能瓶颈，比如你可以通过 Main 指标来分析 JavaScript 是否执行时间过久等等

本文介绍了图片的几个格式及对应的使用场景，特别是png，jpg，webp。同时，介绍了图片懒加载的实现过程。

本文介绍了如何使用预加载进行web应用的性能优化。对于常用的域名，可以在首页进行DNS Prefetch，特别是有国际业务。对于页面资源也可以进行预加载，当用到的时候可以立刻显示出来。

本文主要介绍了如何利用 Lighthouse检测页面性能，分析 Web 应用在加载阶段的几个关键时间点以及对应的优化策略。

本文重点讲了加载阶段和交互阶段的优化策略，在加载阶段尽量减少关键资源的个数和大小，在交互阶段尽量减少一帧生成的时间。

本文分析了chrome任务调度的进化过程，首先利用多个不同优级的消息队列来解决队头阻塞问题，接着利用不同的任务类型来划分任务优先级来保证任务的相对执行顺序，最后基于不同的场景来动态调整消息队列的优先级

本文介绍了显示器显示图像的原理，以及帧和帧率的概念，以及合成一张图片的三种方式：重排、重绘及合成。最后讲解了使用 will-change 来优化动画或特效的方法。

本文分析了CSS在渲染流水线上的位置，以及它如何影响首屏渲染的速度。把渲染流水线分为从发出请求到页面首次绘制的三个阶段，并重点介绍了第二个白屏阶段以及优化该阶段的一些策略。

本文分析了DOM是如何生成的，并介绍了javascript如何影响Dom的生成，并提出了相应的加速方案。理解了这些，才能更加深刻地理解如何去优化首次页面渲染。

本文详细介绍了渲染流水线的图层绘制和合成阶段这两个阶段，并解释了什么是重排，重绘和合成，这为后续的性能优化奠定了理论基础。

本文详细的梳理了一个完整http请求过程的，里面其实包含了很多性能优化的解决思路，比如请求一个文件很慢，那么就可以从TCP连接，资源过大，没有缓存等思路去解决。

本文重点剖析了网络面板，分析了网络面板中各个指标的含义；最后简要分析了时间线中各项指标出现异常的可能原因，并给出了一些优化方案。