浏览器原理

浏览器的组成

1. 人机交互部分 （ui）
2. 网络请求部分 （Socker）
3. Javascript引擎部分（解析执行Javascript）
4. 渲染引擎部分 （渲染html，css等）
5. 数据存储功能 （cookie，以及html5中localStorage,sessionStorage)

主流渲染引擎介绍

渲染引擎 又叫做 排版引擎 或 浏览器内核

• Chrome： Blink引擎（Webkit的一个分支）
• Safari： Webkit引擎
• FireFox： Gecko引擎
• Opera： Blink引擎
• InternetExplorer： Trident引擎
• Microsoft Edge： EdgeHTML引擎（Trident的一个分支）

主流渲染引擎的工作原理

1. 解析HTML构建的DOM树（Document Object Model，文档对象模型）
2. 构建渲染树，渲染树并不等同于DOM树，因为像 head 或 display：none这样的元素就没有必要放到渲染树里面。但是他们仍然在DOM树中。
3. 对渲染树进行布局，定位坐标和大小，确定是否换行，确定position，overflow，z-index等等，这个过程叫：“layout” 或 “reflow”。
4. 绘制渲染树，调用操作系统底层的API进行绘图操作。
   浏览器reflow，layout过程

浏览器访问网站的过程

1. 在浏览器地址栏中输入网址
2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文

   GET / HTTP/1.1
   Host: www.baidu.com
   Connection: keep-alive
   Cache-Control: max-age=0
   Upgrade-Insecure-Requests: 1
   User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
   Sec-Fetch-User: ?1
   Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
   Sec-Fetch-Site: none
   Sec-Fetch-Mode: navigate
   Accept-Encoding: gzip, deflate, br
   Accept-Language: zh-CN,zh;q=0.9
   Cookie: BIDUPSID=F08DB5B2FD9E13D4B41996E638172B7E; PSTM=1573701135; BAIDUID=F08DB5B2FD9E13D4B19EAE477B7A6495:FG=1; BD_UPN=123253; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=1432_21114_30125_29567_29700_29221; H_PS_645EC=84a0DbiQzd2BHJhWsNQFFY6AzZdRfYqCefjKNfcjGAOJW8CxuHjm%2BQDhKZg; delPer=0; BD_CK_SAM=1; PSINO=5; BD_HOME=0GET / HTTP/1.1
   Host: www.baidu.com
   Connection: keep-alive
   Cache-Control: max-age=0
   Upgrade-Insecure-Requests: 1
   User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
   Sec-Fetch-User: ?1
   Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
   Sec-Fetch-Site: none
   Sec-Fetch-Mode: navigate
   Accept-Encoding: gzip, deflate, br
   Accept-Language: zh-CN,zh;q=0.9
   Cookie: BIDUPSID=F08DB5B2FD9E13D4B41996E638172B7E; PSTM=1573701135; BAIDUID=F08DB5B2FD9E13D4B19EAE477B7A6495:FG=1; BD_UPN=123253; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=1432_21114_30125_29567_29700_29221; H_PS_645EC=84a0DbiQzd2BHJhWsNQFFY6AzZdRfYqCefjKNfcjGAOJW8CxuHjm%2BQDhKZg; delPer=0; BD_CK_SAM=1; PSINO=5; BD_HOME=0

打赏