位置: IT常识 - 正文

前端资源浏览器渲染原理(前端资源浏览器下载)

编辑:rootadmin
前端资源浏览器渲染原理 浏览器的渲染页面过程HTML解析过程

推荐整理分享前端资源浏览器渲染原理(前端资源浏览器下载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端浏览器插件,前端浏览器插件,前端资源浏览器下载,前端资源库,前端资源库,前端资源浏览器下载,前端资源浏览器下载,前端资源浏览器怎么下载,内容如对您有帮助,希望把文章链接给更多的朋友!

一般情况下服务器会给浏览器返回 xx.html 文件 解析html 其实就是 Dom 树的构建过程

我们可以根据以下html 结构 来简单的分析出 html 的解析过程

解析CSS 规则树

在解析的过程中,如果遇到CSS的link元素,那么会由浏览器负责下载对应的CSS文件:

PS: 这里下载 CSS 是不会影响到 DOM树的解析的

下载完成后 就会对CSS 文件解析出对应的 规则树 , 案例如下图 :

body{font-size: 16px}p{font-weight: bold}span{color: red}p span{display:none}img{float: right}

解析步骤 构建 Render Tree

当有了DOM Tree和 CSSOM Tree后,就可以两个结合来构建Render Tree了

需要注意的是:

link元素不会阻塞DOM Tree的构建过程,但是会阻塞Render Tree的构建过程Render Tree和DOM Tree并不是一一对应的关系,比如对于display为none的元素,压根不会出现在render tree中;解析步骤 布局和绘制渲染树(Render Tree)上运行布局(Layout)以计算每个节点的几何体。渲染树会表示显示哪些节点以及其他样式,但是不表示每个节点的尺寸、位置等信息;布局是确定呈现树中所有节点的宽度、高度和位置信息;将每个节点绘制(Paint)到屏幕上在绘制阶段,浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点;包括将元素的可见部分进行绘制,比如文本、颜色、边框、阴影、替换元素(比如img)

渲染的流程可以参考下图 :

完成以上五步 成功在浏览器渲染出 对应的 xx.html 文件

回流和重绘回流(reflow)前端资源浏览器渲染原理(前端资源浏览器下载)

reflow :

我们渲染出来的节点大小位置 也就是布局时第一次渲染出之后就确定的之后对于节点大小和位置重新计算的行为 叫做回流(reflow)

回流在什么时候会出现 :

DOM 结构发生变化 (添加 & 移除)改变了 CSS 样式代码 也就是布局修改了 窗口尺寸或者是调用了某些内置函数 获取位置和尺寸信息重绘 (reprint)我们渲染的第一次,在之前的流程图中叫做 printing在之后需要重新渲染的时候 成为重绘

重绘怎么出现 :

修改CSS 如 颜色 文字样式拓展思路只要出现回流 就一定会引起重绘 其实看到上述的解释 也很容易就发现 回流也是在出发样式代码或者改变的时候触发回流的性能并不好 也很明显 重新渲染整个DOM 很浪费性能总结修改样式 尽可能减少回流次数 也就是设计好之后,非必要不去改动样式和DOM的结构避免频繁使用 JS 去操作DOM尽可能减少函数获取储存位置的信息特殊解析 - composite合成

绘制的过程,可以将布局后的元素绘制到多个合成图层中。

会形成新的合成层的属性:

3D transformsvideo、canvas、iframeopacity 动画转换时position: fixedwill-changeanimation 或 transition 设置了opacity、transform

PS:分层确实可以提高性能,但是它以内存管理为代价,所以不作为性能优化策略来使用

script元素和页面解析的关系

JS 在我们渲染过程中的那一步呢?

在渲染html的时候 js 没有继续构造DOM的能力如果需要需要的部分 会先停止构建,下载js 执行脚本把需要构建的东西构建完成后 继续执行构建 DOM

这么做有什么好处?

JS 有操作和修改DOM的作用为什么会先去执行js脚本? 因为之前提到了 回流时很吃性能的所以最好一次性弄好 减少不必要的回流

代码案例

index.html

<script src="./js/test.js"></script><body> <div class="box"></div></body><script> var boxel = document.getElementsByClassName("box") console.log(boxel);</script>

test.js

debuggerconsole.log("hello")

新的问题:

在现在的开发模式中 大多都是使用vue和React 作为开发框架 JS 的占比往往很大 处理事件也会变长这也导致了 如果解析阻塞 那么在脚本解析完成之前 可能界面什么都不显示

这里 js 给我们提供了两个属性 来解决这个问题

defer属性

defer 属性告诉浏览器不要等待脚本下载,而继续解析HTML,构建DOM Tree,如果脚本提前下载好就等待加载,等DOM完成 在触发DOMContentLoaded之前执行defer中的代码

PS: defer 按照默认顺序执行 不会影响顺序 且可以操作DOM

<script> window.addEventListener("DOMContentLoaded", () => { console.log("DOMContentLoaded"); })</script><script> var boxel = document.getElementsByClassName("box") console.log(boxel);</script><script defer> console.log("defer-demo")</script><script> debugger console.log("hello")</script>

建议:

将defer放入head中使用 这个属性的特性放在末尾 就本末倒置了defer 只对外置脚本有效果async属性

async 特性与 defer 有些类似,它也能够让脚本不阻塞页面。

它的特性:

浏览器不会因 async 脚本而阻塞(与 defer 类似);async脚本不能保证顺序,它是独立下载、独立运行,不会等待其他脚本async不会能保证在DOMContentLoaded之前或者之后执行<script> window.addEventListener("DOMContentLoaded", () => { console.log("DOMContentLoaded"); })</script><script async> console.log("defer-demo")</script>

总结

defer 通常用于文档解析操作DOM且有顺序要求的JS代码async 通常用于独立脚本 可以理解为没有什么依赖的脚本 如果有依赖 那么不保证一定能提前加载到总结首先时了解和认识一些浏览器的内核了解从服务器加载 到渲染页面的流程细化每一步的大致内容发现有问题且探索到问题的一些解决方法
本文链接地址:https://www.jiuchutong.com/zhishi/299323.html 转载请保留说明!

上一篇:High-resolution image reconstruction with latent diffusion models from human brain activity

下一篇:users命令 显示当前登录的用户(为什么我的命令提示符里显示user)

  • 怎么清理微信聊天图片和视频(怎么清理微信聊天的文件)

    怎么清理微信聊天图片和视频(怎么清理微信聊天的文件)

  • 微信号可以不绑定手机不(微信号可以不绑定手机吗)

    微信号可以不绑定手机不(微信号可以不绑定手机吗)

  • 小米实体店可以免费贴膜吗(小米实体店可以分期吗)

    小米实体店可以免费贴膜吗(小米实体店可以分期吗)

  • 电脑flash是什么意思(电脑flash是什么软件)

    电脑flash是什么意思(电脑flash是什么软件)

  • 苹果shsh是什么(苹果ahs是什么意思)

    苹果shsh是什么(苹果ahs是什么意思)

  • 抖音里的抖一下是什么功能(抖音的抖一下是啥意思)

    抖音里的抖一下是什么功能(抖音的抖一下是啥意思)

  • 固态硬盘m.2和nvme什么意思(固态硬盘M.2和NVME的区别)

    固态硬盘m.2和nvme什么意思(固态硬盘M.2和NVME的区别)

  • 删掉的人怎么加回来(删掉的人怎么加回来不尴尬)

    删掉的人怎么加回来(删掉的人怎么加回来不尴尬)

  • 分辨率4k是什么意思(分辨率为4k什么意思)

    分辨率4k是什么意思(分辨率为4k什么意思)

  • hg8120c是千兆光猫吗(hg8m8120cgm1是千兆光猫吗)

    hg8120c是千兆光猫吗(hg8m8120cgm1是千兆光猫吗)

  • 苹果库乐队怎么下载(苹果库乐队怎么设置铃声)

    苹果库乐队怎么下载(苹果库乐队怎么设置铃声)

  • 笔记本机械硬盘怎么装(笔记本机械硬盘突然消失只剩固态)

    笔记本机械硬盘怎么装(笔记本机械硬盘突然消失只剩固态)

  • 手机里安卓文件可以删除吗(手机里安卓文件哪些是可以删除的)

    手机里安卓文件可以删除吗(手机里安卓文件哪些是可以删除的)

  • 快手粉丝被删了怎么办(快手粉丝被删了还能恢复吗)

    快手粉丝被删了怎么办(快手粉丝被删了还能恢复吗)

  • ipadpro11能插耳机吗(ipad pro11的耳机插孔位置?)

    ipadpro11能插耳机吗(ipad pro11的耳机插孔位置?)

  • 机顶盒丢了怎么退宽带(机顶盒丢了怎么找回)

    机顶盒丢了怎么退宽带(机顶盒丢了怎么找回)

  • iphone11相机怎么用(iphone11相机怎么调参数)

    iphone11相机怎么用(iphone11相机怎么调参数)

  • 手机6g和4g有什么区别(手机6g和4g哪个好)

    手机6g和4g有什么区别(手机6g和4g哪个好)

  • 苹果14发布会2022在几月详情(苹果14发布会时间)

    苹果14发布会2022在几月详情(苹果14发布会时间)

  • win11怎么清理Windows.old文件夹? 删除windows.old文件夹的技巧(win11怎么清理电脑垃圾)

    win11怎么清理Windows.old文件夹? 删除windows.old文件夹的技巧(win11怎么清理电脑垃圾)

  • 在Linux中使用pushd和popd命令操作目录的用法(在linux中使用什么命令可以动态查看文件内容)

    在Linux中使用pushd和popd命令操作目录的用法(在linux中使用什么命令可以动态查看文件内容)

  • 不符合Win11硬件标准如何照样升级Win11?(不符合win11硬件要求安装会怎么样)

    不符合Win11硬件标准如何照样升级Win11?(不符合win11硬件要求安装会怎么样)

  • <input> 实现输入框只能输入数字(个人认为最好的)(input输入语句)

    <input> 实现输入框只能输入数字(个人认为最好的)(input输入语句)

  • 房产税如何申报流程
  • 企业拆迁补偿金的税务处理
  • 小规模出售固定资产税率
  • 带薪年假是入职就有还是要等一年以后
  • 用房租入股
  • 哪些行业增值税率1%
  • 软件企业购进软件服务怎么入账
  • 融资租赁设备增值税怎样抵扣
  • 进项税额可以在买东西吗
  • 研发废料收入抵研发
  • 商贸公司购买的手提袋怎么入账
  • 政府制定优惠政策
  • 发票认证抵扣了还能冲红么
  • 车辆租赁费可以一次性计入费用吗
  • 计入资本公积的固定资产转出
  • 文化建设事业费逾期申报有罚款吗
  • 建筑业交税会计分录
  • 海关增值税抵扣是全额抵扣所得税
  • 公司为员工购买五险一金是什么意思
  • 个体户的定额发票怎么领
  • 外省工程需要什么手续
  • 外籍人员探亲签证
  • 财产行为税税种
  • 退休人员返聘工资怎么发放
  • 桌面美化神器
  • G40/50-70、SR1000随机Linux改安装Win7系统的实现方法
  • 内置管理员无法打开此应用
  • 贵的u盘和便宜的有什么区别
  • php分片上传文件
  • 批发企业商品盘点发生短缺时
  • php处理接收的xml
  • aws documentation
  • 企业购进固定资产,在安装完工交付使用时
  • 应收票据利息的确认
  • 印花税调低
  • 没有取得发票就把车卖了违法吗
  • 帝国cms标签调用大全
  • js原型链的用处
  • 帝国cms真的很好用
  • C语言中次方怎么表示
  • mysql5.7.32安装
  • 税前补发补扣
  • 怎么盘存货
  • 差额征税扣除额的具体规定
  • 上月结转余额怎么做会计分录
  • 财产租赁合同按金额的多少进行计税
  • 年报资金数额是什么意思
  • 中秋福利做账
  • 个人所得税应纳税额
  • 文化事业建设税是含税还是不含税
  • 提前送了礼物还要发红包吗
  • 增值税进项发票如何做账
  • 网上购物没有发票
  • 充值优惠怎么写
  • 小规模纳税人月销售额超过10万怎么交税
  • 小型微利企业所得税100到300
  • 个体户建账吗
  • sqlserver数据库和mysql区别
  • mysql事务用法
  • win7怎么彻底删除文件
  • windows10怎么隐藏工具栏
  • Kaspersky Rescue Disk 2009.04.16 卡巴斯基救援盘
  • windows运行.sh
  • 系统如何修改
  • winxp怎么自动开机
  • ubuntu文本编辑器命令
  • win10系统局域网共享打印机设置
  • win7 esd安装文件怎么安装教程
  • win7设置路由器上网
  • win7电脑老是自动重启是什么原因
  • font:inherit
  • Linux系统安装字体
  • python中面向对象的概念
  • node爬取数据
  • js创建一个对象,里面有属性和方法
  • jquerybind事件
  • javascript页面
  • 重庆市国家税务局电子税务局官网
  • 课题研究经费预算一般多少比较合适
  • 税务人员少征税款
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设