浏览器是如何运行的

浏览器的发展史

1991年Berners Lee(互联网发明者之一)font>建立了第一代网络浏览器 WorldWideWeb —— 只支持显示文本图片
1993年 Mosaic —— 可以同时显示文本和图像的浏览器
1994年 网景浏览器 —— 只能显示简单的 html 没有css、js 获得世界范围内的成功、占领了绝大多数的市场份额
- 同年出现了 opera 浏览器
1995年 Microsoft 发布了万恶的 IE1.0、IE2.0 自此第一次浏览器大战正式打响
1996年 Windows 集成 IE3.0
- 网景市场份额 86% IE发行后的4年内在Windows操作系统的帮助下逐渐取代了网景浏览器的领导地位，达到了市场份额的75%
1998年网景公司成立了 Mozilla 基金会开发了著名的开源项目 Firefox 浏览器
1999年 IE市场份额为 99%
2003年 Apple 发布了 Safari 浏览器集成于所有 Apple 操作系统中
2004年 Firefox 发布1.0版本 拉开了浏览器第二次大战的序幕有
2005年 Apple 开源了 Safari 浏览器的内核 webkit
2008年 Google 以Apple 开源项目 webkit 作为内核创建了一个新的项目 Chromium 在此基础上 Google 发布了 Chrome 浏览器 Chrome发展十分迅速现在已经成为了全球最受欢迎的浏览器
2015年由于IE性能和体验问题IE逐渐掉队，Microsoft也放弃了IE推出了基于 webkit 内核的 Edge 浏览器
2020年 Microsoft 正式发布基于chromium 内核的 Edge浏览器

简化的浏览器结构图

浏览器结构图

渲染引擎

渲染引擎可以说是一个浏览器的核心与灵魂
IE —— Trident
Firefox —— Gecko
Safari —— Webkit
Chrome 、Opera、Edge—— Blink 基于 Webkit 优化改造的

渲染过程

浏览器进程中的网络线程请求获取到html数据后，通过IPC将数据传递给渲染器进程的主线程，主线程将html解构造成DOM树，然后进行样式计算，根据DOM树和生成好的样式生成Layout Tree，通过遍历Layout Tree生成绘制顺序表，接着便离了Layout Tree生成了Layer Tree，然后主线程将Layer Tree和绘制顺序信息一起传给合成器线程，合成器线程按规则进行分图层，并把图层分为更小的土块传给栅格线程进行栅格化，栅格化完成后，合成器线程会获得栅格线程传过来的“draw quads”图块信息，根据这信息合成器线上合成了一个合成器帧，然后将该合成器帧通过IPC传回给浏览器进程，浏览器进程再传到GPU进行渲染之后就展示在你的屏幕上了。

当我们改变一个元素的尺寸位置属性时，会重新进行样式计算、布局、绘制以及后面的所有流程——重排

当我们改变某个元素的颜色属性时，不会重新触发布局，但还是会触发样式计算和绘制——重绘

重排和重绘都会占用主线程 JS也运行在主线程

渲染过程

优化手段

一、requestAnimationFrame()

requestAnimationFrame()这个方法会在每一帧被调用，通过API的回调，然后我们可以把JS运行任务分成一些更小的任务块(分到每一帧)
在每一帧时间用完前暂停JS执行，归还主线程，这样的话在下一帧开始时，主线程就可以按时执行布局和绘制

二、只在合成器线程和栅格线程中运行

CSS动画属性 transform 通过该属性实现的动画不会经过布局和绘制，而是直接运行在合成器线程和栅格线程中，所以不会受到主线程中JS执行的影响
哪些CSS属性可以用 transform 来代替: 位置变化、宽高变化（旋转、3D等）