笔记-前端

URL 输入到渲染的过程

域名解析,找到服务地址

构建 TCP 连接,若有 https,则多一层 TLS 握手,

特殊响应码处理 301 302

解析文档

构建 dom 树和 csscom

生成渲染树:从DOM树的根节点开始遍历每个可见节点,对于每个可见的节点,找到CSSOM树中对应的规则,并应用它们,根据每个可见节点以及其对应的样式,组合生成渲染树

Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的集合信息

Painting(重绘):根据渲染树及其回流得到的集合信息,得到节点的绝对像素。

绘制,在页面上展示,这一步还涉及到绘制层级、GPU相关的知识点

加载js脚本,加载完成解析js脚本

回流(重排)与重绘

回流:浏览器中的页面是采用流式布局来绘制的,从左到右,从上到下,当其中一个节点的空间属性发生了变化,那么就会影响到其他节点的空间布局,需要重新收集节点信息,再进行绘制,而这个过程及回流的过程,页面节点重新调整排列,因此也叫重排。

重绘:我们对页面节点元素的外观做处理的过程,例如修改颜色,背景,阴影等。

回流一定重绘,但重绘不一定回流
触发回流的场景

1.添加或删除可见的DOM元素

2.元素的位置发生变化

3.元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)

4.内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代。

5.页面一开始渲染的时候(这肯定避免不了)

6.浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

获取位置信息,因为需要回流计算最新的值
回流的优化

对树的局部甚至全局重新生成是非常耗性能的,所以要避免频繁触发回流

现代浏览器已经帮我们做了优化,采用队列存储多次的回流操作,然后批量执行,但获取布局信息例外,因为要获取到实时的数值,浏览器就必须要清空队列,立即执行回流。

编码上,避免连续多次修改,可通过合并修改,一次触发

对于大量不同的 dom 修改,可以先将其脱离文档流,比如使用绝对定位,或者 display:none ,在文档流外修改完成后再放回文档里中

通过节流和防抖控制触发频率

css3 硬件加速,transform、opacity、filters,开启后,会新建渲染层

https://segmentfault.com/a/1190000021966814

https://juejin.cn/post/6844904073737535496

相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
Jackyzhe6 小时前
Flink学习笔记:整体架构
笔记·flink
阿芯爱编程7 小时前
2025前端面试题
前端·面试
徒 花7 小时前
初级网安作业笔记1
笔记
kfepiza7 小时前
Debian-10编译安装Mysql-5.7.44 笔记250706
linux·数据库·笔记·mysql·debian·bash
Magnetic_h7 小时前
【iOS】方法与消息底层分析
笔记·学习·macos·ios·objective-c·cocoa
今天背单词了吗9807 小时前
算法学习笔记:19.牛顿迭代法——从原理到实战,涵盖 LeetCode 与考研 408 例题
笔记·学习·算法·牛顿迭代法
前端小趴菜058 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频