当前位置:网站首页>Browser rendering principle and rearrangement and redrawing
Browser rendering principle and rearrangement and redrawing
2022-07-05 16:56:00 【Love to paddle de whale brother ~】
Browser rendering principle
Browser rendering is divided into five stages .
The first stage :HTML analysis --> DOM Trees
Browsers cannot directly understand HTML file , First, analyze it , And in the process of parsing, send various external resource requests for page rendering DOM Trees .
The second stage : CSS analysis --> CSSOM Trees
Similarly, browsers can also directly understand CSS Code , Need to identify and load CSS The code is processed into what you understand CSSOM Trees .
The third stage : Style and structure merge --> Render tree
The browser will DOM Trees and CSSOM Trees are combined to generate rendering trees (:after :before And other pseudo elements will be built to DOM In the tree ).
Render tree features : Contains only the nodes needed to render the web page .
The process of building a rendering tree
- First step : from DOM The root node of the tree starts traversing , Filter out all visible nodes ;
- The second step : Match visible nodes CSSOM Trees ;
The fourth stage : The page layout --> Layout rendering tree
The browser traverses the rendering tree , Write the nested relationship between elements into the document flow box model in the form of box model , And calculate the exact size and location of the elements in the layout process . After the calculation , Write the corresponding information back to the rendering tree to form “ Layout rendering tree ”.
The fifth stage : Page drawing --> Display page
At this stage, the browser finally gets all the information about drawing the page , Convert every node in the rendering tree into visible pixels , Finally, the page will be presented in front of us .
rearrangement
When we modify DOM Width of node 、 High or hidden , The browser needs to recalculate the geometric attributes of nodes , Then the process of plotting the results of the calculation is called rearrangement ( It's also called backflow ).
Browser rearrangement process
Conditions triggering rearrangement
- change DOM Tree structure : The increase or decrease of nodes 、 Mobile, etc
- Get some through " Instant Computing " Get the attribute of the value :offsetWidth、offsetHeight、offsetTop、offsetLeft、 scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight And call getComputedStyle Method , perhaps IE Of currentStyle Method .
Repaint
When we modify DOM The style of ( Does not affect its geometric properties ) when , Browsers need to redraw new styles for elements. The process is called redrawing .
Browser redrawing process
Conditions that trigger redrawing
modify DOM The style of , But without affecting its geometric attributes, redrawing will occur .
Optimize
Rearrangement and redrawing are more performance consuming , So in the development process , We should be Avoid rearrangement and reduce redrawing .
This concludes the article
If you have any other ideas , Welcome to the comment area !
边栏推荐
- Data verification before and after JSON to map -- custom UDF
- [61dctf]fm
- Twig数组合并的写法
- [es6] 模板字符串内添加if判断或添加三元运算符判断
- Benji Banas membership pass holders' second quarter reward activities update list
- Yarn common commands
- Learnopongl notes (II) - Lighting
- Excuse me, is the redis syntax used in DMS based on the commands of the redis community version of the cloud database
- Android 隐私沙盒开发者预览版 3: 隐私安全和个性化体验全都要
- 【729. 我的日程安排表 I】
猜你喜欢
Flet教程之 11 Row组件在水平数组中显示其子项的控件 基础入门(教程含源码)
有序链表集合求交集 方法 总结
Benji Bananas 会员通行证持有人第二季奖励活动更新一览
数据访问 - EntityFramework集成
【机器人坐标系第一讲】
Jarvis OJ 简单网管协议
极坐标扇图使用场景与功能详解
SQL injection of cisp-pte (Application of secondary injection)
深潜Kotlin协程(二十一):Flow 生命周期函数
How does win11 change icons for applications? Win11 method of changing icons for applications
随机推荐
PHP人才招聘系统开发 源代码 招聘网站源码二次开发
浏览器渲染原理以及重排与重绘
齐宣王典故
阈值同态加密在隐私计算中的应用:解读
[echart] resize lodash to realize chart adaptation when window is zoomed
Pspnet | semantic segmentation and scene analysis
【剑指 Offer】61. 扑克牌中的顺子
Flet教程之 12 Stack 重叠组建图文混合 基础入门(教程含源码)
Jarvis OJ 远程登录协议
普洛斯数据中心发布DC Brain系统,科技赋能智慧化运营管理
Jarvis OJ shell traffic analysis
"21 days proficient in typescript-3" - install and build a typescript development environment md
Apple has abandoned navigationview and used navigationstack and navigationsplitview to implement swiftui navigation
ECU introduction
Enter a command with the keyboard
Apple 已弃用 NavigationView,使用 NavigationStack 和 NavigationSplitView 实现 SwiftUI 导航
Data access - entityframework integration
Android privacy sandbox developer preview 3: privacy, security and personalized experience
中国广电正式推出5G服务,中国移动赶紧推出免费服务挽留用户
【 brosser le titre 】 chemise culturelle de l'usine d'oies