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

  • word字体怎么旋转180度(word字体怎么旋转1)

    word字体怎么旋转180度(word字体怎么旋转1)

  • 荣耀平板v7pro怎么分屏(荣耀平板v7pro怎么连接笔)

    荣耀平板v7pro怎么分屏(荣耀平板v7pro怎么连接笔)

  • 华为p30和p30pro对比(华为p30 vs p30pro)

    华为p30和p30pro对比(华为p30 vs p30pro)

  • vivoz5i怎么调出返回键(vivo怎么调出jovi)

    vivoz5i怎么调出返回键(vivo怎么调出jovi)

  • 蓝牙4.1和5.0的音质有区别吗(5.0蓝牙和4.2蓝牙音质产有什么区别)

    蓝牙4.1和5.0的音质有区别吗(5.0蓝牙和4.2蓝牙音质产有什么区别)

  • 抖音传到朋友圈后模糊(抖音传到朋友圈怎么操作)

    抖音传到朋友圈后模糊(抖音传到朋友圈怎么操作)

  • 计算机网络安全策略是指(计算机网络安全的定义)

    计算机网络安全策略是指(计算机网络安全的定义)

  • 芒果tv为什么没有弹幕开启标志(芒果tv为什么没有4k)

    芒果tv为什么没有弹幕开启标志(芒果tv为什么没有4k)

  • iphone8无线充电功率(iPhone8无线充电速度)

    iphone8无线充电功率(iPhone8无线充电速度)

  • oppo强制恢复出厂还是要密码怎么办(oppo强制恢复出厂忘记锁屏密码)

    oppo强制恢复出厂还是要密码怎么办(oppo强制恢复出厂忘记锁屏密码)

  • 苹果媒体音量和系统音量怎么分开(苹果媒体音量和铃声怎么分开)

    苹果媒体音量和系统音量怎么分开(苹果媒体音量和铃声怎么分开)

  • mg492ch/a是苹果哪个型号(iphone型号mg492ch/a)

    mg492ch/a是苹果哪个型号(iphone型号mg492ch/a)

  • 电脑睡眠后怎么唤醒(电脑休眠后黑屏怎么唤醒)

    电脑睡眠后怎么唤醒(电脑休眠后黑屏怎么唤醒)

  • cpu和显卡的关系(cpu和显卡的关系图)

    cpu和显卡的关系(cpu和显卡的关系图)

  • iphone11pro max支持双卡吗(iphone11promax支持20w快充吗)

    iphone11pro max支持双卡吗(iphone11promax支持20w快充吗)

  • 小红书苹果手机怎么不能下载(小红书苹果手机不能用)

    小红书苹果手机怎么不能下载(小红书苹果手机不能用)

  • 华为免打扰是什么意思(华为免打扰是什么功能)

    华为免打扰是什么意思(华为免打扰是什么功能)

  • iphone11有多大(iphone11有多大屏幕)

    iphone11有多大(iphone11有多大屏幕)

  • 微信文件在手机哪个目录(微信文件在手机储存在什么位置在哪)

    微信文件在手机哪个目录(微信文件在手机储存在什么位置在哪)

  • apple pay是什么意思中文(apple pay是什么意思)

    apple pay是什么意思中文(apple pay是什么意思)

  • oppor17长度和宽度(oppor17pro长度和宽度)

    oppor17长度和宽度(oppor17pro长度和宽度)

  • 苹果xr能无线充电吗(iphone xr能否无线充电)

    苹果xr能无线充电吗(iphone xr能否无线充电)

  • 数字照片怎么弄(标准证件数字照片怎么弄)

    数字照片怎么弄(标准证件数字照片怎么弄)

  • 蓝牙耳机一直不响怎么办(蓝牙耳机一直不亮)

    蓝牙耳机一直不响怎么办(蓝牙耳机一直不亮)

  • 笔记本cpu天梯图(笔记本cpu天梯图苹果)

    笔记本cpu天梯图(笔记本cpu天梯图苹果)

  • 增值税发票管理办法及细则
  • 金蝶财务软件年末结账步骤
  • 私车公用车险是个人名字可报销吗
  • 投资性房地产出售的会计处理
  • 小规模纳税人实收资本
  • 银行对账单用英语怎么说
  • 公司亏损股东退股还要贴钱
  • 所得税弥补以前的利润
  • 公司收到一张专用发票
  • 委托进口增值税如何抵扣
  • 合并报表时抵消内部交易包含的未实现损益的影响有哪些
  • 财政收回项目资金的整改报告
  • 电费发票开据后如何入帐
  • 购买财务软件账务处理规定
  • 营改增之前固定资产可以抵扣吗
  • 营改增之后就没有营业税了吗
  • 公积金多交退回怎么申报个税
  • 卖废品收入没开票怎么办
  • 交到公户上的钱,还没到账可以退回吗?
  • 一张发票上可以开几行
  • 单位购进员工餐食材怎做账务处理?
  • 如何利用流产让男人愧疚
  • 固定资产应怎么做账
  • 发票如何认证及开票
  • skynetave.exe - skynetave是什么进程 有什么用
  • 出口零退税率商品有哪些
  • 如何搭建chatGPT
  • 塞里雅兰瀑布图片高清
  • php请求https
  • 有限责任公司股东对公司债务承担
  • 股权转让有溢价怎么做账
  • 税控抵税
  • 今日清明是清明开始还是结束
  • html怎么设置隐藏元素
  • 云原生是什么
  • densenet网络结构详解
  • php魔术方法autoload
  • sed命令大全
  • 土建工程怎么入账
  • 公司进项不够怎么开发票
  • 哪些增值税发票不可以抵扣
  • 编制利润表计算公式
  • 出口报关单运费可以填0吗
  • 控股公司的收入怎么计算
  • c#获取局域网ip
  • 流动资金与固定资金
  • 完工产品成本计算表怎么填
  • 车船税去哪里交
  • 办公室搬迁工作
  • 提取备用金如何填写现金日记账
  • 什么是增值税的销项税额
  • 衍生工具属于什么科目
  • 产品成本的具体内容
  • 盘盈的固定资产按什么入账
  • 房产公司销售成本怎么算
  • 当期损益包括哪些科目指的
  • iis设置mime
  • solaris版本查询
  • thinkpad8装系统
  • xp创建VPN连接图文教程
  • win8怎么把c盘恢复出厂设置
  • Windowsxp桌面没有图标怎么办
  • lsass.exe是什么病毒
  • win8垃圾清理
  • jquery动态添加
  • Node.js Sequelize如何实现数据库的读写分离
  • android 动态布局
  • css固定在底部
  • nodejs image
  • 怎样用python
  • pythonglobal用法
  • bootstrap入门
  • Javascript字符串长度
  • Android 使用log4j2
  • 广东国家税务局电子税务局官网入口
  • 除了增值税还要什么税种
  • 国税湖南电子税务局官网
  • 从国外网购东西回来要交税吗
  • 无纸化同义词
  • 微信如何查询个人名下所有银行卡
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设