一、浏览器渲染页面过程详细说明
1)客户端接收服务器返回的index.html文件字符串格式代码
2)浏览器自上而下依次解析html 构建dom tree。行内间样式构建dom tree时候生效。
3)如果解析htm代码过程 遇到css的link元素 那么浏览器单独分配一个线程异步进行加载、解析css并且构建cssom。浏览器主线程继续往下解析html代码。
4)如果解析html代码过程 遇到导入js的script标签 那么停止解析html。 加载、解析js脚本。如果此时dom tree 没有构建完毕 无法使用js脚本操作dom
4)如果构建dom tree和构建cssom完毕 那么进行dom tree和cssom合并构建render tree。
如果cssom没有构建完毕 那么render tree无法构建。因为cssom无法和dom tree未进行attachment。
5)布局计算render tree每个节点的大小、位置信息 并且生成节点几何体
6)绘制节点结合体到页面像素点展示
二、运用浏览器内核渲染页面过程原理解析js脚本导入位置区别
<!-- /index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 浏览器分配线程异步加载、解析css -->
<link rel="stylesheet" href="./css/index.css">
<!-- 如果js脚本放置head标签内部 可以操作head内部元素 因为此时head以及内部元素已经生成dom tree
但是不能操作body以及内部元素 因为加载js脚本时候,主线程暂停加载html代码,body以及内容还没有生成dom tree 所以无法操作body以及内部dom-->
<script src="./js/head.js"></script>
</head>
<body>
<div id="app" style="display: block;">app</div>
<!-- js脚本放置body底部 此时#app已经被生成到dom tree上 可以使用js脚本操作#app -->
<script src="./js/inddex.js"></script>
</body>
</html>
三、验证结果
<header>
元素内部引入的head.js
/* /js/head.js */
// 可以操作head内部元素
const head = document.head
const title = document.querySelector('title')
console.log(head) // 可以获取
console.log(title) // 可以获取
// 如果此处操作body 那么失败
const body = document.body
console.log(body) // null
body
元素末尾引入js脚本index.js
/* /js/index.js */
// 此时可以操作#app
const app = document.querySelector('#app')
app.addEventListener('click',function (ev) {
console.log('app')
})
// 只能操作行间样式 因为只有行间样式被构建在dom tree中
console.dir(app.style.display) // 'block'
回流
一、回流概念:回流也称为重排。修改dom样式引发dom元素大小、位置
发生改变,导致dom tree结构发生改变
,重新生成新的render tree
,并且重新布局计算节点的大小和位置几何体
,此时就会触发回流
。
二、引发回流的情况
1)增删dom
2)修改dom的width、height、margin等。行内元素大小由内容撑开,修改行内元素的font-size也会导致回流
3)缩放窗口resize,特别响应式布局情况缩放窗口导致回流
4)使用getComputedStyle计算获取元素样式大小、位置
三、减少回流对性能的消耗
1)无论是否操作dom,页面初次渲染时候就会触发一次回流。所以回流是不可避免的,只能减少回流次数,也就是减少布局的计算量而减少回流对性能的消耗
2)预先定义className
统一处理所有class样式。
3)使用positoin:abscolute
或者position:fixed
形成合成图层,减少布局计算量
重绘
一、初次渲染页面叫做绘制页面,往后第N次渲染页面就叫做重绘
二、回流一定会触发重绘
三、修改样式颜色、背景色等触发重绘