前端新手需知的浏览器渲染机制

一,浏览器的基本结构

在这里插入图片描述浏览器内核是浏览器最核心的组成部分——渲染引擎

HTML和CSS内容会被渲染引擎解析并渲染到屏幕上
在控制台输入命令 navigator.userAgent 后能看见浏览器相关的信息
在这里插入图片描述

二,浏览器内核

主流浏览器 Chrome IE Edge FireFox Opera Safari
渲染引擎 Webkit Trident Webkit Gecko Webkit Webkit

三,渲染流程

(1)解析HTML标签并生成DOM树
(2)解析CSS规则并生成CSSDOM树
(3)将DOM树与CSSOM树合并为一个渲染树
(4)根据渲染树来进行布局
(5)对渲染树上的节点进行绘制

(1)构建DOM树

DOM全称Document Object Model

当服务器将HTML文档发送到浏览器后,浏览器会根据标签之间的嵌套结构,基于语法,分析其并解析为一棵DOM树

<!DOCTYPE html>
<html lang="en">
	<head>
	<meta charset
  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值