浏览器运行原理

浏览器运行原理

常见的面试题：从用户在浏览器地址栏输入网址，到看到页面，中间都发生了什么？

涉及知识点：TCP协议的三次握手四次挥手、HTTP报文、状态码、304缓存、DNS缓存、性能优化、重绘回流、AST语法解析树、DOM树、Layout树、Layer树、requestAnimationFrame、同步异步编程、闭包作用域、堆栈内存、面向对象、微任务和宏任务、事件循环、AJAX同源请求和跨域请求解决方案、Cookie和Session以及Token

• HTTP的请求阶段：DNS解析，TCP三次握手四次挥手、HTTPS和HTTP的区别等
• HTTP的响应阶段：HTTP状态码（304缓存），响应报文等
• 浏览器渲染阶段：重绘回流等

1】进程和线程

进程Process：进程通俗讲就是我们开的每一个程序

线程Thread：每个程序（进程）可能会做很多事情（子任务），就是线程

栈内存Stack：运行代码的环境（存放指针，这些指针指向堆内存）

2】parseHTML中dom,css,js的顺序

CSS样式表

浏览器在加载网页的过程中，先下载HTML并开始解析。如果发现外部CSS资源链接，就发送下载请求。浏览器在下载CSS资源的同时，解析HTML文件。

在应用样式的时候，不会更改DOM树，而是生成CSS树，因此解析样式表的时候也不会停止文档解析。

JS脚本

解析器遇到<script>标记时，立即解析并执行脚本。一旦发现有脚本文件的引用，就必须等待脚本文件下载完。这时，文档的解析会暂停，并且等到脚本执行完再继续。所以，脚本文件的下载和执行，会阻断其他资源文件的下载。JS会阻塞解析HTML。所以建议<script>一般放最后面，或者使用defer或者async属性异步加载。

3】图解

主线程：dom tree&&css tree—结合—》layout tree（layout过程）—》update layertree（形成层叠上下文的过程）–》paint（计算层叠上下文，形成表记录在哪绘制，啥时绘制）–》composite（绘制我们记录的表）

合成器线程----》整个过程栅格化数据，把画面分块，再组合形成Frame—交给—》GPU线程去渲染。

之后的话，重排和重绘以及js执行或者用户行为都会占用主线程。

4】回流和重绘

- 布局是页面首次加载时进行的操作，重新布局即为回流。

- 绘制是页面首次加载时进行的操作，重新绘制即为重绘。

5】requestAnimationFrame优化

当页面或者动画以每秒60帧的刷新率时，才不会让用户感觉页面卡顿。

如果每一帧在运行动画的时候，还有大量JS任务需要执行。（布局、绘制、JS执行都是在主线程中运行的）当在一帧的时间内布局和绘制结束后，还有剩余的时间JS就会拿到主线程的使用权，如果JS的执行时间过长，就会导致下一帧开始时JS依然没有执行结束（依然占用这主线程，也就是说JS执行可能会阻塞主线程），导致下一帧的动画没有按时渲染，就会出现页面的卡顿。

此时我们就可以使用requestAnimationFrame这个API来优化。

requestAnimationFrame这个方法会在每一帧开始时调用执行，在每一帧结束时回调（requestIdleCallback）：帮我们把JS运行任务分成一些更小的任务块（分到每一帧结束的位置），在每一帧时间用完前暂停JS运行任务，归还主线程，按时渲染下一帧