浏览器工作原理

浏览器的组成

  1. 人机交互部分（UI）
  2. 网络请求部分（Socket）
  3. JavaScript引擎部分（解析执行js）
  4. 渲染引擎部分（HTML，CSS等）
  5. 数据存储部分（cookie、H5中的本地存储LocalStorage、SessionStorage）

主流浏览器内核（渲染引擎）

介绍

  • Chrome——————Webkit——2014年后Blink（Webkit分支）
  • IE————————--Trident
  • Firefox——————--Gecko
  • Opera———————Blink———早期Presto
  • Safari———————webkit
  • Internet Explorer——Trident
  • Microso Edge———--EdgeHTML（Trident分支）

工作原理

  1. 解析HTML构建DOM（Document Object Model 文档对象模型）树，
  2. 构建 '渲染树'
  3. 对 '渲染树' 进行布局，定位坐标和大小 layout / reflow
  4. 调用操作系统底层API绘制

在这里插入图片描述在这里插入图片描述 youtobe动画体验 chrome f12 ... more tools Rendering 勾选 Paint flashing

浏览器访问网址过程（从输入网址按下回车，到页面被渲染出来发生了什么）

  1. 在浏览器地址栏里输入网址，按下回车
  2. 浏览器将URL（网址）构建HTTP请求报文
  3. 浏览器发起DNS解析请求，将域名转化为IP地址
  4. 浏览器将请求报文发送给服务器
  5. 服务器接收到报文，并解析
  6. 服务器处理用户请求，并将处理结果封装成HTTP响应报文
  7. 服务器将HTTP响应报文发送给浏览器
  8. 浏览器收到服务器的HTTP响应报文，并解析
  9. 浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需再次发起请求
  10. 所有所需资源加载完毕，页面渲染完成

HTTP请求报文和响应报文格式

、、、

web开发本质

。。。