浏览器渲染页面多的流程(参考网上有关资料整理)

浏览器渲染页面也就表示我们网上的资源已经请求成功

首先我们要明确浏览器渲染页面大致分为这几个步骤

1.浏览器解析html文档从而使构建成dom文档树=>2.构建render树=>3.布局render树=>4.绘制render树

1.浏览器会将html文档解析成一个dom文档树,dom树构建的过程是一个深度遍历的过程,只有当当前节点的所有子节点都构建好了以后,才会去构建当前节点的下一个兄弟节点。Dom树的构建过程为:将字节转换成字符,确定tokens,将tokens转换成节点,然后构建dom树

2.接下来再解析css样式,得到css规则树(cssom)

3.根据得到的dom树和css来构建render树,渲染树不等于dom树,像header和display:none;这种没有具体内容的东西就不会出现再渲染树中

4.根据render树,浏览器可以计算出网页中有哪些节点,以及各个节点的css从属关系,然后计算出每个节点再屏幕中国的位置

5.遍历render树进行绘制页面中的各个元素

(页面重拍(回流)的话,会重新加载dom树,影响页面加载速度)

导致页面重拍的原因如下

(1).页面初始化

(2).操作dom时

(3).某些元素发生改变时

(4).css的属性发生改变时

浏览器在解析html的过程中:它采用的是自上而下的解析方式,

在页面中重绘和重排一般会在(1)增加或删除dom节点(2)display:none(重排并重绘);visibility:hidden(重排)(3)移动页面中的元素的时候(4)增加或者修改样式的时候(4)用户改变窗口大小,滚动页面的时候触发

减少重绘和重排提高页面性能的方法

就是将它所要替换的属性提前先写好,当触发某个事件的时候,只要改变他的classname即可

原文地址:https://www.cnblogs.com/violinh/p/11728857.html

时间: 2024-11-14 09:01:36

浏览器渲染页面多的流程(参考网上有关资料整理)的相关文章

浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面

(1)浏览器解析 URL 为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了: 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么? 浏览器渲染过程中,发生了什么,是不是也有重绘与回流? OK,兴致来了,我们就先从 浏览器解析 URL 看起,先来看看当用户输入 URL,到浏览器呈现给用户页面,经历了以下过程: 版本 A: 用户输入 URL 地址. 对 URL 地址进行 DNS 域名解析. 建立 TCP 连接(三次握手). 浏览器发起 HTTP 请求报文. 服务器返回 HTTP

浏览器渲染页面和加载页面机制

为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始: 1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完). 3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载. 4. 并且在下载后进行解析,解析过程中,停止页面所有往下

浏览器渲染页面原理(看到一个网站写的不错 收录的,一起学习)

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

浏览器渲染页面原理

当了解web访问原理后,与前端工程师或页面重构师工作更为关系密切的应该是浏览器,WEB 页面运行在各种各样的浏览器当中,浏览器载入.渲染页面的速度直接影响着用户体验, 特别是浏览器渲染页面的原理,页面渲染就是浏览器将 HTML 代码根据 CSS 定义的规则显示在浏览器窗口中的这个过程,理解了原理就更会容易理解前端优化的一些准则. 主要过程:(主要参考文章:http://www.webskys.com/artilc/228.html) 1. 用户输入网址(假设是个 HTML 页面,第一次访问,无缓

chrome和Firefox浏览器渲染页面的不同

一直很好奇chrome和firefox这两大浏览器的页面渲染有什么不同,今天自己写了些html代码来做了下检验. 先做html编码,代码如下: <!DOCTYPE html><html>    <head>        <title>测试浏览器渲染</title>        <meta charset="UTF-8">        <meta name="viewport" con

浏览器渲染页面的探讨

我们都知道,网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面,执行一大片js代码也会迟滞页面的渲染.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载:或者,我们在页面中插入某段执行起来很耗时的js代码,那么浏览器渲染页面的过程就会被阻塞,直到JS文件下载并执行完后才继续.由此可见,前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 先来看看,为什么会发生渲染阻塞? 例如:有如下的html文件

网页性能优化:防止JavaScript、CSS阻塞浏览器渲染页面

网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染页面的过程就会被阻塞2秒,直到该JS文件下载并执行完后才继续. 前端性能调优时必须排除任何潜在的渲染阻塞点,让浏览器在最短时间内渲染出整体页面. 1.JavaScript为何会阻塞? <!doctype html> <html> <head> <script type

浏览器渲染页面的流程

浏览器渲染流程如下图所示: 渲染的流程如下: 1. 解析HTML文件,创建 DOM 树 (自上而下,遇到任何样式(link.style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载).) 2. 解析CSS文件,构建 CSSOM Tree(CSS规则树) 优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式:3. 将CSS与DOM合并,构建渲染树(Render Tree)4. reflow(重排):根据Render tree进行节点信息

浏览器渲染页面过程

一.浏览器加载和渲染html的顺序 1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)3.如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载.4.并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载.阻塞加载5.样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