前端-游览器渲染原理

这篇具有很好参考价值的文章主要介绍了前端-游览器渲染原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

渲染 render

vue react render

游览器渲染 html字符串 - > 像素信息

游览器是如何渲染页面的?

当游览器的网络线程收到 html文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列
在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程.
整个渲染流程分多个阶段,分别:html解析,样式计算,布局,分层,绘制,分块,光栅化,画每个阶段都有明确的输入输出,上一个阶段的输出会成为下一个阶段的输入.
这样,整个渲染流程就形成了一套组织严密的生产流水线.
渲染的第一步是解析html.
解析过程中遇到css解析css,遇到js执行js.为了提高解析效率,游览器在开始解析前,会启动一个与解析的线程,率先下载html中的外部css文件和外部的js文件
如果主线程解析到link位置,此时外部的css文件还没有下载解析好,主线程不会等待,继续解析后续的html.这是因为下载和解析css的工作是预解析线程中进行的,这就是css不会阻塞html解析的根本原因
如果主线程解析到script位置,会停止解析html,转而等待js文件下载好,并将全局代码解析执行完成后,才能继续解析html.这是因为js代码的执行过程可能会修改当前的dom树,所以dom树的生成必须暂停.这就是js会阻塞html解析的根本原因.

解析html - Parse Html

dom树 通过树形结构关联 Document Object Model
CSS Object Model
document.styleSheets[0].addRule(‘div’,‘color:red’)
启动预解析器 率先下载外部css 帮忙解析css
样式的计算
css属性值得计算过程 层叠 继承
视觉格式化模式 盒模型 包含块 bfc
最终样式-计算后的样式
Computed style 预设值变成绝对值 得到有样式的dom树

布局 - Layout

隐藏的不会出现在布局树里 display:none
前端-游览器渲染原理,前端
::before
内容必须在行盒中
行盒不能和块盒不能相连 匿名行盒 匿名块盒
dom树和布局layout树不一样

分层 -Layer

老的游览器没有
跟堆叠上文有关的属性 z-index opacity,…
滚动条也要分层
.will-change:transform 设置分层css 告诉游览器
主线程会使用一套复杂的策略对整个布局树中进行分层.分层的好处在于,将来某一个层改变后,仅会对该层进行后续处理,从而提升效率.
滚动条,堆叠上下文,transform ,opcity等央视都会或多或少的影响分层结果也可以通过will-change属性更大程度的影响分层结果

绘制 - paint

生成一个绘制指令为每个层

分块 -Tiling

分块会将每一层分为多个小的区域
合成线程也在渲染进程里
主线程将每个图层的回执信息提交给合成线程,剩余工作将由合成线程完成.合成线程首先对每个图层进行分块,将其划分为更多的小区域.他会从线程池中拿取多个线程来完成分块工作,分块完成后进去光栅化阶段

光栅化 -Raster

光栅化将每个块变成位图
优先处理靠近视口的块
此过程会用到gpu加速,以极高的速度完成光栅化.gpu进程会开启多个线程来完成光栅化,并且优先处理靠近市口区域的快,光栅化的结果,就是一块一块的位图
最后就是画了

画 -Darw

quad每一个块相对屏幕在哪
渲染进程 (沙盒)
渲染主线程
合成线程

什么是reflow? 重新布局

本质就是重新计算layout树
当进行了影响布局树的操作后,需要重新计算布局树,会引发layout
为了避免连续的多次操作导致布局树反复计算,游览器会合并这些操作,当js代码全部完成后再进行统一计算.所以属性造成的reflow是异步完成.
也同样因为如此,当js获取布局属性时,就可能造成无法获取到最新的布局信息.
游览器在反复权衡下,最终决定获取属性立即reflow

什么是repaint?

本质就是重新根据分层信息计算了绘制指令.
当改动了课件样式后,就需要重新计算,会引发repaint
由于元素的布局信息也属于可见样式,所以reflow一定会引起repaint

为什么transform 效率高?

不在主线程之上,文章来源地址https://www.toymoban.com/news/detail-834645.html

