浏览器原理

本文总结参考了这个链接

用户从输入url到接收到网页发生了什么

1. 以chrome为例，为多进程架构应用程序，分为浏览器进程，渲染进程，gpu进程，插件进程，互相之间通过ipc通信。其中浏览器会为每一个tab页（iframe）分配单独的渲染进程。
   ps 多进程架构的优势：独立性（一个崩溃不会连带）安全性（限制每个网页的权限）同时带来的问题：内存占用过多，每一个网页都具有各自的js引擎，因此浏览器限制了渲染器进程开创的个数，当数量过多的时候会让同一个域名下的网页合用同一个渲染进程
2. 浏览器进程中包括ui线程，网络线程，存储线程。与用户直接交互的是浏览器进程中的ui线程，用户在导航栏里输入搜索内容，ui进程会首先判断是关键词还是正确的url，然后交付给网络线程进行网络请求，进行dns寻址和，并根据ip地址进行对应的网络连接，建立tcp连接，发出http请求/https请求，根据服务器返回的响应做下一步判断(301永久重定向/302临时重定向等)。得倒ok的http响应的时候，网络线程会判断是什么mime类型，如果是html文件就进行安全检查后通知ui线程交付给渲染器进程，如果是其他的文件类型，交付给存储线程进行下载。
   ps service-worker是在js引擎中执行注册的信息，有其对应的域名范围和对应操作，网络线程还会在用户请求的时候对对应的请求域名做一个service worker的检查，如果命中就直接创建对应的渲染进程做对应操作。
3. 渲染进程的完整渲染流程：
   渲染进程包括主线程，多个工作线程，合成线程和光栅线程
   主线程接收并解析为dom对象，接收css样式解析成css树，并结合生成layout布局树，确定每个节点的位置大小并使得display：none的节点不出现在布局树中，然后开始确定绘制顺序，根据布局树生成layer树，确定多个绘制层，然后交给合成线程进行绘制，合成线程则将每一个图层再分别分割成小快交给光栅化线程进行计算，并存储结果与gpu中，合成线程则负责合成页面窗口下对应的合成内容，交付给浏览器进程的ui进程，并再通知gpu进程进行绘制。
4. 当浏览器页面中有事件发生时，如有用户输入的时候，浏览器进程会将用户输入事件通知渲染器进程中的合成线程，合成线程判断是否在预先注册的非快速运动区域内来判断是否要通过主线程来执行对应的事件。
5. js引擎运行和主线程解析dom构造树是不能同时进行的，defer和async这两个关键词可以使得js脚本的下载和dom解析同时进行。

浏览器同源策略

1. 禁止不同源的iframe互相操作节点
2. 不允许不同源的ajax请求
   原因：防止钓鱼网站和跨站请求伪造
   解决：jsonp/cors跨域资源共享/proxy/nginx

回流和重绘

回流是因为布局发生了变化重绘只改变了节点的色彩啊透明度啊之类的并不改变位置，回流一定重绘

js引擎事件循环

自上而下同步执行代码，遇到异步代码则开启worker线程执行对应的操作，结束后放入任务队列知道同步栈执行完毕后开启任务队列的回调
任务队列有两种，宏任务和微任务队列
promise的回调是微任务，优先于红任务执行，当然这两者是同级比较的，