前端开发需要了解的浏览器相关知识

浏览器内核

Google Chrome	Blink内核
Mozilla Firefox	Firefox内核
Safari	Webkit内核
Opera	Blink内核

• -moz代表firefox浏览器私有属性
• -ms代表IE浏览器私有属性
• -webkit代表chrome、safari私有属性，（虽然Chrome现在使用Blink内核，但为了兼容性，仍保留了`-webkit`前缀，以支持旧版CSS属性和JavaScript功能）
• -o代表Opera浏览器私有属性

浏览器输入url后经历的过程

1. DNS解析：将url中的域名转换为对应服务器的IP地址
2. 建立连接：通过TCP/IP协议将客户端浏览器与服务端建立连接（三次握手）
3. 发送HTTP请求：浏览器向服务器发送相应请求
4. 服务器处理：服务器接收请求并处理，返回响应数据
5. 接收响应：浏览器接收HTTP响应，包括状态码和内容
6. 渲染页面：浏览器解析HTML、CSS、JavaScript，渲染页面并显示给用户

以上步骤共同过完成了网页的加载过程

浏览器渲染过程

1. 解析HTML，生成DOM树（文档对象模型）
2. 解析CSS，生成CSSOM规则树（CSS对象模型）
3. 构建渲染树，将DOM和CSSOM结合，包含可见元素及其样式
4. 布局，遍历渲染树，计算每个节点的尺寸和位置，生成布局信息
5. 绘制，根据布局信息，将渲染树中的元素绘制到屏幕上
6. 合成，将绘制结果合成到一个或多个层中，最终显示在浏览器窗口

浏览器的缓存机制

浏览器的缓存机制分为强缓存和协商缓存，强缓存优先，协商缓存用于资源过期后的验证，两者结合提高了网页加载效率和用户体验，具体如下：

强缓存

• 定义：在资源的缓存有效期内，浏览器直接从缓存中加载资源，不向服务器发送请求
• 控制方式（请求header中）：
  Cache-Control：如max-age=3600，表示资源可缓存1小时
  Expires：指定绝对过期时间，如`Expires: Wed, 21 Oct 2024 07:28:00 GMT`
• 优点：减少服务器请求，提高加载速度

协商缓存

• 定义：当强缓存过期后，浏览器会向服务器验证资源是否更新
• 控制方式（请求header中）：
  If-None-Match：带上ETag（请求header中），服务器根据标识判断资源是否改变
  If-Modified-Since：带上上次修改时间，服务器判断是否需要返回新资源
• 返回结果：
  304 Not Modified：资源未修改，浏览器使用缓存
  200 OK：资源已修改，返回新的资源