笔记-前端

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

相关推荐
小old弟3 分钟前
jQuery写油猴脚本报错eslint:no-undef - '$' is not defined
前端
Paramita3 分钟前
实战:使用Ollama + Node搭建本地AI问答应用
前端
一天睡25小时4 分钟前
前端の骚操作代码合集 (二)| 让你的网页变得有趣
前端·javascript
王林不想说话6 分钟前
Zustand状态管理库
前端·javascript
清风ai明月7 分钟前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
少卿8 分钟前
uniapp run使用指南 - VSCode 开发 Uni-app 项目
前端·vue.js
咪库咪库咪9 分钟前
css进阶:flex
前端
xcsweb10 分钟前
用AI理解前端文件类型
前端
剑亦未配妥11 分钟前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
Enddme11 分钟前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript