浏览器的渲染

浏览器的请求,加载,渲染一个页面发生的五件事

  • DNS查询
  • TCP链接
  • HTTP请求即响应
  • 服务器响应
  • 客户端渲染

    今天呢,主要讲一下第5部分,客户端的渲染,即浏览器对内容的渲染,浏览器是如何将内容渲染出来的呢?

关键渲染路径

首先,先来了解一下关键渲染路径的概念:是指与当前用户操作有关的内容。例如:用户刚刚打开一个页面,首屏显示的就是当前用户操作相关的内容,具体就说浏览器收到HTML、CSS、和js等资源并对其进行处理从而渲染出web页面。

浏览器渲染的过程

  • 解析HTML,生成DOM树(DOM)
  • 解析css,生成cssom树 (CSSOM)
  • 将DOM和CSSOM合并,生成渲染树(Render-Tree)
  • 计算渲jie染树的布局(layout)
  • 将布局渲染到屏幕上(paint)

    这五个步骤并不一定是一次性顺序完成的。如果DOM或CSSOM被修改,以上过程需要重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中,CSS与Js往往会多次修改DOM和CSSOM.

    首先,浏览器获取到HTML文件之后,会自上而下的进行加载,并且在加载的过程中,对其进行解析和渲染。

    (1)浏览器会将一个html解析成一个dom树,dom树的构建过程就是一个深度遍历的过程,当前节点的所有子节点都构建完成之后,才会去构建下一个节点的子节点。

    例如:根据下面代码,其解析成的dom树如下

<html>
<html>
<head>
    <title>Web page parsing</title>
</head>
<body>
    <div>
        <h1>Web page parsing</h1>
        <p>This is an example Web page.</p>
    </div>
</body>
</html>

根据上面代码,其解析成的dom树如下:

(2)css解析CSSOM树

在HTML 解析过程中,会碰到style,link 和内联样式,对于style和内联样式,这两种浏览会直接根据样式声明生成CSSOM,因为他们本身就含有 样式内容。但是对于外联样式,需要浏览器先去请求对应的外联样式,等获取之后,就会解析该外联样式,并生成对应的CSSOM。

由于CSSOM负责存储渲染信息,浏览器就必须保证在合成渲染树之前,CSSOM是完备的,即所有的CSS(内联,内部和外部)都已经下载完,并解析完 ,只有CSSOM和DOM的解析完全结束,浏览器才会进入下一步的渲染,这就是传说中的CSS阻塞渲染。

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }

(3)渲染树

当DOM和CSSOM构建完成,它们一个存储了节点信息,一个存储了节点渲染信息,都不能直接用来渲染,为此,浏览器会将二者结合,生成渲染树,这棵树就包含了页面所有可见元素及其渲染信息。如下:

浏览器在这步骤做了如下操作:

  • 从DOM的根节点开始,遍历每个可视节点:script,link,meta都属于不可视节点,另外,display:none的节点也属于不可视节点。
  • 从CSSOM中搜索可视节点的样式
  • 计算这些样式,将计算值应用到可视节点上。

    但是这过程中,还是无法将内容渲染到屏幕上。

    (4)布局

    渲染树生成之后,浏览器边可以根据渲染树中的样式信息,结合设备的屏幕信息,计算每个元素的位置和尺寸。

    (5)渲染

    得到了渲染树及其节点的布局信息,浏览器便可以将最终的页面渲染到屏幕。

这里需要理解两个概念:重绘和回流。

什么是重绘

改变元素的背景颜色,文字颜色等不影响元素周围布局结构的改变,只会引起浏览器的repaint对某一部分进行重绘。

什么是回流

当某元素发生布局变化的时候,比如定位,改变大小,浏览器就会重新去渲染。引起回流的主要原因:

  • 1。页面初始化的时候,进行页面的初次渲染(不能避免)
  • 2.操作dom
  • 3.某些元素的尺寸变化,引起布局的变化
  • 4.css的某些属性发生变化

    减少重绘和回流的方式:

  • 1.避免逐项更改样式。最好一次性更改style样式,或者将样式列表定义为class并一次性更改class属性
  • 2.避免循环操作DOM。.
  • 3.避免循环读取offsetLeft等属性,在循环之前把它们存起来。
  • 4.绝对定位具有复杂动画的元素,绝对定位可以使他脱离文档流,否则会引起父元素及后续元素大量的回流。或者使用transition来实现动画效果。

