浏览器页面渲染机制

最新推荐文章于 2024-09-23 16:43:34 发布
最新推荐文章于 2024-09-23 16:43:34 发布
阅读量379 收藏
点赞数
分类专栏： 面试集 文章标签： 服务器 前端 运维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56004744/article/details/128244054
版权

网络请求，服务器返回html内容

  • 输入一个url到浏览器
  • 浏览器解析url解析出主机名
  • 浏览器将主机名转换成服务器ip地址；先查找本地DNS缓存列表，没有的话，再向浏览器默认的DNS服务器发送请求，同时缓存
  • 建立与目标服务器的TCP连接（三次握手，四次挥手）
  • 浏览器解析文档

html解析

  • 将HTML解析为一个DOM树
  • 解析CSS构建CSSOM树
  • 把DOM树和CSSOM树结合，生成有样式，有结构的render渲染树（display:none的东西不在渲染树中）
  • layout--计算出每个节点再屏幕的位置
  • 绘制，即遍历render树

其他 

  1.  html解析完一部分就显示出来，不会得到全部解析完在显示；
  2. 加载过程中外部的css和图片，会重新发送请求，异步请求；
  3. 遇到javascript文件会等到javascript解析完再继续解析HTML（因为javascript可能会修改DOM）
  4. 如果CSS文件阻塞，会阻碍HTML的渲染，但是不会阻碍HTML的解析

参考文章：(10条消息) 浏览器渲染机制(面试)_A-炜晨科技的博客-CSDN博客_浏览器渲染机制面试 

