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

  • 山姆会员卡可以绑定几个人(山姆会员卡可以截图给别人用吗)

    山姆会员卡可以绑定几个人(山姆会员卡可以截图给别人用吗)

  • iphone13怎么拍摄prores(iphone13怎么拍摄hdr照片)

    iphone13怎么拍摄prores(iphone13怎么拍摄hdr照片)

  • 苹果11清理运行的软件如何操作(苹果11清理运行内存怎么清理)

    苹果11清理运行的软件如何操作(苹果11清理运行内存怎么清理)

  • 垂直同步开了会卡吗(垂直同步开了会怎么样)

    垂直同步开了会卡吗(垂直同步开了会怎么样)

  • 华为手机ele-al00是什么型号(华为手机ele-al00型号怎么截屏)

    华为手机ele-al00是什么型号(华为手机ele-al00型号怎么截屏)

  • 苹果8p可以更新13.4系统吗(苹果6p怎么更新到ios13)

    苹果8p可以更新13.4系统吗(苹果6p怎么更新到ios13)

  • 拼多多可以开发票吗(拼多多可以开发票话吗)

    拼多多可以开发票吗(拼多多可以开发票话吗)

  • 手机关联启动什么意思(手机关联启动怎么设置在哪)

    手机关联启动什么意思(手机关联启动怎么设置在哪)

  • 华为m6home键没反应(华为m6的home键无效)

    华为m6home键没反应(华为m6的home键无效)

  • ios10.3.3录屏功能在哪(ios10.3.3 录屏)

    ios10.3.3录屏功能在哪(ios10.3.3 录屏)

  • 怎么下载国外软件(海外软件下载平台)

    怎么下载国外软件(海外软件下载平台)

  • 苹果xr按键振动怎么调(苹果xr按键振动怎么设置)

    苹果xr按键振动怎么调(苹果xr按键振动怎么设置)

  • 数据库外码的定义(数据库外码的定义语句)

    数据库外码的定义(数据库外码的定义语句)

  • 如何查看特别关心自己的人(如何查看特别关心自己的人数)

    如何查看特别关心自己的人(如何查看特别关心自己的人数)

  • 苹果手机怎么使用微信分身(苹果手机怎么使用FaceTime)

    苹果手机怎么使用微信分身(苹果手机怎么使用FaceTime)

  • 苹果xs广角镜头怎么用(iphonexs广角镜头怎么开0.5)

    苹果xs广角镜头怎么用(iphonexs广角镜头怎么开0.5)

  • 苹果11可以双卡双待吗(苹果11可以双卡双待吗手机)

    苹果11可以双卡双待吗(苹果11可以双卡双待吗手机)

  • mt712ch/a是什么版(MT712CHA是什么版本)

    mt712ch/a是什么版(MT712CHA是什么版本)

  • line在中国怎样才能用(line怎么在中国使用)

    line在中国怎样才能用(line怎么在中国使用)

  • mt6797t是什么处理器(mt6769叫什么)

    mt6797t是什么处理器(mt6769叫什么)

  • 充电宝忘记还了怎么办(充电宝忘记还了怎么暂停)

    充电宝忘记还了怎么办(充电宝忘记还了怎么暂停)

  • 怎么解决百度打不开的问题?(怎么解决百度打不开页面)

    怎么解决百度打不开的问题?(怎么解决百度打不开页面)

  • 在Win7系统中,网卡mac地址怎么查看?(在win7系统中将打开窗口拖到屏幕顶端)

    在Win7系统中,网卡mac地址怎么查看?(在win7系统中将打开窗口拖到屏幕顶端)

  • Linux上设置用户通过SFTP访问目录的权限的方法(linux设置用户密码)

    Linux上设置用户通过SFTP访问目录的权限的方法(linux设置用户密码)

  • fch32.exe是什么进程 作用是什么 fch32进程查询(电脑上fci是什么文件)

    fch32.exe是什么进程 作用是什么 fch32进程查询(电脑上fci是什么文件)

  • uview2.0封装http请求实战以及常见请求传参实录

    uview2.0封装http请求实战以及常见请求传参实录

  • 印花税计算是否含税
  • 软件企业会计科目分类
  • 企业购买产品
  • 所得税营业成本包括税金及附加吗
  • 残疾人就业保障金会计分录怎么做
  • 公司如何做成集团
  • 发票没金额能开吗
  • 在分公司签的合同能转到总公司吗
  • 银行理财产品的特点
  • 劳务分期收款税率是多少
  • 股权出资登记管理办法已废止
  • 回迁房的交易流程
  • 公司清算关闭程序
  • 应付汇差是什么意思
  • 分包工程款税率
  • 暂估应付账款借方余额
  • 当月发货必须当月开票吗
  • 三级科目称为子目吗
  • 运费成本会计分录
  • 营改增后房地产企业增值税税收筹划存在问题
  • 增值税发票作废有什么损失
  • 低税负销售激励策略的设计与案例!
  • 租用仓库需要代扣代缴企业所得税吗
  • 非流动资产基金是什么意思
  • 专用发票抵扣联丢失怎么办最新规定
  • 月末利润分配的账务处理
  • 建帐选择什么会计制度和会计准则之后能修改吗
  • 汇算清缴后补缴得企业所得税,计入哪年的税负
  • win11如何更改开始菜单位置
  • centos 6.5安装教程
  • windows版本比较
  • 取得经营所得及其他所得交纳的所得税
  • php变量如何定义
  • 如何设置路由器步骤要详细
  • ecap.exe是什么意思
  • yolov5训练参数说明
  • 处置动产减按2%税率是什么意思
  • 股权转让怎么交印花税2019年最新
  • 出口企业如何确认增值税收入
  • 最贵的十张照片
  • vue ref获取元素高度
  • 金税盘锁死咋办
  • 年度预算的意义
  • python深拷贝与浅拷贝区别
  • js怎么执行函数
  • 工程施工与工程结算对冲分录
  • 收到退回的企业所得税分录
  • 提供劳务收入包含什么
  • 资产减值准备是资产的备抵科目吗
  • 小规模纳税人和一般纳税人的界定标准
  • 政策性搬迁涉及的税种
  • 实收资本认缴如何做账
  • 技术服务费计入成本会计分录
  • 某企业福利部门
  • 收到社保局的生育津贴并付给职工如何入账
  • 员工休产假不发工资违法吗
  • 代开专票作废了扣了两次税怎么办?
  • 员工的探亲费应由谁支付
  • 生物性资产折旧处理
  • 企业自行进行的研究开发项目,在开发阶段如果
  • 资本金账户资金允许
  • 企业建账目的
  • 清理系统休眠文件
  • freebsd使用
  • ubuntu服务器命令
  • macbook的dock栏
  • Win10打开设备管理器
  • linux的特殊权限
  • opengl怎么学
  • 原生js添加css样式
  • js创建类对象的方法
  • android应用程序的主要语言是java
  • unity3d有什么用
  • Intermediate Unity 3D for iOS: Part 3/3
  • 安卓手机管家在哪里打开
  • 摩托车的消费税率
  • 个人经营所得税怎么做账务处理
  • 农机行业的利润
  • 公司缴税款可以退税吗
  • 深圳国税总局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设