domTree + cssTree = renderTree => 渲染引擎绘制页面
浏览器内核识别html代码，绘制domTree(把dom结点挂在这棵树上) =>深度优先
domTree
head body
title meta strong div span p
dom结点解析完，不代表加载完（下载完）=>异步加载
dom结点先解析，再加载。
例如图片标签的src，只是将它解析了，就执行下面的代码，下载是异步执行的。
再识别css代码，绘制cssTree,这棵树跟dom树结点相对应
最后两棵树在绘制为renderTree,让渲染引擎进行渲染
reflow 重构、回流、重排 （dom结点添加、删除、宽高位置、display:none
或者是查询x轴到dom结点的位置offsetLeft、dom的宽度offsetWidth 等等）
这会让renderTree重新构建
repaint 重绘 （css的颜色变化 字体颜色以及背景图片的变化）
这样的性能比reflow好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<div></div>
<img src="xxx">
<iframe src="xxx">
</body>
</html>
而js是同步加载的。
为什么跟css和html的加载方式不一样呢？
如果一样的话，有可能css、html的节点还没加载完，js就开始修改代码（js是解析完就立刻执行的）
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
