浏览器相关

前言：作为一个前端不可避免的要和浏览器打交道，那么今天在这个阳光明媚的日子，我就来梳理一下和浏览器有关的知识。
每个知识点都要好好的去梳理，梳理完浏览器相关的话，我就来写一下关于CSS的布局、居中、动画等一些问题，然后有时间的话今天在整理一些遇到的数据劫持相关的问题，话不多说，直接切入正文

浏览器相关

1、浏览器基础

1.1 浏览器组成

• 用户界面（UI）-包括地址栏、前进/后退、书签目录也就是除了显示敞口之外的其他部分
• 浏览器引擎：可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器各个部分之间互相通信的核心
• 渲染引擎：解析html和css文档并将内容排版到浏览器中显示，也可以成为排版引擎，我们常说的浏览器内核就是指渲染引擎
• js引擎（解析执行js），如 V8 引擎、JavaScriptCore
• -网络请求部分：用来完成网络调用或者先下载的模块
• UI后端：用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，根据浏览器不同绘制的视觉效果也不同。
• 数据存储部分（cookie，webStorage、indexDB等）

1.2浏览器内核

主流的浏览器及其内核：

浏览器	渲染引擎	JS引擎
IE	Trident	Chakra
Chrome	Webkit	V8
FireFox	Gecko	SpiderMonkey
Safari	Webkit	javascriptcore
Opera	Presto	Carakan

浏览器内核

浏览器内核有多个线程在工作：

• GUI渲染线程：负责渲染页面，解析html和css构建dom树，当页面重绘或者由于某种操作引起回流都会调起该线程；和js引擎是互斥的

• js引擎线程：单线程工作，负责解析执行js脚本；和渲染线程互斥，js运行耗时过程会导致页面阻塞

• 事件触发线程：当事件符合触发条件被触发时，该线程会把对应的事件回调函数添加到任务队列的队尾，等待 JS 引擎处理

• 定时器触发线程：开启定时器触发线程来计时并触发计时，计时完成后会被添加到任务队列中，等待 JS 引擎处理

• http请求线程：http 请求的时候会开启一条请求线程；请求完成有结果了之后，将请求的回调函数添加到任务队列中，等待 JS 引擎处理。

2、浏览器渲染页面的过程

• 解析HTML构建DOM，DOM是w3c组织推荐的处理可扩展语言的标准编程接口
• 构建“渲染树”，“渲染树”并不等同于“DOM树”，因为像head标签或display:none这样的元素就没必要放到“渲染树”中，但是他们在“DOM树”中（不需要显示的标签从渲染树中剔除）
• 对“渲染树”进行布局，定位坐标和大小，确定是否换行，确定position/overflow/z-index等。这个过程叫“layout”或“reflow”
• 绘制渲染树，调用操作系统底层API进行绘图操作

例子：假如页面上有个一个button和一个div，要求按下按钮向div中添加50个文本框。
正确的做法是，首先向document.fragement片段中添加50个文本框，再将其渲染到页面上，而不是向页面添加50个文本框，因为后者会导致reflow五十次，消耗浏览器性能
查看渲染过程：Chrome-开发者工具-more-rendering-painting-flashing

3、浏览器访问网站的过程

浏览器从输入url到页面展示发生了什么

参考文献

https://juejin.im/entry/59e1d31f51882578c3411c77
https://www.cnblogs.com/echo-hui/p/9231031.html
https://www.cnblogs.com/yqx0605xi/p/9267827.html