当前位置: 首页 > news >正文

浏览器的渲染过程

浏览器的渲染页面时,表示网站资源已经请求成功。 
渲染时,大致的流程如下: 
(解析html以构建dom树->构建render树->布局render树->绘制render树) 
具体的流程如下: 
1:浏览器会将HTML解析成一个DOM树,DOM树的构建过程是一个深度遍历过程,当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点, 
2:将CSS解析成CSS规则树; 
3:根据DOM树和CSS来构造render树,渲染树不等于DOM树,像header和display:none;这种没有具体内容的东西就不在渲染树中; 
4:根据render树,浏览器可以计算出网页中有哪些节点,各节点的CSS以及从属关系,然后可以计算出每个节点在屏幕中的位置; 
5:遍历render树进行绘制页面中的各元素。 
P.S页面发生重拍(回流)的话,会重新加载DOM树,影响页面加载速度。会导致页面重拍的原因如下: 
**1:页面初始化; 
2:操作DOM时; 
3:某些元素的尺寸变了; 
4:CSS的属性发生改变。** 
浏览器加载页面资源的步骤如下(部分参考网络资料): 
1.用户输入网址(假设是第一次访问),浏览器向服务器发出请求,服务器返回html文件; 
2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件; 
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件; 
4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了; 
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续加载后面的代码; 
6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码; 
7.浏览器发现了一个包含一行Javascript代码的<script>标签,直接运行该脚本; 
8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。少了一个元素,浏览器不得不重新渲染这部分代码; 
9.</html>表示暂时加载完成; 
10.此时用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径; 
11.浏览器向服务器请求了新的CSS文件,重新加载页面。然后执行渲染过程。

相关文章:

  • J2ME-定时器(TimerTask)使用及初探
  • 深入学习之改变this的方法
  • 使用J2MEUnit测试J2ME程序
  • 深入学习之图片预加载 和 闭包新认知
  • NetBeans 4.0创建J2ME手机RSS阅读器
  • J2ME游戏 之 NORMAL-FRAME
  • 深入学习之git操作
  • 开发NokiaS40系列应用程序初级篇
  • 深入学习之重写call方法
  • 深入学习之this 方法1
  • 基于Nokia S40的猜数字游戏之一
  • 深入学习之继承图总结
  • 基于Nokia S40的猜数字游戏之二
  • 深入学习之 this 方法2
  • 应用Nokia UI API处理声音问题
  • 时间复杂度分析经典问题——最大子序列和
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 【css3】浏览器内核及其兼容性
  • C# 免费离线人脸识别 2.0 Demo
  • co模块的前端实现
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • IP路由与转发
  • java概述
  • Linux后台研发超实用命令总结
  • Redis学习笔记 - pipline(流水线、管道)
  • REST架构的思考
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • 阿里云Kubernetes容器服务上体验Knative
  • 经典排序算法及其 Java 实现
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 使用API自动生成工具优化前端工作流
  • 一些css基础学习笔记
  • 06-01 点餐小程序前台界面搭建
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • 如何正确理解,内页权重高于首页?
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • #### go map 底层结构 ####
  • #NOIP 2014# day.1 T2 联合权值
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (C#)Windows Shell 外壳编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令...
  • (定时器/计数器)中断系统(详解与使用)
  • (附源码)springboot建达集团公司平台 毕业设计 141538
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (循环依赖问题)学习spring的第九天
  • .net core Swagger 过滤部分Api
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .net获取当前url各种属性(文件名、参数、域名 等)的方法
  • .考试倒计时43天!来提分啦!
  • :中兴通讯为何成功
  • [ JavaScript ] JSON方法
  • [ vulhub漏洞复现篇 ] Apache Flink目录遍历(CVE-2020-17519)
  • [@Controller]4 详解@ModelAttribute
  • [100天算法】-实现 strStr()(day 52)
  • [Asp.net MVC]Asp.net MVC5系列——Razor语法