ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

浏览器问题

2021-11-11 14:03:57  阅读:109  来源: 互联网

标签:浏览器 DOM 渲染 问题 HTML 重排 重绘


  • 输入网址到浏览器渲染页面的过程

在这里插入图片描述

详解浏览器渲染页面过程

1.解析HTML文件,创建DOM树 自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
2.解析CSS 优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式; 特定级:id数100+类或伪类数10+tag名称*1
3.将CSS与DOM合并,构建渲染树(renderingtree) DOM树与HTML一一对应,渲染树会忽略诸如head、display:none的元素
4.布局和绘制,重绘(repaint)和重排(reflow) 重排:若渲染树的一部分更新,且尺寸变化,就会发生重排; 重绘:部分节点需要更新,但不改变其他集合形状。如改变某个元素的颜色,就会发生重绘。 附

标签:浏览器,DOM,渲染,问题,HTML,重排,重绘
来源: https://blog.csdn.net/weixin_43282619/article/details/121266067

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有