原文地址:https://www.cnblogs.com/mn6364/p/12565139.html

时间: 2024-11-06 07:10:51

浏览器的渲染的相关文章

【转】浏览器的渲染原理简介

How Browsers Work 这篇文章把浏览器的很多细节讲的很细,也有中文的翻译版本,现在转载的这篇是陈皓写的,目的的为了能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览器工作大流程 先看个图 从图中,可以看到: 1) 浏览器会解析三个东西 * 一个 HTML/SVG/XHTML,事实上,Webkit 有三个C++的类对应这三类文档.解析这三种文件会产生一个DOM Tree * CSS,解析CSS会产生CSS规则树 * JavaScript 脚本,主要是通过

浏览器的渲染机制

Google Web Fundamentals 是一个非常优秀的文档,里面讲到了跟web.浏览器.前端的方方面面.我总结一下其中的 Ilya Grigorik 写的 Critical rendering path 浏览器渲染机制部分的内容如下: 几个概念 1.DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM. 2.CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构. 3.DOM 和 CSSOM 都是以 Byte

浏览器的渲染顺序

直接上代码 1 <style> 2 div{ 3 width: 500px; 4 height: 400px; 5 border: 1px solid #ff0000; 6 background: url(./images/11.jpg); //css里的图片11.jpg 7 } 8 </style> 9 <script> 10 new Image().src = "./images/22.jpg": //js里的图片22.jpg 11 </s

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什么大家普遍把<script src=""></script>这样的代码放在body最底部?(为了沟通效率,我会提前和对方约定所有的讨论都以chrome为例) 应聘者一般会回答:因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏

从进度条和alert的出现顺序来了解浏览器 UI 渲染 &amp; JS进程

项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如下. 1 $('progressBar').text('100%'); 2 $('progressBar bar').css('width', '100%'); 3 alert('上传成功'); 问题一:实际表现为先alert出提示,此时被阻塞的页面显示的进度条没有被更新到100%. 分析原因,浏览

浏览器的渲染模式

浏览器渲染模式分为2种,一种是 怪癖模式[Quirksmode] 和 标准模式 [Standars mode]. 怪癖模式和标准模式有几点比较重要的区别: 1.声明上,当页面没有!doctype声明或者!doctype声明中没有HTML4以上(包含HTML4)的DTD声明,则页面以quirks mode渲染,其他情况则以sdandars mode渲染. 2.怪癖模式和标准模式在盒模型上有很大的区别 怪癖模式: 盒模型的宽度=margin-left  + width  + margin-right

服务器端渲染VS浏览器端渲染

1)浏览器渲染和服务器渲染区别:何为渲染?如果我们只是想显示一堆不变的数据,那么我们直接写一个a.html丢到服务器上让客户端访问就可以了.但这是基本不可能的事情,数据一般是变化的.你不可能为每套数据写一个视图,所以我们需要分离数据和视图,然后使用一种技术将数据塞到视图中,这种技术就叫渲染.这工作放在服务器上做就是服务器渲染,放在浏览器做就是浏览器渲染. 这里的渲染,就是指生成html文档的过程,和浏览器渲染html没有关系.浏览器端渲染,指的是用js去生成html,前端做路由.举例:React

浏览器的渲染机制,白屏和FOUC

关于浏览器的渲染机制,先要了解一些基本概念: DOM:浏览器解析html构建DOM树 CSSOM:浏览器解析CSS构建CSSOM规则树 Render Tree:DOM和CSSOM合并后生成Render Tree layout:layout:有了Render Tree,浏览器已经能知道网页中有哪些节点.各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置 painting:按照算出来的规则,通过显卡,把内容画到屏幕上 reflow(回流):当浏览器发现某个部分发生了点变化影响