到了这里,关于前端-游览器渲染原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【经验分享】最新Microsoft Edge Dev游览器游览Flash网页的办法

    工具:Microsoft Edge Dev 系统版本:Windows 10 描述:需要正常游览Flash页面的所有内容,不能有缺少的动画 提示: 本文章是最简单的且直接的,若你的电脑不适合这个游览器,可以看我另外一篇文章。https://www.cnblogs.com/boluo0423/p/17358646.html 若按照教程还是无法完成操作,可以进入

    2024年02月04日
    浏览(44)
  • 【解决方法】正常游览Flash页面,解决主流游览器的不支持问题(如Edge,Firefox)

    工具:360游览器-某特殊版本 系统版本:Windows 10 描述:进入某需要Flash插件的管理网站,使用edge等最新主流游览器均无法调用Flash,网上的其他教程也因为时效性已经无法生效。 提示: 本篇为备用方法,已经发现支持Microsoft Edge Dev的方法,可移步至:https://www.cnblogs.com/bolu

    2023年04月27日
    浏览(48)
  • babel兼容低版本游览器

    npm init 初始化项目,并一路回车 webpack与webpack-cli 安装 执行命令 npm i webpack webpack-cli -D 安装编译模板并配置入口和出口文件 安装编译模板 npm i html-webpack-plugin 项目结构 配置 webpack.config.js 新建入口文件 index.js , 出口文件 build 修改package.json 打包命令 配置 webpack-dev-server 热更新

    2024年02月17日
    浏览(31)
  • 前端开发进阶:前端开发中如何高效渲染大数据量?

    在日常工作中,有时会遇到一次性往页面中插入大量数据的场景,在数栈的离线开发(以下简称离线)产品中,就有类似的场景。本文将通过分享一个实际场景中的前端开发思路,介绍当遇到大量数据时,如何实现高效的数据渲染,以达到提升页面性能和用户体验的目的。

    2024年02月11日
    浏览(43)
  • 【前端】浏览器的渲染流程(完整)

    本文主要包含以下内容: 浏览器渲染整体流程 解析 HTML 样式计算 布局 分层 生成绘制指令 分块 光栅化 绘制 常见面试题 浏览器,作为用户浏览网页最基本的一个入口,我们似乎认为在地址栏输入 URL 后网页自动就出来了。殊不知在用户输入网页地址,敲下回车的那一刻,浏

    2024年02月04日
    浏览(49)
  • 浏览器渲染原理

    当你在地址栏输入内容回车后,浏览器进程中的UI线程会捕捉输入内容,如果访问的是网址,会启动一个网络线程来进行DNS解析;后面连接服务器获取数据;如果输入的不是网址而是,就会使用默认配置的搜索引擎来进行查询 网络进程获取到数据后会使用safeBrowsing检查

    2024年02月07日
    浏览(89)
  • 零基础入门Vue之影分身之术——列表渲染&渲染原理浅析

    从 条件渲染 那一篇,我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊,有时候数据是一大坨一大坨的数据,如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了,Vue提供了另外的指令更好的实现,那便是:列表渲染 简单的列表渲染可以

    2024年02月19日
    浏览(33)
  • 前端开发中如何高效渲染大数据量

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:琉易 liuxianyu.cn   在日常工作中,较少的能遇到一次性往页面中插入大量数据的场景,数栈的离线开发(以下简称离线)

    2024年02月09日
    浏览(55)
  • fastadmin学习08-查询数据渲染到前端

    index.php查询,这个是前台的index.php 模板代码 结果

    2024年04月08日
    浏览(36)
  • 前端性能优化之浏览器渲染优化

    在当今互联网高速发展的时代,用户对于网页加载速度和性能的要求越来越高。作为前端开发者,我们需要关注并致力于提升网页的加载和渲染性能,以提供更好的用户体验。而浏览器渲染优化正是我们实现这个目标的关键。在本文中,我们将探讨一些关于浏览器渲染优化的

    2024年02月11日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包