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

  • 荣耀chl-an00是什么型号(荣耀an00是什么手机)

    荣耀chl-an00是什么型号(荣耀an00是什么手机)

  • reno7se支持NFC吗(note7pro支持nfc吗)

    reno7se支持NFC吗(note7pro支持nfc吗)

  • 苹果怎么设置4位数字锁屏密码(苹果怎么设置4位密码)

    苹果怎么设置4位数字锁屏密码(苹果怎么设置4位密码)

  • qq的字符什么意思(qq里的幸运字符是什么意思)

    qq的字符什么意思(qq里的幸运字符是什么意思)

  • 苹果11三维触控在哪(苹果11三维触控是什么意思)

    苹果11三维触控在哪(苹果11三维触控是什么意思)

  • 红米note7pro快充失效(红米note7pro快充头参数)

    红米note7pro快充失效(红米note7pro快充头参数)

  • 抖音快手视频可以同步吗(抖音快手视频可以隐藏吗)

    抖音快手视频可以同步吗(抖音快手视频可以隐藏吗)

  • 微信号登录不上怎么办(微信号登录不上钱包有钱怎么办)

    微信号登录不上怎么办(微信号登录不上钱包有钱怎么办)

  • word制作红头文件抬头(word制作红头文件字错开)

    word制作红头文件抬头(word制作红头文件字错开)

  • 用wps怎么打黑点(wps怎么打出大黑点)

    用wps怎么打黑点(wps怎么打出大黑点)

  • h97主板上什么cpu(h97主板上什么内存)

    h97主板上什么cpu(h97主板上什么内存)

  • 闲鱼拉黑别人会怎么样(闲鱼拉黑了别人,他还能看见我的主啊)

    闲鱼拉黑别人会怎么样(闲鱼拉黑了别人,他还能看见我的主啊)

  • oppoa11和a11x外壳一样吗(oppoa11跟oppoa11x手机壳一样吗)

    oppoa11和a11x外壳一样吗(oppoa11跟oppoa11x手机壳一样吗)

  • 计算机病毒实际上是一种特殊的什么(计算机病毒实际上是一段逻辑错误的程序)

    计算机病毒实际上是一种特殊的什么(计算机病毒实际上是一段逻辑错误的程序)

  • 怎样删除vivo自带软件(vivo怎么删除手机里面的自带东西)

    怎样删除vivo自带软件(vivo怎么删除手机里面的自带东西)

  • ios13删除的照片在哪(Ios13删除的照片怎么恢复过来)

    ios13删除的照片在哪(Ios13删除的照片怎么恢复过来)

  • 喜马拉雅可以包月吗(喜马拉雅包包是什么牌子)

    喜马拉雅可以包月吗(喜马拉雅包包是什么牌子)

  • airpods充电盒怎么关机(Airpods充电盒怎么拆)

    airpods充电盒怎么关机(Airpods充电盒怎么拆)

  • 微信运动20000步是多少公里(微信运动步数怎么不动)

    微信运动20000步是多少公里(微信运动步数怎么不动)

  • 好省怎么取消淘宝授权(好省怎么取消绑定淘宝)

    好省怎么取消淘宝授权(好省怎么取消绑定淘宝)

  • 苹果手机号码id格式怎么写(苹果手机号码id登录要加86吗)

    苹果手机号码id格式怎么写(苹果手机号码id登录要加86吗)

  • 拼多多农场在哪找(拼多多多多农场在哪里找)

    拼多多农场在哪找(拼多多多多农场在哪里找)

  • 快手限流怎么解决(快手限流怎么解开)

    快手限流怎么解决(快手限流怎么解开)

  • 微信最长能发多长的视频(微信最长能发多长的语音电话)

    微信最长能发多长的视频(微信最长能发多长的语音电话)

  • 圆角屏和刘海屏区别(圆角屏和刘海屏哪个好)

    圆角屏和刘海屏区别(圆角屏和刘海屏哪个好)

  • 前端 - get请求传递数组(前端get请求传数组)

    前端 - get请求传递数组(前端get请求传数组)

  • (附源码)Springboot宠物领养系统毕业设计241104(读懂spring源码)

    (附源码)Springboot宠物领养系统毕业设计241104(读懂spring源码)

  • 个体工商户个人经营所得税优惠政策
  • 船舶吨税范围
  • 个体工商户税务申报如何网上申报
  • 个税填报后怎么撤销申报
  • 公司产品的打样费入什么会计科目
  • 可供出售金融资产计入什么科目
  • 房地产开发精装房是国家规定吗
  • 挂应付账款之后发现用现金付款如何调整?
  • 转租收入怎样缴税
  • 餐饮 专票
  • 为何要简并增值税税率?
  • 公司购买新办公楼装修计入什么科目
  • 股利分配政策的研究背景
  • 公司利润怎么提出来给老板
  • 累计折旧要结转到本年利润吗
  • 出纳人员发现假章怎么办
  • 利息调整摊销的经济意义
  • 月末计提固定资产折旧时,应借记
  • 收购子公司股权现金流
  • linux日期格式
  • 重复确认收入是什么意思
  • PHP:session_unset()的用法_Session函数
  • 当月认证抵扣的进项税发票一定要入帐做成本吗?
  • NDSTray.exe - NDSTray是什么进程 有什么用
  • 公路客运车辆
  • 附加税申报错误,已缴费,怎么办
  • php大于等于号怎么打
  • 汽油发票需要写税号吗?
  • 利润表其他综合收益的税后净额计算公式
  • ZED2跑ORB-SLAM3+双目相机、IMU联合标定+显卡驱动与cuda/cudnn安装
  • php session用法
  • 包装费和售后服务的区别
  • 会计制度备案附件要上传什么
  • 期货收入交个人所得税吗
  • php好用的cms
  • c++operator详解
  • 物业用房需要交维修基金吗
  • 公账转给员工工资情况说明怎么写
  • 怎样进行制造费用的归集
  • mysql数据库注入
  • mysql 随机取出一条
  • 企业与企业之间通过互联网进行产品
  • 增值税专用发票的税率是多少啊
  • 工程预收款税票
  • 预收账款所得税汇算清缴需要调吗
  • 安全生产费会计核算办法
  • 房屋租赁怎么干
  • 股票交易费用计入股票成本吗
  • 商业企业注销应检查哪方面的问题
  • 企业必须建立哪些制度
  • Mysql优化sql方案
  • sql语句示例
  • sql server的数据库
  • mysql闪退处理
  • winhlp32.exe - winhlp32是什么进程
  • win7系统玩英雄联盟没有声音
  • centos的安装步骤
  • 电脑window8系统怎么样
  • yum update upgrade
  • linux快速查看目录大小
  • nodejs读写json文件
  • 不要使用CSS Expression的原因分析
  • window.requestAnimationFrame是什么意思,怎么用
  • 创业要看的书
  • 在Linux下用scp复制文件无需输入密码的技巧
  • unity uma
  • javascript学习指南
  • 详解HTTPS 的原理和 NodeJS 的实现
  • 深入理解计算机系统
  • ASP小贴士/ASP Tips javascript tips可以当桌面
  • jquery为什么不火了
  • htmlcssjavascript入门经典pdf
  • android 全局viewmodel
  • 国企划拨用地改制处置
  • 如何发挥人才作为第一资源 护理
  • 小规模纳税人需要进项票吗
  • 乌鲁木齐市公立幼儿园有哪些
  • 土地增值税分期清算条件?
  • 北京买新车购置税怎么算
  • 河北地税网上申报纳税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设