浏览器渲染页面过程原理

一、浏览器渲染页面过程详细说明
  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次渲染页面就叫做重绘
二、回流一定会触发重绘
三、修改样式颜色、背景色等触发重绘

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值