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

  • iphone13pro几个摄像头(苹果13pro手机几个摄像头)

    iphone13pro几个摄像头(苹果13pro手机几个摄像头)

  • 淘宝退货自行寄回可以退运费险吗(淘宝退货自行寄回怎么操作)

    淘宝退货自行寄回可以退运费险吗(淘宝退货自行寄回怎么操作)

  • 钉钉能同时看两个群直播吗

    钉钉能同时看两个群直播吗

  • 小米9手机防水吗(小米手机防水标贴在哪里)

    小米9手机防水吗(小米手机防水标贴在哪里)

  • 抖音关注请求在哪里看(抖音关注请求在哪里找)

    抖音关注请求在哪里看(抖音关注请求在哪里找)

  • 电话显示虚拟运营商是什么意思(电话显示虚拟运营商是怎么回事)

    电话显示虚拟运营商是什么意思(电话显示虚拟运营商是怎么回事)

  • 抖音像素怎么设置(抖音视频像素怎么调)

    抖音像素怎么设置(抖音视频像素怎么调)

  • 微视号可以更改吗(微视号能改吗?)

    微视号可以更改吗(微视号能改吗?)

  • 小米8突然无法识别卡(小米突然无法超级快充)

    小米8突然无法识别卡(小米突然无法超级快充)

  • 华为手机睡眠模式在哪(华为手机睡眠模式怎样设置)

    华为手机睡眠模式在哪(华为手机睡眠模式怎样设置)

  • 群主到哪里查退群人员(群主怎么查询退群记录)

    群主到哪里查退群人员(群主怎么查询退群记录)

  • 微博怎么查找通讯录好友(微博怎么查找手机通讯录)

    微博怎么查找通讯录好友(微博怎么查找手机通讯录)

  • 怎么给照片添加水印(怎么给照片添加音乐)

    怎么给照片添加水印(怎么给照片添加音乐)

  • 微信新设备登录没有好友验证(微信新设备登录限制怎么解除)

    微信新设备登录没有好友验证(微信新设备登录限制怎么解除)

  • ipad打不开了怎么办啊(iPad打不开了怎么解锁)

    ipad打不开了怎么办啊(iPad打不开了怎么解锁)

  • mate30听筒在哪里(mate30e听筒)

    mate30听筒在哪里(mate30e听筒)

  • oppoa9x私密照片如何看(oppoa9x相册照片设为私密在哪里找?)

    oppoa9x私密照片如何看(oppoa9x相册照片设为私密在哪里找?)

  • vivo s5什么时候发布(vivos5什么时候出厂)

    vivo s5什么时候发布(vivos5什么时候出厂)

  • 怎么去掉超链接下划线(excel中怎么去掉超链接)

    怎么去掉超链接下划线(excel中怎么去掉超链接)

  • 拼多多换货怎么操作(拼多多换货怎么寄回去给商家)

    拼多多换货怎么操作(拼多多换货怎么寄回去给商家)

  • oppo悬浮键盘怎么关闭(oppo悬浮键盘怎么变大)

    oppo悬浮键盘怎么关闭(oppo悬浮键盘怎么变大)

  • sm g9550是国行版本么

    sm g9550是国行版本么

  • 为什么苹果手机不能认证(为什么苹果手机发烫严重)

    为什么苹果手机不能认证(为什么苹果手机发烫严重)

  • 快手直播伴侣怎么录制视频(快手直播伴侣怎么放音乐)

    快手直播伴侣怎么录制视频(快手直播伴侣怎么放音乐)

  • 淘宝后台怎么看

    淘宝后台怎么看

  • 苹果la是什么版本(iphonella是什么版本)

    苹果la是什么版本(iphonella是什么版本)

  • cpu和gpu已过时,npu和apu的时代开始(cpu占满gpu不工作)

    cpu和gpu已过时,npu和apu的时代开始(cpu占满gpu不工作)

  • 财务软件和报税软件区别
  • 综合收益什么时候结算
  • 贴现率和折现率相等吗
  • 火车票丢失可以抵扣进项税额
  • 增值税零税率与免税有何不同
  • 土地转让如何缴纳增值税
  • 超市费用能否税前扣减?
  • 房地产 结转
  • 申报抵扣了不做账怎么处理?
  • 银行期初数不对,怎么调整
  • 房租收入应该计入什么会计科目
  • 交通运输业安全心得体会范文
  • 购买职工宿舍用品账务处理
  • 收到投资分红要缴纳企业所得税吗?
  • 金融保险服务业
  • 个税验证不通过怎么办
  • 个人收到支票如何做账
  • 电子票据查询打印
  • 补发工资如何缴纳工人所得税的法条
  • 原材料账户可以按什么进行明细核算
  • 发票拍照打印出来能用吗
  • 小规模税控盘服务费怎么填增值税申报表
  • 成本算错了
  • 消防工作经历证明哪些单位可以开
  • 政府补贴的银行卡注销了会怎么样
  • 建筑业增值税会计核算是哪门课的内容
  • 月末计提电费
  • mac怎么airdrop给ipad
  • 付员工经济补偿金计入工资总额吗
  • 公账如何存钱
  • 房企因商品质量问题退租
  • 税法的构成要素中,()是税法最基本的要素
  • 领用包装物会计科目
  • 何为租赁合同
  • 对于企业已经入账而银行尚未入账
  • html无刷新跳转
  • php格式转换
  • 公司车辆缴纳车船税需要什么资料
  • html文档基本结构包括哪几部分
  • ninja命令使用
  • 发票写的是信息怎么办
  • 退社保基金怎么办理
  • 技术服务费怎么开票税率
  • 支付临时工工资,需要个税申报吗
  • 收到退税收入
  • 无形资产摊销怎么计算
  • 管理费用冲减其他应付款分录
  • 加权平均发计算公式
  • 发票拍照打印出来可以报销吗法律
  • 企业的哪些支出不得列入成本费用原因
  • 应收代位追偿款会计分录
  • 季节性停工损失计入存货成本吗
  • 未计提坏账准备金额在哪个表
  • 出口退税进口退税吗
  • 老板买了手机,算入什么费用
  • 收到暂估跨年发票怎么办
  • 借款后的报销流程怎么写
  • 公司汽车上牌费用多少
  • 经营性应收项目和经营性应付项目
  • win10不重启
  • 在linux2.4.0版本中
  • tvt_reg_monitor_svc.exe进程是什么
  • win7旗舰版开机
  • windows8.1仿win7
  • win8丢失msvcp140.dll的解决办法
  • Windows环境下搭建Python开发环境的方法
  • jQuery扩展+xml实现表单验证功能的方法
  • js动态改变div内容
  • jsonp如何解决跨域问题
  • Python连接MySQL并使用fetchall()方法过滤特殊字符
  • linux装python环境
  • js 不用var
  • jquery实现搜索功能
  • python flask框架 web服务器
  • 广西国家税务总局电子税务局官网
  • 国家税务2018年61号附件
  • 中国纳税大户排行
  • 卷烟批发环节的税率
  • 江苏无锡2023年GDP
  • 湖北国税发票真伪查询系统
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设