笔记-前端

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

相关推荐
丰锋ff22 分钟前
考研英一学习笔记
笔记·学习·考研
小墨宝23 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED38 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿42 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子43 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
Invinciblenuonuo1 小时前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
美味的大香蕉1 小时前
Spark-SQL与Hive
笔记
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
_Hello_Panda_1 小时前
FX10(CYUSB4014)USB3.2(10Gbps)开发笔记分享(1):硬件设计与开发环境搭建
笔记·fpga开发·fx10·cyusb4014