【性能优化】浏览器加载，解析，渲染过程(在不考虑http协议、缓存、网络等情况下)

最新推荐文章于 2023-02-20 22:37:37 发布

汪小穆

最新推荐文章于 2023-02-20 22:37:37 发布

阅读量876

点赞数 3

分类专栏：性能优化文章标签：浏览器加载浏览器解析浏览器渲染浏览器工作流程

本文链接：https://blog.csdn.net/w390058785/article/details/80623492

版权

性能优化专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：要优化浏览器性能就要先去了解浏览器加载解析页面的过程。（这里并没有去考虑http协议，缓存，网络等相关因素，这里就只单纯考虑html，css，js，图片加载解析过程）。

一、浏览器加载，解析，渲染过程。

先看一个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浏览器加载、解析、渲染过程</title>
<script src="js1.js"></script>
<link href="css.css" rel="stylesheet"/>
<script>
	console.log('这是在hede中的js脚本');
	console.log(document.body + ' --获取不到body,因为下面的body元素还没加载出来，脚本就已经执行了');   
	console.log('--------分割线--------');
	
	var oImg = new Image();
	oImg.src = "img.jpg";		//虽然在这里就添加了图片链接，但是浏览器会等html文档中核心文件加载完才开始加载图片
	oImg.onload = function(){
		console.log('图片加载完毕后执行');
	}
	
	window.addEventListener("load", function() {
		console.log('页面加载完毕后执行该代码');
	}, false);
	
	document.addEventListener("DOMContentLoaded", function() {
		console.log('当初始的HTML文档被完全加载和解析完成之后后执行该代码,不考虑样式表,图像,子框架是否加载完成');
		console.log('--------分割线--------');
	}, false);
	
</script>
<script src="js2.js"></script>
</head>

<body>
<div>
	<p>Hello world</p>
</div>
<script>
	console.log('这是在body中的js脚本');
	console.log(document.body + ' --这时候body元素已经加载出来了'); 
	console.log('--------分割线--------');
</script>
</body>
</html>

// js1文件内容
console.log('这是外部引用的JavaScript脚本js1');
console.log('--------分割线--------');

// js2文件内容
console.log('这是外部引用的JavaScript脚本js2');
console.log('--------分割线--------');

执行结果：（建议把代码复制到编辑器上自己也执行一次，外部文件自己添加）

Network：文件加载情况

现在来分析下页面加载，解析，渲染过程

①加载html文档内容，加载完成后上往下进行解析。

②如果是遇到js外部链接，会马上进行加载并解析，解析完马上执行。如果遇到的是js脚本，也是解析完就马上执行。（默认情况下，浏览器是同步加载 js 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。这一点很重要，如果是在非本地情况下，js脚本加载需要时间，如果js文件过大，加载和执行时间过长，会堵塞浏览器向下渲染）。

③如果是遇到css外部链接，会马上进行请求加载并解析。如果遇到是css脚本，也是马上解析。但是css解析完并非就马上进行DOM元素的渲染，而是会转化成cssom(css对象模型)的树形结构，等待DOM节点树的绘制完成。

④等html文档被完全加载和解析完成时，html代码会转化成DOM（文档对象模型），同时也会绘制DOM节点树。（等DOM节点树绘制完成，会跟CSSOM一起，生成布局（flow），并绘制(paint)）

⑤最后就将绘制好的布局渲染到屏幕上了，页面也就展示在我们眼前了。

对上面例子的补充：

①、html文档解析是从上往下解析的，js脚本是解析到哪就执行到哪，这也就是为什么在head中运行的脚本无法获取到body，因为body标签还没解析出来。

var oImg = new Image();
	oImg.src = "img.jpg";		//虽然在这里就添加了图片链接，但是浏览器会等html文档中核心文件加载完才开始加载图片
	oImg.onload = function(){
		console.log('图片加载完毕后执行');
	}

②、也正是因为html文档解析是从上往下解析，加载css样式表最好写在加载js文件前面，让css先去加载，加快页面的渲染。

③、图片的加载是在js，css等核心文件加载完成之后才会进行加载(这也就是为什么在图片加载代码后面的js2文件会比图片先加载)。等图片加载完成，因为图片有宽度高度什么的，会改变页面的布局，这会导致页面重新布局（reflow），并重新绘制（repaint），并重新渲染。

④、如果后续的js文件中存在改变DOM节点样式(如颜色)的代码，会导致页面会进行重新绘制（repaint）->重新渲染，但是不会导致重新布局（reflow）。如果改变了DOM节点的大小或者改变DOM节点位置的话，将导致整个页面重新布局（reflow）->重新绘制（repaint）->重新渲染。

window.addEventListener("load", function() {
		console.log('页面加载完毕后执行该代码');
	}, false);
	
	document.addEventListener("DOMContentLoaded", function() {
		console.log('当初始的HTML文档被完全加载和解析完成之后执行该代码,不考虑样式表,图片,子框架是否加载完成');
		console.log('--------分割线--------');
	}, false);

⑤、window.onload相信大家见到过很多了，他是等页面中所有文件（包括css，图片等文件）加载完毕之后才执行里面的代码。

⑥、DOMContentLoad事件是当初始的HTML文档被完全加载和解析完之后就会进行执行，他不考虑(css样式表，或者图片)是否加载完成。也就是jquery中的$(document).ready()。

汪小穆

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【性能优化】浏览器加载，解析，渲染过程(在不考虑http协议、缓存、网络等情况下)

前言：要优化浏览器性能就要先去了解浏览器加载解析页面的过程。（这里并没有去考虑http协议，缓存，网络等相关因素，这里就只单纯考虑html，css，js，图片加载解析过程）。一、浏览器加载，解析，渲染过程。先看一个例子&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3....
复制链接

扫一扫