浏览器内核
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后经历的过程
- DNS解析:将url中的域名转换为对应服务器的IP地址
- 建立连接:通过TCP/IP协议将客户端浏览器与服务端建立连接(三次握手)
- 发送HTTP请求:浏览器向服务器发送相应请求
- 服务器处理:服务器接收请求并处理,返回响应数据
- 接收响应:浏览器接收HTTP响应,包括状态码和内容
- 渲染页面:浏览器解析HTML、CSS、JavaScript,渲染页面并显示给用户
以上步骤共同过完成了网页的加载过程
浏览器渲染过程
- 解析HTML,生成DOM树(文档对象模型)
- 解析CSS,生成CSSOM规则树(CSS对象模型)
- 构建渲染树,将DOM和CSSOM结合,包含可见元素及其样式
- 布局,遍历渲染树,计算每个节点的尺寸和位置,生成布局信息
- 绘制,根据布局信息,将渲染树中的元素绘制到屏幕上
- 合成,将绘制结果合成到一个或多个层中,最终显示在浏览器窗口
浏览器的缓存机制
浏览器的缓存机制分为强缓存和协商缓存,强缓存优先,协商缓存用于资源过期后的验证,两者结合提高了网页加载效率和用户体验,具体如下:
强缓存
- 定义:在资源的缓存有效期内,浏览器直接从缓存中加载资源,不向服务器发送请求
- 控制方式(请求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:资源已修改,返回新的资源