浏览器解析渲染页面过程
浏览器向服务器请求资源过程
一、大致分为五步:
1.解析HTML
2.构建DOM树
3.DOM树与CSS样式进行附着构造呈现树
4.布局
5.绘制
二、解析渲染过程
1.DOM Tree:浏览器将HTML解析成树形的数据结构,构建一颗DOM树,同时进行第三步。
2.CSS Rule Tree:浏览器将CSS解析成树形的数据结构,构建CSSOM tree,生成页面的样式表。
3.Render Tree: 将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法,接受样式信息,返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。
4.layout: 有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。
5.painting: 按照算出来的规则,调用每个节点paint方法,把它们绘制出来。
6.reflow(回流or重排):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。要从第四步重新开始,更加耗费性能。
7.repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变,只需要重新走第五步。
html
的代码,是从上到下一行行执行的,也就是说如果js
代码写在head
头里,且没有用加在window.onload
方法里,那么他是无法读取到body
里的标签的。之所以加在window.onload
里可以执行,是因为,window.onload
里的函数会在dom
树加载之后执行。link
标签后,会在link
加载(从服务器下载)完毕后,再执行后续代码。但与此同时,如果还有外部文件,则是同时加载(不阻塞后续外部文件link
、script
加载)。但是外部文件内的代码不会执行,只会在代码解析到它的时候执行。script
标签会阻塞html
解析,因为js
可能会改变dom
和css
,因此浏览器会先解析script,避免浪费时间。要想避免阻塞的话,可使用defer
和 async
。link
标签不会阻塞其后动态创建的script
的加载与执行,不管script
标签是否具有async
属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script> var start = +new Date </script> </head> <body> test <script> var link = document.createElement('link') link.href = 'http://udacity-crp.herokuapp.com/style.css?rtt=2' link.rel = 'stylesheet' document.head.appendChild(link) var script = document.createElement('script') script.src = 'http://udacity-crp.herokuapp.com/time.js?rtt=1&a' document.head.appendChild(script) </script> <div id="result"></div> <script> var end = +new Date document.getElementById('result').innerHTML = end - start </script> </body> </html>js
添加async
属性之后,script
加载的外部文件成为了异步加载,这时相当于它于原本的html
解析过程同步进行。所以他不会被任何加载过程阻塞,只会在自己加载完成之后执行。但是,异步执行的影响就是,它如要读取dom
节点,很可能会失败,因为它的加载和html
解析过程没有了先后顺序。另外,如果它要输出动态的dom
节点,就无法保证节点的位置,因为它添加的节点,是在html
已解析的节点下顺序添加的。
<script src="http://localhost:8080/test.js" async></script>
js
添加defer
属性之后,script
加载的外部文件成为了异步加载,执行是同步的。脚本加载不阻塞页面的解析,脚本在获取完后并不立即执行,而是等到DOM
树加载完毕执行。
如下代码,加上defer
后会报错Uncaught ReferenceError: $ is not defined
。DOM
树渲染结束前body
里的script
已经执行了<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script defer src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="d1">我是内容</div>
<script >
console.log($('#d1').html())
</script>
</body>
</html>
DOM
元素;display、float、position、overflow
等等;Reflow
的成本比 Repaint
的成本高得多的多。一个节点的 Reflow 很有可能导致子节点,甚至父节点以及兄弟节点的 Reflow
。className
,如果动态改变样式,则使用cssText
(考虑没有优化的浏览器)DocumentFragment
进行缓存操作,引发一次回流和重绘;display:none
技术,只引发两次回流和重绘;cloneNode(true or false)
和 replaceChild
技术,引发一次回流和重绘;flush
队列的属性,如果你确实要访问,利用缓存;Render Tree
的规模;DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代表文档的构成部分(例如:页面元素、字符串或注释等等)。
DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。
构建DOM树是一个渐进过程,为达到更好用户体验,渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。
这三个过程在实际进行的时候不是完全独立,而是会有交叉。会造成一边加载,一遍解析,一遍渲染的工作现象。