位置: 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)

  • 博客营销之寻找素材的有哪些途径(博客营销的例子)

    博客营销之寻找素材的有哪些途径(博客营销的例子)

  • 华为p40pro和华为mate40pro的区别(华为p40pro和华为p60pro参数对比)

    华为p40pro和华为mate40pro的区别(华为p40pro和华为p60pro参数对比)

  • 华为荣耀9x有计步功能吗(华为荣耀9x计算机怎么查记录)

    华为荣耀9x有计步功能吗(华为荣耀9x计算机怎么查记录)

  • 微信备注信息过长看不到怎么办(微信备注过的人怎么找)

    微信备注信息过长看不到怎么办(微信备注过的人怎么找)

  • 淘宝与天猫的区别在哪里(淘宝与天猫一样吗)

    淘宝与天猫的区别在哪里(淘宝与天猫一样吗)

  • 快手现回什么意思(在快手上什么叫回访)

    快手现回什么意思(在快手上什么叫回访)

  • 华为荣耀9x怎么关闭运行程序(华为荣耀9x怎么关闭hd)

    华为荣耀9x怎么关闭运行程序(华为荣耀9x怎么关闭hd)

  • 拼多多卸载不了怎么办(拼多多卸载不了怎么办oppo)

    拼多多卸载不了怎么办(拼多多卸载不了怎么办oppo)

  • 魅色一连接就闪退(魅色5.0手机版闪退原因)

    魅色一连接就闪退(魅色5.0手机版闪退原因)

  • 抖音短视频和抖音极速版有什么区别(抖音短视频和抖音是一个吗)

    抖音短视频和抖音极速版有什么区别(抖音短视频和抖音是一个吗)

  • 笔记本2060和2070mq差距大吗(笔记本2060和2070的差距)

    笔记本2060和2070mq差距大吗(笔记本2060和2070的差距)

  • 什么叫屏幕内爆(什么是屏幕内爆)

    什么叫屏幕内爆(什么是屏幕内爆)

  • 手机一直显示3g怎么回事(手机一直显示3G信号怎么回事)

    手机一直显示3g怎么回事(手机一直显示3G信号怎么回事)

  • 换手机微信群找不到了怎么办?(换手机微信群找回)

    换手机微信群找不到了怎么办?(换手机微信群找回)

  • 网站禁止访问怎么解除(网站禁止访问怎么解决)

    网站禁止访问怎么解除(网站禁止访问怎么解决)

  • 微信扫一扫模糊怎么办(iphone14pro微信扫一扫模糊)

    微信扫一扫模糊怎么办(iphone14pro微信扫一扫模糊)

  • Watch GT2怎么查找手机(gt2用手机怎么找到手表)

    Watch GT2怎么查找手机(gt2用手机怎么找到手表)

  • 一加7T Pro怎么录屏(一加7怎么录制屏幕)

    一加7T Pro怎么录屏(一加7怎么录制屏幕)

  • 抖音注销账号如何恢复(抖音注销账号如何取消关注)

    抖音注销账号如何恢复(抖音注销账号如何取消关注)

  • 已注册防沉迷怎么解除(已注册防沉迷怎么注册)

    已注册防沉迷怎么解除(已注册防沉迷怎么注册)

  • 七天网络授权步骤(七天网络要怎么样才能授权)

    七天网络授权步骤(七天网络要怎么样才能授权)

  • 笔记本电脑睡眠后黑屏打不开(笔记本电脑睡眠不了是什么原因)

    笔记本电脑睡眠后黑屏打不开(笔记本电脑睡眠不了是什么原因)

  • 宽带无法上网怎么解决(宽带无法上网怎么找客服)

    宽带无法上网怎么解决(宽带无法上网怎么找客服)

  • m4a是什么软件录音的(怎样录m4a音频要下载什么软件?)

    m4a是什么软件录音的(怎样录m4a音频要下载什么软件?)

  • windows无法格式化sd卡(windows无法格式化sd卡怎么办)

    windows无法格式化sd卡(windows无法格式化sd卡怎么办)

  • 在word中如何打钩(在word中如何打开excel)

    在word中如何打钩(在word中如何打开excel)

  • 一般纳税人做账流程图
  • 培训费的其他费用是什么
  • 网吧是否征收文物保护费
  • 零余额账户出纳做什么
  • 做网站的费用会计分录
  • 季度应收账款周转天数是按多少天除
  • t3用友软件怎么设置三级科目
  • 职工教育经费税收金额怎么算
  • 资本溢价能不能退还股东呢
  • 异地上班员工报销路费
  • 出纳长短款项应按日结清,但不需要计算
  • 个人劳务费发票可以委托其他人去开吗
  • 免税农产品收入是否计入30万销售额
  • 注册资本金印花税减半征收
  • 开票资料填写
  • 投标报价里税金和税率是一个吗
  • 季报如何填企业信息
  • 企业残疾人保障金
  • 物业管理费属于应付账款吗
  • 外币应收账款汇兑损失计入
  • 关于燃油消费税征收范围及税率
  • 批发零售的成本核算
  • 公司购买投影仪的必要性?
  • 开票系统能导出几年前的
  • 软件企业收到即征即退分录
  • win10专业版如何改为家庭版
  • win10夜间模式怎么打开不了
  • uniapp分享图片
  • 本月损益类怎么结转
  • 小规模纳税人无法开具增值税专用发票
  • bios怎么关
  • MacOS X Yosemite升级后postgresql启动报错的解决办法
  • win11怎么关闭打开软件的弹窗
  • PHP:pg_result_error()的用法_PostgreSQL函数
  • php输出姓名
  • PHP:escapeshellarg()的用法_命令行函数
  • 不列颠哥伦比亚大学排名
  • 其它应收款的内容
  • 拖拉机拖拉机耕地
  • 长期借款的利息计入
  • densenet详解
  • opencv语句
  • c语音进阶
  • 如何用织梦在本地搭建网站
  • 织梦cms为什么不维护了
  • 银行结算方式有哪几种?其具体内容是什么
  • 零售药店可申请纳入医保定点
  • 企业所得税放入什么科目
  • 红字发票信息表怎么打印出来
  • 建筑劳务公司需要什么资质
  • sqlserver降级备份
  • 股东借款如何认定为出资
  • 短期借款按月计提的分录
  • 债券分期付息到期还本的意思
  • 公司车辆交强险怎么网上买
  • 老板想提取销售怎么办
  • 企业的收入总额
  • 行政事业单位支出范围和标准
  • 餐饮发票如何入账
  • 新手必看教程
  • 旅游费的发票可以进成本吗?
  • 预期信用损失影响损益吗
  • windows命令提示符重启
  • 繁体软件在简体运行
  • xp系统如何禁止软件联网
  • LINUX系统管理员维护招聘
  • win7系统怎么设置屏幕常亮
  • mac怎么共享打印机设备
  • mainwindow是什么程序
  • CCAssert(sm_pSharedApplication, "")导致程序闪退的原因以及解决方案
  • node.js加密
  • 分析师:董明珠让格力为豪赌买单
  • 关于javascript中数组的说法不正确
  • linux中fork()函数详解(原创!!实例讲解)
  • js判断上传图片宽高大小
  • 一个页面
  • 虚拟摇杆 安卓
  • jquery ui和jquery easy ui
  • 税控盘如何查询季度统计
  • 加油河南app怎么注销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设