浏览器基础简介

浏览器基础

浏览器的组成

• 人机交互部分（UI）
• 网络请求部分（Socket）
• JavaScript引擎部分
• 渲染引擎部分（渲染HTML、CSS等）
• 数据存储部分（cookie、HTML5中的本地存储LocalStorage、SessionStorage）

主流渲染引擎

介绍

1. 渲染引擎又叫排版引擎或浏览器内核
2. 主流的渲染引擎有

• Chorm浏览器：Blink引擎（webkit的一个分支）
• Safari浏览器：webkit引擎
• FirFox浏览器：Gecko引擎
• Opera浏览器：Blink引擎
• Internet Explore浏览器：Trident引擎
• Microsoft Edge浏览器：EdgeHTML引擎（Trident的一个分支）

工作原理

1. 解析HTML构建DOM树，DOM是w3c组织推荐的处理可扩展置标语言的标准编程接口
2. 构建渲染树，渲染树并不等同于DOM树，因为像head标签或display：none这样的元素就没必要放到渲染树中了，但是他们在DOM树中
3. 对渲染树进行布局，定位坐标大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫做layout或reflow
4. 绘制渲染树，调用操作系统底层API进行绘制操作

浏览器访问网站过程

1. 在浏览器中输入地址
2. 浏览器通过用户在地址栏中输入的URL构建HTTP请求报文
3. 浏览器发送DNS解析请求，将域名转换为IP地址
4. 浏览器将请求报文发送给服务器
5. 服务器接受请求报文，并解析
6. 服务器处理用户请求，并将处理结果封装成HTTP响应报文
7. 服务器将HTTP响应报文发送给浏览器
8. 浏览器接受服务器相应的HTTP报文，并解析
9. 浏览器解析HTML页面并展示，在解析HTML页面时遇到新的资源需要再次发送请求
10. 最终浏览器展示出页面

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

1. 请求报文格式

• 请求行
• 请求报文头
• 请求报文体（GET请求方式没有）

2. 响应报文格式

• 响应行
• 响应报文头
• 响应报文体

Web开发本质

牢记以下三点

1. 请求，客户端发起请求
2. 处理，服务器处理请求
3. 响应，服务器将处理结果发送给客户端

客户端处理响应

• 服务器响应完毕后，客户端继续处理
  • 浏览器，解析服务器返回的数据
  • IOS、安卓客户端，解析服务器返回的数据，并且通过IOS或安卓的UI技术实现界面的展示功能

关于C/S(Client/Server)和B/S(Browser/Server)

• C/S：客户端服务器
• B/S：浏览器服务器