浏览器页面渲染过程

最新推荐文章于 2024-03-25 22:27:32 发布
最新推荐文章于 2024-03-25 22:27:32 发布
阅读量224 收藏
点赞数
分类专栏： 浏览器 前端 文章标签： 浏览器页面渲染过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yihanzhi/article/details/108260461
版权

1、浏览器页面渲染过程图

在这里插入图片描述

2、浏览器渲染过程分析

2.1 CSS加载阻塞DOM渲染，但不阻塞DOM解析

有文件test.html，其部分代码如下截图所示：
在这里插入图片描述
CSS加载阻塞DOM渲染
访问test.html页面，通过控制台可查看第一个CSS文件的加载阻塞了其后面DOM的渲染，因此起初只看到了页面内容：“Hi,”，其它内容并未渲染出来。
在这里插入图片描述
CSS加载不阻塞DOM的解析
通过控制台可查看，DOM渲染被第一个CSS文件阻塞了，但是该文件后面的其它文件还能正常加载，说明CSS不阻塞DOM解析
在这里插入图片描述

涵一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解浏览器渲染页面过程
08-31
主要介绍了详解浏览器渲染页面过程的相关资料,需要的朋友可以参考下
浏览器页面渲染的过程
梅花寺
11-09 560
数据请求回来，网络进程在接收到响应头后，根据响应头的 content-type 字段判断文件类型，若是 text/html，浏览器会判断这是一个 html 类型的文件，然后就会将html文件解析成DOM树，html的一个个标签组成DOM树的节点 可以把这些节点看成一个个节点对象，整个页面的节点对象就构成了DOM树接着就是将css解析成cssom树，cssom树根dom树一样也是由一个个样式节点构成，与dom树的各个节点不是一一对应的，是相互独立的两个数据结构接着dom树和cssom树会结合成render树
浏览器渲染页面过程
feb的博客
01-05 1722
今天在某论坛上看到这么一个问题。 现在页面有个空div，我用js向里面插入一段html,然后获取div的高度，发现有时候得到的div的高度不准确，请问各位有什么方法解决一下。 简单点来说就是创建了dom以后，还未完全渲染，就去获取dom的高度，显然是会出问题的。代码如下，可找个图片自行体会： <div id="bgImg"></div> <script&
浏览器的渲染原理及相关八股文知识点
最新发布
didadidadidadida的博客
03-25 839
浏览器在拿到html、css、js代码信息后是如何渲染成为页面的呢，事实上，当我们从浏览器地址栏上输入网址，这里进行网络通信后从服务器端拿到了页面信息，浏览器就可以渲染页面了。而服务器给我们的信息实际上是给客户端返回一个HTML字符串，那么这个字符串是如何转换成一个我们可直观交互的功能画面的呢？这里我们肉眼感官只是一瞬间的页面显现，但实际上浏览器底层已进行了一套复杂的渲染流程，具体渲染流程步骤大致如下：HTML字符串→解析HTML→样式计算→布局→分层→绘制→分块→光栅化→画→像素信息。
浏览器渲染页面 过程
日入上万
04-26 2653
目录 一、整个过程大致如下： 二、浏览器渲染引擎在获取到内容后的基本流程： 1.解析HTML文件，创建DOM树 2.解析CSS 3.将CSS与DOM合并，构建渲染树（renderingtree） 4.布局和绘制，重绘（repaint）和重排（reflow） 三、拓展 1.重绘和重排何时会发生： 2.如何减少重绘和重排以提升页面性能： 浏览器的主要功能是将用户选择的web资源呈...
浏览器页面的渲染流程
qq_45923489的博客
04-20 3045
浏览器的主要功能是将用户需要的Web资源在浏览器上呈现出来，通过用户输入URL来指定所请求的资源位置，从服务器上请求资源，并将其显示在浏览器窗口中 1、解析HTML文件，构建DOM Tree 自上而下的深度遍历过程，会将当前结点的所有子节点构建完成后，进行当前结点的下一个兄弟结点的构建，直到将所有的标签都遍历完成。遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载） 2、解析CSS，构建CSSOM Tree（css规则树） 给各个元素..
浏览器加载、渲染和解析过程黑箱简析
09-05
浏览器加载、渲染和解析过程的黑箱分析,对于渲染，利用 Fiddler 将网速调慢，可以看到 css 下载后会马上渲染到页面，渲染和下载同步进行,需要的朋友可以参考下
了解html页面的渲染过程以备学习前端的性能优化(续)
09-28
上一篇关于浏览器的渲染过程只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，感兴趣的朋友可以了解下，希望可以...
浏览器渲染页面的流程.md
10-21
在学习过程中，接触到浏览器渲染网页这个问题，在经过查找有关文档后，就该问题谈谈我自己的理解。
页面渲染原理及页面优化
08-13
详细讲述页面在浏览器中的渲染过程性原理，从而更好的去做页面优化
浏览器渲染页面的流程
热门推荐
weixin_43190804的博客
02-23 1万+
一.浏览器渲染页面的原理及流程 浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）的解释并显示网页。Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome使用webkit内核。 webkit引擎渲染流程 大概可以划分成以下几个步骤： （0）渲染引擎首先通过网络获得所请求文档的内容 （1）解析HTML文件，构建 DOM Tree （2）解析CSS，构建 CSSOM Tree(CSS规则树) （3）将 DOM Tr
浏览器渲染过程
懒猫慵阳的博客
05-16 411
浏览器渲染过程 html准备过程 收到字节数组->字符串->token(标签)->dom节点 css准备过程 生成cssom数很费性能，要匹配所有html标签，找出对应css样式，所以尽量用id和class，不要用继承等 收到字节数组->字符串->token(标签)->cssom节点 生成渲染树 dom和cssom两棵树组合为渲染树 渲染树只会包括需要显示...
浏览器的渲染过程
个人博客
08-16 524
浏览器的渲染过程一、基本概念1.DOM Tree（DOM树）：2.CSS Rule Tree（CSS规则树或CSS对象模型3.Render Tree（渲染树）4.Layout（布局）5.Painting（绘制）6.Reflow（回流）7.Repaint（重绘）二、浏览器渲染过程三、普通图层和复合图层1.基本概念2. 如何变成复合图层3.复合图层的优缺点（1）优点（2）缺点 一、基本概念 1.DOM Tree（DOM树）： 浏览器将HTML解析成树形的数据结构。 2.CSS Rule Tree（CSS规则树或
浏览器对页面的渲染过程
每天积累一点，一年后你会发现，自己变化很大
08-16 1544
在项目的交互或视觉评审中，前端同学常常会对一些交互效果质疑，提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排，需要 付出高昂的性能代价。那么，什么是浏览器的重绘和重排呢？二者何时发生以及如何权衡？如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去？本文期 待可以部分解释以上三个问题。 浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏
页面渲染html的过程
05-10
页面渲染 HTML 的过程一般可以分为以下几个步骤： 1. 解析 HTML：浏览器会先解析 HTML，构建出 DOM 树，这是浏览器渲染引擎的第一步。解析 HTML 的过程中，如果遇到 CSS 和 JavaScript，浏览器会同时构建出 CSSOM 树和 DOM 树，但是这些树的构建是并行的。 2. 构建 CSSOM 树：CSSOM 树是由浏览器构建的用于描述 CSS 样式的树形结构，它在渲染 HTML 页面时起着非常重要的作用。CSSOM 树的构建过程是基于浏览器解析 CSS 文件中的样式规则，并将这些规则转换成一颗树形结构。 3. 计算布局：浏览器会根据 DOM 树和 CSSOM 树计算出每个元素在页面中的位置和大小。这个过程被称为“布局计算”或“重排”。 4. 绘制页面：浏览器会根据计算出来的位置和大小在屏幕上绘制出页面。这个过程被称为“绘制”。 5. 浏览器优化：浏览器会对页面进行一些优化，例如使用缓存、预加载等技术来提高页面的加载速度和渲染效率。 总的来说，页面渲染 HTML 的过程是一个非常复杂的过程，其中涉及到很多技术和算法，浏览器也会不断优化和改进这个过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值