°152
关注
专栏目录
浏览器渲染机制面试_彻底搞懂浏览器渲染页面的机制和原理
weixin_35695142的博客
01-12 727
1、一道面试题：从用户在浏览器地址栏输入网址，到看到整个页面，中间发生了哪些事情？答：共有三个阶段： ①http请求阶段 ②http响应阶段 ③浏览器渲染阶段在这里我们先重点讲一下浏览器渲染阶段扫盲：① 进程：Process(开了多个饭店)② 线程：Thread(一个饭店雇佣一个服务员是单线程，雇佣多个服务员是多线程)③ 栈内存：Stack (提供一个环境，运行代码)2、浏览器渲染页面的机制和原...
浏览器渲染机制(面试)
前端职场小白_炜晨科技的博客
09-04 1238
不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。A: 不是的，渲染树不包括 head 和隐藏元素（更少的原因），大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性（更多的原因）当css文件放在中时，虽然css解析也会阻塞后续dom的渲染，但是在解析css的同时也在解析dom，所以等到css解析完毕就会逐步的渲染页面了。A:对于一个HTML文档来说，不管是内联还是外链的css，都会阻碍后续的dom渲染，但是不会阻碍后续dom的解析。
浏览器页面渲染机制-前端原理剖析
十年呵护的专栏
05-14 1689
浏览器页面渲染机制 前言 浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是Webkit内核了，Webkit内核是当下浏览...
浏览器渲染机制
weixin_68266812的博客
02-02 1046
参考 ： 中高级前端面试宝典之浏览器篇_浏览器渲染机制面试-CSDN博客 浏览器渲染机制-CSDN博客 1. 解析HTML：浏览器首先会将HTML代码解析成DOM树，DOM树是由节点和对象组成的树形结构，表示HTML文档的结构和内容。2. 解析CSS：浏览器会将CSS代码解析成CSSOM树，CSSOM树是由样式规则和对象组成的树形结构，表示HTML文档的样式信息。3. 构建渲染树：浏览器会将DOM树和CSSOM树合并成渲染树，渲染树只包含需要显示的节点和样式信息，不包含隐藏的节
浏览器的页面渲染机制
Achievek的博客
08-06 376
关于浏览器的页面渲染原理，是一个比较基础的问题，但还是很重要的，因为这会引申出一系列性能优化的问题。 我们使用的浏览器，主要依靠浏览器中的运行的最核心的程序，也就是我们平时所说的浏览器内核，浏览器内核最主要的两部分：渲染引擎和Js引擎。渲染引擎负责页面的渲染，展示；Js引擎负责解析Javascript语言，执行javascript语言来实现网页的动态效果 目前市场主流的浏览器内核是不同的，在这里以一张表格来呈现 对于前端来说，最熟悉最友好的肯定是Chrome浏览器，它的渲染引擎是Webkit，JS引擎是V
浏览器渲染原理
m0_55557411的博客
01-21 1469
浏览器渲染原理
简述浏览器渲染机制
牛先森家的博客
03-14 2522
简述浏览器渲染机制简述浏览器渲染机制基本概念浏览器渲染的整个流程浏览器整个流程如上图所示说两个概念，一个是Reflow，另一个是RepaintDOM和CSSOM的具体构建流程 简述浏览器渲染机制 基本概念 DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。 CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。 Render Tree: DOM和CSSOM合并后生成Render Tree Layout: 计算出R
你不知道的浏览器页面渲染机制
油墨香^-^的博客
08-10 1040
浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。本文我们就以 Webkit 为例，对现代浏览器的渲染过程进行一个深度的剖析。前端自习课每日清晨，享受一篇前端优秀文章。..
浏览器底层渲染机制
LYL000305的博客
04-22 316
浏览器底层渲染机制 浏览器底层渲染机制：我们从服务器获取代码后，浏览器是如何把代码渲染为页面及相关效果的 CRP(关键渲染路径)性能优化法则：了解浏览器底层处理的具体步骤，针对每一个步骤进行优化 JS中的同步和异步编程 +同步编程：上一件事情没有处理完，下一件事情无法处理 +异步编程：上一件事情即便没有处理完，也无需等待，可以继续处理后续事情 进程和线程：一个进程中可能包含多个线程 +进程：一般代表一个程序（或者浏览器打开一个页面就开辟一个进程） ...
【史上最全】前端页面深入浅出浏览器渲染原理
qq_31532979的博客
01-18 1148
浏览器的核心组件，即通常所说的浏览器内核，是支撑整个浏览器运行的关键性底层软件架构，它由两个关键组成部分构成：一个是负责网页内容解析和渲染的渲染引擎，另一个则是用于执行JavaScript代码的JS引擎。各浏览器厂商在其产品中使用的渲染引擎并不一致，这种差异化构成了不同浏览器间表现差异的基础。举例来说，在Mozilla Firefox浏览器中，其采用的自主研发的渲染引擎名为Gecko，它负责将HTML、CSS等内容转换为用户可见的网页布局和样式。
浏览器进程与浏览器的渲染机制
darabiuz的博客
03-04 653
1. 浏览器进程 1. 浏览器的多进程架构 一个好的程序常常被划分为几个相互独立又彼此配合的模块,浏览器也是如此。 以 Chrome 为例,它由多个进程组成,每个进程都有自己核心的职责,它们相互配合完成浏览器的整体功能, 每个进程中又包含多个线程,一个进程内的多个线程也会协同工作,配合完成所在进程的职责。 Chrome 采用多进程架构,其顶层存在一个 Browser process 用以协调浏览器的其它进程。 2. 浏览器的主要进程与功能 详见下面的思维导图 2. 浏览器渲染流程 解析 HTML
服务器操作系统【sar 命令】
最新发布
RZer的博客
09-23 1047
sar 安装、语法参数说明以及示例
使用docker创建zabbix服务器
a15864923744的博客
09-20 720
这几个容器创建后是UP状态就可以使用浏览器尝试访问 http://宿主机IP:8080，期间遇到问题是MySQL容器使用mysql:9.0镜像总是出错，所以用了mysql:8.0。zabbix默认账号密码是：Admin/zabbix。#创建zabbix后端服务容器。#创建zabbix前端服务容器。#创建MySQL容器。
Linux常用命令
wang_san_sui_的博客
09-23 826
Linux 系统提供了大量的命令来管理系统和处理文件。：创建新文件或更新现有文件的时间戳。：报告文件系统的磁盘空间使用情况。：查看当前正在运行的进程的状态。：从排序好的文件中删除重复行。：显示系统中正在运行的进程。：安全地复制文件到远程机器。：打印当前工作目录的路径。：移动或重命名文件/目录。：更改文件或目录的所有者。：更改文件或目录的权限。：在文件系统中查找文件。：安全地登录到远程机器。：模式扫描和处理语言。：对文件内容进行排序。：查看文件的开始部分。：查看文件的结束部分。：检查磁盘使用情况。
Linux基础命令——账户简单管理
2301_79096184的博客
09-20 1144
4.会话类型：如果 root 用户通过 su 命令切换到其他用户，原始的 root 会话可能会被隐藏。这里可以通过/etc/shadow文件下看到，stu02用户密码，前面有感叹号，而正常情况下是没有的。1.没有通过终端登录，root 用户可能通过图形界面（如桌面环境）登录。命令：ps aux （显示所有用户的进程信息）命令：ps -p 1 （显示进程 ID 为 1 的进程）命令：ps -u username （显示指定用户的进程）命令：ps （ 显示当前终端的进程）
【Linux庖丁解牛】—Linux基本指令(上)！
2301_80221228的博客
09-20 1502
命令是Linux系统管理和文件浏览中的一个强大工具，通过其提供的各种选项，你可以轻松地以图形化的方式查看和理解复杂的目录结构。我们甚至还可以将我们的code.c文件拷到usr/bin目录下，然后和文件自带的指令一样不用指定绝对路径就可以执行我们的指令！（这里特指inode change time）指的是文件的不同时间戳，它们各自代表了文件的不同方面的变化。指令是Linux系统中一个非常实用的工具，能够帮助用户快速找到命令的执行文件路径，方便执行和管理命令。命令（这在Windows的命令提示符中是常见的）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值