当在地址栏中输入内容回车时，浏览器干了啥？

当在地址栏中输入内容回车时，浏览器干了啥？

浏览器进程中的UI线程会监听到用户的输入，并判断输入内容类型，如果是关键字，则会使用默认配置的搜索引擎来查询，如果是域名，则会交给网络线程处理，通过DNS解析获取IP地址，接着开始与服务器建立TCP连接获取数据，获取到数据后，浏览器的安全系统会检查是否存在安全问题，如果存在，则会提示用户，用户也可选择无视，继续访问，接着网络线程会通知UI线程准备完毕，然后UI线程会创建一个渲染器进程，并通过IPC管道把数据传递给渲染器进程来渲染页面，接着渲染器进程的主线程开始逐层深入解析HTML生成DOM Tree，在解析的过程中如果发现JS脚本，则会停止解析，执行JS脚本，接着继续解析HTML，DOM Tree生成后，接着解析样式，然后基于DOM Tree和样式生成Layout Tree（Layout Tree和DOMTree并不是一一对应的，比如：display: none的节点不在Layout Tree中，而::before、::after这种伪元素不在DOM Tree中），有了Layout Tree后，我们还需要知道以什么顺序绘制（paint），主线程会遍历Layout Tree创建绘制记录表，该表记录了绘制的顺序，确保在屏幕上显示正确的层级，接着遍历Layout Tree生成Layer Tree图层树，接着主线程将Layer Tree和绘制顺序信息传递给合成器线程，合成器线程按规则进行分图层，并将每个图层栅格化，由于一层可能像整个页面一样大，所以会拆分成若干个图块，然后将每个图块发送给栅格化线程处理，栅格化线程处理完后将他们存储在GPU内存中，合成器线程将按需收集这些图块信息（draw quads）生成一个合成器帧（Compositor Frame），接着通过IPC将合成器帧传回给浏览器进程，然后交给GPU渲染展示到屏幕上，用户就看到了页面内容，当后续页面再发生变化，都会生成一个新的合成器帧，再传到GPU进行渲染，当我们改变某个元素的尺寸位置属性时，会重新进行样式计算、布局、绘制以及后面的所有流程，这种行为我们称为重排，当我们改变某个元素的颜色属性时，不会重新触发布局，但还是会触发样式计算和绘制，这个就是重绘，重排和重绘都会占用主线程，JS也是运行在主线程上，所以就会出现抢占执行时间的问题，如果写了一个不断导致重排重绘的动画，浏览器则需要在每一帧都运行样式计算、布局和绘制的操作，我们知道当页面以每秒60帧的刷新率（1000/60≈每帧16ms）才不会让用户感觉到卡顿，如果在运行动画时还有大量的JS任务需要执行，当在一帧的时间内布局和绘制结束后如果还有剩余时间，JS就会拿到主线程的使用权，如果JS执行时间过长，在下一帧开始时还没有及时归还主线程，就会导致下一帧动画没有按时渲染，出现动画的卡顿，可以通过两种手段优化，第一种就是通过requestAnimationFrame()这个API来帮助我们解决，这个方法会在每一帧的剩余时间内调用，下一帧开始前暂停JS执行，归还主线程，通过API的回调，我们可以把JS任务分成一些更小的任务块，React最新的渲染引擎React Fiber就是用到了这个API来做了很多优化，第二种优化方法，由于分图层和栅格化的整个流程是不占用主线程的，只在合成器线程和栅格线程中运行，这就意味着它无需和JS抢夺主线程，我们刚才提到如果反复进行重排和重绘可能会导致掉帧，这是因为有可能JS执行阻塞了主线程，而CSS中有个动画属性叫transform，通过该属性实现的动画不会经过样式计算、布局和绘制，而是直接运行在合成器线程和栅格化线程中，所以不会受到主线程中JS执行的影响，更重要的是，节省了很多运算时间，一般位置变化，宽高变化等等，都可以使用transform来代替。